How To Add Social Sexy Bookmarks v2 to Blogger

This is the second version of "How To Add Sexy Social Bookmark to Blogger".The creator of Sexy Social Bookmarks is http://www.cssreflex.com/.For second version of sexy social bookmarks, you have to use jquery.I hosted sexy bookmarks images(2 images) in google code or other hosting service.Don't try to host images in blogger.If you do so this sexy bookmark widget will not work correctly.Below I explain how to add this sexy bookmarks v2 for your blogspot blog.If you like to add it to your blog then follow the steps given below.



1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
if (sexyFullHeight&gt;sexyBaseHeight) {
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+&#39;px&#39;
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+&#39;px&#39;
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
}
});
</script>

<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMDtiDF0K9OnRiZwQ-yfRl8FQtNw0oSaLIjZl8vohDOoU3gvAd19aWcqa7xCnvxgY6K_8KXb4bTjgGTdUOrYZZfuWnj7itcytJRl2HTUbYP-XnYy9kx6zjIvccxcFtSsJnxE648qMqnsb/&#39;) !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz: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-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url(&#39;http://bnote.googlecode.com/files/sexy-sprite-new.png&#39;) no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>


NOTE : Download Image Files

5.Scroll down to where you see <data:post.body/> tag.

6.Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
</b:if>


7.Now save your template and you are done.
READ MORE - How To Add Social Sexy Bookmarks v2 to Blogger

How To Add Subscribe Box to Blogger/Website

In this tutorials,I will explain to you how create a Subscribe Box with Feedburner Email subscription,Feed subscription and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious).You can easily add or remove social buttons to this widget and setup your email subscription.If you like to add this widget to your blog or a website,then follow the steps given below.



1.Log in to your dashboard--> Design- ->Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

<style type="text/css">
#subscribe-box {
overflow: hidden;
margin: 10px 0 0 0;
}

#subscribe-box a.subscribe-sec {
display: inline-block;
display: -moz-inline-stack;
width: 40px;
padding-top: 38px;
zoom: 1;
}

#subscribe-box a.subscribe-sec:hover {
color: #660000;
}
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJghAnPBnR71bXvCq2VxNWc5SN-ewVZJo56xXIDxScME_LvXj8JMN3OhWI3mGgrgZkeJmWlv3Wbzi1qnhDJWqkZzDKAZzF_N73auO6sHG24mg1rrrbcFtTGqy7tTD21VUXMSgWvduCuEu/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuz5mlzTFzr64rX6mzu3fmRCioTleB7f0R9DPpgd3QDNwLmI3MNOL161FWNiwP_96XbsJxoS1YqKTTmeexii9JS8K3520Nyb3Z_G4lApMfk2VmcC9ew3bgVsIXiiAZlb2TqbrdM-Cys8h/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCXQ6fH6XCvYyyXXN0XuYmFDL2dfCUKrEa5yEAtYUzuPDxr9_b0MGjnGoCXgEvGSUOPSOPhVqtcBoARIwTir4raeK9DhAig8X89nEzokP4crxxge44F-0ONAETf7hFI7FjdyHtVmvvM-b/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTD5SfB6UAOh3vAkomhnCLj9eINjKoYifbDxcTDqAupFc62VQwSOf4GQ0Dq7qcmam7K_ZAXU3AZw7nzX1oxjFNDrqxF2oKkKtqvLwFPUx9UaN6vzQnkjwPwU2SVU7jBDqmqXDbQ6QiaIBf/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8BTMvS3DuknzUayHIiF3h3lc353X5_H_r52qqkM5BEclYdD6YUI9hE2lFaM5ak2MmNIjkwOxiEKY1UNgcGTX2wGyR75-9hj9AQDATqlKvi6nYYgvpOKigWqeta8712qjLym7yhgVyMshV/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrvXaCXSreYrfRNoDQYZdd5vHrCS_ygnalNyYxevRqN9PzB9yZs-qUT-bsBi1PmeILM9RryDuSYQNhoLE-p7pZhRT4PRaVq6APTc7eW_mzjtZD6BX05Ny0fGrVDtWZKqiMbbwOhoTCOPj/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>


Note : Remember to REPLACE,

FEEDBURNER-ID with your feedburner ID.
DELICIOUS-USERNAME with your delicious username.
TWITTER-USERNAME with your twitter username.
FACEBOOK-USERNAME with your facebook username.
STUMBLEUPON-USERNAME with your stumbleupon username.

Look at the example given below.
<style type="text/css">
#subscribe-box {
overflow: hidden;
margin: 10px 0 0 0;
}

#subscribe-box a.subscribe-sec {
display: inline-block;
display: -moz-inline-stack;
width: 40px;
padding-top: 38px;
zoom: 1;
}

#subscribe-box a.subscribe-sec:hover {
color: #660000;
}
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" /><input value="blogspot/WyNa" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJghAnPBnR71bXvCq2VxNWc5SN-ewVZJo56xXIDxScME_LvXj8JMN3OhWI3mGgrgZkeJmWlv3Wbzi1qnhDJWqkZzDKAZzF_N73auO6sHG24mg1rrrbcFtTGqy7tTD21VUXMSgWvduCuEu/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuz5mlzTFzr64rX6mzu3fmRCioTleB7f0R9DPpgd3QDNwLmI3MNOL161FWNiwP_96XbsJxoS1YqKTTmeexii9JS8K3520Nyb3Z_G4lApMfk2VmcC9ew3bgVsIXiiAZlb2TqbrdM-Cys8h/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCXQ6fH6XCvYyyXXN0XuYmFDL2dfCUKrEa5yEAtYUzuPDxr9_b0MGjnGoCXgEvGSUOPSOPhVqtcBoARIwTir4raeK9DhAig8X89nEzokP4crxxge44F-0ONAETf7hFI7FjdyHtVmvvM-b/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTD5SfB6UAOh3vAkomhnCLj9eINjKoYifbDxcTDqAupFc62VQwSOf4GQ0Dq7qcmam7K_ZAXU3AZw7nzX1oxjFNDrqxF2oKkKtqvLwFPUx9UaN6vzQnkjwPwU2SVU7jBDqmqXDbQ6QiaIBf/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/wam83879" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8BTMvS3DuknzUayHIiF3h3lc353X5_H_r52qqkM5BEclYdD6YUI9hE2lFaM5ak2MmNIjkwOxiEKY1UNgcGTX2wGyR75-9hj9AQDATqlKvi6nYYgvpOKigWqeta8712qjLym7yhgVyMshV/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/blogspot/WyNa" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrvXaCXSreYrfRNoDQYZdd5vHrCS_ygnalNyYxevRqN9PzB9yZs-qUT-bsBi1PmeILM9RryDuSYQNhoLE-p7pZhRT4PRaVq6APTc7eW_mzjtZD6BX05Ny0fGrVDtWZKqiMbbwOhoTCOPj/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>


You are done.
READ MORE - How To Add Subscribe Box to Blogger/Website

How To Add Reply Option to Blogger Comments

This tutorials will show you how to add reply option to your blogger comments like wordpress.Usually we can see reply option in non blogger blogs.But in blogger blogs there is no option to reply comments.But after you add this trick to your blogger template,you can see a reply option in blogger comments.

Before add this feature to your blogger blog you must find your blog ID.



To find your blog id follow the step given below.

Login to your dashboard and click on "Settings" link of your blog.



Now look at address bar of your browser.You can see your blog ID on the address bar.It will be a number like 2183677992760077155.Now note your blog ID.



Now let see how to add reply option to blogger comments.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:commentPostedByMsg/>


4.Copy below code and paste it just after above code.

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

NOTE : Remember to replace YOUR-BLOG-ID with your real blog ID.

Look at the example given below:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=5649319381222938273&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

5.Now save your template and you are done.
READ MORE - How To Add Reply Option to Blogger Comments

20 Free Beautiful Social Media Icon Sets Collection

This is my another beautiful high quality social media icon collection for you.I think you will like this social icons very much.You can get these social icons directly from the authors websites.If you want to read my previous social media icon collection read below posts:

23 Free High Quality Social Media Icons Sets

Beautiful 3D Social Bookmark Icons Sets For Bloggers

Free Premium Quality Social Media Icons Collection

