Bagian-bagian Pada Template Minima

Taukah Anda tentang bagian-bagian dasar pada layout atau template blogger? terutama pada template default blogger yaitu minima template. Terutama bagi Anda para blogger pemula pasti kebingungan untuk mengetahui nama bagian dan kegunaanya pada layout blogger (ya maklum dong mas namanya baru pemula), nah maka dari itu Saya kan membagi sedikit pengetahuan Saya kepada Anda bagi yang belum tau dasar-dasar layout.

Lihat gambar dibawah ini yang merupakan capture dari layout minima untuk memperjelasnya




Nah terlihat pada gambar diatas adalah capture dari template dasar blogger yang belum termodifikasi, terlihat pada gambar diatas terdapat bagian bagianya yaitu header, main wrapper sidebar dan footer.

Untuk lebih jelasnya mengenai bagian-bagian layout template baca dibawah ini.




Nah dari gambar diatas keteranganya dibawah ini :

Susunan bagian template blogger seperti dibawah ini

BODY→ OUTER WRAPPER → (HEADER + MAIN WRAPPER + SIDEBAR + FOOTER)

BODY : Adalah bagian paling dasar dari bagian-bagian lainya, body pada blog biasanya memenuhi halaman dari browser Anda baru setelah itu tersusun bagian-bagian lainya.

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

HEADER : Header ini tempatnya pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog.

MAIN WRAPPER : Sering disebut juga Posting area karena pada main wrapper adalah area postingan pada suatu Blog.

SIDEBAR : Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget misalnya gadget yang telah disediakan oleh pihak blogger maupun luar blogger yang tempatnya disamping posting area/main wrapper.

FOOTER : 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.

Nah sedikit pengetahuan Saya mengenai Layout semoga bermanfaat bagi Anda pembaca blog ini dan untuk blogger pemula yang belum tau bagian-bagian layout.

Sekian semoga artikel ini sedikit membantu Anda.
Emoticon Smiley Untuk komentar Blogspot

Emoticon Smiley Untuk komentar Blogspot

Semenjak Blogger membuat sistem kotak komentarnya "Embedded Comments form" Atau kotak komentar langsung dibawah komentar populasi para komentator semakin meningkat, tidak seperti dulu jika ingin menulis komentar harus mengklik link post comments yang akan membuka jendela baru atau jendela pop-up. Dulu jika ingin membuat kotak komentar dibawah postingan harus pakai jasa pihak ke-3 misalnya haloscan, tetapi yang menggunakan jasa haloscan berbondong-bondong memindah kotak komentarnya menjadi default blogger lagi karena blogger sudah membuka sistem "embedded comments form".

Nah semakin meningkatknya para komentator di blogger maka semakin meningkat pula keinginan para blogger untuk mengubah tampilan area komentar dan menambah pernak-pernik lainya, maka dari itu saya juga ingin membuat pernak-pernik komentar blogger dengan smiley yang memungkinkan sang komentator bisa mengexpresikan ucapanya dengan sebuah gambar emoticon atau smiley.

"Ilmu tak akan bermanfaat jika tidak dibagi-bagikan", Nah ucap-ucapan itulah yang membuat saya selalu ingin berbagi, sebelum saya membuat tutorialnya terlebih dahulu saya akan memberikan informasinya, ehh sampai lupa menawarkan tutorial yang satu lagi yaitu tampilan komentar pemilik blog berbeda (baca disini). Gambar emticonya cukup sederhana bisa dilihat dibawah ini

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))
Gambarnya seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Nah jika Anda berminat membuatnya ikuti langkah-langkah dibawah ini

Pertama-tama masuk blogger dan masuk menu Layout kemudian masuk menu Edit HTML

Jangan lupa centang "Expand Widget Templates"

Taruh Script dibawah ini diatas code </body>

<script src='http://sites.google.com/site/anasceria/smiley.js' type='text/javascript'/>

Kalau sudah cari code HTML seperti dibawah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Kemudian sisipkan code HTML dibawah ini diantara code yang berwarna biru dan hijau diatas tadi atau lebih tepatnya dibawah code <p class='comment-footer'>



<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>

Nah kalau sudah SAVE pengaturanya.

Coba kamu cek di kotak komentar kamu! kalau tidak bisa (baca disini) untuk panduan tampilan kotak komentar owner blog berbeda dengan pengunjung blog.

Sekian semoga bermanfaat!
tunggu trik-tips selanjutnya key..! happy blogging with me
Cara Mudah Posting Code HTML

Cara Mudah Posting Code HTML

Pasti Anda bingung pada waktu posting Code HTML di blog Anda, pasti yang muncul bukan codenya melainkan hasil dari code HTML-nya, nah untuk yang ingin menulis tentang tutorial blog pasti code HTML banyak diposting, Nah untuk para penulis yang belum tau caranya posting code HTML nih saya kasih caranya.

Caranya cukup mudah, Encode saja code HTML di situs dibawah ini

Nah caranya cukup mudah tinggal taruh code HTML yang ingin di posting lalu klik tombol "Encode", Nah hasil dari Encode itu yang Anda posting di Blog Anda.

Sekian Artikel yang cukup pendek ini semoga dapat membantu Anda!
Langganan: Postingan (Atom)