Cara Membuat Headlines Di Header Blog

Hey Benkkers..
Kali ini gw post tentang 'Cara Membuat Headlines Di Header Blog!"
Kalian pasti udh tau nih apa itu headlines,
Ini nih kaya di blog gw!!



Toh!!
Tapi itu di bawah header,
Dan yang kali ini saya akan share yang di header!
Oke langsung aja simak nih!
1. Buka Dasbor Blog!
2. Buka Template -> Edit HTML
3. Cari kode "]]></b:skin" ( Ctrl + F atau F3 Untuk mempermudah pencarian )
4. Letakkan kode CSS berikut tepat di atas kode  "]]></b:skin"
CSS : 
#ACheadlines{
float: left;
margin-left: 60px;
width: 350px;
height: 200px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
background: #000;
margin-top: -200px;
padding: 3px;}

NB*

  • Kalimat yang berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!
  • Kalimat yang berwarna merah : Margin dari kiri ( Sesuaikan dengan blog sobat )
  • Kalimat yang berwarna kuning : Panjang headlines ( Sesuaikan Dengan Keinginan )
  • Kalimat yang berwanra hijau muda : Tinggi Headlines ( Sesuaikan Dengan Keinginan )
  • Kalimat Yang berwarna biru tua : Ketebalan border ( Garis Tepi ) Headlines
  • Kalimat yang berwana abu-abu : Jenis border ( Garis Tepi ) Headlines
  • Kalimat yang berwarna hijau tua : warna border ( Garis Tepi ) Headlines
  • Kalimat berwarna ungu : Warna background Headlines
  • Kalimat yang berwarna biru muda : Margin dari atas ( Sesuaikan dengan blog sobat )
  • Kalimat berwarna pink : Jarak antara headlines dengan border ( Garis Tepi )
5. Cari kode "header-wrapper" ( Ctrl + F atau F3 untuk mempermudah pencarian )
6. Letakkan kode HTML berikut tepat di atas kode "header-wrapper"
HTML :
<div id='ACheadlines'>
<b:section class=' ACheadlines1' id=' ACheadlines ' showaddelement='yes'/>
</div>

NB*


  • Sebenarnya kode HTML di atas bisa di letakkan di antara tag <body> dan </body> ( Asalkan tidak error ) 
7. Klik Simpan
8. Eitt!!! Belum selesai!!,
9. Buka Dasbor blog lagi -> Tata Letak -> Tambahkan Widget -> HTML/Javascript
10. Masukkan kode berikut di dalam kolom yang telah di sediakan!


<div style="overflow:auto; width:100%px; height:175px; padding:10px; border:0px solid #000000;">
<script src="https://chandra-yozers-comunity.googlecode.com/files/AC%20headlines.js"></script>
<script>var numposts = 20; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://aryoz-comunity.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script></div>

NB*
Kalimat yang berwarna abu-abu : Panjang Isi Headlines ( Sesuaikan dengan blog sobat )
Kalimat yang berwarna merah : Tinggi Widget Headlines ( Sesuaikan dengan blog sobat )
Kalimat yang berwarna orange : Jarak atara border ( Garis tepi ) dengan widget headlines
Kalimat yang berwarna kuning : Ketebalan border ( Garis Tepi ) widget headlines
Kalimat yang berwarna hijau : Jenis border headlines ( Sesuaikan dengan keinginan )
Kalimat yang berwarna biru muda : Warna border ( Garis Tepi ) headlines
Kalimat yang berwarna biru tua : Jumlah postingan yang akan di tampilkan
Kalimat yang berwarna ungu : Ganti dengan URL blog atau web sobat

11. Klik simpan
12. Selesai!
Oke nih!!!
Sekian dulu ya Benkkers...
Dadaaaa.. :v
Next PostNewer Post Previous PostOlder Post Home