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

Thin (Flipping) Social icon widget for Blogger

In my previous posts I published a lots of social icon base social profile follow widget. Like Simple round icons, Metro icons, Spinning Coffee cup and Candy, Diy fan count, Flipping TV etc. Continue that job here I publishing another cool social media follow widget. It’s a sprite widget featuring small and thin icons. Actually this widget is inspired by a Wordpress theme named ‘Attitude’ I found that widget on that theme is pretty neat and cool, so I made a version of that widget. It offer’s 11 social media profile slot (Facebook, Twitter, Google plus, Pinterest, Linked in, Tumblr, Vimeo, Myspace, Flickr, YouTube) including a slot for Feed. Icons changes color on mouse hover with flip effect what made entirely with CSS3, CSS and HTML. Let’s see how it looks like and how to configure and add it on your site. 

Thin (Flipping) Social icon widget for Blogger

Live Demo-

Codes for copy-

<style>
/*crawlist.net CSS starts*/
ul.ks-thinsprite {float:right;}
ul.ks-thinsprite li {float:left;list-style: none outside none;border:none;}
ul.ks-thinsprite li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqOPuIxC2Tj_VlMYTIk3LBez5TDeTKnGHtONhPPc8ondvuT0NF21vx-0P8xB8xfWwet6QuvBqGTwDShbu_YZNGWyWpDK5weiH_NE0eTC8tZFUgMIJe1DxSBiU-RLtXtpz_OK_KNy1_kMtB/s1600/social-icons+-+Copy.png');background-repeat:no-repeat;background-size:430px;border:0 none;color:white;direction:ltr;display:block; height:39px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:35px;}
.ks-thinsprite li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqOPuIxC2Tj_VlMYTIk3LBez5TDeTKnGHtONhPPc8ondvuT0NF21vx-0P8xB8xfWwet6QuvBqGTwDShbu_YZNGWyWpDK5weiH_NE0eTC8tZFUgMIJe1DxSBiU-RLtXtpz_OK_KNy1_kMtB/s1600/social-icons+-+Copy.png')}
ul.ks-thinsprite li.facebook a{ background-position:0 0}
ul.ks-thinsprite li.twitter a{ background-position:-40px 0}
ul.ks-thinsprite li.google a{ background-position:-80px 0}
ul.ks-thinsprite li.pinterest a{ background-position:-120px 0}
ul.ks-thinsprite li.linkedin a{ background-position:-160px 0}
ul.ks-thinsprite li.tumblr a{ background-position:-200px 0}
ul.ks-thinsprite li.vimeo a{ background-position:-240px 0}
ul.ks-thinsprite li.myspace a{ background-position:-280px 0}
ul.ks-thinsprite li.flickr a{ background-position:-320px 0}
ul.ks-thinsprite li.youtube a{ background-position:-360px 0}
ul.ks-thinsprite li.feed a{ background-position:-400px 0}

ul.ks-thinsprite li.facebook a:hover, #sidebar ul.ks-thinsprite li.facebook a:hover{ background-position:0 -40px}
ul.ks-thinsprite li.twitter a:hover, #sidebar ul.ks-thinsprite li.twitter a:hover{ background-position:-40px -40px}
ul.ks-thinsprite li.google a:hover, #sidebar ul.ks-thinsprite li.google a:hover{ background-position:-80px -40px}
ul.ks-thinsprite li.pinterest a:hover, #sidebar ul.ks-thinsprite li.pinterest a:hover{ background-position:-120px -40px}
ul.ks-thinsprite li.linkedin a:hover, #sidebar ul.ks-thinsprite li.linkedin a:hover{ background-position:-160px -40px}
ul.ks-thinsprite li.tumblr a:hover, #sidebar ul.ks-thinsprite li.tumblr a:hover{ background-position:-200px -40px}
ul.ks-thinsprite li.vimeo a:hover, #sidebar ul.ks-thinsprite li.vimeo a:hover{ background-position:-240px -40px}
ul.ks-thinsprite li.myspace a:hover, #sidebar ul.ks-thinsprite li.myspace a:hover{ background-position:-280px -40px}
ul.ks-thinsprite li.flickr a:hover, #sidebar ul.ks-thinsprite li.flickr a:hover{ background-position:-320px -40px}
ul.ks-thinsprite li.youtube a:hover, #sidebar ul.ks-thinsprite li.youtube a:hover{ background-position:-360px -40px}
ul.ks-thinsprite li.feed a:hover, #sidebar ul.ks-thinsprite li.feed a:hover{ background-position:-400px -40px}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net sprite widget starts-->
<ul class="ks-thinsprite">
<li class="facebook">
<a href="http://www.facebook.com/your profile" target="_blank" title="Join us on facebook" rel="nofollow"></a></li>

<li class="twitter">
<a href="http://www.twitter.com/your profile" target="_blank" title="Follow us on Twitter" rel="nofollow"></a></li>

