Sunday, December 23, 2012

Mybloggertricks(MBT) like blogger comment(Expand/collapse)

Implementing Jquery Toggle Effect

1. Go to blogger dashboard --> Template --> Edit Html ( Tick the Expand widget Template option).
2. Find for <head> tag and place the following peace of code just below it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_box&quot;).hide();
$(&quot;h3.expand&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
</script>
h3.expand is the class for your comment form headline that expands the contents[toggle_box] upon the mouse click on it.
Here toggle_box is the class of your comment form contents i.e., the content that should be displayed when expanded.

Style for toggle element and its content box

3. Now find(Ctrl+F) for ]]></b:skin> and place the following peace of style code just above it.
/*----- Toggle Comment Form by http://blogg-tricks.blogspot.com ----*/
h3.expand {
background: url(http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/AAAAAAAAIAw/ekWT8oI7JZw/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 1.4em;
font-weight: bold;
text-align:left;
border-radius:4px;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_box {
padding-left:10px;
overflow: hidden;
clear: both;
}
The Css style for the visible,active header and the content box is specified above. You can however easily modify it as you wish.

Adding Html Code

4. Now find for the following code.
<b:includable id='comment-form' var='post'>
5. Paste the following peace of code just below it.
<h3 class='expand'>Click Here To add Comment</h3>
<div class='toggle_box'>
<div class='block'>
6. Paste two div closing tags just before its closing includable tag as shown below.
<b:includable id='comment-form' var='post'>
<h3 class='expand'>Click Here To Add Comment</h3> 
<div class='toggle_box'> 
<div class='block'>
<div id='bt-form'>
<a name='comment-form'/><br/>
<h4 id='comment-post-message'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='580px'/>
<data:post.iframeColorizer/>
</div>
</div> 
</div>
</b:includable>
 7. Finally Save your template and view your comment form.

CoolMax


This Is a Three Column Blogger Template with a Left-Right Sidebar.The Template Colors Are mainly White, Black and Grey.The Templates Features Include Web 2.0, Adapted from word press, elegant, fresh, magazine, cool, fixed width, left sidebar, right sidebar, featured section, slider, three column footer, tabbed widget and top navigation bar .

Author Name and URL : Lasantha Bandara
Original Designer URL : http://fthemes.com/coolmax-free-wordpress-theme/

Template Help And Installation :

1. How to Install Blogger Template
2. Customize your template
3. How to Use This Template and customizations to be done 

Configure Meta tags
Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below codes :

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

Replace DESCRIPTION HERE,KEYWORDS HERE as below.
DESCRIPTION HERE:Write your blog description
KEYWORDS HERE:Write the keywords of your blog separated by comma.

How To Configure Favicon:
 
Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.

Configure Featured Content Slider:

Login to your blogger dashboard--> layout- -> Edit HTML.Find <!-- Featured Content Slider Started -->.Now scroll down slowly and you can see each featured slide codes between <div class='fp-slides-items'> and </div> .
Now replace,
  • "This is default featured post X title" with your featured post title.
  • "#" with your featured post URL.
  • "Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." with your slider description.
  • Slider image address with your slider image.
for each featured slide.

How To Change Tab Names of Tab Widget
If you want to change your tab names of your tab widget then find this:

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>

Now change the names "Popular", "Tags" and "Blog Archives" as you like.

How To Add a Header Logo

You can add a header logo for this template easily in the "Page Elements" section(Blogger Default Method).Logo image size must be 342px width and 54px height.
If you have any problem regrading this template,leave a comment below.
Important !!!:
Please do not remove the footer credit. I spend several hours to create this blogger template. So that you can use it for your blog. All I ask is, stay the credit intact.







Tequilas - Photo Blog Black Template


Style - This is a four column template suited to Photography blogs or blogs with subjects repesented by images.The homepage displayes a image from each post with the title which can be clicked to see the full post.The templates uses a black color sheme and also has a four column footer section.

Designer - Be-Insight

Template Help And Installation :

1. How to Install Blogger Template
2. Customize your template
3. How to Use This Template and custamizations to be done 






Simply Delicious

Simply Delicious Is a One Column Blogger Template with No Sidebar.The Template Colors Are Bright and mainly white.The template has a minimalist design with a one column layout.The first post is large working as a featured post.Other posts are displayed by a thumbnail.You can download This One Column Blogger Template for Free from BestBloggerTemplates.Net.

Template Help And Installation :

1. How to Install Blogger Template
2. Customize your template
3. How to Use This Template and custamizations to be done 





How To Enable Threaded Comments on Blogger / Blogspot

Blogger Threaded Comments. Finally Blogger has launched new threaded comments. Threaded commenting should make it easier for you to respond to individual comments. Blogger threaded comment system is only two levels deep, meaning you can only reply to original comments, and not to comment replies . But I guess it’s a good start. Let's wait for new update from Blogger.


How To Enable Threaded Comments on Blogger / Blogspot

As mentioned on Blogger buzz official site, you have to setup your blog. “Blog Feed” set to “Full”, and are using “Embedded” comments, then you’re ready to start a discussion with your readers.

Blogger New Interface


1. Go to Dashboard , select your blog.
2. Go to Settings > Posts and Comments
3. Comment Location option set to Embedded

 

4. Go to Settings > Other
5. Allow Blog Feed option set to Full




Old Blogger Interface

1. Go to Dashboard, select your blog.
2. Go to Settings > Comments
3. Comment Form Placement option set to Embedded below post

4. Go to Settings > Site Feed
5. Allow Blog Feed option set to Full


STILL NOT GETTING THREADED COMMENTS?

If sou still not getting threaded comments, let's two alternative method for Standard Templates and Custumized Templates.

Standard Templates


1. Go to Design > Edit HTML 
2. Click on Revert widget templates to default link

You can do this step for Costumized Templates, but this will Discard the all Changes Widget and revert to Default.

Custumized Templates

1. Go to Template > Edit HTML
2. Click on Expand Widget Templates check box
3. Find the Following code
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
4. You will get two results. Replace both code with following code
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
5. Save the Template!

Still getting problem? Share your comment here!

Tuesday, December 11, 2012

How To Put Your Blog Name In "AddThis" Menu?

AddThis is a great social share widget that contains links to over 350+ social media networks where visitors can share your blog post with friends and can also bookmark it. You can in fact customize the  AddThis menu by putting your website name in it and you can also change its background colour. This will help users know that they are using a service you approve of, and this will help encourage more use of this great tool. The more shares your post receives the better the page views.


Adding AddThis Button To Blogger

You can add different styles of add this widgets to your blog by visiting the AddThis website. We later will learn how to put your blog name in it and change the background color. Kindly get your AddThis code and then follow the steps below to add your AddThis button to blogger.
     1. Go To Blogger > Design > Edit HTML
     2. Backup your template
     3. Check the "Expand Widgets Templates" Box
     4. Search for <data:post.body>
     5. To add the AddThis button below post titles then add your addthis code above <data:post.body> else paste it below it so that the button may appear at the bottom of your posts.
     6. Save your template and you are done!

 

How To Customize The AddThis Menu?

                1. Go To Blogger > Design > Edit HTML
                2. Backup your template
                3. Search for </head>
                4. Just above it, paste the following code,
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;BLOGG-TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
  • Replace BLOGG-TRICKS with your blog name
  • Replace #ffffff with Font Color. Our Color Generator tool can help you.
  • Replace #0080FF with your preferred background color.
               5.  Save your template and see the branded change. Enjoy! :>

Add Sexy Social Sharing Buttons To Blogger

Social networking now accounts for 22% of all time spent online in the US.Many persons are using social media to promote there business, one social share can drive flood of traffic to your blogs.Adding social media buttons to blogger is not a big deal but if you will add eye catching social sharing buttons then it increase chance to get more share on your post.In this post I will give you "Sexy Social Sharing Buttons" which is create with help of pure css3.


Adding Sharing Buttons To Blogger

  • Go To Blogger Dashboard
  • Click Edit HTML > Proceed > Click the Expand Widget Templates Box
  •  Search <data:post.body/>
  • Just below <data:post.body/>  paste the following code
<b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://lh6.googleusercontent.com/-qXQfMpK5yyM/UBgnVp-zyWI/AAAAAAAAFb0/GRnVp4eqO1g/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://lh3.googleusercontent.com/-XoczCzeugFg/UBgnW9gfOMI/AAAAAAAAFcg/N9qWk37w_SA/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://lh3.googleusercontent.com/-XZA2IVaxutU/UBgnV81TTMI/AAAAAAAAFb8/5-SxVYGD3WU/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://lh6.googleusercontent.com/-Hfy8WKpzfKc/UBgnWW00Z8I/AAAAAAAAFcM/5ppIBhBfhUo/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://lh5.googleusercontent.com/-D89Zc49MpsM/UBgnWuUueaI/AAAAAAAAFcY/EhOMIXDHPTY/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://lh5.googleusercontent.com/-8YgPtME6n9U/UBgnVlFappI/AAAAAAAAFb4/TJRielU0dVU/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://lh6.googleusercontent.com/-4yZnL9kjU9w/UBgnWDrtReI/AAAAAAAAFcE/WbW8M0G1QTE/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://lh5.googleusercontent.com/-BVN-XnkL53g/UBgnWdIXDBI/AAAAAAAAFcQ/v4GRUCSsPLA/s50/reddit.png); }  ul.social li.technorati { background-image:url(http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>

  • Now Click On Save Template Button And Enjoy This Awesome Widget.
If you have any problems tell me in the comments.

Sunday, December 9, 2012

How to Add Retweet Button to your Blogger Posts

Since Twitter is getting huge popularity these days, adding a cool Retweet Button to your Blogger blog posts can easily get you some decent amount of traffic and promote your content/products to large people in quick time. If you have tons of followers, then you can easily milk it.. ;)

So, here is how to add a nice Retweet button to your blogspot blog posts:

There are two versions of retweet buttons.. one is the default one (looks like digg button) and the other one is Compact version which can fit in small space..

twitter retweet button for blogger


The Code for the Default version is :



<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

and for Compact version is :



<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>


Here is how to add them to your blogger post..

If you want it to the left side of blog post..

twitter retweet button aligning left

Find



<data:post.body/>

And Paste this code BEFORE that line..


<div style="float:left;padding: 6px 10px 6px 0px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>

If you want it to the Right Side of post..

adding retweet button on the right side of blog post

Find



<data:post.body/>

Add this code BEFORE that line..



<div style="float:right;padding: 6px 0px 6px 6px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>


Note: In the above two cases, if you want Compact button instead of default style, Just simple replace the default style code with compact one (refer step 1)

Finally SAVE THE CHANGES!

How to add Blogger Share Buttons to Custom Blogger Templates

Recently, Blogger released their new Share Buttons feature which makes it easier for your Blog visitors to bookmark, tweet, fshare, email ,etc your post.

But, if you're using any custom blogger template.. you may not see the widget appearing in blog..even though you activate it.

So, if you have that problem. here is how to fix it.
(before making any changes..first backup your template)

1. Sign into Blogger > Design > Edit html
(tick the expand widget templates)

2. Add this line anywhere you want the widget to appear

<b:include data='post' name='shareButtons'/>


Normally, in most templates, you can add it after this line..

<p class='post-footer-line post-footer-line-1'>


If you don't find that above line in your template....
Find this one.

<p><data:post.body/></p>
 
and add this code after that line..

<p><data:post.body/></p>
<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div>


Note: If you're using Magazine style blogger template, You can find the data:post.body line TWO TIMES.. So, try in both ways and find out which one is working..and remove the other one.

Finally..Save the template!

If you still don't see it in your Blog, Make sure..you activated it by going to
Blogger dashboard > Design > Click the 'edit' button of the Blog post section.


Saturday, December 8, 2012

Create Blogger Backup For Images And Get Image URLs

Many bloggers including some professional ones suggest to store Blogger images on services like www.Photobucket.com , www.tinypic.com etc. but I really don’t understand why would someone do that when one has unlimited Image storage and bandwidth inside Picasa web albums that is where Blogger saves all your images. Well its time to change the way people use Blogger and we are here to let you help make better use of resources available to you.


Today I will share a different way of managing all your images in blogger by letting you know how to create a Backup for all your images and we will also learn how to get Unique URLs for images. This tutorial will also help you in reducing your blog load time by 40% i.e 150-200kb
To create an Image Backup you will need to do the following,

  • Go To Blogger
  • Create a draft Post and name it Backup For Images
  • Now start uploading all your images to blogger using the normal method. These images can be images that you have saved elsewhere and have link to it in your blogger template. For example: Background Image, Sidebar Headers, Icons, Header Background etc. If you scan your template you will find many image URLs inside the CSS part that starts from <b:skin> and ends at </b:skin>. An image URL/link can end as .gif  | .png  |  .jpeg   |  .bmp etc. Open each URL/link in your browser and save the image in your Hard Drive by right clicking on it and then choosing “Save Image As”
  • Once you have uploaded all your images, your backup will look like that of mine,
BACKUP FOR IMAGES

  • Now Comes the interesting part. In order to get Image URLs and use them somewhere inside your blog template or sidebar widgets, you will need to do the following,

      Make sure you are using Firefox Browser Click the Preview Link at the top-right corner of your Backup post
    Preview-link
    Once the images are displayed below the draft post, simply right click on your desired image and then choose “Copy Image Location”
      Copy-Image-Location
    Now paste this Image URL inside your Browser Address bar,
Paste-Image-URL-in-Browser-
  • Your Image URL will look something like the one below,
http://4.bp.blogspot.com/_7wIwo/Spr1Lxjk6I/AABu0/uS0zY4/s400/MyBloggerTricks.jpg
The important part in this link is s400 . If you want the image to appear in full size then change s400 to s1600 . The image will appear in its original size.
Now this is how I store all my images and get their unique URLs. This way you will never loose images. By adding such image URLs to your blogger templates, you will observe a significant decrease in the load time of your blog.

Tuesday, November 27, 2012

Add 4 in 1 Social Subscribe widget for blogger using widget generator

If you don't have a space for your social subscribing widgets then don't worry.Here I have a solution with this problem.Hide and show them out with smooth jQuery slide out hover effect.his 4 in 1 slide out widget contains a floating facebook like box,your recent tweets,Google +1 button and feedburner email subscription form means all in one :).Here I am providing a widget generator so that you don't need to edit any code,just change my username with yours hit the generate button and finally add the widget.This script for this widget is created by Nitin and we developed the widget generator.

