Sebelum membaca Like Dulu Yah
:c:
siang ini admin RM akan share Cara Membuat Headline News di Bawah Header cara ini admin dapatkan dari blog Kompi Ajaib berikut ini screenshotnya :
1. Login akun blogger sobat seperti biasa.
2. Klik Template - Edit HTML (jagan lupa centang Expand Widget Templates).
3. Lalu cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atas kode ]]></b:skin>.
.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}Note :
.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}
- Tulisan berwarna merah itu adalah gambar yang akan menjadi background headline news sobat. silahkan ganti sesuai keinginan sobat.
- sedangkan tulisan berwarna biru adalah ukuran lebar headline news. silahkan sesuaikan dengan keinginan sobat.
4. Kemudia cari kode </head> dan letakan kode dibawah ini di atas kode </head>.
<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://yourjavascript.com/82110833351/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>
5. Kemudian cari lagi kode <b:section class='header' id='header' dan sobat akan meliat 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'>
6. Silahkan Copy kode di bawa ini dan letakan 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("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Latest Movies", "http://poetra-pakumis.blogspot.com/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><div style='clear:both;'/>
</div>
Note :
Kode berwarna merah bisa sobat ganti dengan kata-kata sesuai keinginan sobat misalnya : headline news, hot news dll.
kode berwarna biru ganti dengan URL blog sobat.
7. Sehingga hasilnya 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("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Latest Movies", "http://poetra-pakumis.blogspot.com/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><div style='clear:both;'/>
</div>
8. Klik review apabila suda cocok silahkan klik simpan.
Jika berhasil jangan lupa komentar juga ya
:c:
sumber=http://poetra-pakumis.blogspot.com/2013/03/cara-membuat-headline-news-di-bawah.html
0 Komentar untuk "Cara Membuat Headline News Dibawah Header Blog"
Pengaturan Berkomentar
- Silahkan berkomentar sesuai artikel bisa berupa saran dan kritik,
- Anda juga bisa menggunakan gambar EMOTICON pada komentar,
- Mohon untuk tidak meletakan Link Hidup, Sara, Dan Spam.
- Sebisanya komentar anda saya balas dengan Cepat,
- Untuk mengetahui balasan komentar dari saya silahkan berlangan artikel. Out Of Topic Show Konversi KodeHide Konversi Kode