Senin, 13 Maret 2017
Beautiful Accordion Menu Widget For Blogger
Accordion is a musical instrument which can be played by compressing or
expanding a hand-held bellows. Likewise, the Accordion interface is a
stacked list of items in which each item can be expanded and collapsed.
Here I'm presenting you the code for creating a pretty Accordion widget
for your Blog. First you need to make sure that Jquery is added to your
template.
Navigate to your Blog's Dashboard --> Template --> Edit HTML.
Press Ctrl+F and search for <head>.
Add the below code under <head> and save the template.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
Now access Layout from the left menu and click Add a Gadget.
Select HTML/Javascript.
Copy and paste the following code. You can put a title if you want and click Save.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Select HTML/Javascript.
Copy and paste the following code. You can put a title if you want and click Save.
<div id="accordion"><ul><li><h3>Main Heading 1</h3>
<ul><li><a href="http://samplescriptmenu.blogspot.co.id/">Sub Heading 1</a></li>
<li><a href="http://samplescriptmenu.blogspot.co.id/">Sub Heading 2</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 3</a></li></ul></li>
<li><h3>Main Heading 2</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 4</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 5</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 6</a></li></ul></li>
<li><h3>Main Heading 3</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 7</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 8</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 9</a></li></ul></li>
<li><h3>Main Heading 4</h3>
<ul><li><a href="http://anjanadesigns.blogspot.com">Sub Heading 10</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 11</a></li>
<li><a href="http://anjanadesigns.blogspot.com">Sub Heading 12</a></li></ul></li></ul></div>
<style type="text/css">#accordion {margin: 0;padding:0; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; width: 250px;} #accordion h3 {font: 15px Arial; padding: 9px; color:#fff; cursor: pointer; background:#FF0080 ; border-bottom:1px solid #fff;} #accordion li {list-style-type: none; padding:0; margin:0; background-color:#f4f4f4;} #accordion ul ul li a {border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color: #3b3b3b; text-decoration: none; font: 12px Verdana; display: block; padding: 8px 0 8px 8px;} #accordion ul ul li a:hover {padding-left:15px; background-image:url(http://4.bp.blogspot.com/-jxfJ5gu2Awo/VEnYYEWxE2I/AAAAAAAAHZ8/B_mVrXyBmN4/s1600/pink.png); background-position:left; background-repeat:no-repeat;} #accordion ul ul {display: none;} #accordion li.active ul {display: block;} #accordion ul{list-style:none; margin:0; padding:0;}</style>
<script>$(document).ready(function() { $("#accordion h3").click(function(){$("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Important:
To change the color of Accordion, change the values in Pink,
Replace "http://samplescriptmenu.blogspot.co.id/" with your link.
Author: Kacam "herdiz72" Suhendra
Saya adalah penyuka Blog sejak lama dan berharap bisa berbagi ilmu yang ada dan mendapatkan Side Income dari Blog yang saya buat.. Read More →
Menu Accordion Di Sidebar
Caranya :
1. Login ke akun Blogspot anda, Pilih Template ( Tema ) --> Edit HTML
2. Copy Paste kode dibawah ini sebelum kode </body >
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('#sidebar .widget-content').hide(); $('#sidebar h2:first').addClass('active').next().slideDown('slow'); $('#sidebar h2').css('cursor', 'pointer').click(function() { if($(this).next().is(':hidden')) { $('#sidebar h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); //]]> </script>
3. Kode diatas adalah kode Default untuk template Blogger Standar. Dan apabila
kode diatas tidak berhasil silahkan ganti yang warna merah sesuai dengan
div id dan tag headingnya pada sidebar template sobat.
4. jika sudah Fix , silahkan di Save.
Hasilnya bisa sobat lihat tampilan Menu Sidebar Blog ini.
Terimakasih.
Author: Kacam "herdiz72" Suhendra
Saya adalah penyuka Blog sejak lama dan berharap bisa berbagi ilmu yang ada dan mendapatkan Side Income dari Blog yang saya buat.. Read More →
Langganan:
Postingan (Atom)
0 komentar: