Social Bookmarking Buttons With Spinning Effect for Blogger

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.

Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven't such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Check the demo yourself!

Here is how to add these cool buttons to your Blogger blog:

Login to Blogger > Design > Edit HTML > Expand widget templates. Find the following code in your template:

<data:post.body/>

Just below that add the following group of codes:

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/hacktutors' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3kmh03RLxrDg4wZufYA8Ws_XXqhY-G8L3cDY4waNTrejozU_1fgR7cpTXT9yCxazWZWQcprON6K9H2C-USBvqCW_B2KCbiYB55TJZcAh2LbyAWbEmXAK6lDBqNgcGuso7jhz0UOeSuJM/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WSde-4GmEgir1srgWq0d5XqKcl7ivl-rWvt2JMqVkRntt9PqZBgp8D0Okl9nR74aFiaUILvXYJUfUuHrW_fa1wB38jRlox1r6wuWXJXkoXFCkABifjLFj6dR9_2ukJhvthchJGnko54/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7Fu4qWrRbS7LAt2sLOYo0jwvwFACjemO5gkoMRCtRnJGYOHuGmklRjCPQrinM8w89FffuW62PHI3IUBtiBzhw-UqSroNMp7o93yNRqNd_vP_ElOz6RUfVYhM0yY3ubakdV8bVeetz6s/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyJkxMcnFUnDS0GKc7Z37nJ7I5cPJ-SvHe3_2OXh3Pc0lohrDGELoBR3tuTCMUdMOBj0F_Z6DXad2RJx6Oc6koheFUq1EvE8Te3mO8ADW3xOoX7vj-Re0L1IrHtV6KRp4rXIAUhRxUyv0/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWw74app5biR7ocW55dPRQ9_liEW5wysKIHNN5jZlxPAjhPeGS4a1GGFxfSu0_i-X8qbMDmJMj0UIlYuPAeer4j_CHFt-k-W5RtOwP4fFT2_bQNhPyEazCdSWSLwQzegQhQU2wtaH4IBQ/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCO5Cxoa4JtjwPVfowlrJmLCWlY7m3ZYxkJL9yHwolUBUpbA2Zyrn7Kerd0QbjIvLN3-uDX5wy4o8thBcGk9uxPgDG3mza-4MdgilvCzZtBbrjs0kaRduPVBKYaqT0ypyS6HMQZFOSXf0/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Read More

Add Stylish Navigation Menu to Blogger

This is the our first post about blogging. One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog. 

Features:
1. Simple and very easy to add
2. Menu with mouse hover effect and awesome look
3. Easy to add Links and use.

How To Add Navigation Menu To Blogger/Blogspot

1. Go to Blogger Dashboard by clicking here >Design >Edit HTML
2. Copy the below code and paste before </head>   

<style type='text/css'>

ul#topnav {

margin: 10px 0 20px;

padding: 0;

list-style: none;

font-size: 1.1em;

clear: both;

float: left;

width: 99%;

}

ul#topnav li{

margin: 0;

padding: 0;

overflow: hidden;

float: left;

height:40px;

}

ul#topnav a, ul#topnav span {

padding: 10px 20px;

float: left;

text-decoration: none;

color: #fff;

text-transform: uppercase;

clear: both;

height: 20px;

line-height: 20px;

background: #1d1d1d;

}

ul#topnav a { color: #7bc441; }

ul#topnav span {

display: none;

}

ul#topnav.v2 span{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJQbZVxMcd9pla8HN9kVNsId-S2O6b03IacmXcTlj-Fb5Lt073IKg6rDDmAT-Co6nnxTwkxwEeBlv-_yYelOdTxPzjIaRjuawikyHljmg0nFWtksT4t5lS1lSqubmbfc1V0MM4HRiAIU/s1600/menu-bg-b-w.png) repeat-x left top;

}

ul#topnav.v2 a{

color: #555;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJQbZVxMcd9pla8HN9kVNsId-S2O6b03IacmXcTlj-Fb5Lt073IKg6rDDmAT-Co6nnxTwkxwEeBlv-_yYelOdTxPzjIaRjuawikyHljmg0nFWtksT4t5lS1lSqubmbfc1V0MM4HRiAIU/s1600/menu-bg-b-w.png) repeat-x left bottom;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...

var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag

$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag

});

$(&quot;#topnav li&quot;).hover(function() { //On hover...

$(this).find(&quot;span&quot;).stop().animate({

marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels

}, 250);

} , function() { //On hover out...

$(this).find(&quot;span&quot;).stop().animate({

marginTop: &quot;0&quot; //Move the span back to its original state (0px)

}, 250);

});

});

</script>

4. Then click SAVE TEMPLATE 
5. Once again go to Design tab >Page Elements >Add Gadget > HTML/Java Script
6. Copy the below code and paste it  

<div class="container">

<ul id="topnav" class="v2"><center>
<li><a href="#">Home</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact us</a></li>
</center>
</ul>

</div>

Important :- Replace # with your Link and change title your wish.. Save it 

Read More

Modern Warfare 3 Content Collection 1 Arrives For Non Elite Members (video)

As expected Call of Duty: Modern Warfare 3 Collection 1 has now been released, for non Call of Duty Elite members to now be able to grab and enjoy. View the official launch trailer for Call of Duty: Modern Warfare 3 Collection 1 after the jump.

The new Call of Duty: Modern Warfare 3 Collection 1 is the biggest DLC content pack to date and includes four Multiplayer/Survival Mode Maps and two Special Ops Missions. As they will already undoubtedly know Call of Duty ELITE Premium members have already had access to packs for a few weeks.

So if you are a non Call of Duty Elite member and own an Xbox LIVE Gold membership. Jump onto your Xbox to download and start enjoying.

Read More

Three UK Samsung Galaxy S II Android 4.0 Update Released

UK mobile operator Three has announced that the android 4.0 Ice Cream Sandwich update is now available for the Samsung Galaxy S II on their network here in the UK.

The Android 4.0 Ice Cream Sandwich update for the Samsung Galaxy S II on Three is available through Samsung’s Kies software.

ICS update for Galaxy SII is available via Kies. You’ll need to connect your SII to a PC via USB cable with the Kies software installed.

If you have managed to get the update for your Samsung Galaxy S II on Three here in the UK leave a comment and lets us know.

Read More

Windows 8 To Be Finished This Summer, Launch In October?

We know that Microsoft intends to launch Windows 8 some time in the fall of 2012, and we recently heard that Lenovo intends to be one of the first manufacturers to launch a Windows 8 Tablet, with a rumored launch date of October.

Now more evidence has been revealed which would point to October being the actual official launch date of Windows 8 for Microsoft, and they could possibly have their latest OS finished by this summer.

According to a recent report by Bloomberg, the Windows 8 roll out will include support for both Intel based devices and ARM devices at the same time.

Launching Windows 8 in October would give Microsoft plenty of time to market their new operating system, and a new range of Windows 8 based tablets for the holiday shopping season.

Read More

Google Now Informs You Why Messages Are Placed In Your Spam Folder

Google has rolled out a new update to its Gmail service this week which will no inform you why certain email messages have been placed in your spam folder. Google does a pretty good job of keeping most unwanted or malicious emails out of users Gmail inboxes. But the new indicators now provide you with a little extra information and help when sorting through your sSpam folder.

From today Google will now be providing a brief explanation at the top of each of your spam messages. Any messages that are now dropped within your spam folder will now show why it was put there and inform you about any potentially harmful content that the message may contain. Google explains the reason for the new information bars.

“We hope that this is not only interesting, but also helps you learn about scams and other harmful messages that Gmail filters out. Whether you prefer to leave your spam folder untouched or do some educational digging, the information will be there for you.”

For more information on the new additions jump over to the Google Blog post.

Read More