tháng 2 2016

How To Install Responsive Breaking News Widget In Blogger

How To Install + Add Responsive Breaking News Widget In Blogger Template

Your website is using breaking/trending news gadget ? you know the benefits of breaking news widget? learn here in this tutorial how to add breaking news gadget in blogger template.In previous post we have already talked about stylish latest news ticker widget but today in this article we are going to explain installing of responsive latest/recent updates tool plugin for your blogger website or blog.Advantage of using breaking news widget is you can display the latest posts update of your blog or website and you don't need to add recent articles gadget in your template.breaking news widget comes with integration of Font awesome icons so you can use any icon of your choice but we recommend you to use bull horn icon or rss and yeah you can also use graph symbols too.

Breaking news widget is very simple to add in blogger template and we have made it more simple for our readers and tried best to serve you best.In this widget when you update your website or blog your recent articles will scroll in this gadget,so you will never lose any updates to display in front of the readers.If you update your website regularly you must install this gadget in your blogger template.So to grab breaking news plugin follow the steps mentioned below.

Demo:

See the Pen How to Add Responsive Breaking News Gadget In Blogger Template by BloggersStand (@bloggersstand) on CodePen.

How To Add Animated Breaking News Widget In Blogger Template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

/* Breaking News Widget By www.Bloggersstand.Com */
#bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

Customization:

To change the Font awesome icon color replace 8ED557 with your color hex code.you can choose colors by visiting color wheel picker or color code generator.
To Change the Hover color on recent posts scrolling ,change 63953D with your color.
To Change the border color ,change 8ED557 with your color.

Step 5. Now Search for the closing </body> tag and copy the below java script code and paste just before/above </body> tag.

