Don't Miss

Latest Posts
Browsing Category "Blog Design"

How to Create a Button/Badge for your Blog

- 3 Comments
You might have seen that many blogs and directories are using Buttons for their promotion. Blog buttons are becoming a very popular way to promote and link back to your blog. A badge in your blog's sidebar is really a good way to provide your readers something that they can use and display on their own blog to show that which blog's they read and it'll also increase your blog's traffic. It's really easy to create a button for promoting your blog. You can choose color, border, font style, background and text for your button by using this button maker tool. Using this tool is extremely easy and in this article we'll show you How to Create a Button/Badge for your Blog using Button maker tool.

How to Create a Button/Badge for your Blog

Go to this page and Customize you badge
Customization:
1- Choose a base color or keep it transparent
2- Choose a border color or keep it transparent
2- Select your Button Size and
4- Choose a vertical bar color or keep it transparent
5- For better look, write a small abbreviation of your blog or whatever you want (Left Side Text) and select its background and text color
6- Write your main keyword in the (Right Side Text) and select it background and text color
7- Click on Update >> Looks good so right click on the image and Save it
8- Upload it to blogger to get its link

How to Add this Badge to your Blog

<a href="Your-Blog-URL" ><img  border="0" src='Your-button-link' rel="Keyword"/></a>

1- Replace Your-Blog-URL with the url of your blog
2- Replace Your-button-link with the link of your button
3- Replace Keyword with your blog's keyword
Now to add this button to your blog Log in to your Blogger Account >> Layout >> Add a Gadget >> Scroll down the page and select HTML/JavaScript gadget from the list of gadgets. Paste the above code after customization in the empty HTML/JavaScript Box and click on Save Button.

From Editors Desk

I hope this article helped you in learning How to Create a Button/Badge for your Blog and How to Add it to your Blog. Share this article with your friends and don't forget to subscribe us. Take Care!

Add Rainbow Animation Effect to Links in Blogger

- 23 Comments
Got tired of Blogger's default link effect? Want to change your links hover effect? Don't worry, today we have a beautiful link effect for your blog. By using this link effect you can make the links on your blog change through different colors when the cursor is hovered over them. This effect works on JavaScript and it's really easy to implement this Rainbow Animation Link Effect to your blog. Follow the steps below to implement this Rainbow Animation Effect to your Blog.

How to Add Rainbow Animation Effect to Links in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> and Search for the <head> tag
Step 3. Now Copy the below code and Paste it just below/after the <head> tag

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Step 4. Hit the Save Template button
And you're done...

From Editors Desk

I hope this articled helped you in learning How to Add Rainbow Animation Effect to Links in Blogger. Share this article with your friends. 

Add Page Peel Effect with jQuery in Blogger

- 4 Comments
Page Peel effect is actually a page flip effect, when you move your cursor on over it, it flip and shows that whats behind it. There are many ways for adding this effect, and today we are going to share one of them. Just like other Peel effect widgets, it would also appear at the top right corner of your blog and whenever your visitors would move their cursor over the top right corner of your website, it would display the RSS Image with its link. Check the following screenshot to see how it works.

How to Add Page Peel Effect

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> Search for the <head> tag
Step 3. Now Copy and Paste the following code below/after <head> tag
Note: If your blog already have jQuery plugin, then ignore this step

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

Step 4. Now search for </head> tag and paste the following piece of code just above/before it

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz3q3h2zCv7CfnjbVW3Qf06uFaWlBrVKQSLud-kTbP9TPVdOMl1g7fTyj6E6ASKoEspj3a7ZqUjX_xBvzlWGaVo3vreRS5imzfG9AUjpKFB48TUUtXaL6-h_4D9H2n7XIcN10kyAVp8A/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://blogolect.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOOskp1gqv0QqtqnuJnHX00nJ2WgEcdPi3HTTJRQtY31Q_GnKf8VljKvkRF-ZKbacVAUdzly0Rqx4dYx0RwJQEwXMFkK_k3Lym-kF-bdd9tE-up7AmsRmTYo7584cmbDP0M8LZ6Cg26I/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&quot;).stop()
    .animate({
    width: &#39;307px&#39;,
    height: &#39;319px&#39;
    }, 500);
    } , function() {
    $(&quot;#pageflip img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;52px&#39;
    }, 220);
$(&quot;.back-img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
});
});
</script>

