Membuat Headline News Di Bawah Header

Membuat Headline News Di Bawah Header

Bola Hero Gawai

Membuat Headline News Di Bawah Header

Membuat Headline News Di Bawah Header

Pagi ini akan saya coba share cara Membuat Headline News Di Bawah Header seperti yang ada pada blog Kompi Ajaib ini yang letaknya di bawah header. Kebetulan pada waktu yang lalu ada nanya bagaimana cara membuat latest post / headline news seperti blog Kompi Ajaib. Headline News ini menampilkan 10 postingan terbaru dari blog Anda.

Silahkan Anda masuk di Dashboard >> Template >> klik Edit HTML >> centang pada Expand Widget Templates karena kita akan sedikit mengobok-obok HTML. Setelah itu silahkan cari kode ]]></b:skin> , gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu silahkan copy kode di bawah ini dan paste DI ATAS kode tadi.

.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:960px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:960px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}

Perhatikan tulisan https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png yang berwarna merah. Itu adalah gambar yang akan menjadi background headline news. Silahkan sesuaikan warnanya dengan warna dari tema blog Anda. Silahkan buat gambar yang kecil saja kira-kira ukuran sizenya sekitar 200 - 300 byte saja. Di sini saya bikin gambar dengan pixel dimensinya lebar 7 pixels dan tingginya 38 pixels di Photoshop dan save dengan format png. Kemudian upload gambar Anda tadi dan ganti url yang berwarna merah tersebut dengan url gambar Anda tadi. Untuk tulisan 960px, itu ukuran lebar headline news. Silahkan sesuaikan dengan lebar headernya atau header-wrapper.

Kemudian cari kode </head> dan copy kode di bawah ini kemudian letakan DI ATAS  kode tadi.

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://kompiajaib.googlecode.com/files/newsticker2.js' type='text/javascript'/>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#60BAFA;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>


Kemudian cari kode <b:section class='header' id='header' dan Anda akan melihat kode seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

Silahkan copy kode di bawah ini dan letakan SETELAH / DI BAWAH kode tadi. 

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Latest Posts :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://kompiajaib.blogspot.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><div style='clear:both;'/>
</div>

Tulisan Latest Posts yang berwarna merah tersebut bisa Anda ganti dengan Headline News atau yang lainnya. Tulisan kompiajaib.blogspot.com silahkan Anda ganti dengan blog Anda. Namun di sini Anda harus sudah membuat atau mempunyai akun Feedburner blog Anda agar headlinenya bisa berjalan.

Sehingga penampakannya akan tampak seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Latest Posts :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://kompiajaib.blogspot.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><div style='clear:both;'/>
</div>

Setelah itu silahkan lakukan review untuk memastikan pemasangannya sudah benar atau belum. Kemudian save dan selesai.

Demikian sharing cara Membuat Headline News Di Bawah Header kali ini. Sebenarnya headline ini bisa juga Anda letakan di atas header tergantung bagaiman selera Anda saja. Yang penting jangan takut untuk mencoba sesuatu yang baru. Semua orang pernah mengalami trial and error.

UPDATE: 
Beberapa waktu yang lalu akun Google Code saya dibanned, jadi headlinenya pasti enggak jalan, nah untuk itu silahkan ganti kode js-nya. Perhatikan kode http://kompiajaib.googlecode.com/files/newsticker2.js yang berwarna biru di atas, silahkan ganti dengan kode ini http://yourjavascript.com/82110833351/newsticker2.js

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

9 Comments Add Comment

gan terjadi galat bX-jyl3cm gimana ngatasi nya

Balas

Itu error dari bloggernya. Coba tutup browsernya, bersihkan semua history dan cache dan cookiesnya bisa dengan bantuan software utility seperti CCleaner dll. Kemudian ulangi lagi, buka browser dan login ke dashboard blog.

Balas

kok artikel nya tidak muncul ya bro?

Balas

Biasanya feedburnernya belum aktif...coba masuk ke feedburnernya dan aktifin feednya...

Balas

Gagal maning. Coba cek di blog-ku http://www.oke-reload.blogspot.com

Balas

berhasil,, tapi ga bisa diletakin di Notification bar di blog saya,, url feed nya warna orange.. jadi tag komentar http:// ( jadi komentar javascript) alhasil meracuni blog saya.. hehe.. masih belajar,,

Balas

Iya sih mas harus lebih bijak memilih widget yang ingin dipasang di blog. Jangan hanya pengutamakan tampilan tapi mengorbankan aspek lainnya.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×