Met Pagi gan... kali ini saya mau post tentang tata cara memasang headline news di blog gan, cara ini di lakukan agar dapat mempercantik tampilan website kita gan...., cara ini juga di lakukan agar blog agan makin banyak pengunjungnya gan.....
nah karna berhubungsaya belum pernah post lagi tentang edit bloging gan jadi terlintas tadi di beak saya untuk berbagi tips and trick untun para agan-agan Star-Cyb3r4rt.com
ok gan sekarang coba kalian liat screen shot blog saya.........
pasti tambah cantik kan dengan adanya tambahan widget headline news ini......
headline news ini juga membantu para pengunjung blog untuk membaca artikel lain di blog kita
headline news ini juga membantu para pengunjung blog untuk membaca artikel lain di blog kita
nah jika agansudah tau silahkan ikuti aja tata cara yang ada di artikel
"membuat Headline News tepat Diatas Postingan"
1. Login ke Blogger.
2. Masuk ke Rancangan.
3. Kemudian pilih Edit HTML.
3. Kemudian pilih Edit HTML.
3. Cari kode ]]></b:skin> dan sisipkan kode berikut ini tepat di atasnya:
/* News Sticker
---------------------------------------------*/
.newspic {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGh8KJZoODum1Esyl-OvhIFrIPNEIn8kGZa4gP5ecKkb0F74TlV37U1tLyKGJVskiFE15pMS4VMXM_FayZ3okEntGbK_pJ63byI3fx0wQboee-6BCYlzJYbEuQRrkRGqsQazy-tbBOp-Y/s1600/headline_news.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 840px;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;}
5. Selanjutnya letakkan kode berikut ini tepat di atas kode </head>
6. Untuk meletakkan headline news diatas judul posting cari kode <div id='outer-wrapper'> kemudian letakkan kode berikut sebelumnya:<div style='clear:both;'/>
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://Alamat URL Blog Anda/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
Keterangan:
Kode 840px = Panjang background gambar headline news, sesuaikan dengan lebar blog anda.
Kode 125px = Jarak judul artikel dari sebelah kiri gambar.
Kode 10 = Jumlah entri judul artikel yang akan ditampilkan.
Kode 125px = Jarak judul artikel dari sebelah kiri gambar.
Kode 10 = Jumlah entri judul artikel yang akan ditampilkan.
7. Simpan jika sudah selesai dan lihat hasilnya pada halaman hompage blog anda, apabila anda sudah benar dalam meletakkan kodenya maka Headlines News akan mucul tanpa masalah.
NB : Jika ada agan yang mempunyai masalah pada widget....
contohnya Jika headline news hanya ada Tulisan loading newsnya
itu artinya blog agan belum ter daftar di FeedBurner Google Silahkan Agan Baca artikel ini Untuk Daftar
Tutorial Lengkap Cara daftar FeedBurner


0 komentar:
Posting Komentar