Media Memahami Perkantoran dan Media Telekomunikasi

Follow Me On Instagram

Bagian-bagian Template Blogger

Template merupakan bagian yang paling penting dalam sebuah blog. Jika blog yang kita kelola tidak memiliki template mungkin blog kita tidak berbentuk atau bahkan hancur. Bagi para bloger pemula mungkin kesulitan dalam mengelola template blog yang dianggap rumit.

Maka dari itu saya akan berbagi pengalaman tentang mengenali bagian-bagian template blog. Mengelola template blog adalah hal yang mudah jika kita tau bagian-bagiannya. Di bawah ini akan kita bahas tentang bagian-bagian template Blogger.







Bagian-bagian template Blogger 

body
outer-wrapper
header-wrapper
main-wrapper
sidebar-wrapper
footer

Bagian-bagian diatas merupakan penyusun pokok dalam sebuah template blog.

body merupakan tempat dimana seluruh bagian template blog diletakkan
outer-wrapper merupakan tempat dimana header, sidebar, main dan footer berada
header-wrapper merupakan pintu masuknya mesin pencari ke dalam blog kita. Karena di dalam Header terdapat judul yang mewakili blog kita
main-wrapper merupakan tempat postingan atau artikel blog kita ditampilkan atau dipublikasikan
sidebar-wrapper merupakan tempat aksesoris blog kita atau istilahnya “Widget” dan terletak di bagian samping blog
footer merupakan tempat untuk menuliskan informasi blog seperti informasi pendesain template, nama template, hak cipta, dll.

Nah, gimana? Udah ngerti belum? Kalo belum ngerti bisa Tanya ke mbah google atau ke orang yang lebih tau. Eh, ditunggu ya komentar dari para pengunjung. Jangan menyerah dalam belajar dan tetap Blogging………..

Bagian-bagian Template Blogger Part 5

Apa kabar Sahabat blogger????? Tidak terasa bagian-bagian template Blogger sudah mencapai tahap akhir nih. 

Pada awalnya saya cukup pesimis dan tidak yakin bisa menyelesaikan pembahasan ini. Tetapi karena begitu banyaknya antusias dan dukungan dari para sahabat, maka pembahasan pun menjadi menyenangkan. Terima kasih atas dukungan Anda semua.

Sekarang kita akan membahas bagian terakhir dalam template Blogger. Sebelum melangkah lebih jauh, sebaiknya Anda sudah tahu struktur dari dokumen HTML. Setelah itu, baca dahulu


Okeh lah kalau begitu… Mari kita simak bagian-bagian template blogger berikut ini

/* Footer
----------------------------------------------- */
Bagian footer berawal di sini


#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.


]]></b:skin>
Ini merupakan akhir dari css yang ada pada template blogger. Setelah kode ini, Anda bisa menyisipkan javascript dari autoreadmore, artikel terkait, dll. Setelah kode ini, bagian-bagian selanjutnya berisi kode HTML.


</head>
Ini merupakan tag penutup dari head pada dokumen HTML


<body>
Bagian body berawal pada tag ini
<div id='outer-wrapper'><div id='wrap2'>
Ini merupakan kode HTML dari outer-wrapper yang bisa diatur tampilannya dengan CSS


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogwalking list (Header)' type='Header'/>
</b:section>
</div>
Bagian ini merupakan header-wrapper yang bias kita ubah tampilannya dengan CSS


<div id='content-wrapper'>
Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Widget blog terletak di sini

</b:section>
</div>
Ini merupakan kode HTML dari main-wrapper yang bisa kita ubah tampilannya dengan CSS.


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Widget blog pada sidebar terletak di sini

</b:section>
</div>
Ini merupakan kode HTML dari sidebar-wrapper yang bisa kita ubah tampilannya dengan CSS.


<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
Ini mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.


</div> <!-- end content-wrapper -->
Ini merupakan akhir dari content-wrapper


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ini merupakan kode HTML dari footer yang bisa kita ubah tampilannya dengan CSS


</div></div> <!-- end outer-wrapper -->
Ini merupakan tag penutup dari outer-wrapper


</body>
Ini merupakan tag penutup dari body pada dokumen HTML


</html>
Ini merupakan tag penutup dari dokumen HTML


Mungkin pembahasan akan lebih panjang jika kita membahas template dengan tanda centang pada 'expand widget template'. 


Maka dari itu, script dari template di atas tidak dengan tanda centang pada 'expand widget template' sehingga terlihat simple.

Bagian-bagian Template Blogger Part 4

Bagian-bagian Template Blogger Part 4

Setelah kita mengupas tuntas bagian Post pada bagian-bagian template Blogger part 3, sekarang kita akan membahas bagian Comment dan Sidebar Content.

Sebelumnya, baca terlebih dahulu


Setelah membaca dari part 1, silakan simak bagian-bagian template Blogger part 4 berikut ini


/* Comments
----------------------------------------------- */
Bagian Comments dimulai dari sini


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


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


#comments-block .comment-author {
margin:.5em 0;
}
Mengubah tampilan link author atau link komentator


#comments-block .comment-body {
margin:.25em 0 0;
}
Mengubah tampilan isi komentar


#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
Mengubah tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.


.deleted-comment {
font-style:italic;
color:gray;
}
Mengubah tampilan komentar yang telah dihapus


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


/* Sidebar Content
----------------------------------------------- */
Sidebar dimulai dari sini


.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
Mengubah tampilan sidebar secara keseluruhan


.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
Mengubah 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;
}
Mengubah 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;
}
Mengubah tampilan widget

Bagian-bagian template Blogger berlanjut pada part 5. Mudah-mudahan artikel di atas bermanfaat. Amin…
Bagian-bagian Template Blogger Part 3

Bagian-bagian Template Blogger Part 3

Tidak terasa bagian-bagian template Blogger sudah sampai pada part 3. Blog saya jadi seperti komik nih, hehehehe… Saya harap Anda tidak bosan dengan artikel berseri di blog saya. Abis, mau gimana lagi. Kalau dijadikan satu artikel pasti terlalu panjang…hehehehehehe

Sebelum melanjutkan pada part 3, baca dulu yang ini

Kali ini kita akan membahas bagian Post pada template minima. Mari kita simak bagian-bagian template Blogger part 3 berikut ini


/* Posts
-----------------------------------------------
*/
Bagian Post dimulai dari sini


h2.date-header {
margin:1.5em 0 .5em;
}
Mengubah tampilan tanggal artikel blog


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Mengubah 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;
}
Mengubah tampilan judul artikel blog


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


.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
Mengubah tampilan bagian postingan


.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Mengubah tampilan footer atau catatan kaki postingan blog


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


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


Sekian dulu Sob, kita lanjutkan pada Bagian-bagian Template Blogger Part 4

Mudah-mudahan bermanfaat
Bagian-bagian Template Blogger part 2

Bagian-bagian Template Blogger part 2

Pada episode kali ini, kita akan membahas bagian header, outer-wrapper, main-wrapper dan sidebar-wrapper. Untuk mempersingkat postingan dan ngga usah panjang lebar dikali tinggi, langsung saja ke tempat kejadian perkara…hehehehehehe…


/* Header
-----------------------------------------------
*/
Header berawal di sini


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
Kode CSS ini mengubah tampilan header bagian dalam


#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan


#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Mengubah tampilan judul dan deskripsi blog tingkat 1


#header a {
color:$pagetitlecolor;
text-decoration:none;
}
Mengubah 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; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
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; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
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 alexa rank 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 mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll


Sampai di sini dulu ya Sob...

Saya harap Sobat tidak bosan berkunjung ke blog saya. Terima kasih untuk Sobat yang sudah berkunjung, berkomentar dan membaca artikel di blog saya.Ditunggu lanjutannya yaaaa….

Seperti biasanya, bagian-bagian template Blogger akan dilanjutkan pada Bagian-bagian Template Blogger Part 3 .
Back To Top