World Blog Free 4U: 05/15/13

HOW TO ADD POP OUT SOCIAL BOOKMARKING WIDGET WITH SMOOTH JQUERY HOVER EFFECT?

Step 1: Adding Jquery JavaScript Plugin (Ignore this step if your blog have already a Jquery Plugin)

1. Go to Blogger Dashboard > Design tab > Edit Html
2. Search for </head> tag
3. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Widget Code

1. Now search for <head>
2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Use below Widget Generator to Generate code & Add Directly to Blogger.

Step 3: Or Add Code manually by selecting code given below.

ADD This Code For Automatically

ENJOY :) SAY THANKS :)

To add this cool gadget/widget for the latest categories, just follow the next steps:
Complete The Following Steps To ADD This :)
Steps:-

Step 1. From your Blogger Dashboard, go to Template/Edit HTML

...then tick the Expand Widget Templates checkbox:

Step 2. Search for this piece of code:

]]></b:skin>

and just above it, paste this one:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

Step 3. Now search for this tag (CTRL + F)

</head>

...and add the following script above it:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdF1AdLMRST5sCJwj7fkFQVW8wZ8FbuNHea7dLquzRVZssOAMiydlYm-CmdTvGbQw5tBgFRLyGthNENB3gFUCr2IuJuO1MmDHlpNtxaYdT-m0bng7Nh0eRcMQHbH2icwxbbKKXHxlpzI/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own
So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget:

Step 4. Go to Layout - click on Add a Gadget

Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.

Also within the last code, there are parts that we can customize, just change true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.

That's it :) Enjoy!

World Blog Free 4U

Pages

Wednesday, 15 May 2013

ADD Pop Out Social Sharing Sliding Widget For Website

HOW TO ADD POP OUT SOCIAL BOOKMARKING WIDGET WITH SMOOTH JQUERY HOVER EFFECT?

Show Recent Posts with thumbnails

HeY !!!