Add Multi Tabbed Navigation Widget In Sidebar For Blogger

Hi Friends, Today I am going to share how to add multi tabbed widget for blogger. I have seen that there are so many tutorials on the web regarding this. But as I thought these are really complicated.I am writing very easy and simple tutorial which will guide you to add this widget to your blog's sidebar.


Just Follow the simple steps :

Step 1: Go to your blogger dashboard < Layout > Edit HTML.

Step 2:And find the code </head>

Step 3: Now add the following code just before the </head> tag.

<script src='http://www.tricksmachine.com/wp-content/uploads/2010/02/tabber.js' type='text/javascript'/>
<link MEDIA='screen' TYPE='text/css' href='http://www.tricksmachine.com/wp-content/uploads/2010/02/example.css' rel='stylesheet'/>

Step 4: Now go to Layout > Add a Gadget >Page Elements, and then select "HTML/JavaScript" type.

Step 5: Now Copy the following code and paste into it and save it.

<div class="tabber">

<div class="tabbertab">
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>


<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>


<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>

That's it. You are done. Drop your comments and tell us the feedback.

CONTINUE READING ■ ■

Download WP Soul Free Professional Wordpress Theme

WP Soul is the free wordpress theme developed by Techie Souls. WP Soul is a free 2 column Wordpress Theme looks simple and elegant from the front end and offering vast Admin options at the back end. With wide variety of tune able Theme options in the admin menu you don’t need to edit .php files manually to do basic theme adjustments.

The design of the WP soul is simply cool and attractive. Just install and activate the theme and you’ll be able to adjust sidebar ads, RSS subscriptions button and form options, Author info, Twitter button integration, Header Logo image.

Screenshot :

Demo | Download

Features :

• Simple & Elegant look
• Fast loading structure
• xHTML and CSS Valid
• Supports comments threading and paging
• Fully WP 2.7.1 support
• Premium Quality
• Styled Blockquote
• Styked Sticky post
• Fixed Width
• 2 Columns
• Right Sidebar
• Many theme options
• Free of cost

Don't wait, grab this cool wordpress theme for your blog. For Installation instruction, visit the original article published by Techie Soul. All credit goes to original developers.

CONTINUE READING ■ ■

Show Related Posts with Thumbnails Under Each Post in Blogger & Wordpress.

LinkWithin is a related posts widget with photo thumbnails which will links related stories from your archive under each story on your blog.The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

The interesting things about Link Within is it doesn’t just display a list of headlines under each post, but also a thumbnail with a picture from each post, which makes it far more attractive than most of other plugins.

See the following Screenshot for details :

LinkWithin plugin is available for Wordpress, Typepad, and Blogger, though LinkWithin will also provide you with a code snippet that you can use on other blogging platforms.

Links: Download Widget | LinkWithin Homepage | Original Credits : Tricks Machine

CONTINUE READING ■ ■

How to Add Sharing is Sexy widget for Blogger

There are many more social bookmarking widgets available for blogger. But Sharing is sexy widget is more cool than other widgets. I am posting a simple tutorial to explaining the steps of adding this widget to your blog.

Follow the simple steps :

Step 1 : Sign in to Blogger
Step 2 : Go to LAYOUT -- Edit HTML -> Expand Widget Templates
Step 3 : Add the following code before </head>

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom; position:relative; width:540px; }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important; }
.sexy-furl { background-position:-300px top !important; }
.sexy-furl:hover { background-position:-300px bottom !important; }
.sexy-digg { background-position:-500px top !important; }
.sexy-digg:hover { background-position:-500px bottom !important; }
.sexy-reddit { background-position:-100px top !important; }
.sexy-reddit:hover { background-position:-100px bottom !important; }
.sexy-stumble { background-position:-50px top !important; }
.sexy-stumble:hover { background-position:-50px bottom !important; }
.sexy-delicious { background-position:left top !important; }
.sexy-delicious:hover { background-position:left bottom !important; }
.sexy-yahoo { background-position:-650px top !important; }
.sexy-yahoo:hover { background-position:-650px bottom !important; }
.sexy-blinklist { background-position:-600px top !important; }
.sexy-blinklist:hover { background-position:-600px bottom !important; }
.sexy-technorati { background-position:-700px top !important; }
.sexy-technorati:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-twitter { background-position:-350px top !important; }
.sexy-twitter:hover { background-position:-350px bottom !important; }
.sexy-facebook { background-position:-450px top !important; }
.sexy-facebook:hover { background-position:-450px bottom !important; }
.sexy-mixx { background-position:-250px top !important; }
.sexy-mixx:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-designfloat { background-position:-550px top !important; }
.sexy-designfloat:hover { background-position:-550px bottom !important; }
.sexy-syndicate { background-position:-150px top !important; }
.sexy-syndicate:hover { background-position:-150px bottom !important; }
.sexy-email { background-position:-753px top !important; }
.sexy-email:hover { background-position:-753px bottom !important; } </style>

