MEMAHAMI BAGIAN TEMPLATE DASAR BLOGGER BAGIAN 5

Pada kesempatan kali ini kita akan membahas Bagian Template Blogger Standar 5, postingan ini merupakan lanjutan dari postingan sebelumnya yaitu bagian template blogger standar 4. Jika Anda belum membaca postingan sebelumnya, terlebih dahulu saya himbau kepada Anda agar membacanya terlebih dahulu agar pemahaman mengenai struktur template blogger ini dapat Anda pahami secara menyeluruh. Adapun postingan sebelumnya yang pernah saya bahas dalam pembelajaran mengenai bagian template blogger ini diantaranya yaitu :

1. Bagian Template Blogger Standar 1
2. Bagian Template Blogger Standar 2 
3. Bagian Template Blogger Standar 3 dan
4. Bagian Template Blogger Standar 4

Jika Anda sudah membaca postingan sebelumnya, saya rasa Anda sudah banyak tau dengan bagian kode-kode CSS yang  membentuk template blogger. Nah, untuk itu, pada postingan ini kita akan membahas comment block, yaitu bagian kotak komentar template blogger, untuk lebih jelasnya dapat Anda lihat gambar dibawah ini :

Sebelumnya saya mohon maaf karena gambarnya sedikit buram, karena sizenya sudah saya kecilkan. Kita lanjut pada pembahasan, bagian atau seluruh area kotak komentar dapat disebut juga comments block. Sebagaimana kita lihat pada gambar, untuk keterangannya berdasarkan nomor urut dapat  Anda baca dibawah ini :

1. Comments h4
2. Comments-author
3. Comments-footer
4. Comments-body
5. Comments h4

Adapun kode CSS yang membentuk kotak komentar blogger ini, dapat anda lihat keterangannya dibawah ini:

/* Comments
----------------------------------------------- */

Line seperti diatas adalah batas dan petunjuk awal mula kode CSS Comments terbentuk.

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

Fungsi dari kode diatas yaitu membentuk dan dapat merubah tampilan judul bagian komentar.

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}

Fungsi kode diatas adalah merubah tampilan bagian komentar.

#comments-block .comment-author {
margin:.5em 0;
}

Fungsi kode diatas yaitu merubah tampilan link author atau link komentator.

#comments-block .comment-body {
margin:.25em 0 0;
}

Fungs kode diatas adalah merubah tampilan isi komentar.

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

Fungsi kode diatas yaitu merubah tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.

.deleted-comment {
font-style:italic;
color:gray;
}

Fungsi dari kode diatas adalah merubah tampilan komentar yang telah dihapus.

.feed-links {
clear: both;
line-height: 2.5em;
}

Fungsi dari kode diatas yaitu untuk merubah tampilan link feed.

Terlepas dari comments blog sedikit saya jelaskan kode-kode yang membentuk sidebar blog, seperti yang diterangkan dibawah ini :

/* Sidebar Content
----------------------------------------------- */

Seperti comments, line diatas merupakan batas dan atau awal mula kode CSS untuk sidebar terbentuk.

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Adapun fungsi kode diatas adalah merubah tampilan sidebar secara keseluruhan.

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

Fungsi kode datas yaitu untuk merubah tampilan daftar pada sidebar.

.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Fungsi kode diatas adalah untuk merubah tampilan definisi daftar dari tag <ul>.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Dan yang terakhir, fungsi kode diatas yaitu untuk merubah tampilan widget.

Saya rasa cukup sekian penjelasan dari saya, dan untuk selanjutnya kita akan membahas bagian template blogger standar 6 yang merupakan postingan terakhir untuk mengenal bagian-bagian template blogger beserta kode-kode yang membentuk bagian tersebut. Semoga bermanfaat, Happy Blogging, salam sukses 

MEMAHAMI BAGIAN TEMPLATE DASAR BLOGGER BAGIAN 4

