Box Social Media Plugin for Blogger

Hai Friends! Today I'm going to share a new social media plugin for the blogger. This plugin helps you to serve your social media links in an attractive look on your blogger sidebar. 

For those, who want to try this plugin make sure to take a look at this plugin by clicking on the below demo button.

LIVE DEMO

Now if you like it and want to install it on your own blog then, simply follow the below simple steps and install it without any problem.

At the first, go to the blogger dashboard, Go to the "Template" section and then click on the "Edit Html" button.

This widget uses font Awesome , There for add the following CSS link above </head> tag:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Then copy and paste the below code before ]]></b:skin> tag:

/* Social Media Box Widget */.sidebarbox-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%;}.sidebarbox-img{position:relative;max-height:140px;overflow:hidden}.sidebarbox-img img {width:100%;transition:all .6s;}.sidebarbox-img:hover img{transform:scale(1.2) rotate(-10deg)}.sidebarbox-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}.sidebarbox-img:hover:before{background:rgba(0,0,0,0.6);}.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}.sidebarbox-float{text-align:center;display:table;width:100%;height:100%}.sidebarbox-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}.sidebarbox-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}.sidebarbox-float a i{font-weight:normal;margin:0 5px 0 0}.sidebarbox-wrpicon{display:block;margin:15px auto;position:relative;}.sidebarbox-wrpicon .extender{width:100%;display:block;}.extender{text-align:center;font-size:16px}.extender .sidebarbox-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}.extender .sidebarbox-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:70%;}.extender .sidebarbox-icon i{font-family:fontawesome;margin:0 3px 0 0}.sidebarbox-icon.fbl a{background:#3b5998}.sidebarbox-icon.twitt a{background:#19bfe5}.sidebarbox-icon.crcl a{background:#d64136}.sidebarbox-icon.fbl a:hover,.sidebarbox-icon.twitt a:hover,.sidebarbox-icon.crcl a:hover{background:#404040}.extender .sidebarbox-icon:hover a,.extender .sidebarbox-icon a:hover{color:#fff;}.sidebarbox-info{margin:10px 0 0 0;font-size:13px;text-align:center;}.sidebarbox-info p{margin:0px 0}.sidebarbox-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700;border-bottom:2px solid #e73138;padding:5px;}

Now go to the "Layout" section. Click on the add a widget option. (According to your need). Select Html/JavaScript from the popup menu. Add the below Html code in the Html/javascript box.

<div class='sidebarbox-img'>
        <img class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOnzgvt8DHS72nbqLDzUvVKzeCvayuTqxHHCM77Ce_dqt13cLJiKnku6y6RJNJKUqMNT0qRSsHmAJ8FkvunVVbUSCsq6wVbIbOtGtwMuCSX05GfY04USF-5sT7iQ8afsl7B17_hxX1zJg/s720/synch-social-channel-with-email.jpg" width="300" />
        <div class='aboutfloat-img'><span class='sidebarbox-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'></i> Join Our Site</a></span></div>
    </div>
    <div class='sidebarbox-info'>
      <h4>Smartpik</h4>
      <p>Sharing Techniques</p>
    </div>
    <div class='sidebarbox-wrpicon'>
      <ul class='extender'>
        <li class='sidebarbox-icon fbl'>
          <a href='https://www.facebook.com/smartpik.in/' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'></i> Like</a>
        </li>
        <li class='sidebarbox-icon twitt'>
          <a href='https://twitter.com/smartpik_in' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'></i> Follow</a>
        </li>
        <li class='sidebarbox-icon crcl'>
          <a href='https://plus.google.com/u/0/+Smartpikin/' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'></i> Circle</a>
        </li>
      </ul>
  </div>

Then replace the highlighted codes with your picture, blog title, description, and links to your social media accounts.

That's it! I hope you like this plugin! Stay tuned for more cool plugins like this! Thanks for reading!

Gokul 5/18/2016 0 Read More

Auto Scrolling Recent Posts Bar Plugin with Thumbnail & Date for Blogger

Add new and responsive auto scrolling recent posts bar plugin with Thumbnail & Date in Blogspot blog - Hey guy's I'm back with a new Blogspot plug, called Recent post bar. This plugin will help you to show the recent posts of your blog in a very stylish way. This bar plugin is not like others, the best part of this plugin is that it will show the thumbnail of the post with date and the Author name.

For those, who want to try this plugin make sure to take a look at this plugin by clicking on the below demo button.

Live Demo

Now if you like it and want to install it on your own blog then, simply follow the below simple steps and install it without any problem.

At the first, go to the blogger dashboard, Go to the "Template" section and then click on the "Edit Html" button.

Now copy the below CSS code and paste it just before ]]></b:skin>

/* CSS News Ticker */.ticker-wrap{display:block;text-align:center;margin:20px auto 0 auto;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif;}.ticker-wrap>span>a{color:#222;text-decoration:none}#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

After that, copy the below JavaScript code and paste it just before </body>.

<script type='text/javascript'>//<![CDATA[// News tickerfunction getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});//]]></script>

Note:- Add the below css code to make this plugin responsive just after @media only screen and (max-width:640px) (Not Required).

.artabs-menu li span,.top-menunavi li.infoarlina,.top-menunavi li.searchbutton,.ticker-wrap {display:none;}}

Click on the save template button to apply these changes.

Now go to the "Layout" section. Click on the add a widget option. (According to your need). Select Html/JavaScript from the popup menu. Add the below Html code in the Html/javascript box.

<div class='ticker-wrap' data-domain='www.smartpik.in'>
<div id='ticker'>
</div>

Click on the orange save button then, refresh your blog and see the magic. Note: Don't forget to replace the above-highlighted text with your own blog URL.

That's it! I hope you like this plugin! Stay tuned for more cool plugins like this! Thanks for reading!

Gokul 4/23/2016 0 Read More

Sidebar Featured Posts Slider for Blogger

Hai Friends, Today I'm going to share a new blogger plugin. Everyone wants to show their best posts on the home page through a featured post widget. One of the best ways to display the featured post is using the slider plugin. There is so many sliders are available on the web and today I'm sharing a premium looking responsive featured post slider for the sidebar.

Live Demo

You can also use this plugin for displaying ads or any other contents on your blogs sidebar. First of all, go to your blogger dashboard and navigate to the Template section and click Edit HTML. Then add the below CSS code before the </head> tag.

<style type='text/css'>#slide{height:auto}#slidepager{width:auto;margin:0 auto;text-align:center;display:block!important}#slidepager&gt;span{display:inline-block;width:10px;height:10px;margin:10px 5px 0;background:rgba(0,0,0,.2);text-align:center;border-radius:100%;font-size:17px;text-decoration:none;transition:background .3s linear 0s;cursor:pointer}#slidecontent{margin:0 auto;transition:opacity .3s linear 0s;color:#AAA;background:#fff;border:1px solid #dedede;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:relative;overflow:hidden;height:auto}.slidepanel{width:100%;padding:10px 15px 15px;-moz-box-sizing:border-box;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box}.slidepanel&gt;h2{text-align:left;font-size:20px;font-weight:bold;line-height:1.2em;color:#333;margin:0 auto 10px;text-transform:capitalize;padding:0!important}.slidepanel&gt;p,.slidepanel&gt;span{font-size:14px;font-weight:normal;line-height:1.2em;color:#777;margin:10px 0 0!important}.slidepanel a{color:#333;text-decoration:none;font-weight:700;transition:all .4s ease-out}#slide:hover .slidepanel a{color:#e8554e}.slideimage{width:100%;height:200px;margin:0;padding:0;position:relative}.slideimage img{width:100%;height:100%;margin-bottom:-4px}.clear{clear:both}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}</style>

And also add the below script before the </body> tag.

<script type='text/javascript'>
//<![CDATA[
function _(e){return document.getElementById(e)}function pager(e){_("slidecontent").style.opacity=0;for(var n=0;n<ba.length;n++)ba[n].style.background="rgba(0,0,0,.2)";ba[e].style.background="rgba(0,0,0,.7)",setTimeout(function(){_("slidecontent").innerHTML=bca[e],_("slidecontent").style.opacity=1},300)}function bubbleSlide(){bi++,bi==ba.length&&(bi=0),pager(bi)}var ba,bi=0,intrvl;window.addEventListener("load",function(){ba=_("slidepager").children,intrvl=setInterval(bubbleSlide,7e3)});
//]]>
</script>

After these two adding click the save template button. Then navigate to the blogger layout section. Now select Add a Gadget option from the sidebar of your layout and select HTML/JavaScript gadget.

Then copy and paste the below HTML code inside it and replace the highlighted lines in the code with yours.

<div id='slide'>
<div id='slidecontent'>
<div class="slideimage"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>
<script>
//<![CDATA[
var bca = [
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#"><img height="200" src="Image URL" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#">Post Title</a></h2></div><div class="clear"></div>'
];
//]]>
</script>
</div>
<div id='slidepager'>
<span onclick='pager(0); clearInterval(intrvl);' style='background:rgba(0,0,0,.7);'></span>
<span onclick='pager(1); clearInterval(intrvl);'></span>
<span onclick='pager(2); clearInterval(intrvl);'></span>
<span onclick='pager(3); clearInterval(intrvl);'></span>
<span onclick='pager(4); clearInterval(intrvl);'></span>
</div>
</div>

In this above code, you can see 6 different featured post sections (1+5). Note that add the same URLs in the first two highlighted codes for the correct working of this plugin.

The best image resolution for this plugin is 300px x 200px. After all, see the results on your blog. Thanks for reading!

Gokul 4/23/2016 0 Read More

4 Signs a Smartphone May Have a Virus

Malware is a nightmare that you will not want. I personally have never experienced it, and believe me, your time and your mind will be drained in order completely free of the grip of malware.

