Cara Membuat Headline News Di bawah Header

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

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}

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>

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'> 

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(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://GANTI DENGAN URL BLOG ANDA/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>

Ganti tulisan yang berwarna biru dengan url Blog ANDA misanya url blog saya : www.alikeyblog.com lalu klik Simpan Template dan lihat hasilnya.

Semoga bermanfaat  

Cara Pasang Kode Adsense di samping kiri atau kanan Artikel

Oh ya, Memang diakui Tampilan Iklan yang menempel langsung Pada Artikel baik itu disisi kiri atau Kanannya akan membuat Artikel dan Iklan tersebut Tampil Dinamis dan Elegan. Nah Sobat Pecinta Blogspot kini tidak kalah dengan Sobat Pengguna Wordpress. Keuntungan Lain memasang iklan seperti ini yakni, kemungkinan besar iklan untuk di Klik persentasenya agak Besar ketimbang taruh iklan di bawah Artikel.

Baiklah Mari Kita Mulai

Pertama 
Seperti biasa Loginlah ke Account Blogger Masing-masing

Kedua 
Silahkan Menuju Racangan Lalu Klik Edit HTML

Ketiga
Ingat setiap Edit HTML jangan pernah Lupa Untuk Download Template Lengkap Untuk Menjaga Kesalahan.
Sekarang silahkan Centang Expand Template Widget

Keempat
Tekan Ctrl + F lalu Cari Kode berikut

<div class='post-header-line-1'/>

Kelima
Setelah Ketemu Silahkan Masukkan Kode berikut ini Dibawahnya

 

<div style="width: 600px;">

<div style="clear: right; float: left; margin-right: 5px; margin-top: 0px;">

Kode Iklan Anda disini

</div></div>

Masukkan Kode Iklan yang diberikan PPC pada Petunjuk yang dimaksud,

 
PERHATIAN :
Sebelum Memasukkan KODE Pada HTML jangan Lupa Di Parse dulu, Tempat Parse Kode ada disini : Tool Adsense: Java Script Code Parser, HTML, PHP

Caranya Copy Seluruh Kode lalu Pastekan di Parse HTML lalu Klik Parse.
Nah Hasil Parse inilah Yang Anda Letakkan dibawah <div class='post-header-line-1'/>
Sehingga Hasilnya Seperti ini :

<div class='post-header-line-1'/>

<div style="width: 600px;">

<div style="clear: right; float: left; margin-right: 5px; margin-top: 0px;">

Kode Iklan Anda disini

</div></div>

Keenam
Sekarang Silahkan disimpan dan Lihat Hasilnya

Catatan :
Sobat Harus Sesuaikan Lebar kolom Artikel Agar terlihat Stabil dengan Mengubah Kode berikut :
<div style="width: 600px;">
<div style="clear: right; float: left; margin-right: 5px; margin-top: 0px;">
Width : 600 px bisa Sobat Ubah dengan Lebar Kolom Posting Masing2
Jika Iklan Ingin Ditampilkan di Kiri Artikel Tinggal Ganti right dengan Left

Semoga Bermanfaat