Create a blog, blogging: Widgets

Showing posts with label Widgets. Show all posts

Saturday, June 2, 2012

Friday, June 1, 2012

How to add “Email Subscription Form” to Blogger Blogspot

email subscription form, blogger blogspot, gadgets

If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog, so that interested visitors can easily get latest updates. And to add email or feed Subscription Form to your blogger blog (blogspot) it's a very easy thing to do. So let's begin:

1. Log in to Blogger, then go to Design > Page Elements > click on "Add a Gadget" link.
2. From the pop-up window, click on the "HTML/JavaScript" gadget.
3. Paste the following code inside the empty box:

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOqfd6wx9Yac9iL9U76RGbiEqGIAwG4jyHWq15MAe4G_M3tJPlFvy1oPQAnmm0Hg9amqDv0TiWeex0NIJFoYxwuZ7bj8YKIBc73xEgBgIi2kgISmLMBdf65I0-fIB8zUUIcfXnS0U-_24/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings

Replace the url address in green if you want to change the email icon
Increase/Decrease the 130 width value for a wider text area
Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace helplogger with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

4. Save your widget and check your blog.

Saturday, May 12, 2012

Add Facemoods Emoticons To Your Blogger Comments

Want to add Facemoods emoticons in your Blogger comments? Then follow the next steps:

DEMO

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this code:

For previous commenting system:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

For threaded comments:

<div class='post-footer-line post-footer-line-3'>

Step 3. Add the below code just above it
(for threaded comments, add the code after):

