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/AVvXsEhNLk983CxSCP5TQ1rtIDWVVfNSeWqmkhPTqjKmbkQiMyjfwvNFfpUjkXFLPzH__5k-Dp8VJ1dR8HTOKFwBzbfC7tQ2EV0-yGsyQnIgGd_ZulTNSmAAla5f00_a1kDEZzQWac7dOX0aA9IN/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/AVvXsEiEtnwZOrDu_kMdchK1jro-suIcJ-QPivbJqwdrO19prqBPXYlcMTAHXoNUCn4NHn4_kshsY-2yd2zvAhDnqG43yrYDm6p5cnDJmRci_P_HTUf9etTb4T_JHoGvOS8G_LCTNCz3IxB4BHIO/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/AVvXsEhK3-OhFZTiTMt5rMb3K1GkrkOYPQNk3lR0LwJ0V8VDyKGi32UVMi5__cNv6yhYI-uitppWMhldIzOuq31MPbem-ne8_FlU2izK7431PJF9LlHdxc0T_u5p-MF5hJe2pEYprrU5k73e2ieG/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/AVvXsEhJUzu-KPKNbzcC3P_af4ZzE3ABrcVx45aB9pot6SDM7OA2QaBKIYsigNN96VgSbPwKTOVvfCvuaxW51gPKHqBbQ1ERI-1_WzJKZvkwA6ApOf160vXOopbJdq6DrgQ4siNopoowCOXsxUfe/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/AVvXsEiWim570a2HfN3tDT8zgANL1sM5Z5DL2tWkhh-MxMSkmh8DJ_pGoVSh5AU3i1IZkwuqq_Bjgw8phv06xGFheszbmAWyuQGkn0u_FtxDRovz1VaW7nzZ8ujjNZWUfs3nAejIIgCtm7EdaDsP/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/AVvXsEggnf25Nehknr8stT2bHP4u1_5SWsbwriS6K-w5bBzr8sNkqmCZinhT84JbgsOq4P-HYsJf9qbO8QfisnJTbeFKaL2CBpo17LSM7xHEFHxrzsB57GFnjZ7sr1_qC_AQDsDXRqe1QZVJ_NkO/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/AVvXsEhDTtQAit31wff7FUp1-e_MPkFhg8bD6sGQwNlwBjLji-gKHy82aK0Z31OmsbVhwaAJqO_BX0AsmyRgYeIl0-16YEKsRfZlOWjTaWMouS54wXWa5iMEYo7QIrkG5VIHyS4Id3h2artBc93y/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/AVvXsEhK3-OhFZTiTMt5rMb3K1GkrkOYPQNk3lR0LwJ0V8VDyKGi32UVMi5__cNv6yhYI-uitppWMhldIzOuq31MPbem-ne8_FlU2izK7431PJF9LlHdxc0T_u5p-MF5hJe2pEYprrU5k73e2ieG/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.