Sabtu, 15 Juni 2013
Cara membuat Headlines News -
Salah satu aksesories blog yang sangat penting adalah Headlines News,
karena berfungsi menampilkan beberapa postingan terbaru blog anda
sehingga pengunjung akan dengan mudah melihat apa artikel terbaru yang
ada dalam blog anda.
Headlines News sama dengan Recent Post
hanya saja tampilannya lebih simpel yang hanya menampilkan title atau
judul dari beberapa postingan terbaru. Yang paling populer saat ini
adalah menempatkan Headlines News di bagian bawah header, ada juga yang
menempatkan di bagian atas dan di bawah menu (header). Namun sciptnya
sama saja, untuk menempatkan di posisi mana itu terserah anda, namun
pada kali ini saya akan membahas dengan cara menampilkan Headline News di bawah Header seperti yang ada pada gambar berikut.
Untuk membuatnya
tidak terlalu sulih, dengan sedikit keberanin untuk mengotak atik script
template blog anda kemudian menambahkan sedikit script di beberapa tag
elemen Insya Allah langsung berhasil. Untuk lebih jelasnya berikut
langkah langkahnya.
Pertama masuk ke akun blogger anda lalu KLIK Template => Edit HTML => Lanjutkan Kemudian CENTANG pada Expand Template Widget lalu cari kode ]]></b:skin> untuk memper cepat atau memudahkan pencarian CTRL+F kemudian copy paste kode ]]></b:skin> pada kolom yang muncul. Setelah menemukan kode di atas copy kode di bawah ini kemudian pastekan pas sebelum atau di atas kode ]]></b:skin> yang telah di cari tadi
.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:950px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:950px;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}
.headline{width:950px;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}
Ganti yang berwarna biru dengan url gambar sesuai dengan background headlines news yang anda inginkan, kemudian yang berwarna pink boleh diganti dengan angka sesuai dengan lebar yang di inginkan.
Kemudian cari kode </head> untuk memudahkan gunakan kembali CTRL+F. Setelah ketemu Copy kode di bawah ini lalu pastekan sebelum atau di atas kode </head>
<script
src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png'
type='text/javascript'/>
<script src='http://exlorer-amran91.googlecode.com/files/HDN.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>
<script src='http://exlorer-amran91.googlecode.com/files/HDN.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 berikut ini <b:section class='header' id='header' . hingga kurang lebih seperti berikut 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'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>
Setelah ketemu kode seperti di atas copy kode di bawah ini kemudian pastekan pas dibawahnya berikut kodenya
<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;'>
Headlines News :
</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://GANTI DENGAN 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><div style='clear:both;'/>
</div>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Headlines News :
</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://GANTI DENGAN 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><div style='clear:both;'/>
</div>
Ganti tulisan yang berwarna biru dengan url Blog ANDA misanya url blog saya : www.suryafahik.blogspot.com lalu klik Simpan Template dan lihat hasilnya.
Semoga bermanfaat, dan anda juga bisa menemukan cara ini di sini. Ok demikianlah postingan kali ini, sampai jumpa lagi di lain kesempatan.
Posting Komentar