This time I will invite you to try to make accordion tab menu which we will implement to blogger. By using the accordion tab menu, Besides you have a cool web interface will also make your blog much simpler with the regular menu display.
Javacript :
Place this javascript code exactly under HMTL tags <head> on blogspot templates:
"<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
CSS
Next. Please put the following css code sequence is exactly above the tabs </ b: skin>
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion { background:#FFFFFF url(img/h300.png) 0 0; width: 300px; -background:#666; }
/* accordion header */
#accordion h2 { background:#ccc url(http://3.bp.blogspot.com/_VrWujqfSgyA/TSoYQw8PcDI/AAAAAAAAAdw/4CN6dSjwmHY/s1600/h30.png); margin:0; padding:5px 15px; font-size:14px; font-weight:normal; border:1px solid #fff; border-bottom:1px solid #ddd;
cursor:pointer; }
/* currently active header */
#accordion h2.current { cursor:default; background-color:#fff; }
/* accordion pane */
#accordion div.pane { border-bottom:#999999 solid 2px; display:none; height:auto; padding:5px 2px 5px 2px;
color:#666666; font-size:12px; }
/* a title inside pane */
#accordion div.pane h3 { font-weight:normal; margin:0 0 -5px 0; font-size:16px; color:#000000; }
/* end tab accordion styling */
/* get rid of those system borders being generated for A tags */
a:active { outline:none; }
:focus { -moz-outline-style:none; }
a:hover { }
#accordion { background:#FFFFFF url(img/h300.png) 0 0; width: 300px; -background:#666; }
/* accordion header */
#accordion h2 { background:#ccc url(http://3.bp.blogspot.com/_VrWujqfSgyA/TSoYQw8PcDI/AAAAAAAAAdw/4CN6dSjwmHY/s1600/h30.png); margin:0; padding:5px 15px; font-size:14px; font-weight:normal; border:1px solid #fff; border-bottom:1px solid #ddd;
cursor:pointer; }
/* currently active header */
#accordion h2.current { cursor:default; background-color:#fff; }
/* accordion pane */
#accordion div.pane { border-bottom:#999999 solid 2px; display:none; height:auto; padding:5px 2px 5px 2px;
color:#666666; font-size:12px; }
/* a title inside pane */
#accordion div.pane h3 { font-weight:normal; margin:0 0 -5px 0; font-size:16px; color:#000000; }
/* end tab accordion styling */
/* get rid of those system borders being generated for A tags */
a:active { outline:none; }
:focus { -moz-outline-style:none; }
a:hover { }
Done ... now, save your html edits, then go to the page elements --> add a gadget. and select HTML / JavaScript.
Fill this HTML code in it.
<!-- accordion -->
<div id="accordion">
<h2 class="current">Title</h2>
<div class="pane" style="display: block;">
Put Content Here
</div>
<h2>Title</h2>
<div class="pane">
Put Content Here
</div>
<h2>Title</h2>
<div class="pane">
Put Content here
</div>
</div>
<div id="accordion">
<h2 class="current">Title</h2>
<div class="pane" style="display: block;">
Put Content Here
</div>
<h2>Title</h2>
<div class="pane">
Put Content Here
</div>
<h2>Title</h2>
<div class="pane">
Put Content here
</div>
</div>
Now you already have an accordion menu tab on the web page.
Hopefully be useful.
Seandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..
Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Bagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Efek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman. 
Headline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Umumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Untuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke 
5 comments:
KENA WAT SEMUA KE?BARU DAPT?KONPIUS
Kang pujangga sebelumnya terima kasih banyak karena sudah mau berbagi... Gini kang mau nanya kok di blog saya gak bisa dipasangi widget ini yah Kang ? http://jewelrysunnah.blogspot.com/ , tapi ketika saya cuba dipasang di blog tes saya ternyata bisa kang, http://testedsite.blogspot.com/ , aduh gimana tuh kang solusinya, padahal pengen banget masang widget ini...
@Yusuf_Al_Pariamani :
Coba hapus kedua javascript yang ada di bawah ini.
<!-- End Jquery library -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
Seluruh isi dari script jquery.min.js itu sudah ada di dalam jquery.tools.min.js yang kita pakai sebagai script plugin efek accordion .
satu hal lagi :26
Anda tidak perlu meng load 2X data jquery.min.js . Itu akan menyebabkan crash dan loading web menjadi lambat.So.. silahkan hapus kedua JS tersebut yang ada pada template Blog nya yah :27
Waduh MAs, Scriptnya udah dihapus sesuai perintah... Namun masih belum Jalan MAs... Tolong dibantuin yah mas ampe bisa... hehehe Maaf Ngerepotin ^_^
Post a Comment
Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!