Tuesday, 26 May 2015

Popular Series widget Like My Blogger Tricks (MBT)

MBT Widgets by tips4tricx
Actually this widget is a Expandable and Collapsible Vertical CSS and jQuery Dropdown Menu. This menu is now using in a popular website www.mybloggertricks.com as a “popular series widget”. Many BlogSpot user wants to add this widget to their blog but it is sad news that MBT is not share this Menu or widget’s code for their blog visitor. So, I decide to make a similar widget for my blog visitor. after deciding to make this widget I start my work and then I am able to make it for a hard work. So, in this post I will give you full code of this widget. If you add this widget then your blog will more stylish, more advance and more user friendly.

Steps to add this to your blogger blog

Step 1: Adding Jquery Plugin To Your Blogger Blog Template.
To add jquery JavaScript plugin to your blogger blog follow our steps or our screenshot image bellow.
Note: If your Blog has jQuery plugin, then you don’t need to add this plugin in your blog template again.
  • Go to your blogger blog dashboard>> template Tab>> Edit Html
  • Find <head> tag inside blogger html editor
  • And then Add below line of code Before </head> tag
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

Step 2: How to add this  Expand/Collapse Menu widget to Blogger blog?

  • First of all go to your blogger Dashboard>> Layout>> Add a Gadget
  • Now Chose a “HTML/JavaScript” gadget
  • Copy all the codes given bellow and past in to the gadget
<style>
ul.container{
width:275px;margin:0 auto;
padding:0px;
}
li.menu{
padding:5px 0;
width:100%;
}
li.button a{
display:block;
font-family: Arial, sans-serif,Helvetica;
font-size:12px;
overflow:hidden;
padding:0px 0px 5px 0;
position:relative;
width:100%;
text-transform:capitalize;
}
li.button a:hover{
text-decoration:none!important;
}
li.button a span{
right:0px;
top:0px;
position:absolute;
color:#ccc;
display:block;
}
.dropdown1{
display:none;
padding-top:5px;
width:100%;
}
.dropdown1 li{
border:1px solid #7E7E7E;
color:#CCCCCC;
margin:5px 0;
padding:4px 10px;
}
.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}
.dropdown1 li a:hover {
text-decoration:none;
}
</style>
<script>
$(document).ready(function(){
$.easing.def = “easeOutBounce”;
$(‘li.button a’).click(function(e){
var dropDown = $(this).parent().next();
$(‘.dropdown1′).not(dropDown).slideUp(‘slow’);
dropDown.stop(false,true).slideToggle(‘slow’);
e.preventDefault();
})
});
</script>
<ul class=”container”>
<li class=”menu”>
<ul>
<li class=”button”><a href=”#“>Series Name Hare<span>▼</span></a></li>
<li class=”dropdown1″ style=””>
<ul>
<li>1. <a href=”#“>Post Title Hare</a></li>
<li>2. <a href=”#“>Post Title Hare</a></li>
<li>3. <a href=”#“>Post Title Hare</a></li>
</ul>
</li>
</ul>
</li>
<li class=”menu”>
<ul>
<li class=”button”><a href=”#“>Series Name Hare<span>▼</span></a></li>
<li class=”dropdown1″ style=””>
<ul>
<li>1. <a href=”#“>Post Title Hare</a></li>
<li>2. <a href=”#“>Post Title Hare</a></li>
<li>3. <a href=”#“>Post Title Hare</a></li>
</ul>
</li>
</ul>
</li>
<li class=”menu”>
<ul>
<li class=”button”><a href=”#“>Series Name Hare<span>▼</span></a></li>
<li class=”dropdown1″ style=””>
<ul>
<li>1. <a href=”#“>Post Title Hare</a></li>
<li>2. <a href=”#“>Post Title Hare</a></li>
<li>3. <a href=”#“>Post Title Hare</a></li>
</ul>
</li>
</ul>
</li>
<li class=”menu”>
<ul>
<li class=”button”><a href=”#“>Series Name Hare<span>▼</span></a></li>
<li class=”dropdown1″ style=””>
<ul>
<li>1. <a href=”#“>Post Title Hare</a></li>
<li>2. <a href=”#“>Post Title Hare</a></li>
<li>3. <a href=”#“>Post Title Hare</a></li>
</ul>
</li>
</ul>
</li>
<li class=”menu”>
<ul>
<li class=”button”><a href=”#“>Series Name Hare<span>▼</span></a></li>
<li class=”dropdown1″ style=””>
<ul>
<li>1. <a href=”#“>Post Title Hare</a></li>
<li>2. <a href=”#“>Post Title Hare</a></li>
<li>3. <a href=”#“>Post Title Hare</a></li>
</ul>
</li>
</ul>
</li>
<li class=”menu”>
<ul>
<li class=”button”><a href=”#“>Series Name Hare<span>▼</span></a></li>
<li class=”dropdown1″ style=””>
<ul>
<li>1. <a href=”#“>Post Title Hare</a></li>
<li>2. <a href=”#“>Post Title Hare</a></li>
<li>3. <a href=”#“>Post Title Hare</a></li>
</ul>
</li>
</ul>
</li>
</ul>
  • Save your widget and You are done!
Now view you blog and see it’s working fine.
customizations:
  • Replace all green highlighted “#” tag with your post link/url.
  • Now Replace all  blue highlighted texts “Post Title Hare” with your posts title.
  • And Now Replace all  red highlighted texts “Series Name Hare” with your Series name.
  • Replace the Dark Magenta highlighted code to increase or decrees the width of this widget.
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks