Show Recent Posts With Thumbnails For Particular Label or Category in Blogger-2014

New Recent post widget 2014,Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category.



Screenshot

To add this cool gadget/widget for the latest categories, just follow the next steps:

Steps

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

Step 2. Click anywhere inside the code area and search (CTRL + F) for this piece of code:

]]></b:skin>

... 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 id="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/AVvXsEiINigdmCHAWI_jSOpMTYos9KQwFQbZ5P6CJ3yhkVsl5KzycS56_XbTQ8vkpoFym9uJCZ2kmzJJuhaGVAVceHI1dDvwl9bYZ04-O6m7UrjgJK0d-8xaP3P5q-I1RUhhUFykDxPnkcA_N5c/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

Update! For a better image resolution add this script above the </body> tag:

<script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);             
</script>

... save the template.

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 Sarkari Jobs exam posts from other labels then just repeat step 5 for each additional category you want to add.

That's it :) Enjoy!

Beautiful Popular post For blogger widget 2014 & Professional Social Sidebar Widget for Blogger and Website 2014

Posted By: kp on Tuesday, 22 April 2014

0

Read More

Professional Social Sidebar Widget for Blogger and Website 2014

Best widgets for blogger in 2014 .Many people think that Blogger lacks in all of the extra goodies you can add to other platforms like WordPress, but it simply isn't true. By using widgets you can customize your blog as much as you like by just adding little snippets of code to the sidebars.


Today I'm publish a Professional Social Sidebar Widget for Blogger. It's very attractive and beautiful social widget. This social connect widget position at sidebar and include slide out connect social options.Let's see the demo and check out tutorial :

                                                         Live Demo


How to add Professional Social Sidebar Widget on Blogger


First go to Blogger Homepage - Blogger Login Page and Select More Option as seen below screenshots.

Then after select Layout Option and Go to add widget HTML/JAVASCRIPT. Select the given below code and paste between blank place on widget option & save it.

<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='https://twitter.com/digitalhubinc' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='http://dribbble.com/digitalhubinc' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://www.tumblr.net/digitalhubinc' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.net/digitalhubinc' target='_blank'>
<span>facebook</span>
</a>
</li>
        <li>
<a class='entypo-rss' href='http://feeds.feedburner.com/digitalhubinc' target='_blank'>
<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

At last , Properly All Done on your Blogger Template and See Your Blog.



We hope all of you enjoy this post and share it. Please drop your valuable comment.

Posted By: kp on

0

Read More

Numbered Popular Posts Widget for Blogger 2014

We can rarely see blogs which do not use Popular Posts widget. This widget decreases bounce rate and increase the pageviews of your blog. Making them attractive and eye-catching will make more people click on it hence making your blog more awesome and better.

I have already posted Popular Posts customization tutorials many a times. You can check them out below.

Beautiful Popular post For blogger widget 2014

How to add smooth facebook floating sidebar widget blogger

You can see a live working demo of this popular posts widget by clicking the button below.

Live Demo

After seeing the demo in order to add this widget to your blog follow the steps below.

Adding the widget in Layout

Firstly go to Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.

Adding the CSS in Edit HTML

Now go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
} 

After adding the code save the template. Now you and your visitors can see this awesome numbered popular posts widget in your blogger blog.

Posted By: kp on Sunday, 20 April 2014

0

Read More

Beautiful Popular post For blogger widget 2014

Ever wanted a really Beautiful Popular post For blogger widget 2014  for your blogger blog? If yes, then you have landed on the right place. Today I am back with yet another unique and amazingly looking popular posts widget customization.

I already new popular post widget published now,so check it now,

Numbered Popular Posts Widget for Blogger 2014

smooth facebook floating sidebar widget blogger

                            Live Demo

Once you have seen the demo, to add the Popular posts customized widget follow the given steps.


Adding the Popular Posts Widget
Firstly go to Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.


Adding the CSS
Now we have to add the CSS of the Popular Posts customized widget, for this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>

/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }

.item-content:hover img {transform: rotate(10deg) scale(1.2);}

.item-content { position: relative; }

After adding the code save your template. Your are done now. Now you and your visitors can see this cool Popular Post widget on your blog.

Adding the JS

Usually Popular posts widget do not require any JavaScript, but this one needs in order to resize the popular posts image and cut short the snippet.
To add the JS, search for </body> and paste the below given code just above it.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

After adding the code save the template. PS. Remove the code in red if you already have it in your template.



You are done now. Now you and your visitors can see this Beautiful Popular post widget on your blogger blog. Also it is my earnest request to you that please do not remove the comments added in the codes. They will not be displayed in your blog. Only the person viewing the code can see this.

Posted By: kp on

1

Read More

How to Choose The Right Template For Your Blog ?

Templates play an important role in the success of your blog. They can affect your traffic, the reader, SEO and much more. There are many different things you need to keep in mind when choosing a template but honestly the greatest problem that site owners face is the inability to choose! Below are a few tips to help you choose the perfect template for your blog or website and hopefully it will be one that will work for years to come.

1.Design

A Good design is a mode of attracting your readers to come to your site again. It’s like having a warm inviting home (with a good couch). If your home is messy and uninviting to guest, they won’t want to visit you again. If your design is good and is easy to navigate, then users will want to come back to your site (we’re not taking into account content right now, which definitely plays an even bigger role). Beyond being inviting and easy to navigate, design really depends on your needs. There are many kinds of styles to choose from, like the magazine/news style, a product showcase design, a one pager or a great business layout. If your site is a significant part of your business by either selling products, generating revenue or creating leads, think about hiring out a custom design that perfectly meets your needs.

2.Speed

Speed matters… A lot… Your visitor have no patience when it comes to internet browsing. If your website is too slow (like 5 seconds or more!), they will be gone before they arrive. If you pay attention to phone or computer ads, what are they always trying to convince you of? They they are the fastest around (new faster processors). So be sure to choose a template with good speed, If you don’t people will leave your website even if you have good content. Speed also plays an important role in the SEO. Google knows how important site speed is and they put a high level of importance on your site speed. A good way to test your site’s speed is to run the demo through Google’s site speed test, no, it’s not perfect, but it’s a start.

3.Responsive or Not

Today, a responsive design is really the only way to go as nearly 40% of all web traffic is mobile. Like we said before, online guests want their information fast (and easily accessed). If your site is hard to view on a mobile device, they will leave immediately. Creating a separate mobile site is no longer the preferred method, if your template isn’t responsive, look for a new one.

4.Fonts

Most people ignore fonts, but fonts are really important in order to have an attractive and easy to navigate website. Font’s are an art form in and of themselves, they really cannot be overlooked. A good place to look for and find fonts for your website are at Google Fonts. Also, here are a few highly recommended font combinations that you can find at Google Fonts.

• Roboto & Roboto Slab
• Raleway and Merriweather
• Lustria and Lato
• Ubuntu and Lora
• Quattrocento and Quattrocento Sans

5.Its Up To You

We have provided just a starting point, now it’s totally up to you which kind of template you want and which is best suited to your blog. The best way to start is to determine what your needs are and then to find templates that can best fulfill your needs. Look at many different templates before choosing yours, look at premium, free and even contact a designer (like Ryan) if you decide that custom may be a good choice.

Posted By: kp on Friday, 18 April 2014

0

Read More