Step 5. Now search for <body> tag and paste the following piece of code just after the close tag '>'

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogolect'><img alt='Blogolect' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRzDkdCzX1NFeCnXV6pyc0eTACmDS0ca4pqthkuDpAt0MSHP0z6w7t7fDrqgu8A_bku1H1trfd8GtlT4t4slFFTziYEeqelRwuYdIBKDAx3yKyOnS4jMjaq4THkx2JAwdNQisWuiQzUBN/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div> 
  • Replace http://feeds.feedburner.com/blogolect with your Link
  • Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz3q3h2zCv7CfnjbVW3Qf06uFaWlBrVKQSLud-kTbP9TPVdOMl1g7fTyj6E6ASKoEspj3a7ZqUjX_xBvzlWGaVo3vreRS5imzfG9AUjpKFB48TUUtXaL6-h_4D9H2n7XIcN10kyAVp8A/s1600/mini_rss.png with your Image URL or keep it default
Step 6. Hit the Save Template Button
And you're done.

Add Spinning/Rotating Effect to Images in Blogger

- 2 Comments
Recently we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts , Add Zoom Effect to Images on Mouse Hover in Blogger and today we've another image effect for you. This effect rotates the image to 360 degree when you move your mouse cursor on the image. To see how this hover effect works move your mouse cursor on the image below.

How to Add Spinning/Rotating Effect to Images

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML and Search for the following tag

]]></b:skin>

Step 3. Copy the below code and Paste it just above/before it

.spineffect img {
 /* Spinning/Rotating Effect for Images By www.blogolect.blogspot.com */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.spineffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  • You can change the degree at which you want to rotate image by changing degree value 360
Step 4. Hit the Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to spineffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

<a class="spineffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

From Editors Desk

I hope this tutorial helped you in learning How to Add Spinning/Rotating Effect to Images in Blogger. Share this article with your friends and don't forget to subscribe us!

Add Zoom Effect to Images on Mouse Hover in Blogger

- 14 Comments
Recently, we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts and today we are going to share another effect for your blog images. This hover effect zooms the image on mouse hover. To see how this image hover effect works, move you mouse cursor on the image below.

How to Add Zoom Effect to Images

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag

.zoomeffect img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
opacity: 0.8;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
opacity: 1;

Step 4. Click on Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to zoomeffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

 <a class="zoomeffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf
I hope that you will like this image hover effect zoom effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated.

Customized Flat UI Labels Cloud widget for Blogger

- 5 Comments
Blogger default labels cloud widget is simple and not so much attractive. Consider that your website has stylish and beautiful look but labels cloud widget is simple, so its a bad impression on your readers/visitors. But don't worry, you can customize blogger simple labels cloud widget to a stylish one using simple techniques. So, today in this articles we are going to learn that how you can customize Blogger default labels cloud widget to a Flat UI Style Labels Cloud widget. Ok, let's come to the point :
Recommended For You:
Customized Colorful Flat UI Labels cloud widget for Blogger
Customize Labels Cloud Widget in Blogger

How to Customize Labels Cloud widget

Step 1. Add the Default Blogger Label Cloud widget and Configure it like the image below :
Step 2. Hit the Save Button
Step 3. Go to Template and click on Edit HTML Button
Step 4. Search ( Ctrl +F ) for the following tag :

]]></b:skin> 

Step 5. Now copy the below code and paste it just above/before it  ( ]]></b:skin> ).

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size a {background:#2aa4cf;border-bottom:3px solid #000000;}
.sidebar .label-size a:hover {background:#000000;border-bottom:3px solid #2aa4cf;}

Customization:
  • To change label color replace 2aa4cf with your HTML Color code
  • To change bottom border color replace 000000 with your HTML Color code
  • To change label color on hover replace 000000 with your HTML Color code
  • To change border color on hover replace 2aa4cf with your HTML Color code
Note : You can use our HTML Color Code Generator for HTML Color codes
Step 6. Hit the Save Template button
And you're done !

Customized Flat UI Labels cloud widget for Blogger

- 1 Comment
Blogger default Labels cloud widget is simple, not so much attractive and users are getting bored with ugly and unclean labels cloud widget. Consider that your website has clean, stylish and beautiful look but labels cloud widget is simple and unclean, so its a bad impression on your readers/visitors. Default blogger labels cloud widget is not so much attractive, so today we are going to share a simple technique for customizing blogger labels cloud widget. Here's a colorful Flat UI labels cloud widget for your blog. Let's learn how to customize labels cloud widget.

How to Customize Labels Cloud widget

Step 1. Add the Default Blogger Label Cloud widget and Configure it like the image below :
Step 2. Hit the Save Button
Step 3. Go to Template and click on Edit HTML Button
Step 4. Search ( Ctrl +F ) for the following tag :

]]></b:skin> 

Step 5. Now copy the below code and paste it just above/before it  ( ]]></b:skin> ).

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:12px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}

Step 6. Hit the Save template Button
Congratulations : You've successfully customized your Labels Cloud widget.

Related Posts Widget with Thumbnails and Summary for Blogger

- 6 Comments
Displaying related posts is a smart way for keeping your blog visitors around. Displaying related posts with their thumbnails and summaries will also help you to increase your blog traffic and today we've an amazing trick for showing related posts along with their thumbnails and summaries below every post. So, let's learn that how to implement this amazing related posts to your blogger blog. Have a look that how it looks like:

Adding Related Posts Widget with Thumbnails and Summary to Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</head>

Step 3. Copy the Below code and Paste it just above/before the </head> tag

 <script type='text/javascript'>Related Posts
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;

var relatedPostsNum = 4;
var relatedmaxnum = 75;
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAk9Wue3rHaQ-8mRo9uSSnO5Lfii275V22RkW-jcHhg52kXjtgg474rEtxlbLuMqKqAQ0m-8uRQeZolW2D-gCDmgKADk4N61ZOktk6x7kTbaNMu2YIda3Z_QpqS8MgcUkVV30r4OfchVgP/s1600/no_image.jpg";

function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r;
  var output;
  var dirURL = document.URL;

  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {

      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
    
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {

      r++;
    } else {
    
      r = 0;
    }

    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>

Customization :
  • Replace 4 with the number of posts you want to show
  • Replace 75 to change the number of characters you wan to show in summary
  • Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAk9Wue3rHaQ-8mRo9uSSnO5Lfii275V22RkW-jcHhg52kXjtgg474rEtxlbLuMqKqAQ0m-8uRQeZolW2D-gCDmgKADk4N61ZOktk6x7kTbaNMu2YIda3Z_QpqS8MgcUkVV30r4OfchVgP/s1600/no_image.jpg with your image URL to change the default image ( If there is no image in the post )
Step 4. Now again Copy the Below code and also Paste it just above/before the </head> tag

<style>
.relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  width: 120px;
  height: 210px;
}

.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}
.relatedsumposts img {
margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}
</style>

Step 5. Search ( Ctrl + F) for the following piece of code

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

And add the following code just below/after it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

Step 6. Now search ( Ctrl + F )  for the following code

</b:includable>
<b:includable id='postQuickEdit' var='post'>

Note : If you can't find it, then search only for the green code
Step 7. Copy the below code and add it just above/before it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>Related Posts</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Step 8. Hit the Save Template Button
And That's it...

How to Create a Magazine Style with Post Summaries and Thumbnails in Blogger

- 20 Comments
Today, we've another interesting blogger trick and using this trick you can change your blog's simple posts view to a magazine style view. This trick will change your blog posts simple appearance i.e. List style to a beautiful magazine style. There are several ways for creating a magazine style and today we are going to learn one of them. How a magazine style looks like ? Here's a preview of magazine style template. -->

Creating a Magazine Style with Post Summaries and Thumbnails

Step 1. Log in to your Blogger Dashboard
Step 2. Select a Blog >> Go to Template and Backup your template
Step 3. After the Backup click on Edit HTML Button
Step 4. Search (CTRL + F) for the following Tag

<data:post.body/>

Note : You'll find the above tag many times but you've stop at the second one
Step 5. And Replace the above code ( <data:post.body/> ) with the following one (Remove <data:post.body/> and paste the following code instead of it)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Note: You can replace the text Continue Reading with another you like
Step 6. Now search (CTRL + F) for the following tag

<b:include data='post' name='post'/>

