- Back to Home »
- CSS Tricks »
- Cara Membuat Headlines di Header Blog
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 :
Edit-edit sendiri sesuai kebutuhan
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.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></div>
NB :
Kalimat yang berwarna merah : Ganti URL blog/web sobat
Kalimat yang berwarna orange : Jumlah postingan yang akan ditampilkan
Selebihnya bisa kalian edit-edit sendiri.
11. Klik simpan
12. Selesai!
Edit by KODE
Sumber