Cara Membuat Menu di Bawah Header pada Blogspot

Bawah Header pada Blogspot. Kali ini saya akan membahas bagai mana cara memasang menu di bawah header dan berikut adalah langkah-langkahnya.

1. Login di blogger dengan ID blog sobat
2. Klik menu Layout
3. Klik Tab Edit HTML
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F 

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan ya
Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman> Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header. 

<a href="http://madhigokil.blogspot.com " class="navigation">HOME</a>

<a href="http://sandifreeboy.blogspot.com " class="navigation">CONTACT</a>
<a href="http://sandifreeboy.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://sandifreeboy.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://sandifreeboy.blogspot.com " class="navigation">TWITER</a>
<a href="http://sandifreeboy.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://sandifreeboy.blogspot.com " class="navigation">LAIN-LAIN</a>
<a href="http://sandifreeboy.blogspot.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.

Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.
Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombolCTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Harap di Perhatikan:

Kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera

Cara membuat Daftar Isi Otomatis di Blo

Selasa, 18 Desember 2012

Sama halnya seperti buku blog juga ada yang memiliki daftar isi,daftar isi sangat diperlukan di blog sebab apa?jika blog kita sudah mempunyai banyak postingan tapi gak ada daftar isi pasti pengunjung akan kesulitan untuk mengetahui postingan kita yang lainnya.Tapi,sebelum baca artikel ini anda diwajibkan untuk follow di blog ini dan kasih konfirmasi dengan cara berkomentar.Yaudah langsung aJa kita ke TKP:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML/Java Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan

<script src="https://sites.google.com/site/webmiftah/js/daftarisiv2pack.js"></script>

<script src="http://sandifreeboy.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript">

var accToc=true;

</script>

<script src="https://sites.google.com/site/webmiftah/js/accordion-pack.js" type="text/javascript"></script>

7.kalo udah tinggal di save dan lihat hasilnya

Keterangan:Ganti tulisan sandifreeboy.blogspot.com dengan url blog anda
                 Kalo gak bisa jangan panik ada cara kedua


Cara kedua :



1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML/Java Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan

<div style="background-color: rgb(000, 000, 000); border: 1px solid #ccc; height: 300px; overflow: auto; padding: 5px; width: 500px;">
<div align="left">
Label: <span id="pbl_labels"></span>

<div id="pbl_posts">
Recent Posts </div>


<script type="text/javascript">
var jumlah_maksimum_post = 100;var dengan_ringkasan = false;var jumlah_karakter_ringkasan = 100;
</script>


<script src="https://sites.google.com/site/webmiftah/js/recentpostsbylabel.js">
</script>


<script src="http://sandifreeboy.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
</script></div>
</div>

7.kalo udah tinggal di save dan lihat hasilnya

Keterangan:Ganti tulisan sandifreeboy.blogspot.com dengan url blog anda