Recently upadated

    Results for Blogger Widgets

    Simple Sitemap or Table of Contents For Blogger

    Gokul 3/10/2016 Leave a comment


    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:
    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!
    Simple Sitemap or Table of Contents For Blogger Simple Sitemap or Table of Contents For Blogger Reviewed by Gokul on 3/10/2016 Rating: 5

    Sexy Popular Posts Widget For Blogger

    Gokul 3/09/2016 Leave a comment


    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.
    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!
    Sexy Popular Posts Widget For Blogger Sexy Popular Posts Widget For Blogger Reviewed by Gokul on 3/09/2016 Rating: 5

    How to Add a Featured Post Widget in Blogger

    Gokul 3/06/2016 Leave a comment


    This time, Smartpik will share a news about updates from Blogger. Blogger to surprise us by adding a gadget or a new widget called Featured Post as a standard Blogger widget.

    The function of the Widget Featured Post or also called Sticky Post This is to mark an article in the blog the most recommended and it will tell visitors about what is most favored articles on the blog. Of course, by adding this widget will give us a plus point that it makes the blog look more professional.

    How to add a featured post widget in blogger

    Go to Blogger, Layout, then click the Add a Gadget, There, you will see a list of widgets and then select Featured Post Widget


    After Selected, you will see the options featured post configuration. Take a look at the below image to understand what inside it.


    Then select one of the post's title and a sample preview of the selected post will be visible underneath


    Then click Save and see the results on your blog. This widget can mate plug both in the Sidebar area, posts, or another widget area. You can modify this widget again by adding custom CSS. Maybe that's all I can say about  New Featured Post Widget, hopefully, with the presence of these widgets we will bring you new ideas and bloggers have become more enthusiastic about developing his blog. Thanks for reading.
    How to Add a Featured Post Widget in Blogger How to Add a Featured Post Widget in Blogger Reviewed by Gokul on 3/06/2016 Rating: 5

    Install Fixed Contact Us Form In Blogger

    Gokul 3/05/2016 Leave a comment


    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!
    Install Fixed Contact Us Form In Blogger Install Fixed Contact Us Form In Blogger Reviewed by Gokul on 3/05/2016 Rating: 5

    How To Fix Popular Post Widget Error In Blogger

    Gokul 3/05/2016 Leave a comment


    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!
    How To Fix Popular Post Widget Error In Blogger How To Fix Popular Post Widget Error In Blogger Reviewed by Gokul on 3/05/2016 Rating: 5

    Stylish Particular Label Recent Posts Widget For Blogger

    Gokul 3/03/2016 Leave a comment


    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/AVvXsEiTdS5IaDmOe4y13bA84fyHs-W9lBReTIx6MPmqiPUqXhOj7vl0IFpj891X6AYureAGNO_mEwZ5Ha7KHEQ5FtYvFxHYaf7vHeMiC1BmyE4-TxeXDM1hmT-jKK7tGI8lRH69lG18nDnudH8/s340-Ic42/newsmartpik_thumb.png&quot;,no_thumb2=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoa-df9JtM7iUuQ7RQU19OnvxWRwscI6xFpeJx-BPI4f3Q2z_UxwAuavQfma3rjzX7cS64FML37ISvT1zh4Q_BiXd8MQPT5pfYJGyJJ5InLkvFunvwLJq2Uj3TIU2_07m55ub28ObyG-I/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!
    Stylish Particular Label Recent Posts Widget For Blogger Stylish Particular Label Recent Posts Widget For Blogger Reviewed by Gokul on 3/03/2016 Rating: 5

    Stylish Popup About Us Widget For Blogger

    Gokul 3/02/2016 Leave a comment



    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/AVvXsEgbTkckKH-Vxk0gwn2s5zKmnjTZn816El6vKWx57aSjtaRG2DnL9skTko8Ubyk76xbWHytzhaW0D07ed753-m6VlK2LuU928ai3Z5O34FdEhyjYG40OC38lfMEy_LnzkwXjgAU-d6E4J_o/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.
    Stylish Popup About Us Widget For Blogger Stylish Popup About Us Widget For Blogger Reviewed by Gokul on 3/02/2016 Rating: 5

    Notification Bell With Popup Effect For Blogger

    Gokul 3/01/2016 Leave a comment
    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!
    Notification Bell With Popup Effect For Blogger Notification Bell With Popup Effect For Blogger Reviewed by Gokul on 3/01/2016 Rating: 5

    CSS Page Loading Effect For Blogger

    Gokul 3/01/2016 Leave a comment


    How to install animated page loading effect on a Blogspot blog with the help of CSS code - Today with the help of this article we are going to learn how we can easily set up the stylish page loading effect on your blog spot blog with the help of some CSS codes. This page loading effect is totally based on ".gif" images. 

    This CSS code and Script that will show a loading effect every time when the visitors click the link inside your blog. so before you add this effect on your own blog, make sure to take a look at this loading effect by clicking on the below demo button. (Refresh the demo page to see the effect)
    Live Demo
    If you like this effect and want to install it in your blog, then follow the below simple steps carefully to add this CSS Page Loading Effect to your blogger blog.

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

    In the template, the editor finds the below code by pressing "Ctrl + F" key together from your keyboard.
    </body>
    After that copy the below code and paste it just before </body>.
    <style type='text/css'>
    #loading{
    position: fixed!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background:#000 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKbuI-B_LEY6baep-WETqp9g_3vHFudJLRIa2ZyTUQkmrDwYe2B_Qutuw-CXF-NESv0HvGDz9BANFeruPpH3YkMU3g8KFifJUUYcHOZL0TEEauvDendf41ZrWssh0IzNY5SJggtLaBeJQ/s500-Ic42/4f432d9234988a5f33b26e0ba06bc6fe.gif&#39;) no-repeat 50% 50%;     
    display: none;
    font: 0/0 a;
    text-shadow: none;
    padding: 1em 1.2em;
    }
    </style> 
    <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="loading">Loading...</div>');
    $(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#loading').fadeIn(1000).delay(9000).fadeOut(1000);
    });
    //]]>
    </script>
    Now click on the orange save template button to apply the changes.

    You can change the highlighted image URL with any image URL.

    That's it! I hope you like this page loading effect! Stay tuned for more cool effects!
    CSS Page Loading Effect For Blogger CSS Page Loading Effect For Blogger Reviewed by Gokul on 3/01/2016 Rating: 5
    Subscribe to: Posts ( Atom )
    Powered by Blogger.