Add Simple Pre Code for Blogger With Text Selection

We all are using Pre code instead of Blockquote to get a custom look and feel for our website or blog. But for using pre code you must add a big chunk of code in your Blog and sometimes it affect the loading time.

But there is always an alternative way exists. So In this tutorial, I will show you about adding a simple custom pre code with Simple CSS and JavaScript. This looks professional. And you can serve your widget code in different ways.

Live Demo

As usual first of all go to blogger template editor and copy and paste below code before ]]></b:skin> or </style>

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}
pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}
pre.code-css code {
    color: #0288d1;
}
pre.code-html code {
    color: #558b2f;
}
pre.code-javascript code {
    color: #f57c00;
}
pre.code-jquery code {
    color: #78909c;
}

After that copy and paste below code just before </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

The above code helps you copy the Pre code content by double clicking inside it.

After that save your template.

You can call this custom pre code anywhere in your blog post or website using the below code,

<pre class='code code-html'><label>HTML</label><code>... HTML ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... CSS ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... JavaScript ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... JQuery ...</code></pre>

That's all. You can customize this code according to your wish. Thank You!

Gokul 4/17/2017 0 Read More

How To Remove All Transition Effects From Your Blog

Transition effects are one of the best CSS features that give awesome look and feel to your blog or website. We use this effects in page loading, image loading, buttons, mouse hover and etc.

But some of you don't like this effects. Some guys want clean blogs. If you are using the downloaded template from any websites, that includes a lot of transition effects. It is difficult to change entire CSS code.

But I'm giving a simple piece of code that will remove all of your transition effects from your blog.

Transition effect codes are usually written like this:

.transitions {    transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -moz-transition: all 0.5s ease-in-out;}

If you want to disable transition effects without finding and deleting your transition CSS code. You can simply add the below CSS code into your CSS section to disable the transition effects. 

First of all, go to your blog > Templates > Edit HTML > Please find the below code:

]]></b:skin>

After that add the below code before the above code:

.fullload * {-webkit-transition:none!important;-o-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;}

Not yet completed you have to follow one more tiny step. Again go to template editor and find this code

<body> 

And change it into:

<body class="fullload">

That's it, you completed the job. Now save the template and check your blog, it is working or not.

If it is not working, please comment below I will help you. Thanks for reading my blog, Stay tuned for more cool stuff.

Gokul 11/07/2016 0 Read More

How to Limit Number of Post in Blogger Search

Hi guys, after a long time now I'm active with my smartpik. This time, smartpik will give you a simple tip to limit the number of posts appear when you are searching in blogger search

This is an easy trick. You have to follow some simple steps. Ok! let's start

First of all, as usual, Open your blog in Blogger go to templates section click on the Edit HTML, Now you can see the cool simple single page blogger code. 

Then search for the search-box form from your blog. And that code looks like the below code.

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

After that add the highlighted code into your code.

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input name='max-results' type='hidden' value='7'/>
<input id="button-submit" type="submit" value=" "/>
</form>

The value 7 is the number of posts that shown when anyone searches anything on your page. You can change that into your wish. It is simple editing and it works perfectly.

That's it. Stay tuned for more tips and tricks. Thanks for reading!!!

Gokul 9/11/2016 0 Read More

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

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

How To Install SEO Smart Links in Blogger

How to Install SEO Smart Links in Blogger - This time, Smartpik will share SEO Smart Links plugin for Blogger, Actually, this is a WordPress plugin that changes any given word in an article into a link.

This plugin will read every word specified in the article. For example, if you add word smartphone or computer, then automatically every time the word will turn into a link and only then if in your blog article contained that word.

How to Install SEO Smart Links

As usual Go to Blogger dashboard and select the Template section and click Edit HTML. Then add the following code before </body> tag

