Download Template Blog Yahoo

Untuk melengkapi tampilannya, diperlukan Widget - widget yang mirip seperti situs Yahoo!. Berikut ini kode - kodenya :

1. Search Engine

<div style='font:normal 12px arial;padding-left:5px;height:23px;'> <strong><i>Hi, guest<strong></strong></i> ! </strong> welcome to <strong>Yahoo!</strong>. | <a href='#'>About Us</a> | <a href='#'>Contact</a> | <a href='http://www.blogger.com' title='registered now for free account'>Register</a> | <a href='http://www.blogger.com' title='sign in to blogger to share'>Sign In</a></div> <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>

2. Slideshow

<div id="gal1" class="img400"> <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitPSuQ7V-tRtVPV9gEUZHPawZr0jCs1uBTGOCLbqkTRF2QBrNPH405z1Ta36Lcru4VsUocNlzui5wcjMESTvPr8C_IcWAJZjA91Tx6BqCyY3VvIOSpfpqG8PqI3oS1-rJx86F3DJkP4LGV/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/AVvXsEi1ZIzpxB5XQJjjyL-_6fhIhX5hGwPyv-9bmYOT0gfX7IeTlS0WC6FBPClLYT9uUwINXBfs4lt8oFlEe-tTSpFaZm-FJJvLgKk_JD6B7BKUquDXTR_bN7JuGyadkIwgOSvfXD5q-1uD-muy/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/AVvXsEi1ha6d25qtuqTiD99muk0itUg6o6KU54r5pCC-vq7OtK6x2qIHjiWKUtA95IEKT_WCX0oiPBW3ByIZcPcoUSwDPTzmyqaqS9tooHDcEIQxknrKWMb0frmH5eTC00C3ezU2JHl6KS3R4Eyo/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/AVvXsEgG4SKBK882QZXsQ0lExqjjMVgEXCJTbjoJ9UQTbUHgOklPA_6tXj9NgXPuX7xlXHn6VQAm32nSV5SxvDyXJ7Z1fsAtqlWoi7CWKel9v7haw-0Dg0bOPIwMRwqVwgpbD4wPISIkoY2Mv41L/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/AVvXsEiXp_fzDziJLWq_3O8xc15gGDTvEM6HiOS4PtNimwQk5_PHFaQiRWk6NSlQc9vwzxXEJGeaUN05SrMLXa3HMvSN_8EKX3kqkgiCycu_DoEzf0msBnpEvH_AICBZo948XdZ7KbBvY9FXfar1/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>

3. 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>

4. 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 : Berikut cara untuk menambahkan widgetnya :

• Login ke Blogger
• Pilih Layout
• Klik Add a Gadget
• Pilih HTML/JavaScript
• Masukkan kode widgetnya
• Save

Sumber : Download Template Blogger Mirip Yahoo!