Ideini.Com | Situs Informasi Terkini!

Situs Media Informasi Online Yang Berisi Info Info Menarik, Terbaru dan Terhangat | Entertaiment | Teknologi | Olahraga | Hiburan

Cara Membuat Menu Breaking News Di Bawah Menu Navigasi

Tuturial Cara Membuat Menu Breaking News Di Bawah Menu Navigasi, nah sudah lama ideini tidak memberikan Tutorial Blogging, kemarin ada sahabt ideini yang meminta untuk dibuatkan Tutorial Membuat Menu Breaking News Di Bawah Menu Navigasi, mungkin Tutorial Membuat Menu Breaking News Di Bawah Menu Navigasi  ini sudah banyak dibahas oleh blog blog lain, namun tidak ada salahnya saya memberikan lagi untuk sahabat saya yang sudah merequsetnya.
Tuturial Cara Membuat Menu Breaking News Di Bawah Menu Navigasi

Nah untuk melihat contohnya bisa lihat dibawah menu blog ini ada widget Breaking News, itu adalah hasilnya, mungkin nanti hasilnya tidak akan sama, karena milik saya sudah saya modifikasi dari kode aslinya, kamu nanti bisa memodifikasi untuk menyesuakian dengan template blog kamu. baiklah langsung aja simak Tutorial Membuat Menu Breaking News Di Bawah Menu Navigasi

  • 1. Login ke Blogger.com
  • 2. Pilih Rancangan >> Edit HTML
  • 3. Lalu centang kotak Expand Template Widget. Dan jangan lupa untuk memback-up dulu template kamu untuk jaga-jaga bila terjadi kesalahan.
  • 4. Jikas sudah sekarang cari kode ]]></b:skin>
  • 5. Lalu Letakan kode berikut tepat di atas kode ]]></b:skin> tadi. 
/* Menu Breaking News
---------------------------------------------*/
.newspic {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUefehCrBY2iXI2uge7LTsCWiCIF4fdD7h4Cd5U-0lIO9bBufUv7ZKq5wyyLpjT7Ff8n8lZjs4va9iohEwIb4hiiQIkHBVR-kII_KA_V4tHkO0uZSqLapVTJxlo54b8sdvkyQcHRNXj8/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:938px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 938px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}  
  • 6. Lalu letakkan kode di bawah ini tepat di atas kode </head> :



  • 7. Setelah itu cari kode yang kira-kira mirip seperti ini :
<div id='nav-element'>
.....................................
</div>
  • Kode ini bisa berbeda dengan yang ada di blog kamu, intinya letakkan saja kode nya di bawah kode navigasi kamu yang kira-kira miripnya seperti ini :
<div id='nav-element'>
<div id='nav'>
<div id='nav-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></li>
<li><a href='http://www.ideini.com/2011/08/daftar-isi.html' title='Daftar Isi/Archive'>Archive</a></li>
<li><a href='http://www.ideini.com/2011/08/daftar-link-sahabat.html' title='Lihat Link teman teman Ideini.Com'>Link Friends</a></li>
<li><a href='http://www.ideini.com/2012/01/pengunjung-masuk-sini-part-2.html' title='Please sign the Guest Book'>Guestbook</a></li>
<li><a href='http://www.ideini.com/2011/06/recent-comment-on-ideinicom.html' title='Look Recent Comments'>Comments</a></li>
<li><a href='http://www.ideini.com/2011/06/nonton-tv-online.html' title='Nonton TV Online Yuk'>TV Online</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>
</div>
</div>
  • 8. Masukkan kode di bawah ini tepat di bawah kode </div> yang ada di atas :
<div class='newspic'>
<div style='float:left;width:938px;padding:3px 0 3px 124px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://ideini.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
  • 9. Klik Pratinjau, setelah cocok baru klik SIMPAN
NP :
  • Ganti tulisan ideini.com berwarna biru dengan URL blog kamu.
  • Untuk lainya bisa disesuaikan masing masing.
Nah itu tadi Tutorial Cara Membuat Menu Breaking News Di Bawah Menu Navigasi semoga bisa dipahami dan bermanfaat ^_^

15 komentar untuk "Cara Membuat Menu Breaking News Di Bawah Menu Navigasi"

  1. mantap gan.., thx sdh berbagi ilmux.. *smile

    BalasHapus
  2. Rohis Facebook# Sama sama sob :)

    BalasHapus
  3. kembali berkunjung.., mau nanya ni sob.., gmn cara buat blogroll kayak pny sobat..? terima kasih *smile

    BalasHapus
  4. Rohis Facebook# itu langsung ane buat untuk effect di sidebar sob, ntar kalau sempat ane buatin tutorialnya deh :)

    BalasHapus
  5. Blogcunayz# makasih sob, blog ente juga keren tuh :)

    BalasHapus
  6. wah,, mantab gan
    terima kasih untuk ilmunya ^_^

    BalasHapus
  7. sob, req nih. coba posting ttg cara membuat block qoute yang kayak blog ini.

    BalasHapus
  8. Lagi Belajar Ngeblog# Sama sama sob :)

    Abhi# Oke sob, nanti saya buatin tutorialnya :)

    BalasHapus
  9. langsung ane praktekkan sob...memang ideini keren.... ijin tukar link d homepage sob...

    BalasHapus
  10. >>> Ichwan HAUSGAME# makasih sob :)

    BalasHapus
  11. lama juga ni sob gk update postingan.. :)

    BalasHapus
  12. Rohis# iya ne sob, lg sibuk magang, jadi sekedar bw aja ke blog sahabat :)

    BalasHapus
  13. Saya sdh coba lakukan langkah2 di atas pada blog saya tapi kok nda muncul pada halaman blog saya ya mas. Mohon penjelasannya....

    BalasHapus
  14. Daftar Blog Dofollow Terbaru# Pasti ada yang salah penempatanya sob, atau memang templatenya tidak support,,

    BalasHapus