How To Install This Widget To Blogger?

Step :- 1
Ignore This Step If you have already Ajax 1.4.2 jQuery plugin in your template
  • Go to Blogger>>Design>>Edit HTML
  • CTRL + F To Find </head>
  • Copy and Paste Below Code Just Above  </head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Step : -2
  • Replace my usernames with yours
  • Click On “Generate” Button
  • Click On “Preview” button, if you want to show you customized settings..
  • Finally Click On “Add To Blogger” Button

 

Animated Flash Label Cloud Widget Generator For Blogger

Flash Animated Label Cloud Widget(Blogumus) for blogger was awesome widget to show blogger labels in alternatively. This widget is Designed for Word Press, and Now it is available for Blogger.I a have created an widget generator so that it is easy for you to add.



Live Demo

How to add This Widget


Note:- Back Up Your Template before Going to do this for safety
 

  • Login to Blogger account
  • Goto Design section > Edit HTML
  • Search Bellow Tag (press Ctrl + F to search)
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  •  Add Generated Widget Code Just after it
OR
  •  Search Below Code
</b:section>

  • Add Generated Widget Code before it
  • Now save your template And check your blog 
  • Use our Hex Color Code generator to get Hex codes of the color you want.

Widget Generator

Reposition Navigation Buttons in Blogger!

reposition navigation links in bloggerThe navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.


We played a work around and used Cascading stylesheet Position properties to allocate fixed positions to these buttons anywhere on the page. This is again a unique addition to Blogger Customization and being implemented for the first time. The tutorial today will not only help you change the position of navigation links but will also teach you to install a custom sticky bar just like the one we are using on our blog. We are pretty sure you will find today's tutorial really easy yet delicious!
PS: Tested with Chrome, Firefox, IE9 & Safari.

STEP1: Adding the sticky bar

First comes first. I have already shared a detailed tutorial on adding a stickybar to blogger. Please first install a stickybar on your blogs and then try step#2 of today's tutorial.

STEP2:

Now comes the interesting part. What we will do here is simply shifting your current Newer, Older & Home buttons to the top left of the stickybar and replace them with more fancy buttons like the one we are using.  Follow these steps:
  1.   Go To Blogger > Template
  2.   Backup your template
  3.   Click Edit HTML and then check "Expand Widget Templates"
  4.   Search for the following CSS classes and delete them all: You will find three such classes or more starting with either #blog-pager or .blog-pager
#blog-pager {
------
}

#blog-pager-newer-link {
----
---
--
}
#blog-pager-older-link {
-----
---

--
}

   5.   Now after you have deleted them, add the following code in their place:
#blog-pager {
text-align:center;
}
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-320px;
top:0px;
margin-top:5px;
}
#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-290px;
top:0px;
margin-top:5px;
}
#blog-pager-more-link {
position:fixed;
z-index:9999;
margin-left:-20px;
top:0px;
margin-top:5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-627px;
top:0px;
}
#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-597px;
top:0px;
}
}

What we did in step4 and step5 was simply replacing your old code with the new one.
    6.   Next search for the following chunk of code:
Note: You are only concerned with finding the two highlighted codes. The code inside them may look different for your template so just finding these two highlighted tags and then follow step7.
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous'>&#171; Prev</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next'>Next &#187;</a>
      </span>
    </b:if>
<span id='home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>
     7.  Replace the code inside them with the following code as shown below:
<b:includable id='nextprev'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-more-link'>
      <a class='blog-pager-more-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='http://1.bp.blogspot.com/-whIMns4UpN8/UK_q6wakttI/AAAAAAAAIDk/_9FVAL_ZzfY/s400/more.png'/></a>
      </span>
      </b:if>
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><img src='http://4.bp.blogspot.com/-yRqah4QUOi4/UK_MOr5c7FI/AAAAAAAAIC8/kIWQMZ4ZjKI/s400/Previous.png'/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='http://4.bp.blogspot.com/-dFkkMMu_G3g/UK_MPKM-2pI/AAAAAAAAIDI/p1N6cGtZhz4/s400/Next.png'/></a>
      </span>
      <b:else/>
 
    </b:if>
  </div>
  <div class='clear'/> </b:if>
</b:includable>
It was that easy!
   8. All done! Visit your Blog to see it functioning just fine. :)

How it works?

Previous Previous will display newer posts
Next Next will display Older posts
more More will display on homepage alone.
  • Button More is responsible for displaying the next set of previously published posts. It will show a bunch of posts depending on the number of posts you allowed to be displayed on homepage.
  • The other two buttons will help the visitor to navigate between next and previous page. If the visitor is on your newly published post then the Previous button will not show up and Next will show alone.
Everything is operated using conditional statements provided by XHTML 1.0.

How to Create a Stickybar with "Close Button"?

The Stickybar or fixed Bar that we released was warmly welcomed. What we all have been searching for was a Close Button or Cancel button that would hide the bar display. May be not every visitor enjoys viewing that fixed bar at the top, so they deserve to be provided with an option to view or hide the bar. While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!

Create a Sticky Bar With Close Button in  Blogger

Follow these easy steps:
     1.   Go To Blogger > Design > Edit HTML
     2.   Backup your template
     3.   Search for this
]]></b:skin>

    4.   Just above it paste the following CSS code,
#mbt_bar{
background:#333 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}

    5.    Next search for </head>   and paste the following Javascript code just above it

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>
   6.     Finally search for <body>  and just below it paste the following HTML code
