Bagian-Bagian Pada Template Minimal

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.

Menambah Dua Kolom Di Atas/Di bawah Body

Mengotak-atik template blogspot adalah hal yang paling menyenangkan apalagi kalau kita berhasil mengotak-atik template blogspot sehingga menjadi bagus dan menarik, pasti lebih senang lagi. Nah kembali ke topik yaitu "Menambah dua kolom dibawah/diatas post body", pengertian post body sendiri yaitu area di blog Anda untuk postingan Anda. Coba perhatikan gambar dibawah ini muncul dua kolom baru dibawah post blog.

Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya (baca disni untuk gadget/widget blog). Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda? coba ikuti langkah dibawah ini.. Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML Taruh Code CSS dibawah ini diatas Code ]]></b:skin> /*Under Post -----------------------------*/ #underpost h2{ font-size:13px; font-weight:bold; color:#B8002E; border-bottom:2px solid #000000; padding-left:5px; } #underpost{ width:530px; } #underleft{ width:257px; /*lebar kolom kiri*/ float:left; margin:4px; } #underright{ width:250px; /*lebar kolom kanan*/ float:right; margin:4px; } Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini #main-wrapper { width: 410px; Nah ukuranya adalah yang tercetak tebal diatas. Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan (baca disni untuk tutorial padding dan marginya).

Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas. Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau <div id='underpost'> <b:section class='underleft' id='underleft'/> <b:section class='underright' id='underright'/> </div> Sehingga kurang lebih codenya menjadi seperti Dua kolom dibawah post body <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> <div id='underpost'> <b:section class='underleft' id='underleft'/> <b:section class='underright' id='underright'/> </div> </div> Dua kolom diatas post body <div id='main-wrapper'> <div id='underpost'> <b:section class='underleft' id='underleft'/> <b:section class='underright' id='underright'/>

</div> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> Nah jika semuanya sudah beres tinggal SAVE. Coba lihat di area page element muncul dua kolom dibawah/diatas post body. Code-codenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda. Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.

Membuat Header Penuh Dengan Body

Satu lagi nih tutorial desain atau otak-atik template blogspot yaitu mengubah ukuran header yang biasanya penuh dengan outer wrapper kini saya coba akan buat tutorial sederhana biar header blog bisa penuh dengan body. Nah coba lihat perbedaan header blog ini, atau bisa kamu lihat Capture dibawah ini..

Dari capture diatas terlihat Header Blog memanjang memenuhi area body blog dan Header tidak satu area dengan post body dan sidebar. Gimana dari keterangan diatas apakah Anda ingin mengubah header blog Anda menjadi penuh dengan body?

Oke langsung saja ke tutorial cara membuat header blog penuh dengan body blog Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML Lalu cari code dibawah ini <body> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div> Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah <body> <div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span>

Kalau langkah pertama sudah selesai sekarang atur juga CSSnya Cari code CSS dibawah ini #header-wrapper { width:880px; height:100px;

margin-bottom:2px; padding-bottom:15px; background:#FFFFFF; border:1px solid #E0E0E0; Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan. Nah selesai deh kemudian save. HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil. dan jika anda ingin tampilan header seperti blog yang ini (klik disini untuk melihat). Gunakan Css seperti dibawah ini
#header-wrapper { width:100%; height:120px; margin:0 auto 0; border-top:2px solid #000000; background:url(http://i296.photobucket.com/albums/mm169/anasku/headerback.jpg) repeat-x; }

Recent Post Dengan Tumbnail

Hai sobat, gimana kabarnya nih ?, semoga dalam keadaan sehat. Nah kali ini saya mencoba menulis lagi tentang widget pada blogspot, tak lain adalah widget recent post yang sebelumnya sudah pernah saya tulis di blog ini dengan berbagai versi. Namun kali ini sedikit agak berbeda dengan bentuk widget ini dengan adanya tambahan gambar thumbnail yang ada di postingan, dengan tujuan agar pembaca blog kita tertarik dengan postingan yang kita suguhkan setelah melihat thumbnail gambar yang mungkin unik, lucu, mempesona dsb.

Widget ini cocok bagi Anda yang mempunyai blog bernuansa gallery, misalnya gallery template, foto, desain dan sebagainya. Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini . Pada menu Dashboard klik menu "Design - > Page Elements" Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript" Dan taruh script dibawah ini kedalamnya. <script language="JavaScript"> imgr = new Array();

imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif"; imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif"; imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif"; imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif"; imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif"; showRandomImg = true; boxwidth = 230; cellspacing = 8; borderColor = "#ffffff"; bgTD = "transparent"; thumbwidth = 40; thumbheight = 40; fntsize = 12; acolor = "#666"; aBold = true;

icon = " "; text = "comments"; showPostDate = false; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://sangmerak.blogspot.com/"; </script> <script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script> Keterangan : boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda. Ganti URL "http://sangmerak.blogspot.com/" dengan alamat blog Anda. Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas. Nah kalau sudah tinggal SAVE.

Membuat Tepi Gambar Berbayang Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3. Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3. Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML" lalu cari code CSS dibawah ini .post img { ----} Note : 1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template 2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container { Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini .post img { background:#FFFFFF; border:1px solid $bordercolor; padding: 7px; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); } Nah yang diganti adalah code CSS yang berwarna hijau saja. kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome