Template Blogger Mirip Website Yahoo

Dengan tampilan yang serupa dengan website Yahoo! mulai dari tombol search, menu blog, slideshow dan lainnya.




DOWNLOAD - DEMO


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/AVvXsEhr2O2ToLUtgf4nJdQCl-JJj6UqPwFg4eIliDYgYJjAfkfQ-5ppMy-A6typmzXlyoZaHxCQ-SbVXvOJVVmwTSojHZuMv4XRS7ckQ2f6QogFq3fJ2CSjGcb4RKtxcn6k4DD1HYIAsh46UpO-/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/AVvXsEj6YXWWGQQdUxuB0D69u2lu6MBcfQOJuVG_cHjX68D7yT83R88EW1bQsy5LSMgJzsJSE0qiC45SkhiMAtsR84UYpVKmv2vZ5xkVZHVVH5DvKHM6hvQrSqK8gKGIqHaeKxLI2p2fuSJfntLh/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/AVvXsEgkCqJc_tVLxu4zrDCrQEXxuv28eKY8bhHCWtGm-PS2j2-pKmHKAOiPJpxjXL7j18VdtAHNp8gkhqupp22hlf6AHQLQyACffPpi85sVVPyt9NOS_tyblaBKjySJBBZY32QwjXvoo1VZvy8q/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/AVvXsEgoaEA9JujBcnQZqasJn8SUGrmy5RxhRRQNP78VGdnB31GR1U091QK4ZkVKhedguEs7Tn5v7HPhS55ri3pTajzgiRuzYQnP_FTRXHPKSKAy2v6sIwM1AvHHdxkAcuD3ycaSOOoeEOBTfvr4/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/AVvXsEjS3o5xbJ_AGFFs3Lwh8jw2lRKeVpQdVlicsmDpasDYxsGaBFpivVWp4fQ5RdGyGeY_e7wvkiG8nd5_r6d9nvgxcmBlUQzyhGPsyGdlkuyb5-BjWV0gl6Jq9ZH_zDQTlK9qrEB1A00PCym9/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.