Widget - widget Pelengkap Template Mirip Yahoo

• Search Engine 

1. Login ke blogger

2. Masuk ke menu Template. Lalu Edit Html

3. Centang Expand Template Widget

4. Cari kode ]]></b:skin>

5. Pastekan kode berikut di atasnya

.searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikC-hnIfDwGwPMkJ7nfnkcdHgGukruuIAm816PvrJFWtRs0WKHp6gHogt9QNKCDh0rDpHgofAKYkJnudVU74rf5xDwMEup5_zufjHcRiPU-UDdiYQCyB_9E7SvPPFH4XpvrZ2OvvFTlmP_/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/AVvXsEhVcWuyyxS7mYs9eqYpjvmZHm57D5LqhGH8YIdS064uQQYoxm8D4jcLCXR1Oayh3IgOnf78z-nvAzT4joKpW2mzfi6xnurJwTJrb5e8YcSNQnA5jgMxDfhvWPkeZNHswdy_45iB_mmZZ3Gu/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

6. Lalu Simpan Template

7. Langsung menuju ke Tata Letak

8. Add Gadget terserah kalian dimana.

9. Tambahkan kode berikut ini :

<form action='/search' class='searchform' method='get'>
<input name='q' type='hidden' />
<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>

• Slideshow

<div id="gal1" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5p_4pN-joleUgW1VyBTHE6u025ljCC_WdtCxqkoCMMRzYPLun49benJvvwodkaxvYHVEPbtJMOm0GTdKu51xE1ui-yoJn549IJuwTqvBdaHvapt8NmbjDubi9OuTtRRoWQ4U8hLu3D_nq/s1600/lorem+ipsum2.jpg&cat=1&pid=210 7&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Yahoo! Indonesia</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Read the Yahoo! Indonesia</strong></a>
</div>
</div>
</div>
<div id="gal2" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKXAXnav5myABa4vAMg9No93y9Qvf4kIKWB6_WU39m_awiSW1XR3ojJy1_CYy0ZcF3ofh1xXBJs-YEWD9Sd2gjqTNszAerW9tKFZ2GFFTy7MU2mqcbbkwkY0CLsazNm8sKi5arsQxoWFp/s1600/What+is+a+Blog.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>BASIC KNOWLEDGE</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Basic knowledge, what is a Blog ?</strong></a>
</div>
</div>
</div>
<div id="gal3" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3dQeRlhcIZrYIA07e14h4gOy8Xhl1hK-WM5yP0LvX7bKApULF0jeSHmspBsxx2t5Omr6wv3HuSCfzaYZrrrEUZSW23MOArPAnhauxjVu_9Gg_MW4ghFK2dnVYHkiiRBgNptjIXFSlZt4a/s1600/Lionel+Messi.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>SPORT NEWS</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Lionel Messi, the legend of the future football</strong></a>
</div>
</div>
</div>
<div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FQEExWaUcYiaTBgKB9D8X3hfYtQrRN6bwPetar3EXZHOovnrADRk_oCVanjeNiL636vWJzzmnI-Pe1fDGJ4ytJci-qyOIPA-6_ZGSTZoUQLfsMx_0kmfNcXUEwBU-liJFtWcBLZCN-ex/s1600/Font+Style.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>FONT STYLE</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>The Quick Brown Fox</strong></a>
</div>
</div>
</div>
<div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxptQR84lt9wbsjjPiA6Cu9Fn7qRLFbp2nvWsvrPBc-CTmHH_Lx4myGzFpCC1nug0AIKqy2TSc6LJNhqwWVBYipVhUj8ZT96JdI0Dg5z-TONOypupwzzywakavv__ps_wUKhCbqRLb15h/s1600/Google+Office.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>MAKE MONEY</strong></div>
<div class="des_1 font16 c_white"><a href="http://tutorial-blogz.blogspot.com"><strong>Monetize your site with Google Affiliate Network</strong></a>
</div>
</div>
</div>
<div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div class="clearit"></div>
<div class="clearit pb_10"></div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false); myheads.setselectedClassTarget("link");myheads.ini t(5000)
</script>

Keterangan:
Contoh kode yang berawalan dengan  src=" setelah kode tersebut adalah kode gambar atau foto dan ubahlah kode tersebut dengan foto atau gambar yang anda inginkan. contoh kode gambar dibawah ini;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5p_4pN-joleUgW1VyBTHE6u025ljCC_WdtCxqkoCMMRzYPLun49benJvvwodkaxvYHVEPbtJMOm0GTdKu51xE1ui-yoJn549IJuwTqvBdaHvapt8NmbjDubi9OuTtRRoWQ4U8hLu3D_nq/s1600/lorem+ipsum2.jpg
Setelah kode href=" ganti dengan link sobat sendiri. contoh link dibawah ini ganti dengan link sobat sendiri
http://tutorial-blogz.blogspot.com

ganti # dengan Link

•   Menu Blog

<div id='sidebarnavigation'>
<ul>
<li class='about'><a href="#"/>About Us</a></li>
<li class='contact'><a href="#"/>Contact Us</a></li>
<li class='facebook'><a href="#" target="_blank"/> Facebook</a></li>
<li class='twitter'><a href="#" target="_blank"/> Twitter</a></li>
<li class='email'><a href="#" target="_blank"/> Email</a></li>
<li class='video'><a href="#" target="_blank"/> Video</a></li>
<li class='music'><a href="#" target="_blank"/> Music</a></li>
<li class='download'><a href="#" target="_blank"/> Download</a></li>
<li class='data'><a href="#" target="_blank"/> Data</a></li>
<li class='rss'><a href="#" target="_blank"/> RSS Feed</a></li>
<li><a href='#'>Archieves</a></li>
</ul>
</div>
<div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'>
<a href='http://tutorial-blogz.blogspot.com'>More CATEGORIES »</a>
</div

Keterangan: ganti # dengan Link

• Favorit Saya

<div id='sidebarnavigation'>
<ul>
<li class='msn'><a href="#"/>Msn</a></li>
<li class='yahoo'><a href="#"/>Yahoo</a></li>
<li class='blogger'><a href="#" target="_blank"/> Blogger</a></li>
<li class='gmail'><a href="#" target="_blank"/> Gmail</a></li>
<li class='bing'><a href="#" target="_blank"/> Bing</a></li>
</ul>
</div>
<div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'>
<a href='http://tutorial-blogz.blogspot.com'>More FAVORIT »</a>
</div>  

Keterangan: ganti # dengan Link anda.


Keterangan : Berikut cara untuk menambahkan widgetnya :
- Login ke Blogger
- Pilih Layout
- Klik Add a Gadget
- Pilih HTML/JavaScript
- Masukkan kode widgetnya
- Save.