<div id='mbt_bar'> WRITE YOUR TEXT HERE <span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

    To write an announcement, update news or notice to readers, just replace the yellow highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link.
    7.     Save your template
    8.     You are all done!
Visit your blog to see it fixed to the top just beautifully with a close button waiting to be clicked!

How it works?

The close button when clicked triggers the function closeTopAds();  which then searches for function definition. The function is defined such that it sets visibility of bar to hidden. That's how the bar hides once the button is clicked and reappears only upon page refresh. Indeed a pretty neat way to make a user friendly bar.

Monday, November 19, 2012

How To Submit Blogger Sitemap To Google Webmaster

Google is the most popular search engine and number of webpages indexed by Google is uncountable. To make Google find, index and rank your site you need to submit your sitemap of your site to Google Webmaster Tools. Google Webmaster is a good SEO tool to use. You could also keep track of your sites statistics with the help of Google Webmaster Tools. As a new blogger you may not know how to submit your blogger sitemap to Google Webmaster Tools. Here I am to help you.





Steps To Submit Blogger Sitemap To Google Webmaster:-

1) Go to http://www.google.com/webmasters/

2) Sign in to Webmaster Tools with your gmail id and password



3) You can see now a thumbnail and a link of your site. Click on the anyone of them to go to Dashboard of Webmaster Tools.



4) Click on Sitemaps


5) Click on ADD/TEST SITEMAP

Use Sitemap Generator Tool to generate your sitemap

Copy and paste the url of your sitemap in the space provided.


6) Click on Submit Sitemap and refresh the page

Your webpages are submitted and waiting to be indexed.

When you login to your Google Webmaster days later, you should be able to see the indexed pages and statistics of your blogger.

Wednesday, October 24, 2012

How To Create Wordpress Subscription Form?


This Widget Was Created by
It's a long time since we last released a widget. The widget today is really a useful one. It is a smart container which displays the total number of subscribers, contains RSS link, Facebook link and Twitter link. It also contains a beautiful subscription form where visitors can submit there emails to receive free website updates. This Widget is made Compatible to work with all browsers especially with IE8.
I named it Wordpress Subscription Form because you might have seen such widgets on every Wordpress blog and Blogger lacks it.

How To Create Wordpress Subscription Form?

The steps are made really simple. Follow these,
  1. Go To Blogger > Design
  2. Select an HTML/JavaScript Widget
  3. Paste the code below into the widget