<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7DtJVVjwIXr2uoLLdh4-iXo73peDwfkTo_MG5fgxH4yh-bcc5SdHwv0GMQEoCyvHrbeMzc6iCmwjQbzNj-emRwanzO0ykC9krUkOxTXZuxyi8fm1oawDpcDqPZKkGdYLjIHgzEFnaUkne/s1600/bloggingcreate.blogspot.com(1).gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhl5MoXjKtU081CLkgXWELiD0Zy-SxHdb69mC5ElNBh0i-zaWqkRZPR_g4NAnLSIN9qoR8yQ9BQvhqNwrvjILsSJQZDH_Ag0vCYT_1WG0P5AoFWLjzCaCRh27ySBXK7HnVwRnnQflLr83/s1600/bloggingcreate.blogspot.com+(2).gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNTgglsGU32-Amn5t8H0otTpK5QChSmp5uiI1X0yI0eWKJSrudS6NjflMlE7benPcfMGPn5DCMn0Esw13KriGQ43NRonNJyVKSnngQh6w8wN-F2XBNWwF7L5Brii3MdlgEbvqKkL5mH2U8/s1600/bloggingcreate.blogspot.com(3).gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCP-TKj8STahOJ7VzBtbzP-kuVyJehBN_YFBdczDEaJhcXPcTPACKjZI-nC5LqOvU9-NM-10CvXaQxgTS2Gm31mbjSj3JmTXuCheok-oLc9pSpDhk3Mc36cWANs0mGu494XzNEMYtdbcOC/s1600/bloggingcreate.blogspot.com(4).gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGO4HvhPv8-ZwiE3Olos81I5_87Nna4_5KBlMWYeqlyiIkY305ikpDx6Z2N0p0ZqXa_0VPqmtl842yGGVM23-UzQkfFZDTKIisdn8hYUCcfpxROFLTnlOlls7hSZuHicINMQeg3lKzmg2a/s1600/bloggingcreate.blogspot.com(5).gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOufGgrfIyiDMVE5CD8yMrdyvz6EybaNoeteUM0CJha_W6BS8Xp32JrNRS0E_CHBwZb27_hKxmD14r-w2y8yAD5lnJOk3WiP-rW4T0VSub6tbgmOZZUoiwphF2s5FGhS5yxT6CQFVHT6M/s1600/bloggingcreate.blogspot.com(6).gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4XKIzzD3pVUVxZPF5SW1VZp8YOa3dI_wKBLMvaU6_UIvLOO0OsV1Y30bw0xyI5Vzl0un8ytLZQmvyktSXOnsRSGP2PfGE6IGMfXiMeItOjp_4ZcplNngYKOjyv3D4PmPNC6G-Q4TX0gM5/s1600/bloggingcreate.blogspot.com(7).gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RM8NjjNO36ZEcvWiJJEzJAvIf0Mt_rFYWKKeIRo98gHZtZes8bvJJXRFbdT0W9lQlOH_pRQMDhUzhvnSInwPCgFP9VlBcJHrITWumjtjDxUy04fhBluIeSJYY7AcpJkrDOAi-knTdh9N/s1600/bloggingcreate.blogspot.com(8).gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMERkuj7P5u9Of7ZDwGkLjyssEvC3vKnESdkHliqWFjYTdyqBbFgBX9vByfq8sJCpcIgA04b8AeF4VOYUkl4TtsflXBmF6i1QNpqLygRW7VyhO0qnFzPOTQr97Gx3eeqOYn4LaM5YN2PT3/s1600/bloggingcreate.blogspot.com(9).gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7xxFwTxVhoRbMIExn5YuQnm_-dMd9bzY5zIvyXEV7ufdlZQxWPmwTfrS1qnIjKSObBkHCEsPXUmdioD80DJ6FrWadB7rDX1PvOkyFc1fvbTlB4FzHXItoaDoBVv9it70lIwx_tq2PNO2/s1600/bloggingcreate.blogspot.com(10).gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqHj2Tu1oy1AjIQRUgn7cKwCS9RHg0qSBILQ6U8QYb571164Chpgsq5QJX6x4FS5YY8uyq0lgXLIbgEn-W8Ht8qmu0b8uaveFvTte4mmbazUEQCcujG1VnaS4tFK1t8fC-sJNKd1wUUzq/s1600/bloggingcreate.blogspot.com(11).gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPKqGrWWZIrNUSiHcCyX3Cg-sLqxqOWI2yB7cVjm85JFJ1adlJH6MwUeRsjIbN44sys6Z8KW-ac38vBoLKdNq_xfap8k5PSemQhH3OluBMZFu_ZfD_VFvouU8q4enP47zvIJzik679meve/s1600/bloggingcreate.blogspot.com(12).gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzBhz18ovCnwJLU2d-QJKQ3g40Zbjm3i4hs_JzCPd-8BfVntocLY9B3pHAmEZkb3EzWghaE3ynfgLTqDjC1EpVUMcWuI6u_hPSmh9nVJpuwc4T83cBTvc8pI52lsIsyNoUXsacJ4n2Vbu/s1600/bloggingcreate.blogspot.com(13).gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlxWFuJShJ03FA-4ahHkoWdGCPJUfEXjJqoGNvd8jSzHFv070Lrd_nJygm55yEFcKwETNIVRhgB3BkPopYRRs0QdhsBNdBlz9Ntm1m_RkJHT0fXTARdrmySVPMRHsdjcDakL6cpvYgC1U/s1600/bloggingcreate.blogspot.com(15).gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdS6OWZVbxPKmUc6zgGRL1owHP1S7O6bNUOjY0awKO_ydVmiVuw2q5Dj0gHRP_53s-8Vwv2OSSZ47jOdNbIJ4qGeg9fk-l0K0nUnDf_W-e3TLU6xbg8X46tB0CeEZcsWkbbBihwxj0RIR/s1600/bloggingcreate.blogspot.com(16).gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTWmL1A6t0ZXjDgj2Le7Feb0MfuGA5_h-4N6TzBkA7eXk9iBLWEJYR6b8C96yGrDZEAZPQSGrEhHoP5ShwAsM_61vl5ZFYEj-a8OGaLqZcS14TupivqDM_iKpnGh8Sb0WBpkZ1UC9scyI/s1600/bloggingcreate.blogspot.com(14).gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqTGjrAQkVg5R8K2WsJxfbMWpFeJrOo0rjTBsEK3r3aefr72GoHHzYGgMtRfhm9uM66Md8HTbWuw1LhCdpTgKsS8MDsaFUUSocXFkzpXkNe4hr6Qw2zgfFV_LTZB6EJzhoTGAdBdtEKKA/s1600/bloggingcreate.blogspot.com(17).gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQ1vMxc4eWi4FP3giJ2TNCx6rshxkPa6gzuiCjWcE1RxCeSnNdx_J05wHC5dob1WkyR5EwULcuazYIGqsnAdGbwtOro69vb4pxZIUxy820NlCt3MdLbSwWIszuqqrPFi3d_gzmPIvaGcA/s1600/bloggingcreate.blogspot.com(18).gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwlhp14Rj6RTmiiZVOLVum0KYi-QMtiCHhbxk4ib_vftovyhY9gnfslsskJyk_K6Y-sAlQWa25HLnTbCTC_UYnOE-G7Pkjmm0gnNnFFPu7lRVmIKqC_lLk1QPlOB9xZDJhvK05ryteeSx/s1600/bloggingcreate.blogspot.com(19).gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtNkZzrQ-8-CxwqO7-ljn__LJnLeti4AlCaZsPqGPmXN0qfkuHf6-75g3m0yHsNYtYQydTT75MpSlm-vlTJr83o3aKsUQG6YPHcMXXfkB7RBq7F1TuYMYzTyoW7JB6mymNruoAS-QsQW4/s1600/bloggingcreate.blogspot.com(20).gif'/> :t <a href='http://bloggingcreate.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4. Now search for this piece of code:

</body>

Step 5. And add the following code immediately above it:

For previous commenting system:

<script type='text/javascript' src="http://bloggingcreate.googlecode.com/svn/trunk/facemood emoticons.js"/>

For threaded comments:

<script type='text/javascript' src="http://bloggingcreate.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

Step 6. Save the Template. And enjoy your comments :>

Friday, May 4, 2012

Saturday, April 28, 2012

Google Translate Widget with Flags For Blogger

The Google Translate Widget allows your visitors to translate your site or blog in their own languages.
This widget auto detect your blog language and translate it to the readers chosen language.
It supports 12 different languages: English, French, German, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.

How To Add It To Blogger

Go to your Blogger Dashboard >> Design >> Page Elements >> Click on "Add A Gadget" link, choose HTML/JavaScript and paste the following code in the empty box:

Then click on Save

Enjoy (:

Simple Recent Posts Widget for Blogger/Blogspot

This Recent Posts widget will show not only post titles but also post excerpts or snippets on your blog.

What you can do with this widget:

display post titles only
change the number of posts
change the number of characters of the post snippet/excerpt
show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://bloggingcreate.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://bloggingcreate.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://bloggingcreate.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQIlSm079ameX_qFSMhq70IxDE4bCAjzZs5TsAhNb-TuaD292lctsXJbCwvW3780CsAq06Lu5IRGnanWMhW3HbbXhisQLJyF05bwrO7fwLXyYUbPW3qc5p7K3IM_nzOnqn9wX4o3lvo7j/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://bloggingcreate.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://bloggingcreate.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://bloggingcreate.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQIlSm079ameX_qFSMhq70IxDE4bCAjzZs5TsAhNb-TuaD292lctsXJbCwvW3780CsAq06Lu5IRGnanWMhW3HbbXhisQLJyF05bwrO7fwLXyYUbPW3qc5p7K3IM_nzOnqn9wX4o3lvo7j/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. Change 5 (option 1) and 10 (option 2) with the number of posts you want to show. Change false to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

4. Save your widget. That's it!! Enjoy

Please let me know what you think of this widget by leaving a comment below.
And if you liked this post, please consider sharing it. Thanks!

Thursday, April 26, 2012

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Steps Adding the jQuery Drop-Down menu

Step 1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search for the following code:

]]></b:skin>

And before/above it, add the following CSS code:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 3. Now find this piece of code:

</head>

And add this code immediately before/ABOVE it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 4. Click on Save Template button.

Step 5. Now go to Design (or Add a layout) > Page Elements > click on "Add a gadget" link and choose HTML/JavaScript, then paste the following code in the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note :
You must change links titles and replace the # symbol with the URL address of each of your links
Then click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Design > Edit HTML and search (CTRL + F) for this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

You should change 1 with 3 and no with yes like this:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Save the Template.
Now go to Page Elements and drag your menu immediately below your header.

Here you can see the DEMO.

Wednesday, April 18, 2012

How to Add Emoticons/Smileys in Blogger Comments

This tutorial will show you how to add Kolobok emoticons to your Blogger/Blogspot comments. But first of all, if you want these smileys to appear on your blog, you should first remove Blogger's threaded comments. Read here how to remove threaded comments from your blog.

DEMO

How to add Kolobok Smileys in Blogger Blogspot Comments

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

</body>

Immediately above it, copy and paste the following code:

<script src='http://bloggingcreate.googlecode.com/svn/trunk/[bloggingcreate.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://bloggingcreate.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>

Step 3. Now find this code:

<b:loop values='data:post.comments' var='comment'>

And just above it, paste the following:

<div id='smileys'>

Step 4. Try to find the below code (please look below the code from step 3 in order to find it)

</b:loop>

Paste this piece of code immediately after it:

</div>

Step 5. Now find this code (you'll find it 4 times but stop to the 2nd one):

<data:blogTeamBlogMessage/>

And add this code just after it:

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://bloggingcreate.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:((
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-?
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-*
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span>
</div>

Step 6. Finally, find this code

]]></b:skin>

And add this one below, just above ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Note: if you want to change the size of the emoticon container, edit the red code.

Step 7. Save the Template and you're done :]

Sunday, April 8, 2012

Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog.

Let's start adding it

Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps:

1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template

2. Search (CTRL + F) for this piece of code:

]]></b:skin>

3. Just above/before it, add the following code:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTg2XTf69LT0-lSPPYhtGB3njwMWuSBAZ-qlnaAj6-RrVI0782wqEvrOzEueone3jm5TmYorBZOz5EVD8G6RW6vJ1DIsmh3cwcBJYO8FIoVXnNQv3YDK80LEP4hkVSMYODZbar4jFX1bY/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Note: you can adjust the size of gallery, changing the values in red (590 and 126).

4. Now search for the following piece of code:

</head>