<script type='text/javascript'>
function smartLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new smartLink();
f.add(&quot;smartphone&quot;, &quot;http://www.smartpik.in/search/label/smartphone&quot;);
f.startScript();
</script>

If you want this plugin only appears on post pages or any specific pages, please add conditional tags. Reference post: Essential Conditional Tags For Blogger

On the highlighted code, replace smartphone with your own keyword and replace the highlighted URL http://www.smartpik.in/search/label/smartphone with your blog URL.

In the above you can add other keywords like below, for example

f.add(&quot;SEO&quot;, &quot;http://www.smartpik.in/search/label/SEO&quot;);f.add(&quot;Template&quot;, &quot;http://www.smartpik.in/search/label/Template&quot;);f.add(&quot;Blogger&quot;, &quot;http://www.smartpik.in/search/label/Blogger&quot;);

You can also add words into bold, for example

f.add(&quot;&lt;b&gt;Blogger&lt;/b&gt;&quot;, &quot;http://www.smartpik.in/search/label/Blogger&quot;);

Click on the Result button to watch live demo, Note the word smartphone on the demo article:

Result

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

Gokul 3/08/2016 0 Read More

How To Solve OpenID Related Errors In Blogger

How To Solve OpenID Related Errors In Blogger - Actually, maybe for some bloggers commented with OpenID or anonymous for now rarely used.

Well, here I was curious and tried to re-activate the comment with OpenID. After I turn on and test the comments turned out to find an error message " Whoops, that's an error OpenID ". After my googling and found the solution, now with OpenID comments may reappear without an error message as before, want to know how?

Please follow the below steps:

First, you register an OpenID in Stackexchange by entering your data. Once the registration is complete, you will get a confirmation via email.

The next step, open Blogger > Template > Edit HTML > Copy the code below and apply it immediately after the <head> tag

<Link rel = "openid2.provider" href = "https://openid.stackexchange.com/openid/provider" /><Link rel = "openid2.local_id" href = "https://openid.stackexchange.com/user/YOUR-ID" />

Then replace the highlighted ID with YOUR-ID that has been registered in StackExchange.

Save the template and you're done. By applying the tips above, now you can comment with OpenID on your blog or other blogs.

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

Gokul 3/06/2016 0 Read More

Install Fixed Contact Us Form In Blogger

How to install a fixed contact us form widget into blogger blog - At the present time Contact us form is a common widget of every blog. Although there is many stylish contact us widgets are available on the web (e.g. dynamic, floating, etc.). As we know, contact form widget is one of the best email facility that serves to connect between the visitor and the owner of the blog to communicate with each other personally. So today we are going to provide you a stylish floating contact us widget for your dynamic blog. This contact form widget will appear on the blog page exactly at the bottom right corner.

If you want to add it to your own blog, then follow the below steps.

First, go to your blogger dashboard, Now go to the "layout" section and then select " Add a widget ". After that, click on " More Gadgets " and then add the " Contact from " widget

Now go to the " Template " section and then click on " Edit HTML " button.

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

/* Fixed Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
.floating-ai-head a:hover{background:#2588ca;color:#fff}
.floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.floating-ai-head{text-align:right}
.floating-ai-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}

Once again copy the below jQuery script and paste it just before </body>

<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Us</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>

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

That's it! I hope you like this contact form! Stay tuned for more blogger widgets! Thanks for reading!

Gokul 3/05/2016 0 Read More

How To Fix Popular Post Widget Error In Blogger

How to fix the popular post widget error in blogger - You already know guys, The popular post widget is one of the best widgets on blogger because its help us to show the most popular post on our blogs. But the important thing is, In this time some blogger widgets are not working properly. And recently the popular post widget is experiencing some errors. Yes, some bloggers are facing some issue. Like - there is an error in the display selection menu entry that doesn't show data what we choose. For example, the maximum post in this widget I set 5 entries. (See the below image)

But when I preview my blog, then it's showing me 7 posts. And if the selected option is the last 30 days, then it's showing me 10 entries. So today I am going to share my trick with you. And the trick is, How you can easily fix your popular post widget error with the help of some CSS codes.

First you will need to go to your "Blogger Dashboard", Now go to the "Template" section and then click on the "Edit Template" option.

Now you will need to find the below code (Find below code using Ctrl + F key).

]]></b:skin>

After that copy and paste the below code just before ]]></b:skin> if you want to bring only 3 entries.

.PopularPosts ul li:nth-child(n+<mark>4</mark>){display:none;

OR- Add the below code if you want to bring only 5 entries.

.PopularPosts ul li:nth-child(n+<mark>6</mark>){display:none;}

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

That's it! I hope you like this Trick! Stay tuned for more blogger widgets, tips and trick! Thanks for reading!

Gokul 3/05/2016 0 Read More

Stylish Particular Label Recent Posts Widget For Blogger

Today I'm going to share a tutorial for Stylish Particular Label Recent Posts Widget For Blogger. The function of this widget is not much different from the recent post widget, but in this widget, we can determine the recent posts to be displayed based on the specified Label.

Examples of the widget will display like this:

For those who want to install the recent post widget by label on your blog, please follow the following tutorial:

Go to Blogger > Open template editor > copy and paste the below code before </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><style type='text/css'>/* Recent Post by Label */.newsmartpiklabel1 ul,.newsmartpiklabel2 ul{list-style:none;margin:0;padding:0}.newsmartpiklabel1 li,.newsmartpiklabel2 li{margin:0;padding:0;}.newsmartpiklabel1 .widget,.newsmartpiklabel2 .widget{margin:0;padding:0}.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2,.newsmartpiklabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}.newsmartpiklabel2 h2,.newsmartpiklabel3 h2{margin:20px 0 0 0;}.newsmartpiklabel1 h2:before,.newsmartpiklabel2 h2:before,.newsmartpiklabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}.newsmartpiklabel2 h2:before{content:&#39;\f10b&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}.newsmartpiklabel3 h2:before{content:&#39;\f143&#39;;}.newsmartpiklabel1 .index,.newsmartpiklabel2 .index{font-size:10px;float:right;font-weight:400;}.newsmartpiklabel1 .index a,.newsmartpiklabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}.newsmartpiklabel2 .index a{color:#ef6c00;border-color:#ffa726}.newsmartpiklabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}.newsmartpiklabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}.newsmartpiklabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}.newsmartpiklabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}.newsmartpiklabel2 span.newsmartpik_meta_comment a:hover{color:#38761d!important}.newsmartpiklabel2 ul.newsmartpik_thumbs li a:hover,.newsmartpiklabel2 ul.newsmartpik_thumbs2 li a:hover{color:#ff675c;text-decoration:none}.newsmartpik_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}.newsmartpik_right{width:250px;width:47.5%;float:right;margin:0;padding:0}ul.newsmartpik_thumbs{margin:0;padding:0}ul.newsmartpik_thumbs li,ul.newsmartpik_thumbs2{margin:0;padding:0}ul.newsmartpik_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}ul.newsmartpik_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}ul.newsmartpik_thumbs .cat_thumb img:hover{opacity:.9;}ul.newsmartpik_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9;min-height:110px;}ul.newsmartpik_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}ul.newsmartpik_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:100px;height:100px;overflow:hidden}ul.newsmartpik_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}ul.newsmartpik_thumbs2 .cat_thumb2 img:hover{opacity:.9;}span.newsmartpik_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}span.newsmartpik_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}span.newsmartpik_title a{color:#333}span.newsmartpik_title a:hover{color:#ff675c;text-decoration:none}span.newsmartpik_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}span.newsmartpik_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}span.newsmartpik_meta a{color:#aaa;display:inline-block}span.newsmartpik_meta_date,span.newsmartpik_meta_comment,span.newsmartpik_meta_more{display:inline-block;margin-right:10px}span.newsmartpik_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}span.newsmartpik_meta_comment a:hover{color:#ff675c!important}span.newsmartpik_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}ul.newsmartpik_thumbs2 li a:hover,ul.newsmartpik_thumbs li a:hover{color:#ff675c;text-decoration:none}@media screen and (max-width:1024px) {.newsmartpiklabel1 .widget-content, .newsmartpiklabel2 .widget-content {padding:20px 25px;}.newsmartpik_left {width:50%;float:left;margin:0;padding:0;border-right:none}.newsmartpik_right {width:46%;float:right;margin:0;padding:0;}ul.newsmartpik_thumbs .cat_thumb {width:100%;height:auto;}ul.newsmartpik_thumbs .cat_thumb img {width:100%;height:auto;}ul.newsmartpik_thumbs li {margin:0;padding:0;}span.newsmartpik_title2 {font-size:20px;line-height:1.2em;}span.newsmartpik_summary {font-size:14px;}}@media only screen and (max-width:768px){.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px 20px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs2 li{border-bottom:0}span.newsmartpik_summary,.newsmartpik_left{display:none}span.newsmartpik_title{margin:0 0 5px}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}@media only screen and (max-width:480px){#newsmartpiklabel1-wrapper,#newsmartpiklabel2-wrapper{display:none}}@media only screen and (max-width:320px){.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px 20px}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2{padding:10px 20px 1px 20px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}@media screen and (max-width:260px) {.newsmartpiklabel1 .widget-content,.newsmartpiklabel2 .widget-content{padding:10px}.newsmartpiklabel1 h2,.newsmartpiklabel2 h2{padding:10px 10px 1px 10px}.newsmartpik_right{width:100%;float:left;margin:0;padding:0}ul.newsmartpik_thumbs li{margin:0 0 10px;padding:0 0 10px;}span.newsmartpik_title2{font-size:18px;line-height:1.2em}}</style></b:if></b:if>

Also, copy and paste the below code before </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newsmartpik_left">'),document.write('<ul class="newsmartpik_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newsmartpik_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newsmartpik_meta">'),1==showpostdate&&(v=v+'<span class="newsmartpik_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newsmartpik_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newsmartpik_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newsmartpik_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newsmartpik_right">'),document.write('<ul class="newsmartpik_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newsmartpik_title newsmartpik_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newsmartpik_meta newsmartpik_meta2">'),1==showpostdate2&&(v=v+'<span class="newsmartpik_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newsmartpik_meta_comment newsmartpik_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newsmartpik_meta_more newsmartpik_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=4,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=75,thumb_width=280,thumb_height=200,thumb_width2=100,thumb_height2=100,no_thumb=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_voiuZDGPobH8MX2HYq0Si94weDjsUBRH3D_O5ZgkTwM4DGRS3g4DD2zG4CqdZESAPD5BsOLTxfQz52Wf1-0RAW_uXMzM92_8pRGqaiafP5YgLYkf5kqiNjmQBajO9SPZie49tjiubLA/s340-Ic42/newsmartpik_thumb.png&quot;,no_thumb2=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3xSQa8ZdQocd07QiYN3RThrrJcq2jEfAe7mMTQFyPaV4Y42uGbK9JBnJPhVGq9fqaQt1WfjoOSIkQDh294CYZcmebvPMzQm2-zL64CVTzgNnft6pHmZxXrtsULjSsHWm-kQpJsA2F_k/s100-Ic42/newsmartpikthumb_small.png&quot;;
</script>
</b:if>
</b:if>

Next find the below code by using "Ctrl + F" key together from your keyboard.

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

Then, copy and paste the below code before the above code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newsmartpiklabel1-wrapper'>
<b:section class='newsmartpiklabel1' id='newsmartpiklabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Gadgets' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Label?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newsmartpiklabel2-wrapper'>
<b:section class='newsmartpiklabel2' id='newsmartpiklabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Mobile' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Label?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>

Save the template, now go to Layout > Click edit widget that has been added earlier > Fill in it with the name of your blog label

Save the widgets and see the results.

That's it! I hope you like this Widget! Stay tuned for more Widgets and Tips!

Gokul 3/03/2016 0 Read More

Stylish Popup About Us Widget For Blogger

How to add a stylish about us info widget in blogger with popup effect - About us, the page is one of the other important pages for every blog because it helps our readers to know about the blog author. So today I'm going to share with you a new and stylish about us info widget for your blog. This widget is responsive and it comes with popup effect and the best part of this widget is that "It's not just an about us page, it's a dynamic about us widget".

The features of this widget are, it will display the photo of the blog author, it will display the total number of the blog articles, it will display the blog description with social media links. The best part of this social media is that - "Social media can also be a means for visitors to get closer and communicate with the blog owner".

Okay, if you want to install it on your own blog, then follow the below steps and add this dynamic about us info widget on your own blog without having any problem.

First visit to your blogger dashboard, Go to the "Template" section and then click on the "Edit Html" button.

In the template, the editor finds the below code by using "Ctrl + F" key together from your keyboard.

]]></b: skin>

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

