How to disable Comment on Blogger/Or specific posts

Comment is the most important part of blogsites. This option completes the whole blogging system. Creates opportunity to connect author and reader instantly and gives author the feedback of their writings. In ‘Blogger’ platform Comment system comes by default/build-in. And Blogger blog visitor can leave their comments, but not all types of sites/posts needs the comment function. In that case this Comment function can be switched off easily. And how to do that? Read on-

How to disable Comment on Blogger

This tutorial will disable all the comment form of your Blogger blog. For doing that follow these steps;

• Log in to Blogger, select your blog

• Go to ‘Setting’ tab, select ‘Posts and comments’

• On ‘Posts and comments’ page, you will find option called ‘Comment location’

• Select ‘Hide’ from dropdown, ‘Save settings’

• After these entire things done successfully, Comment form will be disappear.

 

How to disable Comment on specific posts/page

This tutorial will disable Comment on specific post/page. Those post/pages like (About us/Contact us/Terms of service/Privacy policy) where you don’t need comment form this tutorial will help you to do that;

• Log in to Blogger, select your blog

• Go to ‘All posts’/’Pages’ tab

• Select ‘Edit’ on your desired post/page

• In ‘Post editor’ tab, from right sidebar ‘Post setting’, select ‘Option’

• Select and Save from choices (Allow/Don’t allow show existing/ Don’t allow hide existing) of ‘Readers Comment’ option

• After these entire things done successfully, Comment form will be disappear from selected post/page.

Any question/feedback about this tutorial drop with a comment, I didn’t disable my comment system : p New tutorial will be release soon stay subscribed. Chill……..

Read More

4 Important Tutorials for Blogger beginners

Started a blog on Blogger or knowledge is not very deep with Blogger, welcome to this article. In this article I am writing about 4 important tutorials about Blogger (Of course nothing deep, more like general subjects you’ll question about) hope these tutorials will help your Blogging with Blogger. Subjects are:

• Creating Category

• Creating Navigation menu

• Using Jump break

• Verify Blog on Pinterest

Read on-

Creating Category in Blogger

You can categorize your posts in Blogger as the way you want. This categorizing option known as ‘Label’ in Blogger system;

• While you writing/editing a post, at right side bar ‘Post setting’ contain the option ‘Label’, 

• Your Labelled post will be shown in label links like- http://your site.blogspot.com/search/label/blogger

Creating Navigation menu on Blogger blog

Navigation menu is an important part of site; it gives you access to anywhere of a site very easily. Blogger does not have default navigation menu on templates, what it offers that function have ability to show pages name in nav area. But this menu can be created within Blogger resource. To do that follow this tutorial:

• Log in to your Blogger, select your blog

• Go to ‘Layout’ tab, select ‘add a gadget’ (Below Header)

• From Pop-up menu select ‘Link List’

• Configure your navigation menu with your suitable label links, pages links also name them. And click ‘Save’
  

Now you will have a simple Navigation menu on your Blogger site. Looking for more functional (Dropdown menu, Floating style, Social icon enabled nav menu) follow this tutorial, this and this one.

What is Jump break, What it does

Every beginner asks this question (even I asked back that time) ‘What is Jump break’. In Blogger’s post editor you may find this function Jump break. This is a simple function design to make your Homepage enrich and clean,

• Allows you to fit more posts on Homepage by creating jump links (Read more option), Gives your visitors a quick view of your posts and generate more pageviews.

• Jump break also create read more option in Feedburner email subscription. Whoever subscribes your blogs feed via Feedburner, those email readers doesn’t get the full version of the post on mail, get jump break’s before post summary, that leads you to more pageviews.

How to enable it:

• After your completed post editing, in post (where you want to enable it) hit a left click. 
  

• And now click on ‘Jump break’ and where you clicked in post a dotted line will appear. 

• After publish the post, check your blog out for confirm it working.

Verify your Blogger blog on Pinterest

Pinterest is a very popular social media site and almost every blogger, online entrepreneur maintains Pinterest account. You may be noticed that Pinterest have an option to insert your site’s address. And you may also know that a verified web address on Pinterest gives you a powerful do-follow backlink. So how to verify your blogger blog on Pinterest explained here. Read on-

• Log in to Pinterest account, select ‘Edit Profile’

• In website field insert your website address, Hit ’Verify Website’

• Copy the code of ‘How to verify’ box,

• Now, on a new tab: Log in to your Blogger, select your blog

• Go to ‘Template’ tab, select ‘Edit HTML’

• In code snippet search for <head> (using CTRL+F or CMD+F)

• Below <head> paste copied line of code
  

• And ‘Save template’

• Go back to old tab ‘Pinterest setting’

• Hit ‘Complete verification’

And now your Blogger blog will be show verified on your Pinterest account

More beginner tutorials will be release soon, If you interested and found something helpful subscribe and get notified when new posts releases. Goodluck……

Read More

Add Nav Menu to Blogger (Dropdown, Floating/Fixed to Header, Social icons)

Navigation menu is an important part of any site. It helps to highlight categories, pages and make easy to surf within your site/blog. Blogger seems to have no Navigation menu by default; all you can do is highlighting some pages in navigation menu area. But also Blogger does not have any restriction to add custom navigation menu! So Here I presenting a custom navigation menu, this menu’s design inspired by multipurpose element on menu. This menu offers:

• Dropdown function: allow you to add many links

• Have cool Social media icons: allow you to add 5 different profiles (Facebook, Twitter, Google plus, LinkedIn, RSS Feed)

• Fixed to header/Floating style: when the page scroll to down this menu stays on the top its own position

This Floating navigation menu made with light weight HTML, CSS and enhanced with CSS3 effects, Google font, 3d icons. Design to Load faster, adapt to any template looks damn good on any designed template, modern-attractive-stylish design and cross browser support. Let’s see how it looks like and how to add it to your Blogger blog.

Add Multipurpose Navigation Menu to Blogger

Preview-

Live Demo- Click here

Codes for copy-

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
<style>
/*crawlist.net CSS starts*/
#ks-meno{
width:100%;
height:45px;
display:block;
padding:0;
margin:0 0 22px 0;
z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
background:#181818;
}

#ks-mano1{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#ks-mano1 ul{
  float:left;
  margin:0;
  padding:0;
 border:#181818 1px hidden;

}

#ks-mano1 li{
  float:left;
  list-style:none;
  line-height:37px;
  margin:0;
  padding:0
  background:#181818;
  border:#181818 1px hidden;
 }

#ks-mano1 li a, #ks-mano1 li a:link{
  color:#fff;
  display:block;
  margin:0;
  font-family: 'Droid Serif', serif;
  font-size:16px;
  padding:10px;
  text-decoration:none;
 border:#181818 1px hidden;  line-height:25px;
}

#ks-mano1 li a:hover, #ks-mano1 li a:active, #ks-mano1 .current_page_item a  {
  color:#fff;
  padding:10px;
  background:#6CF;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease; border:#6CF 1px hidden;
}
#ks-mano1 li li a, #ks-mano1 li li a:link, #ks-mano1 li li a:visited{
  font-size: 12px;
  background:#181818;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border:#181818 1px solid;
}

#ks-mano1 li li a:hover, #ks-mano1 li li a:active {
  color: #fff;border:#6CF 1px solid;
  background:#6CF;
  -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

#ks-mano1 li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#ks-mano1 li:hover ul, #ks-mano1 li li:hover ul, #ks-mano1 li li li:hover ul, #ks-mano1 li.sfhover ul, #topks-mano1 li li.sfhover ul, #topks-mano1 li li li.sfhover ul{
  left:auto
}

#ks-mano1 li:hover, #ks-mano1 li.sfhover{
  position:static;
}

#ks-ico {
  float:right;
  width:220px;
  padding:0px 0px ;
   }
#ks-ico img
{
margin-left:6px;
margin-top:10px;
height:28px; width:28px;
border:none;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}
#ks-ico img:hover
{
    opacity:.8;
        -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net nev starts-->
  <div id='ks-meno'>
     <div id='ks-mano1'>
         <ul>
           <!--menu--><li><a href='#'>Home</a></li><!--menu-->
           <!--menu--><li><a href='#'>Categories</a><!--menu-->
             <ul><!--submenu-->
                  <li><a href='#'>HTML</a></li>
                  <li><a href='#'>CSS</a></li>
                  <li><a href='#'>jQuery</a></li>
                  <li><a href='#'>Ruby</a></li>
                  <li><a href='#'>Python</a></li>
                  <!--submenu-->
               </ul>
           </li>             
           <!--menu--><li><a href='#'>Portfolio</a><!--menu-->
               <ul><!--submenu-->
                  <li><a href='#'>Biography</a></li>
                  <li><a href='#'>Work History</a></li>
                  <li><a href='#'>Refund Policy</a></li>
                  <li><a href='#'>Terms</a></li>
                  <!--submenu-->
               </ul>
           </li>
             <!--menu--><li><a href='#'>About us</a></li><!--menu-->
             <!--menu--><li><a href='#'>Contact us</a></li><!--menu-->
         </ul>
      </div>
      <div id='ks-ico'>
<a href='http://www.facebook.com/your page' target='_blank' title="Join Us on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmjNyIrON-TUEOXS8HU9P7Wt2yHdx9V4p9EdyJO8h-WshUuRMGbJwCeHCZju3eDUY5PAvzh1SHiYEb2tihKtoIdayLYo4YvYkohVxWwadZjKgfQ29u-JFUc0Z5Zv_vqxvQT7ktxmY5is-s/s1600/facebook.png"/></a>

<a href='https://twitter.com/your profile' target='_blank' title="Follow us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9tq1RZutKMqzVf2TZUC61uYt5MxBpEt5oVx8tb-mq0xxtAmfYC-ti-FD6asduVOStV5XNFlPMBWYk_6a91qVNLu6qDSJ3fb_22_48baRBzjUpvOsGaDV0QgoI1BQWxAYKBVB4DovzlU_x/s1600/twitter.png"/></a>

<a href='https://plus.google.com/your profile' target='_blank' title="Add Us to Circles"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2wML6KeI90UwtKWfz0PqEWTjffFyMgJQ2Uiux7K7VgRoZbOxywE4d6HZm-J7kVxXgpbBYpNzCuGqb3ZAYfMyQhGhSxHTrvg3HGWm4VGho2EE-GnuM7W8Ux10nJOBhuyQwJMi46B0BYQGY/s1600/google_plus.png"/></a>

<a href='http://linkedin.com/your profile' target='_blank' title="Add Us on Linked in"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKblTN7c4A8ET_pz9BC8Yqm2I4IC3tGo_tjr_v25mU9aovm2CxKaij4F-J09wrppE59lZlUUPpp1X-dA51TTC4mHxN4YnhLfEW-qKXUWVxQwMH-jYApFv2TLXh9SFelSWbfrOhjLpPDG5/s1600/linkedin.png"/></a>

<a href='http://feeds.feedburner.com/your feed' target='_blank' title="Subscribe our feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRp59jEUyYPZNrS_FG9UaxQ6m3wI1pYlyNpAkxxhsK-_NeT8LDtqh-u0nD7wk289Pu3U4Y05Tjtv7BdFhf9YVZYesqMpqc2SabhmWw0K40RsxwJGSd5M-u7157HyZi7IRenwHdL3JtjG6E/s1600/rss.png"/></a>    
      </div>
   </div><!--crawlist.net nev ends-->

How to add this Menu

• First log in to your Blogger, select your Blog

• Go to 'Layout' tab then click 'add a gadget’

• Select 'html/javascript' from Pop-up menu,

• Copy following codes and configure

How to configure this Menu

• To configure Dropdown menu, first collect your links of Homepage, Labels and Other pages. And paste individual link in # by your order and change the anchor text as your requirement.

• Menu links indicates into <!--menu-->

• And Sub-menu links indicates into <!--submenu-->

• If you want to add new menu link just, copy paste in order <li><a href='#'>Home</a></li> and configure

• If you want to remove any links just delete <li><a href='#'>Home</a></li>

• To configuring Social media profiles, First collect following profiles and replace address links on default links, indicates with red color.

• To configure Feedburner email subscription; first collect your website's unique feed id. It can be find in this link https://feeds.feedburner.com/yourFeedId , and replace FeedId with your feed name. It red colored

• After configuring done, save widget, save template, And check out your blog for confirm it working fine :)

Compatibility

• This Floating navigation menu is compatible with any default and standard designed template. If its  design breaks on any template remove it.

• This menu is compatible with any updated Web browser.

So what your feedback about this menu don’t forget to mention, Goodluck……

Read More

How to add Meta description to Blogger posts

Meta description plays a vital role for Search engine and visitors both. Meta description contains site/post content’s summary version, what shows in Search result as snippet below title/link and when a person shares post on Facebook, Google plus, LinkedIn etc below title/link. A very good and explained Meta description increases the chance of more clicks through rate. So here I am explaining to beginners How to add Meta description to Blogger.

Adding Meta description to Blogger posts

Blogger’s Meta description set up has two different steps. Read on-

1. General Meta description set up for site name/homepage.

To enable and edit your site’s Meta description Go to

• Blogger account, log in, select your blog

• Select ‘Setting’ and select ‘Search Preferences’

• At Meta tags, Check Yes button to ‘Enable search description’

• And put your site’s 150 Characters Meta descriptions, Hit ‘Save Changes’

This Meta description will appear for your Homepage’s search engine spinet/social media share snippet.

2. Adding Meta description to individual posts.

This Meta description box will appear right side of post editor while you writing a post/page.

• Create a new post/Select a post to edit

• Click on ‘Search Description’ from ‘Post setting’ right side of your post editor.

• Add your Meta texts and hit done.

This Meta description box in individual posts will not appear if you did not enabled Meta description of First Step.

Confirm your Meta description is working fine

This is an additional step, you can also check that your Meta descriptions how working on your site.

• Search your site/homepage address on Google, and see carefully what texts appear below Title/link. If those texts are what you putted in ‘Meta description’ box, then it’s working fine.

• Share your site’s address link on Facebook/Google plus, see what text appear on text snippet, If those texts are what you putted in ‘Meta description’ box, then it’s working fine.

• Go to any online Meta description checker, Like ‘Seoptimer’ and make sure your Meta details working.

Not working after all these steps done, try this

If none of your Meta descriptions appearing even after Turing on ‘Meta description’ (Step 1), the possible reason is to be your Template does not have the Metal description maintaining code (happen sometime in customized/third party templates). So in that case adding the maintaining code will make your Meta description work.

• Go to ‘Template’ tab, select ‘Edit HTML’

• Search for (Using CTRL+F or CMD+F) in code snippet,