<li class="google">
<a href="http://plus.google.com/your profile" target="_blank" title="circle us on Google+" rel="nofollow"></a></li>

<li class="pinterest">
<a href="http://www.pinterest.com/your profile" target="_blank" title="Follow us on Pinterest" rel="nofollow"></a></li>

<li class="linkedin">
<a href="http://www.linkedin.com/your profile" target="_blank" title="Follow us on Linkedin" rel="nofollow"></a></li>

<li class="tumblr">
<a href="http://your site.tumblr.com/" target="_blank" title="Follow us on tumblr" rel="nofollow"></a></li>

<li class="vimeo">
<a href="http://www.vimeo.com/your channel" target="_blank" title="Follow us on Vimeo" rel="nofollow"></a></li>

<li class="myspace">
<a href="http://www.myspace.com/your profile" target="_blank" title="Add us on myspace" rel="nofollow"></a></li>

<li class="flickr">
<a href="http://www.flickr.com/your profile" target="_blank" title="Follow us on flickr" rel="nofollow"></a></li>

<li class="youtube">
<a href="http://www.youtube.com/your channel" target="_blank" title="Subscribe us on Youtube" rel="nofollow"></a></li>

<li class="feed">
<a href="http://feeds.feedburner.com/feed id" target="_blank" title="Never miss a post Subscribe" rel="nofollow">
</a></li></ul>
<!--crawlist.net sprite widget ends-->

How to add-

• 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 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 link. 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.

• If you don’t want to use all icons, you also can remove any icon from source code. Like- If you don’t like to use Tumblr icon, just delete <li class="tumblr"> to </li>

• Save Template.

So don’t forget to motion any issue about this widget and how it looking like on your site :) Chill…

Read More

Floating Social Follow Widget for Blogger

I published some unique styled Social profile follow widget before. Example- Flipping TV, Spinning Coffee cup and Candy, Metro styled, Color flips, Sprite etc. All widgets are trendy and fancy looking and dedicate to make your Blogger site beautiful. And here I am presenting another Social follow widget, it absolutely cool because this widget shown in Right/Left side of your blog instead of sidebar and with mouse hover the icons creates ripple effect. This widget contains Facebook, Twitter, Google plus, Pinterest, LinkedIn, Feedburner slot. Made with CSS3 keyframes animation, CSS and HTML, Easy to configure and install to Blogger Blogs. Let’s see how it looks like and how to install and configure it :)

Floating Social Follow Widget for Blogger

Preview-

Live Demo- {Ch-Check it out}

Codes for copy-

Part 1:

/*crawlist.net CSS starts*/
#ks-floatbar {
position:fixed;_position:absolute;bottom:8%;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);  width:64px;}
#ks-floatbar img {height:64px; width:64px;}
.ks-wiggle {
  cursor: pointer; 
 }
.ks-wiggle:hover  {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
    100% { -moz-transform: skewX(0deg); }
}
@-ms-keyframes wiggle {
    0% { -ms-transform: skewX(9deg); }
    10% { -ms-transform: skewX(-8deg); }
    20% { -ms-transform: skewX(7deg); }
    30% { -ms-transform: skewX(-6deg); }
    40% { -ms-transform: skewX(5deg); }
    50% { -ms-transform: skewX(-4deg); }
    60% { -ms-transform: skewX(3deg); }
    70% { -ms-transform: skewX(-2deg); }
    80% { -ms-transform: skewX(1deg); }
    90% { -ms-transform: skewX(0deg); }
    100% { -ms-transform: skewX(0deg);  }
}
@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
    100% { -o-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
/*crawlist.net CSS ends*/

Part 2:

<!--crawlist.net widget starts-->
<div id="ks-floatbar">
<a href="https://www.facebook.com/your page" title="Get Update by Facebook" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCN-I3ZHRysF5SbqD-q8mpePeUkoPF98EzydxH3tGgyl5pe3NHyo5lto9-EXtHppQNU1DKMOEvteCb5M6n_PN19XG1RyDGUbO9NUPV6oYbdsRb0Hg8ujESWRSkcWvWh8snXTtWNHd4HiE-/s1600/1.png
"/></a>

<a href="https://twitter.com/your profile" title="Get Update by Twitter" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlgv15p9f5Yj9T5gNtOu1GAqBEthZYAywKWCEONfVMNr16EZ9zELZWuff_dsHfgOVoXFsQW7e1y5-7-FuLtstjO7rKZmk_I-MG17qCJCiCI9lI9DbqKpyfLZjCNOzJ4IRu87uCGlMNmzvC/s1600/2.png"/></a>

<a href="http://plus.google.com/your profile" title="Get Update by Google circle" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0QaFBPz5mqNO03RGrRTIAONGn9X-31HojyXUb10nDQRDOyVIRS4zkWuJs_c6Erw8sUiOEuyq7HJ9CVe8fGx386WgqdW_tCjD8fS90lKwo7BQHFw2Zyi0DH_9hme7U2G0KWCCkScKwhqR8/s1600/3.png"/></a>

<a href="http://pinterest.com/your profile" title="Get Update by Pinterest" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvi670PlmjZc8MV1W-f5I-5MeimUSZ737FctO8Sq1PmDrbVkEjRa7RsD4DD6wUbbiCOl8SeyDSEkNYU35Vig4AhOtGeId8pKbRRlrs3i8KxFZ8i3FlFv8NJ4opSj9Vv2xJbDy5mmvaUEQC/s1600/4.png"/></a>

<a href="http://linkedin.com/your profile" title="Get Update by LinkedIn" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtKgWk8Vci-FbuzThAKNu8IQeSqZvSPNvakwBqbzr_PAGBa01CMVedBwjK-pElQ_xrIuQa1d5Mcr-UYpSjOHctv0kFumGeh-Qrei-TCG4avD40n8xSvFShsB8y3dvSnY5Wui5oi4dgO94/s1600/5.png"/></a>

<a href="http://feeds.feedburner.com/your feed id"  title="Get Update by Email" target="_blank" rel="nofollow">
<img class="ks-wiggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxA0gRueH20fmyRUk7-_VPXJSuoSyqqUtEg23EkQhHnG93ETZiA2wISCWyvb7WGl0SUMuDfKKs0DMr42YyQB5JXXgjXR3JPkvvIe7VV4_A4g4GuEYrOeTV5Cy982wXq1eNYkxJbFNfb52/s1600/6.png"/></a>
</div><!--crawlist.net widget ends-->

How to install:
This widget set up has one step, Read on-

• 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 ]]><

