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.