Kembali lagi kita mempelajari bagian template blogger, pada kesempatan ini kita akan membahasBagian Tempate Blogger Standar 4. Postingan ini meruakan lanjutan dari pembelajaran kita sebelumnya yang pernah saya posting. Agar membentuk pembelajaran yang berkesinambungan terlebih dahulu ajak kepada sahabat-sahabat blogger sekalian untuk membaca postingan sebelumnya, agar tidak salah dalam pemahaman. Adapun postingan yang berkaitan dengan postingan ini diantaranya adalah :

1. Bagian Template Blogger Standar 1
2. Bagian Template Blogger Standar 2 dan
3. Bagian Template Blogger Standar 3

Jika Anda sudah membaca postingan sebelumnya, tentu Anda sudah paham tentang bagian template blogger ini, dan sedikit membantu saya dalam mempermudah menjelaskan untuk postingan kali ini, Nah, jika demikian pada postingan ini saya akan membahas kode CSS yang berada di bagian post, yaitu bagian dimana didalamnya terdapat judul postingan dan kontent beserta tanggal postingan dan lain-lain. Seperti yang bisa Anda lihat pada gambar dibawah ini :

Bagian Post Template Blogger

Untuk struktur kode yang membentuk halaman post, dapat Anda baca sepert penjelasn dibawah ini :

/* Posts
-----------------------------------------------
*/

Kode CSS dalam membentuk bagian post ditandai atau dimulai dari list dan/atau batas ini.

h2.date-header {
margin:1.5em 0 .5em;
}

Adapun fungsi dari kode diatas adalah untuk membentuk atau merubah tampilan tanggal artikel blog.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Fungsi kode ini yaitu untuk membentuk atau merubah tampilan post atau artikel blog.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Fungsi kode CSS ini adalah unutk merubah tampilan judul artikel blog.

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

Fungsi kode diatas yaitu untuk merubah tampilan link

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

Sedangkan kode CSS diatas berfungsi untuk membentuk atau merubah tampilan bagian postingan

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Fungsi dari kode ini adalah membentuk atau merubah tampilan footer atau catatan kaki postingan blog.

.comment-link {
margin-$startSide:.6em;
}

Dan fungsi dari kode diatas adalah untuk merubah tampilan link komentar.

.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}

Fungsi kode diatas yaitu untuk merubah tampilan gambar pada postingan.

Cukup sekian dulu penjelasan dari saya, semoga dapat dipahami dan bermanfaat, dan akan kita lanjut pembahasan mengenai bagian template blogger ini ke step berikutnya yaitu bagian template blogger standar 5, yag akan membahas kode CSS yang membentuk post comment, atau bagian komentar blog.

MEMAHAMI BAGIAN TEMPLATE DASAR BLOGGER BAGIAN 3

Bagian Template Blogger Standar 3 ini merupakan lanjutan dari pembelajaran kita yang telah lalu yaitu bagian template blogger standar 2. Jika Anda belum membacanya, saya anjurkan kepada Anda untuk membacanya terlebih dahulu. Pada kesempatan kali ini kode css yang akan kita bahas yaitubagian template blogger header, outer-wrapper, main-wrapper dan sidebar-wrapper agar memudahkan Anda untuk memahami bagian tersebut silahkan Anda melihat gambar layout template blogger

Untuk mempersingkat waktu, langsung saja kita simak penjelasan mengenai bagian template bloggerstandar 3 dibawah ini :

/* Header

-----------------------------------------------

*/

Line diatas merupakan awal mula kode CSS untuk bagian header.

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Header ini terdapat pada bagian atas template yang berfungsi sebagai informasi suatu blog yang dibaca oleh pengunjung blog, diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan image/gambar.

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Kode CSS ini berfungsi mengubah tampilan header bagian dalam.

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

fungsi dari kode diatas yaitu untuk mengubah tampilan judul blog dan deskripsi blog secara keseluruhan, Anda bisa saja mengganti margin, border dan color sesuai dengan keinginan dan kebutuhan blog Anda.

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Kode CSS ini memliki fungsi merubah tampilan judul dan deskripsi blog tingkat 1.

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

Kode ini berfungsi untuk merubah tampilan link yang terdapat pada header.

#header a:hover {

color:$pagetitlecolor;

}

Mengubah tampilan link pada header jika pointer mouse berada di atas link.

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Mengubah tampilan gambar header

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Bagian ini adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini

#main-wrapper {

width: 410px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;

}

Main-Wrapper sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog

#sidebar-wrapper {

width: 220px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget.

Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget  facebook like box yang tempatnya disamping posting area/main wrapper.

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

Kode CSS ini berfungsi untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar.

Agar tidak mempersulit Anda dalam pemahaman kode CSS bagian template blogger ini, saya sudahi dulu penjelasannya, dan akan saya lanjuti pada potingan berikutnya yaitu bagian template blogger standar 4. Happy Blogging...

Memahami Bagian Template Dasar Blogger Bagian 2

Bagian Template Blogger Standar 2 ini merupakan lanjutan dari postingan sebelumnya yang membahas bagian template blogger standar 1. Namun jika sebelumnya saya menjelaskan layout template blogger, pada kesempatan kali ini saya akan menjelaskan kode css didalamnya. Sebagaimana telah dijelaskan, bahwa didalam bagian template blogger itu terdiri dari komponen kode-kode, diantara kode-kode tersebut adalah berupa css, html dan javascript yang memiliki tautan atau kaitan antara satu dengan yang lainnya.

Pada kesempatan kali ini, saya akan mencoba menjelaskan sedikit mengenai kode-kode dalam bagian template blogger tersebut khususnya kode css-nya. Umumnya kode css dalam template blogger itu terdiri dari spesifikasi kode yang berbentuk jenis huruf, ukuran (size), warna yang digunakan, dan sebagainya. Nah, jika kode-kode ini ditautkan dengan kode yang lainnya maka akan  membentuk realitasnya.

Dalam upaya pengeditan template, hal yang paling dasar yang harus kita kenali adalah kode-kode ini, serta struktur dan tata letaknya. Standar atau pada umumnya, kode css ini berada di atas template blogger yang ditandai setelah kode <b:skin><![CDATA[/ hingga berakhir pada kode ]]></b:skin>. Sedangkan kode javascript pada umumnya ditandai oleh awalan kode <scrip ...> dan kode HTML biasanya ditandai oleh fungi-fungsi yang berawalan < b:if >, <div> dan sebagainya. Untuk para master web desainer, jika kebetulan membaca postingan ini, saya juga minta bantuan apabila terjadi kesalahan dalam penjelasan, karena saya bukanlah seorang webdesain, melainkan seorang accounting, dan juga masih dalam pembelajaran mengenai kode-kode ini.

Sekarang mungkin sudah ada pencerahan atau sedikit gambaran kepada kita tentang kode-kode yang telah saya jelaskan diatas. Agar tidak memperluas atau lari dari tema bagian template blogger ini khususnya pada kode CSS nya dan agar lebih paham, yuk mari kita simak struktur kode css dalam template blogger dan penjelasannya.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Kode diatas merupakan deklarasi file XHTML pada template blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table.

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk meta tag keyword dan meta tag yang lainnya.

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

Body merupakan bagian paling dasar dari bagian-bagian template lainya (lihat gambar bagian template blogger standar 1), body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

a:link {

color:$linkcolor;

text-decoration:none;

}

Kode ini berfungsi untuk merubah tampilan link yang digunakan pada template blog Anda, dengan realitas warna dan text nya.

a:visited {

color:$visitedlinkcolor;

text-decoration:none;

}

Fungsi kode ini untuk mengubah tampilan link saat dikunjungi.

a:hover {

color:$titlecolor;

text-decoration:underline;

}

Fungsi dari kode ini adalah untuk merubah tampilan link jika pointer mouse berada di atas link. Untuk lebih jelasnya silahkan Anda coba untuk mengarahkan pointer atau coursor moust Anda disalah satu link pada blog ini yang berada di footer blog.

a img {

border-width:0;

}

Fungsi dari kode ini yaitu untuk merubah tampilan link bergambar

Agar Anda lebih mudah memahami isi dari kode bagian template blogger ini, penjelasannya saya sudahi sampai disini dulu dan akan berlanjut pada postingan berikutnya yaitu bagian template blogger standar 3. Hal ini saya lakukan agar Anda lebih mudah mengerti.