<b:skin><![CDATA[

• Above this code copy paste this lines,

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

• And Save template.

And make sure that your ‘Meta descriptions’ are working fine by confirming. Chill…

Read More

Add Print/PDF button on Blogger blogs

Sometime some webpage we enter count as very important, and we want to save that page by printing or PDF. Doing that job instantly we basically use Printfrindly service, A free service what allows to save a webpage as PDF and Print instantly but that take little bit of work to visitors. If your webpage contains some info special you can add print/PDF button to your site very easily and that will increase your visitor engagement. And here in this tutorial I am writing about, How to add Print/PDF button to your Blogger blogs.

Add Print/PDF button on Blogger blogs

Printfrindly offers official button, Below you can see their button generator, Or click this link.

• In number One step select site type ‘Blogger’

• In number two step select button ‘style’

• In number three step customize ‘features’

• Hit ‘Install on Blogger’ Button. And that will take you to Blogger account-

• After log in, ‘add page element’ and select ‘Save template’ from ‘Layout’ setting.

The ‘Printfrindly’ button will appear below post with default sharing icons.

If you don’t want the button below all posts with sharing icons:

• Then from Button generator, select ‘Website’ > Choose Button > Configure > Get the codes, 

• Copy those codes and go to your Blogger account > Layout tab > Add a gadget > Paste following codes and Drag and drop ‘widget’ to your suitable place.

• Save Template.

This button will appear on extremely modified Templates. 

For those users Template does not supports/Not appearing ‘Printfrindly’ button,

• Then from Button generator, select ‘Website’ > Choose Button > Configure > Get the codes, 

• Copy those codes and go to your Blogger account > Template tab > Search for this line

<div class='post-footer-line post-footer-line-1'>

• You will find this line twice select second one and after that line paste generated code and ‘Save template’

If Template does not contains that line/button doesn't shows up;

• Then search </article> and paste code after </article>, ‘Save Template’

If you don’t want to this widget to appear on Homepage:

• Then on ‘add page element’ page select ‘Edit Content’ and before all codes copy and paste this line

<b:if cond='data:blog.pageType == &quot;item&quot;'>

• And below all codes copy and paste this line

</b:if>

• And hit ‘Add widget’ ...

How this tutorial working on your Blogger blog don’t forget to mention. New widget and tutorial will be release soon so don’t forget to subscribe. Chill….

Read More

Add (10) Floating 'Twitter follow badge widget' on Blogger

You may be seen these floating ‘Twitter follow badge widget’ on many blogsites, which widget appears left or right side of blogs and floats. These badge widgets helps you to get twitter audience faster and easily. For your consideration here I present to you 10 different styles of ‘Twitter follow badge widget’. These widgets come up with lightly coded with CSS3, easy customizable and 10 different styles to choose. Let’s see how they looks like, how to add it on your Blogger blog, how to configure.

1. Twitter house badge (On mouse hover, twitter bird appears)

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:10%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinO-Bh2dbrQBDNIwT7HmgayQlQpE9SQWtaVa4OMkgbPFZlrmyewjmNu7G0lMVYigHTLJqGhDxbUv9ACyEQ64xMXQolF6KocOcrOQp_c4aikIi46EF_uSdWCMUZKONAnyaL7RBYVbhVaP6Z/s1600/1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwJKLlozOk4kyRb-ZQhWtaQ3AxwfnQfukXW2JJ_cLGgHuO7pZRflt0mQYMsP0TLMAnrouQ2P0my4ha1fEyYxTmj-HI7HVdoA63jlsNPvXhFx0eZmmpJEv1U-pKnxHj3WQ8j7k4YA5FrIU/s1600/2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinO-Bh2dbrQBDNIwT7HmgayQlQpE9SQWtaVa4OMkgbPFZlrmyewjmNu7G0lMVYigHTLJqGhDxbUv9ACyEQ64xMXQolF6KocOcrOQp_c4aikIi46EF_uSdWCMUZKONAnyaL7RBYVbhVaP6Z/s1600/1.png'" /></a>
<!--crawlist.net float ends-->
</div>

2. Little Twitter bird badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Y0jNkvmnVyyd7VH-E1UvnjpEQjiLL9bT5FrxIKJn3xNRRPDy8Bn3389GA87WGTki_Hm8zxu6kADVKn2o1KRqoU9pZGqu2ALmL7HsmUBApxmnyJGSf17E2ZD4fxC0wvjMUk88oaPnxR7Y/s1600/2.png"/></a>
<!--crawlist.net float ends-->
</div>

3. Cute Twitter bird badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiejOzFqv-tpBUACs8cGLpKmnwJ0YVeqXQYyYwblsTcpdkOF7E_s4LPEGMKaOWOB1L412_zaQ9a6hxl03puXVrAAhqnCu78q0U2VnxsQKAU8CsJEwswp0C1L5lw-5Buzw3TpSELTpvIlLA7/s1600/3.png"/></a>
<!--crawlist.net float ends-->
</div>

4. Twitter bird on branch badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinItW5Vb0bKO2Vq_YNZGmQpmpdl5AhGzJIgScsUwDl64CPE7qeRhVNBAv5mjZNu45vnBMAFWspa3MToXYHnltaxk-BDO5NhQ2IJNL1aqg45s1BFNOL9NHsnUVb_sMpVbLDv8WypYN5tEq8/s1600/4.png"/></a>
<!--crawlist.net float ends-->
</div>

5. Twitter rocket badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8uqXl_fes1a1weNHH8IPbxGqtzaTCSobZ9IMf4LHUInZsTVcQTE6G3XleUavQ03e3CNJqf-dJJkcYf_-ceawKJHByqfd6PiKKdEF5mwVv86OpfBFXJNf2Bw5vClQe9ryCZgZFA0xy-VrD/s1600/5.png"/></a>
<!--crawlist.net float ends-->
</div>

6. Twitter planet badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxNj7DkuG5VEacq3IKBVZyRCNozXqQq7VvbaVs4QhCEiI44YVHatAjW-iciw3a7RdM5E9qcWmxBgXKYNgAt15buwni8bXY6NvoNMK5QTLkqQDqkwrR30iIoxvw4xvRpD7KcU_EDSSLUwJW/s1600/6.png"/></a>
<!--crawlist.net float ends-->
</div>

7. Twitter icon badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ZXZx9HiUIKzpaKZ8gX14XIq9ejYPx51zyvI4CaxBZBvozQuu0BJpxdv3FhixyutGcyFir1L_afQmefYEYjyc8PqxgW6wpzMBpMCcwGA5K835Vduyhf7NgNuE8hu5EjduM7rM8dqLSKBJ/s1600/7.png"/></a>
<!--crawlist.net float ends-->
</div>

8. Spinning Twitter sticker badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-rotate a:hover {background-color: transparent;} #ks-rotate img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #ks-rotate img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
#ks-floattwitter img{height:90px; width:90px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter"><div id="ks-rotate">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrr3s7pnYXHmvXBdWy44NDbGtFD2A7EcFAe1nmW4OmCvUJwTLB0pNMmlHTBFm_2ubRZMhIvodigejGv9kWPKiTQWFFFvrbQfk7WWz8rIB3QZHZh9DksoNmDDXqzdZI1cCstPG_ZqVg4upi/s1600/8.png"/></a>
<!--crawlist.net float ends-->
</div></div>

9. Christmas ball Twitter badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-rotate a:hover {background-color: transparent;} #ks-rotate img { -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #ks-rotate img:hover { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); opacity:.7}
#ks-floattwitter img{height:100px; width:100px;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter"><div id="ks-rotate">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5_YKBnfZjve4Q-ZijWzdvCjBovrupDLk2lSGH0UsbVKIIaGAr-IoM7D7ohb7jof-YyC8kXIWf9GIGjOMiOY078pAARt4j1V09QW3bq06dvAQFQVmQj-TOt8WfZLFe7AILc6UZ6EIw0u7/s1600/9.png"/></a>
<!--crawlist.net float ends-->
</div></div>

10. Smart Twitter badge

<style>
/*crawlist.net CSS starts*/
#ks-floattwitter {
position:fixed;_position:absolute;bottom:20%;right:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
#ks-floattwitter img{height:70px; width:70px;}#ks-floattwitter img:hover{ opacity:.8;}
/*crawlist.net CSS ends*/
</style>
<div id="ks-floattwitter">
<!--crawlist.net float starts-->
<a href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaK6bK3jAPSyo7i92PK8r3cC1TERMGd0EeNB_FsMBNrsirV0l0-hya8NhsPSFAZh4Z_L9WmLneTIl08T57_3F8m4A_DemWsReYSYnWNVF_drmQKbkAwT0MqxEU52tuhUv5A89whiWinTA1/s1600/10.png"/></a>
<!--crawlist.net float ends-->
</div>

How to install:

• Log in to your Blogger, select your blog

• Go to ‘Template’ tab, select ‘Edit HTML’

• Search (Using Ctrl+F or Cmd+F) inside code snippet for </head>

• Copy and paste any code above </head>, And configure:

How to configure:

• Collect your Twitter profile’s direct address link and paste ‘em on default link. Hit ‘Save Template’ And see your widget in live action

• You can also change the size of the badges; just change the Height and Width value.

• All badge will be appear on the right side, if you want them to show on left side just change the value right:0px; to left:0px;

Don’t forget to mention how they working on your blogsites. Goodluck and Chill….

Read More

Pop Out Social media follow widget for Blogger/Wordpress

After publishing Unique styled Social follow widget constantly (like- Flipping TV, Spinning Coffee cups, Sidewise Floating icons, Color Flipping Sprite etc) I want to publish another cool Social follow widget calls ‘Pop out Social media follow widget’, design inspired by my similar widget ‘Truck style social share and bookmarking widget for Blogger’. This widget’s icons will be come out with mouse hover, also enhanced with CSS3 transition, shadow, opacity blur effects, tooltips. Have trendy 12 Circle style icon (Facebook, Twitter, Google plus, Linked in, Pinterest, Instragram, Stumble upon, App store, You Tube, Vimeo, Rss feed, Email) Any icon can be disable easily if you don’t want to use them. Let’s see how it looks like and how to install on your Blogger blogs/Wordpress sites and configure it :)

Pop Out Social media follow widget for Blogger/Wordpress

Live Demo-

 







Codes For Copy-

<style>
/*crawlist.net CSS starts*/
.ks-boxt{width:300px;}
.ks-pop{height:48px; width:48px; margin:10px; float:left; display:inline-block;
-webkit-transition:all ease 0.5s;
 -moz-transition:all ease 0.5s;
  -o-transition:all ease 0.5s;
   -ms-transition:all ease 0.5s;
    transition:all ease 0.5s}
.ks-pop img{border-radius:50%; margin:8px; width:100%;
-webkit-transition:all ease 0.5s;
-moz-transition:all ease 0.5s;
-o-transition:all ease 0.5s;
-ms-transition:all ease 0.5s;
transition:all ease 0.5s;
}
.ks-pop img:hover{margin:0px; box-shadow:5px 5px 3px 3px rgba(0,0,0,0.3); opacity:.8;}/*crawlist.net CSS ends*/
</style>
<div class="ks-boxt"><!--crawlist.net widget starts-->
<a class="ks-pop" rel="nofollow" href="http://www.facebook.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNPKUND45hk7qjvOh7jI5D9dOyvn9edfhXG_sKpR_hLs3VAePsNEGGW85rXmBngY6l6vXCvBqRlgeC0gn8a8NbGHQhPAkW1TL0Q_yfhgyul0B8dL5tdrmTJltywInDmC9pxrHDP5kAgp8/s1600/facebook.png" title="Join us on facebook"/></a>
<a class="ks-pop" rel="nofollow" href="http://twitter.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWAxcPXLxYLpMQXonQKwF_ciGjHsQafFlh8FK-X1T8FSXZWTO3J1AW-eFbFhUYwLBnmbBiWEnYjW_iVgbPclJ2XJ-o8xZ2me6gMe2YYcuKHZtvq1r3zI3r386-LQn3MVsFYS99GcWZh20/s1600/twitter.png" title="Follow us on Twitter"/></a>
<a class="ks-pop" rel="nofollow" href="http://plus.google.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwWWgVJBexOJyQMOWqRTPT9sl1FgYeeoAL5y7x_27r65xLLNXGOnZa7H-LalVapTjxFsqDew4L860BLQfKhHBCq-epIyPC9qjRy4kx6hvRdm17PQkWsxSKOKrVwQzlbTT0sLMDU_rm3e9/s1600/googleplus.png" title="Circle us on Google+"/></a>
<a class="ks-pop" rel="nofollow" href="http://www.linkedin.com/your profile" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRaxZKdWOljglOjSWwqFTHr5QyCw7TL68kxnPXCjSIg7WH6m8WHDgtDZ7dboqjf5u1RnAwTQ7BjymEDCJ6_Giy5i6UUM-UDs12oDBkwn6EEaysJ4HcoMb5Dc3eWl8y0IKSOX5MpeN5TdAK/s1600/linkdin.png" title="Follow us on Linkedin"/></a>
<a class="ks-pop" rel="nofollow" href="http://www.pinterest.com/your profile" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KAyu_UXG_6heFtTQAp26bCOr9vVqKZc5f7lXgVsrgzPW87K8-E-prSah5I6QXYk16NMawphtFCduX-EwU_kpl8UV8R7AJT0h8TT2e8SJnLPbGVhHriM9hv253ZVEHkYIFCCj7TpR1zxV/s1600/pinterest.png" title="Follow us on Pinterest"/></a>
<a class="ks-pop" rel="nofollow" href="http://Instraggram.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DyejCiZU6EQfNZU0XQYXRBRhD1vjMtWvsWz9Dm42BYaygcBfRfJrerQT0WrmNdH3sBgH-nnPOc6ZNAqOwr_jg4-Cw2oGg1U27XfkAhYFMD4vImRK7HSI6Ye15wwiKWdX2JpnVRb6YB9m/s1600/instagram.png" title="Follow us on Instragram"/></a>
<a class="ks-pop" rel="nofollow" href="http://www.stumbleupon.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLAsvU3uP0Ye3cUr_O9PrlMrQrm8vZaNjatdThq10nH7KCscSrpeJE1ZJgN-3k4CYdskQEXjwsSYKVG7eJ148v9IWADUHq3Dxj080ib3dZvbdhB4TOdm9b8Hak2uOuQGoUWRUZ9lWuhio4/s1600/stumbleupon.png" title="Join us on StumbleUpon"/></a>
<a class="ks-pop" rel="nofollow" href="http://play.google.com/your profile" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-7LcWbl_9fF-qjRb6-7AOGTsYQbfqW8FMZO5AhpcC_dQolhRSqf5Y3RCehET63jfHQ6y4A-aES45m6quLQWVGPow0SeWMlB89EEnFx3ulEuJtYFtGzCTFxIYAOf9rZfmOpmNSM2p7iUK/s1600/appleapp.png" title="Download our app from Store"/></a>
<a class="ks-pop" rel="nofollow" href="http://www.youtube.com/your channel" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSCrV0_aHZhHKY806IBQGYgCsndRpIRGyudtzg53gXxQFB32PAQAg6XKquf8h9s-KEYDZzUvGf04sYYPAoBZQ98Kc53jiHIv6pbNECfi8znPXsbNWUYlqxaFdZ2qYejP6IZnbZw06OK37n/s1600/youtube.png" title="Subscribe us on Youtube"/></a>
<a class="ks-pop" rel="nofollow" href="http://www.vimeo.com/your channel" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEZzq_iWXQW_3-eTrR_saQvoiihB0_Q_KiOqQXrMhPqZUdI8TLWgyKBMouKhtEPz_iW6h1qToKvN51pnnuG5_7ry5O4kTCV0hDNlIMOkqJJSGzxUoUUMG1IJ5wg38TwUH5T6lBLfx4fYc/s1600/vimeo.png" title="Subscribe us on Vimeo"/></a>
<a class="ks-pop" rel="nofollow" href="http://feeds.feedburner.com/feed id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9dQew3wUQ0-42L8rC20E8x4eZNi2i0Zk848yDRtxMUXVKbp27WFAZOUzphWKjy2ZvYRxBz_6DWNdhJfDfOIr-oIXFtvB0RXNKdfd-jRjCLxm-622KCCJGuFuMt9Qv5hkc0tjzhg4id0K/s1600/rss.png" title="Never miss a post Subscribe"/></a>
<a class="ks-pop" rel="nofollow" href="mailto:your@email.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQkHp1NW1o-S9fMwTBrIapbpr3Kn4410cP5mJsSVBeCx6UR4qF2U2Z7ObjZS-5-IdgHpdZQzzOqTOQx7Ki0iMjBKre3IK0J7h9-Th_zElW4ANpeNjFW3BF6X5Rt8CYg9PaOTWEJawAAF8/s1600/email.png" title="Contact Us" /></a>
<!--crawlist.net widget ends--></div>

How to add in Blogger

• First log in to your Blogger, select your Blog,

• Go to 'Layout' tab then click 'add a gadget’

• Select 'html/javascript' from Popup menu.

• Copy following codes and Configure,

How to add in Wordpress

• From dashboard hover mouse on ‘Appearance’ tab,

• From ‘Appearance’ menu select 'widgets',

• Then drag and drop 'Text' content box in widget area, copy following codes and paste into 'text' box, Configure

And-

• For new dashboard hover mouse on ‘Appearance’ tab,

• From ‘Appearance’ menu click on 'Text' add it to sidebar and paste following codes and Configure.

How to configure

• First collect your following social media profiles direct links and replace with default links. Example- http://www.facebook.com/your profile with your Facebook fan page links! Links are shown in pink color

• To configure Feedburner email subscription First collect your website's unique feed id. it can be find in this link https://feeds.feedburner.com/yourFeedId , and replace FeedId with your feed name. it red colored.

• To configure Mail icon, your@email.com change with your email, what email you using for contact.

• If you want to remove any icon just delete that line of code <a> to </a> full, that way you can also reset the order of the icon/profile.

So, what you think about this widget and how it working on your Blogger or wordpress blog don't forget to mention or give a feedback :) I would love to hear.

Read More