<script type='text/javascript'>
//<![CDATA[
// Breaking News Widget By www.Bloggersstand.com
$(document).ready(function(){var e="http://bloggersstand.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Customization:

Replace Bloggersstand with your website/Blog Url.

Step 6. Now Add the below HTML code snippet after <body> tag or anywhere you want to place but remember to place after that <body> tag only.

<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>

Customization:

To replace the bull horn Font awesome icon symbol replace fa fa-bullhorn with your desired font awesome,you can choose icons by visting below url.

https://fortawesome.github.io/Font-Awesome/icons/

Step 7. if you want to display the Breaking news widget only in the homepage/Main page then add the following condition tags on above HTML code,now your final code will look like this.

<b:if cond='data:blog.pageType == "index"'>
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>
</b:if>

Step 8. Now Save your Template..Done!

How To Install Jquery Lazy Load In Blogger

how to add lazyload java script trick in blogger template to increase website speed

Do you know what is jquery lazy load? Lazy Load Script is installed in your Blogger template? Don't worry if it's not installed we are going to share jquery lazy load script trick to increase the website or blog page speed.That means when you install lazy load in your blogspot theme you blog speed will surely increase on loading,after installing you can see the instant effect on page load.Lazy load plugin for images will delay the image loading result your website speed will increase.Still there are lot's of ways to speed up your blog faster.

However this plugin will work with your website and its blogger template friendly.If your website have too many images so in this case lazy load plugins is best for your blog.However you can use different ways to increase the page speed.in next post we will surely explain different methods for make your webpage load fast.The important factor to use this jquery lazy load trick if you are using to many graphics in your posts/article then it's sure your page speed will get down so in this case you need to increase the page speed and for that you must install lazy load script in your blogger template.So to grab this trick just follow the steps mentioned below.

How to Add Jquery Lazy Load Script In Blogger Template To Increase Webpage Loading Speed

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now go to Template -> Edit HTML.

Step 3. Now Search for the closing </body> tag and copy the below j query and paste above/before </body> tag.

<script type='text/javascript'>
// Jquery LazyLoad Script by www.Bloggersstand.com
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIpLyg65yCcl1fT9zxwIMbeo6PTwRYQ4hSziZ08l6UCJ_AMNfSPxiA2pWhrUvEoREtE8GM6gqf5bvTOEUzcxEQvcpcpPO9vnnQfvlU40e5JYcdwe0VLWzbx9NrA1dIKigUlObCS7HKis/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

Step 4. Now Save your Template..Done !

How To Install Disqus Comments Box In Blogger

Hello everyone,Today in this article we are going to explain How to Add Disqus Comments Widget Box in Blogger Template.In previous post we have already talked about Installing Disqus comment load on click and Blogger most commented posts/article gadget.we know that Disqus is the most popular Commenting system for any blog or website.Disqus Offers very professional features like,Moderation of comments(Approve or Delete), Spam filtering, Ban Users for over use of spamming etc.However spam filtering is the best feature from Disqus because you never need to think about that someone is posting irrelevant links in your comments.Whenever anyone drops the comments with the links it's automatically goes to spam after that it will publish only if the admin wants.So that's the reason everyone is loving disqus commenting platform for their websites.

We are going to tell you today how to create disqus comments box in blogspot theme ,lot's of blogs using this feature to display the comments on the trending articles of your blog.However accept it or not somehow it will also helps you to increase the page views ,if your reader view the comments on the specific topic s/he wants to read there is probability that s/he will also join in addition to share their view result you will surely increase the page ranking because disqus comments are SEO friendly all the search engine index disqus comments so if you getting more comments your link will be preferred to display on google search result page.In this disqus comments widget if someone will comment on your post will display and also if mod or admin replied to those comments that will also visible to your visitors.So to grab this disqus comments plugin tool for blogger template follow the steps mentioned below.

How To Add Disqus comments widget box in blogger template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Go to your Layout->Add a Gadget->Select->HTML/JAVASCRIPT box and copy the below code snippet and paste in the gadget.

<style scoped="scoped" type="text/css">
#Disqus-RecentComments-bsd{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:410px;}
#Disqus-RecentComments-bsd ul.dsq-widget-list{text-align:left;max-height:410px;overflow:auto;}
#Disqus-RecentComments-bsd img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#Disqus-RecentComments-bsd p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#Disqus-RecentComments-bsd p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#006B6B}
#Disqus-RecentComments-bsd p.dsq-widget-meta a:hover{color:#ff4400}
#Disqus-RecentComments-bsd li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:610}
#Disqus-RecentComments-bsd li.dsq-widget-item:last-child{border-bottom:none}
#Disqus-RecentComments-bsd a.dsq-widget-user {display:table;color:#666;font-weight:610;}
#Disqus-RecentComments-bsd a.dsq-widget-user:hover{color:#009999;}
#Disqus-RecentComments-bsd span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#Disqus-RecentComments-bsd .dsq-widget-comment p{display:inline-block;font-size:89%;margin:0;font-weight:410;color:#666}
#Disqus-RecentComments-bsd .dsq-widget-item pre{position:relative;background-color:#FEF9BF;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#Disqus-RecentComments-bsd .dsq-widget-item pre:hover {opacity:1}
#Disqus-RecentComments-bsd .dsq-widget-item pre code {color:#444;font-size:82%;}
#Disqus-RecentComments-bsd .disqus-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.3em;height:1.3em;background-color:#FEF9BF}
#Disqus-RecentComments-bsd .disqus-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="Disqus-RecentComments-bsd" class="disqus-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
// Disqus Recent Comments Widget By www.Bloggersstand.com
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://bloggersstand.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=31&excerpt_length=100\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#Disqus-RecentComments-bsd a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>

Customization:

Replace Bloggersstand with your Disqus profile user name.

Step 3. Now Save Your Gadget Box..Done !

How To Add Do Follow + No Follow Link Attribute In Blogger

How To add attribute in Blog Do Follow + No Follow In Blogger

Your website is Do follow or no follow ? What is do follow links or no follow links? You know the difference between do follow blogs or no follow blogs/websites?

What is Do Follow Links?

Dofollow links are those links which allow google search engine (all serps) to follow them and to reach our blog or website.Providing us link juice and also a backlinks to your website.if a admin/webmaster is linking back to your website then google search engine and you both can see that and follow your website or blog.There are lot's of way to provide backlinks.In previous post we have already talked about how to build and earn backlinks easily.Later on we will discuss briefly on backlinks.The best way to provide do follow link is an anchor textual content means when you are going to link or already linking any blog or websites always use the targeted text content or keywords.Below is the example of how to create do follow link:

<a href=”http://www.bloggersstand.com.com/”>Bloggersstand</a>

What is NO Follow Links?

No follow links are those links which does not allow any search engine to follow those links.If webmaster is linking back to you with no follow tag that means only you can see that google and search engine will ignore it and search engine will not follow those links.All the search engines including google all has declared that they will not consider no follow tags links in indexing.Simply you can say that no follow links are those links on which you don't want to send link-juice.Below is the example of the No follow links:

<a href=”http://www.blogger.com” rel=”nofollow”>Blogger</a>

How To Change Your Blogger Website With No Follow or Do Follow Links:

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now go to Template -> Edit HTML and search for the following below code:

<a expr:href='data:backlink.url' rel='nofollow'>

Step 3. Now Remove the rel='nofollow' attribute from the above code,you may find so many times,finally now your code will look like this after removing it.

<a expr:href='data:backlink.url'>

Step 4. Save your template..Done !

If you remove rel='nofollow' attribute then your blog/website will become DO Follow and if you make it remain same as above then your wbesite is No Follow.

1st On Net MagOne V3.5 - Magazine Blogger Template

MagOne template is flexible and responsive magazine template for Blogger / Blogspot websites. Drag and drop to build a magazine website in minute.

Main Features:

Drag and Drop Widget Builder: only need to change parameters then move widgets to any where to make any layout you want.
Flexible Menu Navigation: supports drop-down, link group mega, label content mega, and icons.
Responsive: passed all Goolge mobile friendly tests. Working well 100% with any mobile and tablet devices.
Multiple Comment Systems: Facebook, Google+, Blogger and Disqus comment systems are all ready to work.
Custom Archive Page Designs: pick any design for label / search / archive pages as you want with professional navigation buttons.
Custom Post Title Design: easy changing your post main title design with default editor of Blogger.
Support Sub Post Title: you can add subtitle of post and pick custom style for it.
Smart Breadcrumb: not similar breadcrumb of other templates, our breadcrumb will show labels as exactly order automatically.
Widgets Ready: template has a lot of built-in widgets: article widgets (slider, sticky, complex, carousel, one column, two columns, three columns, blogging, left and right), quote image widgets, flexible popular widgets.
Post Pagination: you can split long post content to pages with simple shortcode.
Reactions, Locations, Share Buttons, Author Box, Related Posts are all ready: we don’t miss any thing for your article content, just focus to your content, we will handle your site interface.
Fully Template Designer: support most of features from Blogger advance customizer. This template has flexible width also.
Template Options: have friendly UI for changing template options easily through Spot Settings tool.
Multilingual Ready: template supports SpotLingo to translate to any languages easily and compatible with any RTL languages.
Support Service: well documentation and have many ways to support (remote desktop, login as member, email directly).

Update: Version 3.5.0 – Nov 15, 2015

- New: allow to set number of related posts

- New: add delay to post ads for tuning, just in case using Google Adsense ads and they are blank

- New: allow load all post immediately without waiting user mouse scroll

- New: allow load posts from other sites

- New: can combine muptiple show / hide condition

Hello, we have some great news for our regular readers. We are providing Magone 3.5 Responsive Magazine Blogger Template absolutely free. To get the template, please show support to the bloggersstand community by liking or following us on the social media. This will help us to provide an awesome experience and more facilities for our users. Just connect with us on any kind of social media and confirm the same with a comment below including your email information or you can use contact us page directly. We will send you the template as soon as we are happy with your commitment with us. So what are you waiting for, join us for an awesome blogging experience.

How To Fix Blogger Layout Section With CSS

Today in this article we are going to explain How to Fix Blogger Layout Section With CSS. You Might have noticed this change in your layout section horizontal menu and li ul menu code is displaying on your layout section.However it will not effect your website design but it's quite irritating with unordered layout design.It's very simple to implement in blogger template.We have used Pure CSS to make it work perfect.So to install css trick in your blogger website just follow the steps mentioned below.

How to Install CSS trick for Fixing Blogger layout gadget design

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now go to Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys or CMD+F (Mac).

Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

body#layout div.section {background-color: transparent!important;border: 0!important;font-family: sans-serif;margin: 0 0 0 0!important;overflow: hidden!important;padding: 0!important;position:relative;}
#layout .section h4 {display:none;}

Step 5. Now save your template...Done !

How To Install CSS Tool Tip In Blogger Template

How To Install add CSS Tool Tip In Blogger Template to show extra information

Do you know what is Tool Tip? You might have seen in websites or blog when you move mouse over an element icon then small popup box appear with extra information and after when you slide your move to anywhere the popup box disappear that is called Tool tip.Today in this article we are going to explain How to Install CSS tool Tip in Blogger Template.The main benefit of tool tip is that you can provide extra specify information regarding your post,article or anything with just one element.There are lot's of tricks available over the internet to creating tool tip using javascript, bootstrap, CSS, HTML etc.But the CSS tool tip is totally different from all other tricks with the help of CSS tool you can show the extra important information regarding your topic without providing any external links.These Small Popup Bubbles make your website unique.

Demo:

See the Pen CSS Tool Tip For Blogger Template by BloggersStand (@bloggersstand) on CodePen.

We have used Pure CSS for creating tool tip element.rest all the tricks for making or simply tool tip is big and confusing,best is one is only the CSS. We have developed this CSS tool tip with as much as possible in a precise way.We have tried hard to serve best to our readers this tool tip is very simple with just an info element.Let's take a look on how to create CSS tool tip for blogspot websites or blog.To implement this trick just follow the steps mentioned below.

How to Create CSS Tool Tip For Blogger Template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now go to Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

/* CSS Tool Tip Trick by www.Bloggersstand.com*/
.bsd-tooltip{position:absolute;top:16px;right:16px;text-align:center;background-color:#ff4400;border-radius:50%;width:24px;height:24px;font-size:12px;line-height:26px;cursor:default;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.bsd-tooltip:hover{cursor:pointer;background-color:#666}
.bsd-tooltip:before{content:'!';font-weight:900;color:#fff}
.bsd-tooltip p{visibility:hidden;opacity:0;text-align:left;background-color:#ff4400;padding:20px;width:300px;position:absolute;border-radius:6px;right:-6px;color:#fff;font-size:12px;line-height:normal;transform:scale(0.7);transform-origin:100% 0%;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.bsd-tooltip:hover p{cursor:default;visibility:visible;opacity:1;transform:scale(1.0)}
.bsd-tooltip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#ff4400;right:10px;top:-12px}
.bsd-tooltip p:after{width:100%;height:40px;content:'';position:absolute;top:-5px;left:0}
.bsd-tooltip a{color:#fff;font-weight:700}
.bsd-tooltip a:hover,.bsd-tooltip a:focus{color:#fff;text-decoration:underline}

Step 5. Now Save your Template..Done !

How to Add CSS Tool Tip HTML Code In Blogspot

This is very simple,after completing above step that means you have installed css tool tip code snippet in your blogger template.But now to display the tool tip information box in website you need to add HTML code.You can add this HTML code inside your posts or anywhere you want to display the specific information regarding anything you can embed this html tool tip over there.So when you create new post and you want to add tool tip HTML just click on HTML button near the compose button change the view to html mode of your post and past this below HTML code and publish your post ,That's it.!

<div class="bsd-tooltip">
<p>How to Install Tool Tip In Blogger Template to display a Additional post information to the readers.
</p>
</div>

Customization:

Replace the above highlighted lines with your content or information message.

How To Add Facebook Floating Box In Sidebar For Blogger

Hello folks,Today in this article we are going to explain How to install facebook floating like box in blogger sidebar.In previous article we have already talked about how to create new 2016 facebook popup widget for blogger template.fb like box is a very important gadget for any website or blog.you must install facebook plugin to increase your website fans or followers.With the use of this sidebar floating facebook like box you can grow your facebook fans very easily.This beautiful widget comes with on mouse effect when someone just put a mouse hover on facebook button this gadget will slide out and they can just click on like button and become your follower.you might have seen this kind of widget in lot's of websites.we have customized it to suits every blog niche.

However there are still lot's of facebook plugin tool we will share in next post and bloggersstand trying hard to send you each and every gadget with unique features and suits your blog design.Facebook followers always play a important role in any website to increase the ranking because whenever you share your article on your website facebook page it's always get some visitors from facebook,if your posts is unique and original you might get a big traffic from social media networking sites.So always install facebook,twitter, plugins tool in your website or blog to keep your reader updated with latest updates of your blogger blog.soon we will share more amazing tricks and gadget for you.Now to grab this widget just follow the steps mentioned below.

Demo

How to create facebook like box floating slide out button in blogger template:

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Go to your Layout->Add a Gadget->Select->HTML/JAVASCRIPT box and copy the below code snippet and paste in the gadget.

<script type="text/javascript">
//
</script>
<style type="text/css">
.bsdbox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTbURpNKb0KaI_Xl8LqBRl-jbwjHAnWoh_7w0bKh1myjtXBLE_GO-UnqKK17S0Ua1ttH6Jdje5DFXzEQ8HFakB1kUnX1kYC0RnkrKE1OsQRPQ-tkAqgxa-YkwL_hs5VdYo-xxdqre9Uc/s1600/floating+fb+button+bloggersstand.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.bsdbox div{border:none;position:relative;display:block;}
.bsdbox span{bottom: 12px;font: 8px "Roboto",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.bsdbox span a{color: #808080;text-decoration:none;}
.bsdbox span a:hover{text-decoration:underline;}
</style><div class="bsdbox"><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggersstand&width=246&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=272" scrolling="no" frameborder="0" style="border:4px solid rgb(59,89,152); overflow: hidden; height: 267px; width: 242px;background:#fff;"></iframe></div></div>

Step 3. Now Search for the <body> tag and copy the below java script and paste it after/below <body> tag. if this script is already added then you can skip this step.

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
// Facebook Floating Box By www.Bloggersstand.com
window.fbAsyncInit = function() {
FB.init({
appId : '1480936988887062', // you can change with your app id
status : true, // check login status
cookie : true, // enable cookies
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Customization:

if you already created your facebook like box app then you can replace the above highlighted app id with your app id.

Step 4. Now Save your Template..Done !

How To Add Facebook Comment Box In Blogger Template

How To Add latest version 2.5 create install Facebook Comment Box In Blogger Template

Hello guys,Today we are going to explain how to install facebook comment box in blogger template.With the help of fb comments box plugin people can share their views regarding the posts or article in your website or blog and they can also share them on facebook wall.It's a best way to share your comments on facebook wall posts.Facebook comments box suits all kind of blog niche.If we see the benefits of comment box is only we can share them on facebook page and also people can comment from their profile into your inbox and keep connected to your blog.But in the view of google indexing and robots crawling google don't crawl facebook comments as compare to blogger default comments box.Blogger comments are keep indexing by google search engine but facebook comments are just for the look it's never be crawled by any search engine over the internet.If someone comment on your facebook comments box admin will get notification as well all people engaged with the comments they will also get notify.In this case you will increase the view of your website which will helps your website to increase alexa rank too.

However now days lot's of template coming with three or four comments box like blogger ,disqus,facebook etc..in previous post we have already share how to install disqus comments load on click version for blogger template.later on we will share for facebook and blogger too,for that stay tuned..So to grab facebook comments box trick follow the steps mentioned below.

How to install facebook comments box in blogger template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template (FirstTake backup) Then proceed to -> Edit HTML.

Step 3. Now Search for opening <head> tag by Pressing Ctrl+F keys and copy the below code snippet and paste just below <head> tag.

<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta content=’App_id‘ property=’fb:app_id’/>
<meta content=’https://www.facebook.com/bloggersstand‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>

If the above code already available in your template then you can skip step 3.

Customization:

Replace App_id and bloggersstand with your app id and username.
If you have already created app id then you can use it..if not then visit this url https://developers.facebook.com/apps/?action=create and create your app.after that you can use your app id.

Step 4. Now search for opening <body> tag and copy the below java script and paste just after/below the <body> tag.

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'App_id',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Customization:

Replace App_id with your facebook app id.

Step 5. Now search for the following code <div class='post-footer-line post-footer-line-1'> and copy the below code and paste after <div class='post-footer-line post-footer-line-1'>.

<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;background:white;border:1px solid silver;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/></div>
</b:if>
<div class='clear'/>

Step 6. Now Save Your Template..Done !

Complete Guide For Blogger SEO + HTML5 Meta Tags 2016

full seo +html5+valid meta tags pack 2016 for blogger website

Have you ever thought your blogger template version is compatible with new 2016 meta tags? Your Blogger website have validate HTML5? If you have synced with latest meta tags in your blogger template then you will surely see that your rank is start improving..In previous post we have already talked about the how to make valid blogger blog with HTML 5. However today in this post we are going to include the SEO meta tags too ..that means in this tutorial we are adding full HTML5 Tags and external meta tags for search engine.You can add meta keywords in your blogger template.we have also added social media profile meta tags for a good result in social media site..In lot's of share we have seen that when people share the post there few things always miss like when you share post sometimes because of wrong meta tags for social media network result the image size is not valid for social sites that's why image will not properly read by social media result your image will not display or if it's visible the dimensions will be wrong.So in this SEO + HTML5 2016 Pack we have included all the major settings for blogger meta discription ,keywords for better search result etc.

Keywords play big role in any search engine result.And Nowdays if your blogspot website is running with valid HTML5 tags code then your blog will surely grow because google is preferring HTML5 versions and to make complete validation of HTML5 you must add all these meta tags in your blogger template.Below is the full features lists of SEO + HTML5 Version 2016:

Complete SEO + HTML5 Tags for your website
Top Social Media Facebook,Twitter etc. Compatible
Search Engine Optimization for better result
SEO Meta Tags for better indexing
Optimized Blog Titles and Post Titles
Better optimization for Blogger comments
Seprate Indexing for blogger labels and archive pages
Allowed Website to Crawl Everyday by using special tags
Custom Error page 404
Google + Author + Publisher + Me Profile Integration
SEO Friendly Webpage
Emphasized on Keywords for robots to understand your keywords for indexing
Optimization On Meta Description for Robots to understand about your website.
Special tags for Blogger titles to convert them into dynamic titles
Social Media Friendly for user name and title sharing
RSS friendly
Rel Canonical
Favicon tags
And Many More..

So to add this SEO + HTML5 FULL Version 2016 Follow the steps mentioned below.

How to add Complete SEO + HTML5 Meta tags in blogger website

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template (FirstTake backup) Then proceed to -> Edit HTML.

Step 3. Now Search for opening <head> tag by Pressing Ctrl+F keys and copy the below meta tags and paste below <head> tag.
Step 4. Before adding below meta tags in your template,remove all your old meta tags then only add this one.

<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-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='write keywords here..' 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/+bloggersstand/posts' rel='publisher'/>
<link href='https://plus.google.com/+shekharsinghbsd/about' rel='author'/>
<link href='https://plus.google.com/+shekharsinghbsd' rel='me'/>
<meta content='Google verification code' name='google-site-verification'/>
<meta content='Bing validate code' name='msvalidate.01'/>
<meta content='Alexa verify code' name='alexaVerifyID'/>
<meta content='Lucknow, India' name='geo.placename'/>
<meta content='Author name' name='Author'/>
<meta content='general' name='rating'/>
<meta content='India' name='geo.country'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta name="language" content="english"/>
<meta content='https://www.facebook.com/ishekharsingh' property='article:author'/>
<meta content='https://www.facebook.com/bloggersstand' property='article:publisher'/>
<meta content='facebook app_id' property='fb:app_id'/>
<meta content='facebook admin_id' property='fb:admin_id'/>
<meta content='@bloggersstand' name='twitter:site'/>
<meta content='@bloggersstand' name='twitter:creator'/>

Customization:

Replace the above highlighted lines with your desired value.

Step 5. Now Save your template..Done !

New Popular Posts Widget 2016 With 3 Styles For Blogger

New Popular Posts Widget With 3 Style For Blogger template 2016

Hello folks,Today in this article we are going to explain How to add popular posts widget with three different styles.In previous post we already talked about Installing 5 star rating popular posts widget and Colorful hover effect popular posts plugin.However this popular posts gadget is different from all the versions we have published yet.These widgets have 3 styles you can choose any one of them and install in your blogger website or blog.First styles comes with One big post highlighted with big image and rest all are in small sizes as compare to first one.In second style we have given all the post images with same size one by one and in the last third style we have provided one featured image for top trending post and rest all are with just post titles.

Bloggersstand recommend third style because it's look stylish and it's in very precise way.It will suits all kind of blogger niche and i'm damn sure it will also enhance the look of your blog.Popular posts widget is always a best way to keep engaged your visitors with your popular items on your website and keep on reading result you will also increase your website ranking in alexa and also in search engine indexing.so to grab all these three styles follow the steps mentioned below.

How to install stylish popular posts widget in blogger website

Installation Steps:

Before installing must add popular posts gadget from layout->add a gadget->popular post

popular posts gadget from blogger layout

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Copy the below any style CSS code and paste it just before the ]]></b:skin> or </style> tag.
Style #1

/* Popular Post Style 1 widget by www.Bloggersstand.com */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}

Style #2

/* Popular Post Style 2 widget by www.Bloggersstand.com */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:700;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

Style #3

/* Popular Post Style 3 widget by www.Bloggersstand.com */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}

Step 5. Now Search for closing </body> tag and copy the below java script of any style and paste it just above.before </body> tag. But remember use same style javascript for css style..the styles number we have provided sync with same style of javascript.
Style #1

<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbbsd("PopularPosts1",400);
//]]>
</script>

Style #2

<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbbsd("PopularPosts1",400);
//]]>
</script>

Style #3

<script type='text/javascript'>
//<![CDATA[
// Popular Post widget by www.Bloggersstand.com
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

Once again reminding you,use same css style and javascrupt code with same style no.

DEMO

Labels

Technology

Breaking News

How To Install Responsive Breaking News Widget In Blogger

How To Add Animated Breaking News Widget In Blogger Template

How To Install Jquery Lazy Load In Blogger

How to Add Jquery Lazy Load Script In Blogger Template To Increase Webpage Loading Speed

How To Install Disqus Comments Box In Blogger

How To Add Disqus comments widget box in blogger template

How To Add Do Follow + No Follow Link Attribute In Blogger

What is Do Follow Links?

What is NO Follow Links?

How To Change Your Blogger Website With No Follow or Do Follow Links:

1st On Net MagOne V3.5 - Magazine Blogger Template

Main Features:

How To Fix Blogger Layout Section With CSS

How to Install CSS trick for Fixing Blogger layout gadget design

How To Install CSS Tool Tip In Blogger Template

Demo:

How to Create CSS Tool Tip For Blogger Template

How to Add CSS Tool Tip HTML Code In Blogspot

How To Add Facebook Floating Box In Sidebar For Blogger

How to create facebook like box floating slide out button in blogger template:

How To Add Facebook Comment Box In Blogger Template

How to install facebook comments box in blogger template

Complete Guide For Blogger SEO + HTML5 Meta Tags 2016

How to add Complete SEO + HTML5 Meta tags in blogger website

New Popular Posts Widget 2016 With 3 Styles For Blogger

How to install stylish popular posts widget in blogger website

MKRdezign

Biểu mẫu liên hệ