<style>.mbtbar{width: 100%; float: left;}.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;} .mbtbar .subicons a{text-decoration: none; color:#333333;} .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://2.bp.blogspot.com/-39kJ8qyqrVs/TdpYPqKjAhI/AAAAAAAADf8/FDkLDuCwF7E/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://4.bp.blogspot.com/-6_H2QDYGHpI/TdpYPF7LYmI/AAAAAAAADf0/wBev_aveLGw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}.mbtbar .subicons .twittericon{background: url(http://3.bp.blogspot.com/-rbsZjAPUA2c/TdpYQO7m2zI/AAAAAAAADgE/VLRVbnICkZA/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}.mbtbar .emailsub .emailicon{background: url(http://2.bp.blogspot.com/-h72a-fyDTWw/TdpYO0gOhRI/AAAAAAAADfs/s-5_Ckdp-bQ/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE  0%,#0080ff  100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE ),to(#0080ff )); border: 1px solid #0080ff ; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} </style><!--[if IE 7]> <style> .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff ; border: 1px solid #0080ff ; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; } </style> <![endif]--><div class="mbtbar"><div class="count">Join <span class="bigcount">feed count </span> People Following blogg-tricks</div><div class="subicons"><div class="rssicon"><a href="http://www.blogg-tricks.com/feeds/posts/default " target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/p.harieksh " target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/harikesh409 " target="_blank" rel="nofollow">Twitter</a></div></div> <div class="emailsub"> <div class="emailicon">Stay Updated via Email Newsletter</div> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogg-tricks ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="blog-tricks " name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>
   4.  Save the widget and you are done! 

How To Style and Edit the Widget?

 Follow these,
  • To Change the the Blue Colour of the Submit button Change #57ABFE to a Light shade and this #0080ff to a dark shade. Our Colour Generator Can help in this case.
  • Replace feed count with your Feed count and always update it manually once a week. To change its colour edit this #F17C18 
  • Replace http://www.blogg-tricks.com/feeds/posts/default with your feedburner RSS Feed link.
  • Replace http://www.facebook.com/p.harieksh with your Facebook profile  Link
  • Replace http://twitter.com/harikesh409 with your twitter profile link
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=blogg-trickswith your feedburner RSS Email Link
  • Replace blogg-tricks with the Feedburner RSS Email Title which is always written at the end of your FEED Email Link as shown below,
http://feedburner.google.com/fb/a/mailverify?uri=blogg-tricks  

I would be really pleased to hear about your suggestions and feedback. If you faced any trouble then do not panic and let me know :>


Create a Simple "Tree Menu" in Blogger

Ever wondered to create an expandable Tree menu in a simple one step method? There we have it today! A Tree Menu is different from other navigation menus that we have released so far. It has has branches and sub-branches. You can add links to it or even simple text and hang it on your blog sidebar. It helps to organize data in a hierarchal method. Most often we use tree menus for displaying blog archives. It contains a Expand and Contract Link that collapses and shrinks the tree branches. So lets add this beautiful menu to blogger blogs in easiest possible way.

  1. Go to blogger > Design
  2. Choose HTML/JavaScript widget
  3. Paste the following code inside it,
<style>
.treeview ul{
margin: 0px;
padding: 0;
}
.treeview li{
background: white url(http://4.bp.blogspot.com/-f4QzW6d76aU/Tn9IBB_6TjI/AAAAAAAAFKY/VYsHOUIj1YY/s400/list.gif) no-repeat 0px 3px;
list-style-type: none;
padding-left: 32px;
margin-bottom: 3px;
}
.treeview li.submenu{
background: white url(http://1.bp.blogspot.com/-G-iMIGNRlSA/Tn9IA-OsMbI/AAAAAAAAFKQ/gFiUd148Gg8/s400/closed.gif) no-repeat  0px 3px;
cursor: hand !important;
cursor: pointer !important;
}

.treeview li.submenu ul{
display: none;
}
.treeview .submenu ul li{
cursor: default;
}
</style>

<script type="text/javascript" >
var persisteduls=new Object()
var ddtreemenu=new Object()
ddtreemenu.closefolder="http://1.bp.blogspot.com/-G-iMIGNRlSA/Tn9IA-OsMbI/AAAAAAAAFKQ/gFiUd148Gg8/s400/closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="http://1.bp.blogspot.com/-2W6GYBm14zE/Tn9IA5eESXI/AAAAAAAAFKI/YgXt-Vergv0/s400/open.gif" //set image path to "open" folder image
//////////No need to edit beyond here///////////////////////////
ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}
ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}
ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}
ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}
ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}
////A few utility functions below//////////////////////
ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}
ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}
ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
</script>


<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand  +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Contract</a>
<p></p>
<ul id="treemenu1" class="treeview">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>

<li>Folder 1
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>

<li>Folder 2
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li>Folder 2.1
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        </ul>
    </li>
</ul>
</li>

<li><a href="#">Item 4</a></li> </ul>

<script type="text/javascript">
//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)
</script>

The yellow part is our concerned code of study:
  • Replace # with Link's URL
  • Replace Item 1, 2 ,3 with your Link Title text
  • To add a new link simple add the following code just above </ul>
<li><a href="#">Item 5</a></li>
  • To create a sub menu then add this code just above </ul>
<li>Main title 
    <ul>
    <li><a href="#">Sub title 1</a></li>
    <li><a href="#">Sub title 2</a></li> 

<li><a href="#">Sub title 3</a></li> 
    </ul>
</li>

Just remember that a link line starts with <li> and ends with </li> tag.

    4.   Save your widget and you are all done!

Visit your blog and see a drop down Tree Menu handing on your sidebar. If you faced any difficulty or if you want any help in creating more menus and sub menus then please do not hesitate to leave your comment. I hope this proves helpful for most of you. Peace out buddies! :)