• And copy and paste ‘Part 1’s code above ]]><

• Again search for </head>

• Copy and paste ‘Part 2’s code above </head>

• And configure:

How to configure:

• Collect your following profile’s direct address link and paste ‘em on default links. All links indicates with Red color

• Hit ‘Save Template’ And see your widget in live action

More customizing:

• Default widget will appear on the Left side of your Blogger. If you want to show this widget on Right side, Just change the code value left:0px; to right:0px; that’s it

• If you do not like the size of the icons, you may change the size of icons just put this line of code and change the value of #ks-floatbar img (default is 64)

• 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 how it looking and working on your Blog don’t forget to mention, Stay subscribed and tuned new Blog goodies will release soon. Chill…..

Read More

Add eCommerce Shopping cart in Blogger

Do you use Blogger platform for spreading your words out, if you do you may be looking for to sell some of your written/edited eBook, voice/music files though your Blogger site. But Blogger does not have such option (selling your stuff on blogs) by default, so how you suppose to sell these stuffs through your Blogger blog, the answer is using ‘PayPal’ shopping cart. But that option also does not offer fully functional eCommerce site. I that case there is another solution I have found, what I am going to explain here. But this shopping cart service only offers you to run a small range of eCommerce site (cause big  range eCommerce site’s structure, security, SEO and customer maintaining needs whole different level of arrangement and enforcement). So read on ‘Add eCommerce shopping cart in Blogger’ and Turn your Blogger blog into little eCommerce site/shop following few steps:

Add eCommerce Shopping cart in Blogger

Some info about this cart: Features:

• Can handle all currencies supported by PayPal and Google Checkout

• Passed your site's Google Analytics data to Google Checkout

• Handles up-to 3 option variables

• Multi -language support

• PayPal It supports product variations, shipping, handling and sales tax

• If you are already using PayPal shopping cart, you will find the button code is similar. On top of being certified by PayPal and Google, it has been successfully tested on humans and they absolutely love it (which means higher conversion rates for you)

• Simply set the product price to 0.00 to let buyer enter their own amount.

• Does not require you to register with us or install anything.

How to configure this cart:
Fill up these wanted information’s,

• Google Checkout's Merchant Id: 16 digits,

• PayPal's Email: Your valid PayPal email address,

• Site URL: Your Blogger blog’s URL,   

• Contact Email: notify you of the updates,

• Carts Currency: select between two currency

• Continue Shopping URL: After payment complete, the page’s link where client will land to get his/her paid stuff’s download link/shipping address

• Cart Item: Quantity, Item Name, Amount           

• Shipping Cost: Shipping Cost of each additional Unit, Handling Cost and Tax (Flat amount, NOT percentage) etc if these information also involve in your cart.

• Cart Item Options: Type, Name, Value, Action

• Click here to go (Fat Free cart generator) or fill info’s down here

 

After configuring, select ‘Create cart code’ button, Copy all generated codes and follow these steps:

• Log in to your Blogger account, select your blog

• Go to ‘New post’ and provide your stuff’s information

• After all done, Click on ‘HTML’ part from upper left side of post editor (compose/html), and paste all configured codes in ‘HTML’ part, and back to ‘compose’ part

For more info see this image.

• Check your blog out for see this cart in live action.

Any more information about this shopping cart available in their site and any problem related this cart can be solve at their Faq and contact page. So add eCommerce shopping cart to your Blogger blog easily and enjoy your small business. Best of luck…

Read More