Based on that experience, here are four symptoms that indicate smartphone Android pal was plagued with malware.

Sudden Internet Data Boros
Characteristic of the first you should notice is the usage pattern data that suddenly jumps drastic when your online activity is mediocre. Specifically does this mark can not mean malware is attacking, because if you turn updates automatically, the same phenomenon will also be found. Therefore, make sure the other symptoms.

Ads Appear On Screen Smartphone
The second sign suddenly pops up ads on the screen when smartphones are not running the application or game. If you notice, your ads will typically appear only when the application is running or in other conditions when the application to be closed.

But if an ad appears on the outside of these times, such as when you are in the menu bar or display the home, then it is suspect as the activity of malware.

Installed Applications Itself
The third sign is the most easily recognizable, typically malware will download and install the app without your knowledge. If this is found, try to check in the Settings menu - App, whether there are applications Time Service. If anything, the malware in action watches out.

If not Time Service, use the file manager that is better equipped to find malware Monkey Test. Both malware most often is the culprit of the problems mentioned above. From my experience, the malware is difficult to overcome, I was alone in the end have to do a flash reset.

Foreign Folder Appears
Signs of the next is the appearance folder unidentified usually deliberately created by the malware to accommodate the data. If it is found, should be vigilant and use antivirus are good to prevent attacks more dangerous.

The fourth of the above symptoms is a common sign smartphone that is being colonized by malware. There are some solutions that you can take.

• Use antivirus qualified, but from my experience, this method does not always succeed. 
• Uninstall apps that you download from a source that is not clear and delete the file in question. 
• Factory reset 
• flashback 
• Using a third-party ROM

Gokul 4/06/2016 0 Read More

Simple Sitemap or Table of Contents For Blogger

How to Install a Simple Sitemap In Blogger - This time, I will share how to install lightweight and simple label based sitemap on the blog. Although the contents of this Sitemap look simple, but visitors will still love it because it is fairly lightweight widget without long loading events.

This widget displays a list of posts on your blog that is sortable by the labels on the blog. Here's a demo of the widget's content:

Live Demo

How Is it? If you want to put up this Sitemap to your blog? If so, please follow these steps: 

Sign into Blogger > Select Menu page > Then create new page posts > There is no choice and go to HTML Compose tab (upper left corner)> Then add the below code inside it:

<div style="background-color:none; max-height:1200px; margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;"><script src="https://googledrive.com/host/0B-AYvC9Y1riaQUdLTlVzT1A3cUk"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Publish page and finished. Not too hard right? That's it! I hope you like this Plugin! Stay tuned for more dynamic Plugins! Thanks for reading!

Gokul 3/10/2016 0 Read More

Sexy Popular Posts Widget For Blogger

How to add a sexy popular post widget into blogger blog - As you guys already know that, every blogger loves to show their popular articles with the help of a popular post widget. And at this present time, there is so many stylish and dynamic popular post widgets are available on the web. But the actual problem is that every widget is old and you can see the same widget on too many blogs.

So if you are not the same blogger like others (e.g who don't like to display the same widget on his blog) and you want to make your blog unique and sexy by adding some new widgets on your blog, then here is a good news for you. Yes, today with the help of this post I'm going to show you how you can easily setup a colored popular post widget with mouse hover effect for your blog without having any problems.

Before adding this widget to your blog, make sure to take a look of this widget by clicking on the below demo button.

Live Demo

If you like this widget and you want to install into your own blog then follow the below simple steps.

First of all, go to your blogger dashboard, then go to Layout section. And add a popular post gadget to your blog. Then go to "Template" section and then click on the "Edit HTML" button.

After that, find the below code by pressing "Ctrl + F" key together from your keyboard.

]]></b:skin>

Now copy the below CSS code and paste it just before ]]></b:skin>

/* Sexy Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:70px;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

Once again find the below code.

</body>

After that, copy the below JavaScript code and paste it just before </body>

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Now click on the orange save template button to apply the changes.

That's it! I hope you like this widget! Stay tuned for more dynamic widgets! Thanks for reading!

Gokul 3/09/2016 0 Read More

Essential Conditional Tags For Blogger

There are a few tricks to hide elements from the blogger blog, You can hide elements in the homepage, posts, and static pages by adding conditional tags.

Here are some essential conditional tags for you to hide your elements

Showing widget only on the home page:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

View the widget only on post pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Displays widgets only on specific pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget

Note: Change your URL in the address you want.

Hiding widgets only on specific pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != " URL of the page "'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Displaying widgets on the static page:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Hide the widget on a static page:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

widget displays only on archive pages:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

After you add the conditional tags above, save the template and view the results. This conditional tags not limited to the widgets, with the help of conditional tags you can wrap the other elements such as Script, CSS, and HTML.

That's it! I hope you like this article! Stay tuned for more cool articles!

Gokul 3/08/2016 0 Read More