/* CSS Widget Info About Us */.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}kepala{background:#de9b31;height:50px;width:100%;position:inherit}#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:61%;box-sizing:initial;}#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}#left a{color:#bdc3c7;}#left a:hover{color:#fff;}.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}.scrollbarbox .innerone{height:480px;overflow:auto}}a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}#popup{display:none;}#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}.popup-container{position:relative;margin:0 auto;padding:20px}a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}a.popup-close:hover{color:#fff}.totalposts{margin:auto;display:table;text-align:center}.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}li.smartpik{border:0;float:right;list-style:none}li.smartpik a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-size:15px;font-family:'Roboto Condensed';transition:background-color .3s}i.smartpik a:hover{background:#e67e22;color:#fff;}@media (min-width:768px){.popup-container{width:600px}}@media (max-width:767px){.popup-container{width:100%}}

Once again find the below code with the help of the search box.

</body>

Now copy the below HTML code and paste it just before </body>

<div class='popup-wrapper' id='popup'><div class='popup-container'><div class='boxinner'><div class='circle'/><div class='circle'/><div class='circle'/><div class='contentbox'><kepala><span id='textlogo'><data:blog.title/></span><a class='popup-close' href='#closed' title='Close'>&#215;</a></kepala><br/><div class='scrollbarbox'><div class='innerone'><div id='aboutus'><img expr:alt='data:blog.title' expr:title='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVprNlwEJE2W2lY1rJU8ybhxEzyiFFv0fftgxObupmZi50UDom3MP55WLP_2gk6tqmwQewztq11kutYHkrirFy5ehgIlny1H38FmegHmoP2YETIM8ZxPh8xa7Wr2yygo6FAxYs2mEicCc/s250-Ic42/smartpik_admin.jpg'/><br/><script src='/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/><b>www.smartpik.in</b><br/><br/>Type your blog description here<br/><br/>You can write anything here (According to your need)<br/><br/></div></div></div><div id='left'><div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div><div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google+'><i class='fa fa-google-plus'/> Google+</a></div><div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div><div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a></div><div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen'/> Codepen</a></div><div class='taber7'><a href='#' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-envelope-o'/> Join this blog</a></div></div></div></div></div></div>

Note - Replace the highlighted text or link with your own text or links.

Now copy the below JavaScript and paste it just before </head>

<script type='text/javascript'>//<![CDATA[// Total Postsfunction getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Publish Articles</span></div>');}//]]></script>

And then copy the below HTML code and paste it where you want to show this info widget.

<li class='smartpik'><a class='popup-link' href='#popup'>Info</a></li>

All done, now click on the orange save template button to apply these changes.

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

Gokul 3/02/2016 0 Read More

All In One SEO Pack Plugin For Blogger

Add new updated and modified all in one SEO (Search engine optimization) pack plugin in your blog - As you already know guys the actual importance of SEO, because if you want to become a professional blogger, then it's very important for you to learn everything about SEO. Without doing a proper Search Engine Optimization no one can get ranked on Search Engines, it is useless to start a blog without doing any SEO.

On Google - "the process of maximizing the number of visitors to a particular website by ensuring that the site appears high on the list of results returned by a search engine".

So this tutorial is for every newbie who is unaware from this SEO plugin, now you can add this updated all in one SEO pack plugin in your Blogspot blog to improve the ranking of your website on all Major Search Engines such as Google, Bing, Yahoo etc.

This all in one SEO pack plugin is specially designed for Blogspot platform and you can trust on this plugin blindly because this plugin is 100% safe and it will help you to get more organic traffic from search engine. So if you are ready and want to install this plugin in your own blog then simply follow the below steps.

Features Of All In One Plugin

• Add Meta Tags in Your Blogger Blog. 
• Verify Google, Bing, and Alexa by verification code 
• Add an SEO Friendly Robots.txt File 
• Google + Author Profile Picture Compatible 
• Facebook and Twitter Profile Compatible 
• SEO Optimize Blogger Comments 
• Optimize Post Title Using H2 Tag 

How To Setup All In One SEO Pack Plugin?

First go to your blogger dashboard, Now go to "Template" section and then click on the "Edit Html" button.

Now in the template editor find the below code by pressing "Ctrl + F" key together from your stylish keyboard.

<head>

After that copy the below code and paste it just after <head>

<meta charset='utf-8'/><meta content='width=device-width, initial-scale=1' name='viewport'/><meta content='blogger' name='generator'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/><link href='http://www.blogger.com/openid-server.g' rel='openid.server'/><link expr:href='data:blog.homepageUrl' rel='openid.delegate'/><link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:blog.pageType == "index"'><title><data:blog.pageTitle/></title><b:else/><b:if cond='data:blog.pageType != "error_page"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if></b:if><b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found - <data:blog.title/></title></b:if><b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if><b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if><b:if cond='data:blog.pageType != "error_page"'><meta expr:content='data:blog.metaDescription' name='description'/><b:if cond='data:blog.homepageUrl != data:blog.url'><meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/></b:if></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='Blogging Tools, Blogger Tutorial, jQuery, CSS, HTML, JavaScript, Widget, Web Tools, Widgets Tips and Trick' name='keywords'/></b:if><link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/><link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/><link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/><b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.postImageThumbnailUrl'><link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if><link href='/favicon.ico' rel='icon' type='image/x-icon'/><link href='https://plus.google.com/+smartpikin/about' rel='author'/><link href='https://plus.google.com/+smartpikin/posts' rel='publisher'/><link href='https://plus.google.com/xxxxx' rel='me'/><meta content='GOOGLE VERIFICATION CODE' name='google-site-verification'/><meta content='BING VERIFICATION CODE' name='msvalidate.01'/><meta content='ALEXA VERIFICATION CODE' name='alexaVerifyID'/><meta content='global' name='distribution'/><meta content='1 days' name='revisit'/><meta content='1 days' name='revisit-after'/><meta content='document' name='resource-type'/><meta content='all' name='audience'/><meta content='general' name='rating'/><meta content='all' name='robots'/><meta content='en-us' name='language'/><meta content='USA' name='country'/><meta content='@Facebook Id' property='fb:admins'/><meta content='@Twitter Id' name='twitter:site'/>

Now replace the highlighted text with your own Id or code after that click on the orange save template button to apply these changes.

That's it! I hope you like this all in one SEO plugin! Stay tuned for more cool updates!

Gokul 3/01/2016 0 Read More

Notification Bell With Popup Effect For Blogger

How to add a cool notification bell with Popup effect in Blogger blog - Hey Guy's Today I'm going to share with you a new and stylish notification bell for your Amazing blog. This notification bell is very attractive and it comes with Popup effect. With the help of this notification bell you can easily let your readers know, what is the important message on your blog. This notification bell will appear at the top of your blog.

Before you add this notification bell on your own blog, Don't forget to take a look at this Notification bell by clicking on the below demo button.

Live Demo

For those who want to try this widget, simply follow the below simple steps and install this notification bell in your blog without any problem.

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

Add the below "Font Awesome" code just after <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Now add the below code just before ]]></b:skin>

.xblanter-box{top:16px;right:386px;background:rgba(0, 0, 0, 0.5);border-radius:100px;padding:0px 12px;color:rgba(255, 255, 255, 0.84);position: fixed; z-index: 9;font: normal 18px FontAwesome;line-height: 30px;cursor: pointer;}.xblanter-box:hover{ opacity: 0.8;}.icon-box{background-color: rgba(66, 133, 244, 0.8);padding: 8px 13px;border-radius: 100%;color: rgba(255, 255, 255, 0.5);margin-right: 5px;}.icon-box:hover{color:white;background-color:rgba(66, 133, 244, 1);}.notif-info{background-color: rgba(245, 245, 245,0.5);border:1px solid #eee;padding: 5px 8px;margin-bottom: 10px;cursor: pointer;text-align:left;} .notif-info:hover{opacity:0.8}.notif-info p {font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px;}#xblanterbox{background:#fff;border:1px solid rgba(204, 204, 204, 0.5);color:#333;font-size:14px;font-family: 'Open Sans', Helvetica, Arial, sans-serif;line-height:1.2em;top:-381px;right:306px;padding:20px 15px 15px 15px;position:fixed;width:300px;box-shadow: 0 2px 10px rgba(0,0,0,.2);z-index:10;transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;}#xblanterbox:before{content:"";width:0;height:0;position:absolute;top:-22px;right:81px;border:11px solid transparent;border-color:transparent transparent rgba(204, 204, 204, 0.5);}#xblanterbox:after{content:"";width:0;height:0;position:absolute;top:-19px;right:82px;border:10px solid transparent;border-color: transparent transparent #fff;}.closebox{background:none;border:none;position:absolute;top:0px;right:0px;cursor:pointer;font-size:18px;font-weight:700;color:#888;}.closebox:focus{outline:none}.closebox:hover{color:red;opacity:0.5}.closebox:active{color:red;opacity:1}.count-box {width: 18px;height: 18px;line-height: 18px;text-align: center;background-color: rgba(231, 33, 0, 0.89);border-radius: 5px;color: #fff;display: inline-block;font-size: 12px;position: absolute;padding: 0 2px; top: -5px;left: 22px;}/* CSS Dialog idblanter.com */#mydonasi{position:fixed;top:-500px;z-index:10;transition:0.4s all ease-in-out;}#myModal{position:fixed;top:-550px;z-index:10;transition:0.4s all ease-in-out;}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%)}@media screen and (max-width:480px){.modal-dialog{top:0!important;left:0!important}}@media screen and (max-width:320px){.modal-dialog{top:0!important;left:0!important}}.modal-dialog{position:fixed;top:50px;left:300px;width:auto;margin:10px;width:700px;max-width:100%}.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);outline:none;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:transparent;border:0}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.modal-title{margin:0;font-size:150%!important;margin-bottom:-10px!important}.modal-body{position:relative;padding:20px;text-align:left;}.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}#overlay {background:rgba(0, 0, 0, 0.74);z-index:10;position:fixed;top:0;left:0;right:0;bottom:0;display:none;}

Next, add the below code just before </body>

<div id='xblanterbox'><div class='notif-info info' onclick='document.getElementById(&#39;myModal&#39;).style.top=&#39;80px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;block&#39;;'><i class='fa fa-info icon-box' style='padding: 10px 15px;'></i>New Demo Title<p>By Smartpik.in</p></div><div class='notif-info' onclick='document.getElementById(&#39;mydonasi&#39;).style.top=&#39;80px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;block&#39;;'><i class='fa fa-credit-card icon-box' style='padding: 10px;background-color:#00BCD4;'></i>Hi this is a demo Title<p>By Angry King!</p></div><div class='notif-info'><a href='#' onclick='window.open(&#39;http://translate.google.com/translate?u=&#39;+encodeURIComponent(location.href)+&#39;&langpair=id%7cen&hl=en&#39;); return false;' rel='nofollow' target='_blank'><span class='fa fa-try icon-box' style='padding: 10px 13px;background-color:#FB8C00;'></span>Translate to English</a><p>Translate This Page.</p></div><input class='closebox' onclick='document.getElementById(&#39;xblanterbox&#39;).style.top=&#39;-381px&#39;;' title='Close this' type='button' value='×'/></div><div id='overlay'></div><div class='modal-dialog' id='myModal'><div class='modal-content'><div class='modal-header'><h4 class='modal-title' id='myModalLabel'>Selamat Datang di Blog Dunia Blanter</h4></div><div class='modal-body'>Gunakan Search form yang terletak pada kanan atas blog ini, Jika ingin berkomentar harap berkomentarlah dengan <b>RELEVAN!</b>.<br/> Dan buat sobat yang mencari template blogger keren sobat bisa cari <a href='http://template.idblanter.com' target='_blank' title='Koleksi Template Keren.'>disini</a>.<br/>Dilarang <b>Copy Paste</b> Artikel disini secara keseluruhan, Jika ingin mengutip harap Cantumkan sumber LINK ke blog ini.</div><div class='modal-footer'><button class='btn btn-primary' onclick='document.getElementById(&#39;myModal&#39;).style.top=&#39;-500px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;none&#39;;' type='button'>Close</button></div></div></div><div class='modal-dialog' id='mydonasi'><div class='modal-content'><div class='modal-header'><button aria-hidden='true' class='close' data-dismiss='modal' id='closex' onclick='document.getElementById(&#39;mydonasi&#39;).style.top=&#39;-500px&#39;;document.getElementById(&#39;overlay&#39;).style.display=&#39;none&#39;;' type='button'>&#215;</button><h4 class='modal-title' id='myModalLabel'>Angry</h4></div><div class='modal-body'> You can write anything here whatever you want to write.<br/><b><i class='fa fa-credit-card'></i> BANK BCA</b>: 5475057811 India Uttar Pradesh<br/><b><i class='fa fa-phone-square'></i> Cell Num</b> : 7309851111 (Contact Us)</div></div></div>

After that, add the below HTML code where you want to show this Notification bell.

<div class='xblanter-box' onclick='document.getElementById('xblanterbox').style.top='60px';document.getElementById('count-box').style.display='none';' style='transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;'><i class='fa fa-info'></i><div class='count-box' id='count-box'>3</div></div>

Now click on the Orange Save template button to apply these changes.

Note: Change the above-highlighted text with your own information.

That's it! I hope you like this Notification bell! Stay tuned for more cool widgets!

Gokul 3/01/2016 0 Read More