Step 7. And replace it with the following code

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading &#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Note: You can replace the text Continue Reading with another you like
Step 8. After that search (CTRL + F) for </head> tag
Step 9. And paste the following code just before/above it

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { /* styles for first post container */
width: auto;
height: 250px;

float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* color and size of first post border */
}
.first-body { /* first post summary styles */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* First Post title styles*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* mouseover color for the First Post title */
color: #1061A1;
}
.post { /* small posts container styles */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;

padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* color and size for small posts border */
overflow: hidden;
}
.posts-thumb { /* small posts thumbnails styles */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* small posts titles styles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* mouseover color for the Small Posts Ttitle */
color: #005B77;
}
h2.date-header { /* Post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Read More link styles */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link {
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if> 

Customization :
  • In posts_no_thumb_sum = 290; Replace 290 with the number of characters you want to show for the small posts when there is no image available in the post
  • In posts_thumb_sum = 240; Replace 240 with the number of characters you want to show for the small posts when the image is available in the post 
  • In img_thumb_height = 80; Replace 80 with the height of small posts thumbnails
  • In img_thumb_width = 80; Replace 80 with the width of small posts thumbnails
  • In first_no_thumb_sum = 600; Replace 600 with the number of characters you want to show for the first post when there is no image available in the post 
  • In first_thumb_sum = 540; Replace 540 with the number of characters you want to show for the first post when the image is available in the post 
  • In img_thumb_height1 = 145; Replace 145 with the height of first post thumbnail
  • and At last in img_thumb_width1 = 165; Replace 165 with the width of first post thumbnail
To change the height and width for the first post container edit the below codes

width: auto;
height: 250px;

To change the width and height for the small posts container edit the below codes 

width: 290px;
height: 210px;

Step 10. Hit the Save Template button
Now take a  deep breath and check your blog

3 Different Popular Posts Styles for Blogger

- 10 Comments
Popular posts widget is a widget which shows the popular posts with title means it show the most visited posts of your blog. Blogger provides its default popular posts widget that you can easily add to your blog's sidebar. But today we are going to share that how you can customize blogger popular posts widget and make it more attractive. Today we've 3 Different popular posts styles to customize popular posts. Customizing this widget is easy more than you think. So, guys follow the below steps to Customize popular posts widget in blogger.
Recommended For You :
Add 2 Stylish Custom Popular Posts Widget to Blogger

How to Customize Popular Posts widget

Step 1. Add the Default Blogger Popular posts and Configure it in such a way that it shows only post titles as you can see it below :

  • Remove the check marks from Snippet and Image Thumbnails by clicking on them 
Step 2. Hit the Save Button
Step 3. Go to Template and click on Edit HTML Button
Step 4. Search ( Ctrl +F ) for the following tag :

]]></b:skin> 

Step 5. Now copy any one code that you like from the following 3 codes and paste it just above/before it  ( ]]></b:skin> ).

Custom Style 1 :

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575;
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E;
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E;
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none; 
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee;

#PopularPosts1 ul li a:hover{
color:#444;
margin-left:3px;
}

Custom Style 2:

#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777;
border: 2px solid #ddd;
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333;
text-decoration:none;
font-size:14px;
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Custom Style 3 :

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* The Color of widget title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out; 
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* numbers text color \\ */
background: #FB8835; /* numbrs background color */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute; 
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg); 
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* Font size of Post Titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Step 6. Hit the Save template Button
Congratulations : You've customized your Popular Posts Successfully.

Add Round Hover Effect to Images of your Blogger Blog Posts

- 3 Comments
This is our 1st post of the new year 2014 and in this post I'm going to share another Hover effect for your Blog. You may have seen Image hover effects on many blogs. The hover effect I'm going to share with you today will change the default image border to round border on hover. This effect works on CSS and adding this effect to your blog is very easy. So, guys follow the steps below to add this Image Hover effect to your blog.
Recommended Posts:
Add Hover Effect to Images of your Blogger Blog Posts 

Adding Round Hover Effect to Images of your Blog

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Add Hover Effect to Images of your Blogger Blog Posts - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag

.post img {
text-align:center;
border:3px solid #39F;
-webkit-border-radius:0;
-moz-border-radius:0;
-o-border-radius:0;
border-radius:0;
margin:0 2px 4px 0;
padding:2px;
}

.post img:hover {
text-align:left;
border:3px solid silver;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition:all .45s ease-out;
-moz-transition:all .45s ease-out;
-o-transition:all .45s ease-out;
transition:all .45s ease-out;
margin:-6px -8px -8px -6px;
padding:1px;
}

Step 4. Click on Save Template button

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf
I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated
I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated  - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf
I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated 
Log in to your Blogger Dashboard
Add Hover Effect to Images of your Blogger Blog Posts - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog. - See more at: http://blogolect.blogspot.com/2013/12/add-hover-effect-to-images-of-your-blog-posts.html?showComment=1388413555068#c8192196137529708425

Add Hover Effect to Images of your Blogger Blog Posts

- 2 Comments
Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog.

Add Hover Effect to Images of your Blogger Blog Posts 

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag

.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post img:hover {
background:#FDFDFB;
border:1px solid #FF3300;
-moz-box-shadow:0 0 10px 2px #FF0000;
-webkit-box-shadow:0 0 10px 4px #FF0000;
box-shadow:0 0 10px 4px #FF0000;
}

Step 4. Click on Save Template button
That's it!!!

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated