Cara Membuat Menu Hot News Di Bawah Header

Cara Membuat Menu Hot News Di Bawah Header, Tutorial Menampilkan breaking news, Satu lagi tutorial blog yang akan artikel saya fafan share di sini, salah satu cara untuk menapilkan tampilan blog yang menarik adalah dengan menampilkan Menu Hot News di bawah atau bisa juga di atas header. Dan yang artikel saya fafan share kali ini dengan tampilan yang lebih elegant dan Modern. 

Menu Hot News Di Bawah atau di atas Header bisa juga berfungsi untuk memudahkan pengunjung menemukan hal-hal yang dicari atau yang direkomendasikan pemilik blog/web.  Adapun Cara membuat Menu Hot News Di Bawah atau di atas Header untuk blogspot adalah sebagai berikut:   

Langkah Pertama :

Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;

Langkah Ke 2 :

Cari Kode ]]></b:skin> 

Dan Letakan Kode Dibawah  Ini Diatas ]]></b:skin>

#buttonbar{width:100% margin:0;padding:0}#buttonbar,#buttonbar ul{list-style:none;font-family:Arial,serif;margin:0;padding:0}#buttonbar a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;font:bold 14px Arial;color:#FFF;padding:9px 10px 8px}#buttonbar li{float:left;position:outside;width:auto}#buttonbar li:hover a,#buttonbar a:active,#buttonbar a:focus,#buttonbar li.hvr a{background:#192f92;background-image:-moz-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-webkit-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-o-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-ms-linear-gradient(top,#d68523 0,#ffc518 66%);background-image:linear-gradient(top,#d68523 0,#ffc518 66%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d68523),color-stop(0.66,#ffc518));-moz-box-shadow:3px 3px 4px #aaa;-webkit-box-shadow:3px 3px 4px #aaa;box-shadow:3px 3px 4px #aaa;color:#fff;text-decoration:none}#searchbar{border:1px solid #ccc;background:#f5f5f5 url(http://i1175.photobucket.com/albums/r625/diaryonline/e9835c7c.png) no-repeat top center;width:970px;margin:5px auto 2px;padding:0 auto;height:32px}#searchbarright{width:290px;float:right;margin:0;padding-top:3px;padding-right:20px}#searchbarleft{float:left;width:477px;padding-left:140px}#subscribe{overflow:hidden;margin:0;padding:0 0 5px}#subbox{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpgfJv4CfwamkSxnuuzeCp8-BIf4OBdNKyTWOvypDDyMIpGEwHrEctKWgO9kyQEPzyoDlmv-Y6bH0qR5hawnSOT533Z1YzthyluI3vkWx_cpKRztI1VT0KP-EV9rqqHxNO3tqN6tW608/s1600/email.png) no-repeat scroll 4px center;font:bold 11px Sans-Serif;color:#666;text-decoration:none;border:1px solid #aaa;height:14px;width:160px;margin:0;padding:5px 0 4px 34px}#subbutton{background:#999;color:#FFF;font:11px Arial;font-weight:700;text-decoration:none;border:1px solid #666;margin-left:5px;padding:3px 5px}.titlefield{text-decoration:none;color:#09F}.titlefield:hover{text-decoration:underline}.labelfield{color:brown;font-size:90%}.datefield{color:green;font-size:90%}#data{width:470px;height:13px;border:2px solid #ced0d1;padding:5px 5px;background-color:#fff;margin:3px auto;-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.16);-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.16);box-shadow:inset 0 0 10px rgba(0,0,0,0.16);position:relative;overflow:hidden;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#adslayoutleft {position:fixed; top:0%; margin-left :-150px; float:right;background-color:#000;z-index:10;}#adslayoutleft .idblogmaker {float:left;clear:both;}#adslayoutleftright {float:right;position:fixed; top:0%; margin-left:970px;z-index:10;background-color:#000;}#adslayoutleftright.idblogmakercom {float:left;clear:both;}

Langkah Ke3

Cari Kode </head> 

Letakan Kode Tersebut Diatas Kode </head>

<script src='http://www.google.com/jsapi' type='text/javascript'/><script src='http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js' type='text/javascript'/><script src='http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js' type='text/javascript'/>

Langkah ke -4

Selesai Save Template

 

Langkah Ke5

Setelah Cara Satu sampai 4 Sudah Anda Terapkan,Langkah Kelima Tinggal Masuk Ke Tata Letak Tambah Gadget,Copy Script Dibawah Ini

<script type="text/javascript">

var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")

cssfeed.addFeed("System", "http://sayafafan.blogspot.com/feeds/posts/default")

cssfeed.displayoptions("date")

cssfeed.setentrycontainer("div")

cssfeed.filterfeed(10, "date")

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

*Keterangan Ganti Kode Warna Merah Dengan Url Blog Anda

Selesai Good Luck, Semoga artikel ini bermanfaat

Sekian dulu ulasan artikel saya fafan prihal tentang Cara Membuat Menu Hot News Di Bawah Header