65 Bookmarks And Social Icons

65 freeware icons of Web 2 Social Bookmarks and Networks for use in blogs, websites, etc...Sizes: 128x128 64x64 32x32 16x16 | 260 Total icons.


Download : http://studiom6.deviantart.com/art/65-Bookmarks-And-Social-Icons-120098825

Ultra Glossy Silver Button Social Media Icons



Download : http://webtreats.mysitemyway.com/ultra-glossy-silver-button-social-media-icons/

108 Glossy Black Comment Bubble Icons



Download : http://webtreats.mysitemyway.com/108-glossy-black-comment-bubble-social-networking-icons/

154 Matte Black Social Media Icons



Download : http://webtreats.mysitemyway.com/154-matte-black-social-media-icons/

Social.me

Social.me is an icon set consisting of 30 individual icons of the popular social networks/Web 2.0 sites out there.

The icons are iPhone-inspired and is based on the template provided by Tim (www.lostpixel.com) @ MacThemes Forum.Feel free to use these icons anywhere on your website, blog, or even in print.


Download : http://jwloh.deviantart.com/art/Social-me-90694011

Black Inlay on Steel Social Media



Download : http://webtreats.mysitemyway.com/iconsetc-black-inlay-on-steel-social-media-icons/

Social Media Balloons

The icons come in different sizes (from 32px to 128px) and they are in 32-bit transparent PNG format. The set is free for both personal and commercial use (under Creative Commons Licence, attribution is needed). However, resell is not allowed. If you want to integrate them into a website template which is for sale (e.g. WordPress theme, Social bookmark plugin, etc), you need to purchase an extended license.


Download : http://www.doublejdesign.co.uk/2010/03/social-media-balloons/

Social Media Balloons 2



Download : http://www.doublejdesign.co.uk/2010/04/more-social-media-balloons/

Social Jeans



Download : http://nishad2m8.deviantart.com/art/jeans-social-media-icon-pack-131069708

Simple Glossy Silver Social Media Icons



Download : http://webtreats.mysitemyway.com/simple-glossy-silver-social-media-icons/

Social 2 Duo



Download : http://iconblock.com/goodies/icons/

OLED Social Icons

Contents:21 icons
- 256x256px,- 128x128px,- 96x96px,- 64x64px,- 48x48px,- 32x32px,- 16x16px21


Download : http://arrioch.deviantart.com/art/OLED-social-icons-151238966

Furry Cushions Social Icons

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.


Download : http://www.cutelittlefactory.com/freebies/furry-cushions-social-icons/

Free Social Media Icon Set Chrome

This set includes 19 social networks along with a standard RSS icon in PNG format.


Download : http://www.chris-wallace.com/2009/05/28/free-social-media-icons-socialize/

Wooden Social Media Icons

This is a set of free Social Bookmarking icons which is in Wooden style. Icons are in editable PSD and PNG formats so they can be customized as per your requirement.


Download : http://annanta.com/archive/wooden-social-media-icons/

Free 3D Social

Free 3D Social Icons are a free icon collection ideal for Web sites and applications associated with all sorts of social networks. The pack delivers images depicting various communication technologies and Web sites.

The icons from the pack come in sizes of 16x16, 20x20, 24x24, 32x32, 48x48, 64x64, and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP. Source files in 3D-Max format are also available.

This fabulous icon pack is available for instant free download!


Download : http://www.large-icons.com/stock-icons/free-3d-social-icons.htm

Grunge Social



Download : http://www.box.net/shared/hxycdc1m8z

Large Delicious Icons

Large Delicious Icons are a free icon collection ideal for Personal blogs and Web-pages. This set pictures the well-known Delicious symbol in lots of fresh and attractive variations.

The icons from the pack come in sizes of 16x16, 24x24, 32x32, 48x48 and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP.

This fabulous icon pack is available for instant free download!


Download : http://www.large-icons.com/stock-icons/large-delicious-icons.htm

Social Media Price Tag

The source file (PSD) is included, as well as two sizes of PNGs (250�150 px & 125�75 px). You can use these icons for personal and commercial projects at free of charge.


Download : http://deepubalan.com/blog/2009/12/14/high-resolution-social-media-iconset-for-free-price-tag-style/

Woodgrain A Free Social Media Icon Set



Download : http://www.chris-wallace.com/2009/06/30/woodgrain-a-free-social-media-iconset/
READ MORE - 20 Free Beautiful Social Media Icon Sets Collection

Launching Blogger Video Tutorials


I am very much excited to launch our new section here in Blogger Tricks... "Blogger Video Tutorials". To make sure that you benefit in the best manner from this site, I have been working on this passionately for the past few days and have done about 25 video tutorials. Watch out for more interesting tutorials in the next few days.

Why video tutorials?


Well, to give you guys a fantastic multimedia experience where you can learn four times faster than reading lengthy texts. I saw the amazing result myself; reason enough to awaken myself to the fantastic world of video tutorials. Last year, I had uploaded a blogger tutorial to Youtube, just a basic video with poor quality. But people liked what they saw and I ended up with 50k views and 60+ comments. This gives me a strong reason to believe that video tutorials rock big time and I am going to make sure that all of my readers get the best.

So now, just sit coolly and watch the steps, maximize your learning experience and implement what you�ve learnt in your blog and watch your blog traffic and revenue rise.



Thanks for all your support and comments. My apologies for not being active for the past 6 months because I was busy with my exams. Now with the worst behind me(my exams..ha ha ha), I am ready to go full throttle on video tutorials, these 25 that I have done should be very useful for the newbies.

To your blogging success (now in a multimedia experience)

Kranthi

Here are some of them:
How to add Favicon to your Blogger blog ?
How to add Meta tags to your blog ?
How to submit blogger sitemap to Google ?
How to submit blogger sitemap to Yahoo ?
How to add adsense inside blog posts ?
How to add POLL inside Blog post ?
How to add Email subscription box to your blog ?
How to upload Javascript files to your blogger blog ?
How to add ALT text to images for more traffic ?
and many more....
and will add many many more soon...


Looking forward for your comments and any suggestions :)

READ MORE - Launching Blogger Video Tutorials

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!


READ MORE - How to Add Retweet Button to your Blogger Posts

How To Embed URL,HTML,Forum Links Code below Blogger Posts

This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me(http://www.bloggertipandtrick.net/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .


<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

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

5.Copy below code and paste it just after the <data:post.body/> .
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>If you find this article useful, please feel free to link to this page from your website or blog.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.bloggertipandtrick.net/' style='display:none;' target='_blank'>Widget by BloggerTipAndTrick</a></p>
&lt;/div&gt;<br/>
</b:if>

NOTE : Don't change anything in above code.

6.Save your template and you are done.
READ MORE - How To Embed URL,HTML,Forum Links Code below Blogger Posts

How To Let Visitors to Listen Your Blogger Post

This service is provided by http://vozme.com/.If you like to let your visitors to listen to your blogger posts, you can add this Vozme Link or Vozme Button to your blogger blog.This will more helpful when your blogger posts are very long.Below I explain how to add this widget to your blogger blog.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

<div class='post-header-line-1'/>

NOTE: If you can't find <div class='post-header-line-1'/> in your template, Find <data:post.body/> .

4.Copy one of code below and paste it just after <div class='post-header-line-1'/> or just before <data:post.body/>.

CODE 1 : Using a Text Link


<div style='float:right; margin-right:10px;'>
<script src='http://vozme.com/get_text.js' type='text/javascript'/><a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"en\",\"ml\");"' href='javascript:void(0);' style='margin-left:1.5em;'>((&#8226;)) Hear this post</a>
</div>


CODE 2 : Using an Image and a Text link


<div style='float:right; margin-right:10px;'>
<div id='voice'>
<script src='http://vozme.com/get_text.js' type='text/javascript'/> <a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"en\",\"ml\");"' href='javascript:void(0);'><img src='http://vozme.com/img/paper_sound32x32.gif' align='left' alt='' border='0' style='margin-right:0.4em;'/></a>
<a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"en\",\"ml\");"' href='javascript:void(0);' style='font-size:10px;'>Hear<br/>this post</a>
</div>
</div>


5.Now save your template.
READ MORE - How To Let Visitors to Listen Your Blogger Post
 

Support By Blogger