Surya Computer : Jl. Olah Raga No. 03 Blega Bangkalan Telp. 0313042626
Home » » Membuat Headline News di Blogspot

Membuat Headline News di Blogspot

Surya Computer | 06.30 | 2komentar
Headline News di Blog, atau berita berjalan yang biasanya terdapat di bawah navigasi menu atau diatas header pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang Headline News dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.
Mungkin masih ada yang bingung apa sih sebenarnya Headline News pada blog itu, coba perhatikan gambar berikut ini :
gambar diatas merupakan contoh gambar headline news yang saya pasang pada blog saya,

untuk membuat Headline News di blog, ikutilah langkah-langkah berikut ini :
 
1. Login ke blogger dengan akun anda
2. Kemudian klik Template > pilih Edit HTML
3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
4. Letakkan kode berikut di atas kode ]]></b:skin>

.newspic {background:#252525 url(http://3.bp.blogspot.com/-
GoZGUMDvx8g/T1je4hEa9iI/AAAAAAAAA7E/aOfllbW_qOc/s1600/BRK+NW.png) no-repeat top
left;width:970px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-
size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Catatan :
Sesuaikan kode yang berwarna merah dengan ukuran template blog anda

5. Kemudian letakkan kode berikut di atas kode </head>

 
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-
m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script src='http://e55up.googlecode.com/files/Headline.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:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 14px Arial;
text-transform:none;
text-align:left; background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

6. Cari kode <div id='header-wrapper'> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.

<div class='newspic'>
<div style='float:left;width:979px;padding:1px 0 6px 130px; 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://alamat-url.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 style='clear:both;'/>
</div>

Catatan :
- Ganti kode yang berwarna merah ( alamat-url ) dengan alamat url blog anda

7. Klik Simpan dan lihat hasilnya


Semoga Bermanfaat "Indahnya Berbagi Pengetahuan"
Share this article :

Creatif By : Surya Computer "Indahnya Berbagi Pengetahuan"

Terimah Kasih telah membaca artikel Membuat Headline News di Blogspot . Yang ditulis oleh Surya Computer .Pada hari Kamis, 11 April 2013.Konten Surya Computer telah dilindungi oleh DMCA ! Cantumkan sumber link asli. saat copy paste, Terima kasih!

:: By e55up ! ::

2 Komentar di Blogger
Silahkan Berkomentar Melalui Akun Facebook Anda
Silahkan Tinggalkan Komentar Anda

2 komentar:

rahmat hidayat mengatakan...

Makasih ilmunya

caradari.blogspot.com

bursa303 Online mengatakan...

This is a Great Article ever i see... thank's for sharing :D

Situs Judi Bursa303 adalah Agen Judi Bola Online Terpercaya menyediakan berbagai produk judi online seperti Taruhan Bola, Casino Online, Poker, Bola Tangkas, Togel dengan minimal Deposit termurah 50rb, maka anda sudah dapat bermain taruhan online kepada agen judi online terpercaya.

Posting Komentar

 
Support : e55up | Surya Computer | Komunitas Blega
Copyright © 2013. Surya Computer - All Rights Reserved
Template Modify by e55up
Proudly powered by Blogger