5. Just above/before it, add this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhedAtN4koHgGN06JDCH1evFx3DoSPgK-cFLXdD1qHQqiQ77nb1o3G-WFVUNkJhwdER-DAYBkJei7ftdxKcmEzU9urUv8fPCSGcrPeBduD12ozX8ToU3h616z1SiHNMZJcjKelY3XTMnjw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6DvL-xv-MoyY6ew9D8yViLsZYmTm40xzgE2mcaEJj6u2QdvZLC8ncFN_4HfpyxhM_Cy6_du89uvowMB0aRaVK8TQCeD7h_n2AoCFMrLM4ylUQIgM0xUAhwNKzJnkwYL5a47dlAxwPLC5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Next thing to do is to place the widget just above the blogger posts.

6. Search for this code:

<b:section class='main' id='main' showaddelement='yes'>

...or if you can'find it, search for this one:

<b:section class='main' id='main' showaddelement='no'>

7. Just below it, add the following code:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == "false"'>
       <b:if cond='data:showSnippets == "false"'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rq3iWxIAsXiqbnYW5IaD4czMWBTmB5sf0rJ0N3NE5z9-B-F94fa6ezZkjk4yZ2TWHQeKrsVzhVnZjLp-Y38LhJG6gP-8gFj-2hKYHwEiffC3lQIBeR5m4IkWRrIEvpWU5y3fTtZBz7-M/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
</div></div></b:if>
</b:includable>
</b:widget>

Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.

8. Preview and if everything is ok, Save the Template.

Friday, April 6, 2012

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog

Adding Static Facebook Like widget on blogger

Just follow the steps:

1. Log in to your Blogger Dashboard, go to Design >> Edit HTML

2. Check the "Expand Widget Templates" box

3. Search (CTRL + F) for this tag:

</head>

4. Add the following code just before/above </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

5. Save the Template.

6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhguQhGoV24hrHCBuJFyC9k9xfa226LjDvodjL4NhXbCItY5jPW5LpBlySBso75zHgSITfBTBPD6keb1x3XrpXLVxUUc6FpXKfVIXIv0YbQBqO8tEzVc9eAYMOrDKnYf8tEEitfXjA_mYw/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

7. Replace YOUR-FACEBOOK-PAGE text above with the URL of your facebook fan page.
Also replace the : symbol in your URL with %3A and / with %2F

For example, my facebook fan page is:

http://www.facebook.com/pages/Helplogger/120574614736021

After replacing the characters above, your facebook fan page should look like this:
http%3A%2F%2Fwww.facebook.com%2Fpages%2FHelplogger%2F120574614736021

Other settings (optional):
- to change the width and height of the facebook box, change the bolded values (250)
- to change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color (you can choose it from here)
- if you want to change the color of the facebook badge (facebook button) replace this code #3B5998
with your own.

8. Now you can save your widget. Enjoy!

Credit goes to Harish (way2blogging)

Thursday, April 5, 2012

A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!

related post, related post blogger, blogger tricks

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

</head>

Step 3. And just above it, paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

Note:
- if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color)

-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:

<div class='post-footer'>

Step 5. Just above it, paste the code below:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Save Template

Enjoy!!!

Wednesday, March 28, 2012

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

related post, related posts blogger, blogger widgets

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKHlicr49-Ez82erWrcz4fIsj-5_nhzm_HlzzoU9zl9ul4l2I6goUCLAUvnZVlu1l0XGtGr8QbuWTYdlGZ_bNTr9ebmaZ2oogiEY627-JbfBEzO5UKNL0hI389-kDsr8rjAKKXun4YO86/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

<div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://bloggingcreate.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PStQ4X6UACUL5zZbAxVOc8OOuw6f7oigKzKBb0bDP9DN44G1_49q06dDKKISHuWK_aK17T0R4Pku19vdELShLM5yPsq_rMgpZAeq_v49GiXwu0Mh-pBYiZ15Oe_uHgCCymo7GaVCI7Ya/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

Create a blog, blogging

Saturday, June 2, 2012

Recommended Post Slide out Widget for Blogger

Friday, June 1, 2012

How to add “Email Subscription Form” to Blogger Blogspot

Saturday, May 12, 2012

Add Facemoods Emoticons To Your Blogger Comments

Friday, May 4, 2012

Recent Posts Widget with Thumbnails for Blogger/Blogspot

Saturday, April 28, 2012

Google Translate Widget with Flags For Blogger

Simple Recent Posts Widget for Blogger/Blogspot

Thursday, April 26, 2012

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Wednesday, April 18, 2012

How to Add Emoticons/Smileys in Blogger Comments

Sunday, April 8, 2012

Add a Popular Posts Gallery just above your Blogger posts

Friday, April 6, 2012

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Thursday, April 5, 2012

A Simple Related Posts Widget For Blogger

Wednesday, March 28, 2012

How To Add Related Posts Widget To Blogger with Thumbnails