Step 4 : Now find the code <data:post.body/>

Step 5: Now add the following code after <data:post.body/>

<div class='sexy-bookmarks'> <ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li><li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/devilrock' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li> </ul>
<span class='sexy-rightside'/></div>

Step 6: Now see the red link in the above code and replace it with your feedburner id.

Step 7: Save Template. Done.

Hope you like this post. Don't forget to pass your comments here.

Links : Original Credits

CONTINUE READING ■ ■

Download Typebased Template for Blogger & Wordpress.

The Typebased theme was created by Woo Themes and ported to blogger by the blogger Btemplates.“Typebased is a free, personal blog design, with a very clean and elegant style.”Typebased is a simple and very classic looking theme.Have a look to the demo blogs and download it.

Features :

1. Definition of colors in the panel.
2. Three main columns.
3. Customizable menu.
4. Internal Browser.
5. Prepared for advertising 125 × 125.
6. Widgetize Footer.

I am uploading a screen shot here, hope you like it. If yes, hit the download link and Download the templates and set for your blog.



Download for Blogger : Demo | Download | Wordpress : Demo | Download


Instructions:

1. Go to "Layout" and then to "Edit HTML".

2. To customize the menu look for the following code:

<li class="page_item"> <a href="#"> Edit </ a> </ li>

Replaces "edit" link with the text and the symbol "#" with the URL (web address). Copy and paste this line and edit to add more options to the menu.

3. To display the correct date, go to "Settings" tab and the "Formatting". In the section date header format, choose the last option.

4. Save the changes and it's done!

So Grab it free for your Wordpress or Blogger blogs!

Links : Blogger templates | Blogger Widgets | Blogger Tricks

CONTINUE READING ■ ■

How to Add Retweet Button To Every Blogger Post!

Twitter is the best service I use daily to drive constantly a big amount of traffic on my blog.Twitter a micro blogging service became more popular now a day most of the people becoming addict to twitter and twitter is so easy to share your short messages as tweets.Tweetmeme is a service which help you promote your blog by using the Retweet button, a simple and easy way you can integrate twitter into your blog and websites.

Follow the simple steps :

Step 1 :Goto Layout > Edit Html > Expand Widgets > Press Ctrl+F >Search For Below Codes

<p><data:post.body/></p>

Step 2:

• Paste any one of the following codes below the <p><data:post.body/></p> if you want button to appear button below the post or above the <p><data:post.body/></p> if you want button to appear above post.

Digg like retweet button with tweet count:

Add Code from this file : Link

Compact Button with Tweet Count:

Add Code From this File : Link

Step 3: Save the template and preview your blog. Enjoy.

Links : Tweetmeme Homepage | Follow me on twitter

CONTINUE READING ■ ■

Smells Like Facebook : New Blogger template download

Now download the blogger template named Smell Like Facebook. And use this template if you want to change your design and wants to feel the facebook looks.This template is free to download.

Details :

Demo | Download

THEME NAME: Smells like Facebook
THEME URI: http://www.nazieb.com/456/smells-like-facebook
DESCRIPTION: The exact Facebook clone theme for Wordpress. Based on Facebook profile page.
VERSION: 1.0.5
AUTHOR: Ainun Nazieb
AUTHOR URI: http://nazieb.com/

CONTINUE READING ■ ■

How to Disable Right click in Blogger / Blogspot ?

Have you noticed, that some web sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.

Right click on any internet browser is very important element and we must use it when it comes to copy or editing texts and etc. It’s very important when it comes to webmasters too. but some people may use it in a bad way, and you may want to make click right disabled on your blog. to protect you text, images links and etc.

To setup this tool in your blog Copy the Following code and paste it to your blog by adding a new page element.

Step 1 : Go to Dashboard > Layout > Add Gadget > HTML / JavaScript
Step 2 : Copy the following code and paste it there .

<script language="JavaScript">
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Step 3 : Save the html/javascript and view you blog.

When you will try to do right click, a message will tell you that “Function disabled” , and if you want to change this words” Function Disabled” Then simply find it in code and replace it.

Don't forget to drop you comment here.

CONTINUE READING ■ ■