Menambah Kolom Diatas dan Dibawah Postingan Blogger

Kali ini saya akan memberikan tutorial tentang membuat dua kolom baru diatas dan dibawah postingan.
Coba perhatikan gambar disamping 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.
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. 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. Kode-kodenya 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.

Sekian dulu jika ada pertanyaan silahkan isi dikomentar saja. semoga bermanfaat bagi Anda semua.

 

sumber : Creating Website (www.maskolis.com)

Bikin Kotak Pencarian / Search mirip Yahoo!

Kali ini akan sedikit berbagi info mengenai Membuat Menu Search Seperti Yahoo! Dengan kita membuat kotak pencarian atau search diblog maka kita sedikit membantu perkejaan orang dalam melakukan pencarian artikel diblog kita. Untuk demo bisa dilihat pada blog saya ini ya untuk tampilannya seperti apanya.

Untuk menerapkan diblog anda berikut adalah tutorialnya.  tutorial ini saya peroleh dari sahabat blogger saya yaitu caragampang.com.

• Loggin blog
• Template --> Edit HTML --> Lanjutkan
• Backup terlebih dahulu template anda
• Cari kode ]]></b:skin>
• Letakkan kode berikut ini sebelum kode ]]></b:skin>

searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIL_Ab1BUB23FU1gu8v2z0h42j4-ij7G_u5eihLkhaj67yJZOgh49BXioU6__r6QDELsOKd-soWVIgWozIurM6lDGox98cm-SplBUuR_7j2Z-ba3sP1AdjxGVAsBCjvZjcCgd_KJFzz2s3/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.searchform .searchbutton {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixJa-B6U3qFfWU3pgoIlPaCrNv8cxVsSWW1-h4Opqx3eu_2wJvY1S30uTA5zFVfgMPopfhsxMHXKQSaovGGX93q8YZzHT8N-mIhfQiAMb1xDKw6Lghi-oEbZX6l1OhpXjPAJqGTKXkweKi/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

• Simpan

Belum seleai sampai disitu. Untuk meletakkan kodenya seterh anda ingin diletakkan dimananya. Kali saya berikan pada tab elemen saja.

•  Setelah login
• Tata Letak --> Tambah Gadget
• Pilih HTML/Java cript
• Masukkan kode dibawah ini

<br/><center><form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form></center>

• Simpan