Add CSS Based Social Bookmarking Widget To Blogger Blogs & Websites

Never thought this EID would turn the best designing period of my life. After a lot of trial and error I managed to create a social bookmarking Icons widget using advanced CSS technique. I had consulted a lot of my friends on how to give an hover effect to social bookmarking icons below blogger posts using simple CSS but all methods that were suggested unfortunately did not help. I worked hard using the MBT HTML Editor to find out a way and luckily returned with a successful and unique CSS code that made my EID day an ever forgettable one!

Kindly have a demo of this widget before reading the tutorial. Remember to Hover your mouse cursor over the icons.

Social Bookmarking Widget For Blogger

This widget uses a total of 20 Icons but believe it or not it is super-fast and loads with in seconds. I merged all 20 Icons into one big image and used CSS Image stripes technique to make the icons appear at right positions. Fortunately this saves a lot of load time, because the browser will load all images at once and doesn’t need to contact the image server several times for uploading the images.

This is the big image I used,

Now lets add them below each post in blogger ,

1. Go To Blogger > Layout > Edit HTML
2. Search For ]]></b:skin>
3. And paste the code below just above ]]></b:skin>

/*--------MBT Bookmarking Widget (CSS#1)------*/
.mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:left;
background:transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SxYPky2M4VI/AAAAAAAACcs/SGTHHyAiZ4A/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}

     4.     Now Check the box “Expand Widget Templates” at the top-right-corner

     5.      Search for this code <data:post.body/> . If you can not find it then search for this one <p><data:post.body/></p>                                     (Tip:- Press Ctrl + F)

     6.      Just below <data:post.body/> OR <p><data:post.body/></p>, paste this code,

<!--MBT Bookmarking Widget (HTML)-->
<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :&gt;'/>

<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</b:if></div>

 

You can replace the bolded text in green with any statement you like. You can also change the text colour i.e #289728 with any colour you like. Use our Color Chart for this purpose.

   7.     Now Finally save your template and view your blog to see a colorful bookmarking widget just below all your posts :>

That’s All!

If you want larger icons approximately about 64px by 64px in size, then paste the following code just above ]]></b:skin>  for step#3 instead.

/*--------MBT Bookmarking Widget (CSS#2)------*/

.mbt-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:left;
position:relative;
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SxYfHuF_iwI/AAAAAAAACc0/SV0a0a3nAqk/s1600-h/flapper2.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.mbt-bookmarking a.digg {
background-position:0px -114px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -171px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.mbt-bookmarking a.technorati {
background-position:0px -570px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.mbt-bookmarking a.twitter {
background-position:0px -684px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.mbt-bookmarking a.facebook {
background-position:0px -456px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.post-bookmark a.reddit {
background-position:0px -342px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -798px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.mbt-bookmarking a.rss {
background-position:0px -912px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -969px;
}

 

For this tutorial I used “The Flapper” Icon Set

Do let me know how useful was this tutorial for you. Take care!

Releasing Two Column Blogger Template “The Cute Box” - Speedy Yet Professional!

I was on EID holidays and during these three days a part from spending some time with my family and friends I spent a portion of my time in designing a really cute and speedy “two column” Blogger template. I named it “Cute Box”. It is unbelievably fast loading, well optimized, monetization friendly, has an attractive magazine style look and is surely cute!

Let’s not waste any time and have a look at it, (The Screenshot may be different from actual demo)

View | Download

 

Features

Lets look at some of its Main features,

1. Spitted Header
2. Two Column
3. Well organized Post Heading with separate date, time and label sections
4. Wide Post body with Stylized BlockQuote
5. Bullet lists with Image Hover Effect
6. Post Footer With Seductive Social Bookmarking Icons –The Flapper!
7. Post Footer With Related Post Widget
8. Posts summarized With Read More link
9. Embedded and stylized Comment section. Author and Readers comment with different style
10. Wide Open Comment Form!
11. Comment Avatars
12. Flexible Search Box
13. Unique Subscription Form
14. Best Advertisement sections
15. Four Column Footer Widget. One Column Can accommodate as many widgets as you can add!
16. Stylized Author Profile 
17. Bookmarking Widget For Homepage
18. And So on…

The bolded features are those that are found in 1/10,000 blogger templates found in the blogosphere. I am not kidding!

Customization

Below are important precautionary and customization steps for Cute Box . Click each link for details.

1. Back Up your current Blogger template
2. Back Up your Blogger widgets
3. Upload Cute Box
4. Edit The Navigation Menu
5. Add The Subscription Email Form
6. Author Profile
7. Add The Bookmarking Widget

 

Back Up your current Blogger template

You will have to save your current blogger template for safety precaution. To do this follow the steps below,

1. Go To Layout > Edit HTML

2. Click the link that says “Download Full Template“. As shown in the image below,

    3.    When asked where to save the template, choose a safe location in your hard drive.

    4.    Done!

Back Up your Blogger widgets

To save your current widgets follow the steps below,

1. Go To Layout

2. Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)

3. Save the notepad in a safe location

4. Done!

Upload Cute Box Template

Once you have downloaded Cute Box then follow the steps below to replace your current template with it,

1. Go To Layout > Edit HTML

2. You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,

    3.    Click the browse button, locate the “Cute Box” file and then click the upload button

    4.    Now you will be asked that certain widget data will be lost if you click save. Since we have already backed up all our widgets so we don’t care. Go on and click the “Confirm Save” button. View your blog to see the good change!

Edit The Navigation Menu

To edit the navigation menu, follow the steps below,

1. Go to Layout > Edit HTML

2. Search for <div id='navleft'> using the browser search box     (Tip:- Press Ctrl + F )

3. Just below <div id='navleft'> you will see a long chain of code as shown below,

<div id='navleft'>
      <ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Cute Box</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='http://www.mybloggertricks.com'>Download Cute Box</a></li>
</ul>

</div>

Replace The Hash signs (#) with your page links and bolded green text with your Page titles. If you don’t want the drop down menu then simple delete the red portion. Replace http://www.mybloggertricks.com with your own page link.

If you want to add another link then simple paste this code just above </ul>

<li><a href='#'>Your Page Title</a></li>

 

Add The Subscription Email Form

To add the subscription email form do the following,

• Go To Blogger > layout
• Click the edit link next to Subscribe
• Paste the code below inside it,

<style>
.emailform {
padding:0px; margin: 0px 10px 0px 0; float: left; width:100px; height:77px; border:0;
}
input.mbt1 {
color:#fff;
font: bold 10px "ms sans serif",Arial, sans-serif;
background:#41C952;
border:0;
padding:3px;
}
input.mbt1hov {
background:#F39100;
}
</style>

<a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe using a Feed Reader" type="application/rss+xml"><img src="http://4.bp.blogspot.com/_7wsQzULWIwo/SxPeinlkTKI/AAAAAAAACcM/IJQXpZSYMUU/s400/Email+Orange_128.png" class="emailform"/></a><p><a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Receive Updates </a><span style="color: #383838;">By Submitting your email address below:</span></p>

<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#289728; background: #fff; border:1px dotted #289728; width: 90px;" name="email" type="text"/><input value="TntByStc" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="Enter" class="mbt1" type="submit"/></form>

• Replace the above links with your feed links. Read this post for detail -> Beautiful subscription form for blogger
• Hit Save
• Done!

Add Author Profile

To write a new bio for your self or to delete this widget, do the following,

• Go To  layout
• Click the edit link next to About Me
• And make the necessary changes that you like to make

Add The Bookmarking Widget

I will write a comprehensive post on how to add this very important widget.

Download

I will email Cute Box Download Copy to all MBT subscribers today. Those who haven’t subscribed yet may subscribe now by filling up the simple subscription email form below,

As soon as I am informed that you have subscribed and activated MBT Feed Updates, I will email you the Download Copy instantly.

By becoming MBT Subscriber you are opening the doors for unlimited free downloads of unique Blogger Resources. Indeed We treat our subscribers exceptionally!

Note:- Cute Box Copyrights are licensed under the Creative Commons Attribution License. Kindly Keep the footer credits intact as a token of favor.

I hope you will like this EID present :>

EntreCard Buckets –Amazing Traffic Resource!

Tomorrow is EID and on this beautiful occasion We want to gift Blogosphere with another great Blogger resource entitled “EntreCard Buckets” Which is Fun, Adventure and yet a dream come true for every Blogger!

Did you ever wish to earn 120 EntreCard Credits daily with fun and without wasting time? Did you ever dream to receive 5000 extra monthly visitors or even more than this? Did you ever wish an ever increasing Adsense Page Impressions? Did you ever wanted to become a celebrity Blogger?

 

If you want to know the answers to all these questions and much more then click the image below to discover this beautiful and most useful blogger resource, which is more fun than you can imagine!

 

How To Customize “Block quotes” In Blogger With Mouse Hover Effect – The Blinking Bulb!

This tutorial will really enable you to create stunning and attractive blockquote for your blogger posts or websites. This blockquote will change color when mouse cursor is hovered over it. I have already shared two tutorials namely 14 Amazing Ways To Customize Block quotes Style In Blogger and Blockquote Style with Auto Number List But this blockquote effect is exceptional! Just have a look of an example blockquote below.

Hover your mouse cursor on the blockquote below.

 

Interesting, isn’t it? Now let’s learn how to add similar effects like the blinking bulb effect above.

 

Add The Blinking Bulb Blockquote To Blogger

This blockquote can be added in the similar way as explained in my earliar posts. If you are new then read this part of my previous post –> Add and Customize Blockquote In Blogger

The CSS code to be inserted just above ]]></b:skin> is this,

blockquote {
background: #000 url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwrLJYGc77I/AAAAAAAACUE/-dlubJwo7Ts/s1600/bulb-off.gif) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url(http://4.bp.blogspot.com/_7wsQzULWIwo/SwrLJkLtM5I/AAAAAAAACUM/eYRiZpE_860/s1600/bulb-on.gif) no-repeat right bottom ;
color:#E0E089;
}

blockquote p {
margin: 0;
padding-top:10px;
}

 

The second image in red link appears on mouse hover and the second image in green link appears when mouse is moved away from the blockquote.

Create Custom Blockquote Of Your Choice!

You can use similar effect by changing the background images, font colors, border colors or background colors etc. The first part in the CSS code above i.e blockquote { bla bla } represents the effect on normal view and the second code i.e blockquote:hover { bla bla } is responsible for the hover effect. So you can easily customize the font and border types and colors along with background colors to create a cool mouse hover effect.

I have shared some examples below which uses no image at all,

 

Let me know if any thing is left unclear. For customization guide read this post –> Customize Blockquote In Blogger

Blockquote With Auto Number List –The Notebook Diary!

I shared a tutorial yesterday on 14 amazing ways to stylize Blogger Blockquote and today I have a really interesting and exceptional blockquote for those who write tutorial based articles on their blogs and websites. I have created two blockquotes, the first one has no number list while the second one comes with automatic number list and looks like your notebook diary. The number list starts at #1 and end at #112. Both of these blockquotes can easily be customized to suit your web layout.

 

So let’s have a look at each one of them first.

Blockquote With Auto Number List:

Blockquote Without Number List:

Liked the difference? Now let’s learn how to add each one of them to your Blogger Blogs.

Adding Blockquote With Auto Number List To Blogger

To add this blockquote to blogger, follow the simple steps below,

1. Go to Blogger > Layout > Edit HTML
2. Backup your template
3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,

   .post-body blockquote { line-height:1.3em; }
   OR
   .post blockquote{ bla bla bla}

   If you couldn’t find such code then it is OK.
4. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code below,

blockquote {
background: #fff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5kiMw3zI/AAAAAAAACQM/amZu50-o8aE/s1600/notebook-with-numbers.gif) repeat-y;
margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 153%;
}
blockquote p {
margin: 0;
}

Customization:-

You can also change the Number list background by replacing the bolded image link in the code above with the image URLs of one of these blockquotes.

Tip:- Right Click the links below each blockquote and choose Save Link As Or Copy Link Location to its image URL.

 Blockquote with Yellowish Number List & Dark Brown Background

 Blockquote with Greenish Number List & Dark Background

 Blockquote with a soft touch

font :- It includes font style, size and type respectively. Match the colours with the code above for reference. Font style can be bold, normal , italic or bold italic

color :- This refers to text colour. You can use a different font colour using our color chart

Adding Blockquote With No Number List To Blogger

To add this blockquote simply follow the same steps as shared for the blockquote with auto number list. But for step#4 paste the code below instead,

blockquote {
background: #fff url(http://2.bp.blogspot.com/_7wsQzULWIwo/Swb6iqg3IvI/AAAAAAAACRM/gNG2TrShbWs/s400/notebook.gif) repeat-y ;
margin: 0 20px;
padding: 20px 20px 20px 55px;
color:#7A7A7A;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 155%
}
blockquote p {
margin: 0;
}

 

You can replace the Background Image link with one of these.

Tip:- Right Click any of the blockquote images below and choose Save Link As Or Copy Link Location to get its image URL.

 

That’s All!

Note:- If you want to increase the number range for the blockquote with auto number list or if you want to create an image with your custom colours than I can provide you the PDF source file for it. But it will be given to subscribers only. If you haven’t subscribed yet, kindly do so to avail unlimited download resources from us to you.

Let me know how was this new discovery :>>