Bagi Anda yang menggemari mengoleksi berbagai Template - template
keren, unik, dan menarik tentunya.. bisa Anda Download Template Blogger
Mirip Yahoo! ini. Dengan tampilan yang serupa dengan website Yahoo!
mulai dari tombol search, menu blog, slideshow dan lainnya.
Jadi Apa bedanya Diatas Sama yang Di Bawah
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 == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = ""}' 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/AVvXsEg_msWz1zhCkJk8rK0Qgm40lfsBOSnWm9Bfb0QrfeMhp4FdZ4xCm0RQh7fD4_wXPkKir4s-sFN0p66cBKXxrYkXil0zEkNyTecqOCGGYlCs9ITeBhXYunuzhlKFFVhxCZtHtGqW8vZspAy3/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/AVvXsEjPYLJay-1Okx-i1DMrxIuClVesOi16BOHbim-WW6ppgJCVJP3SlDDHnxB2rSowQDJncx45m6hiJ9Lo4lN2lCsRXGhbJhD8YExZVIIRsN99l0F020lT26Hm1mdJZicGUMF25Un1ihHuC9nf/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/AVvXsEhTXasZ-sJuvTIgnqI2HWJZ1MK2iVfuzudNaMETtMAhU8hTz-SoMdQD_uc43O04VRbBBTNHuBtfv0pIo7nAO2Kzz4iNsrEUa-eYqsmwFNj2gS2ONgBw7SoDKvoMWOWCp7mP1JTFT7ZQ8CMy/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/AVvXsEiRlZXIWwujUFyPa0L1YpY9MKcFilAW2ZWy4vIrK4OKm-zltHAtfJVkqwxmz60pqi0VK51MAjqXs5j2FWmVu3KWH42bzATxBo2s9cGchqI5ByX_AT8Ngcz3PSmw7B5JX-7F1j5fMkC3ktjU/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/AVvXsEipwNvkmzNRsCmTg1_MFzl4OFxIGA1yGjRbXxrEL4WndffCVhI8XkeNR2yMkMd32KrIm6871TLjojLaJhM_CRe7YoHQgt2hgHRn4i9MLwBCzAJSKfBzBZQaGmVBHDdjhmb2vxxXWwygSYc4/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>
- Login ke Blogger
- Pilih Layout
- Klik Add a Gadget
- Pilih HTML/JavaScript
- Masukkan kode widgetnya
- Save.
0 comment:
Post a Comment