Create tab menu accordion for blogspot

Pujangga Blogs

09 May 2011

Create tab menu accordion for blogspot

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(){
$(&quot;#accordion&quot;).tabs(&quot;#accordion div.pane&quot;, {tabs: &#39;h2&#39;, effect: &#39;slide&#39;, 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 { }


Done ... now, save your html edits, then go to the page elements --> add a gadget. and select HTML / JavaScript.
blogger

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>


Now you already have an accordion menu tab on the web page.
Hopefully be useful.

9 comments:

eyna afieyna on May 10, 2011 at 5:19 PM said...

KENA WAT SEMUA KE?BARU DAPT?KONPIUS

Yusuf_Al_Pariamani on June 6, 2011 at 5:36 AM said...

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

Pujangga on June 6, 2011 at 5:43 PM said...

@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 .

Pujangga on June 6, 2011 at 5:46 PM said...

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

Yusuf_Al_Pariamani on June 6, 2011 at 8:45 PM said...

Waduh MAs, Scriptnya udah dihapus sesuai perintah... Namun masih belum Jalan MAs... Tolong dibantuin yah mas ampe bisa... hehehe Maaf Ngerepotin ^_^

i Post on June 21, 2012 at 4:25 PM said...

ane coba dulu dahh

Anonymous said...

Hello would you mind letting me know which webhost you're utilizing? I've loaded your blog in 3 different internet browsers and I
must say this blog loads a lot faster then most. Can you suggest a good internet hosting provider at a
honest price? Thank you, I appreciate it!

Here is my weblog: 1285 and Elevate GF

Anonymous said...

My brother recommended I might like this web site.
He was entirely right. This post truly made
my day. You cann't imagine simply how much time I had spent for this information! Thanks!

Feel free to visit my webpage :: Elevate GF review

sherlina halim on September 15, 2015 at 8:24 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya 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..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google 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.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek 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.
Membuat Headline Post widget tooltipsHeadline 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.
Membuat Number Page Navigation jQueryUmumnya 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.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment