LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing / WordPress / WordPress Social Sharing » Stylish And Smooth Sliding Social Media Widget For Blogger

Stylish And Smooth Sliding Social Media Widget For Blogger

Stylish-And-Smooth-Sliding-Social-Media-Widget-For-Blogger
Social Media is a best platform to market your web and products to the world from your home that you cant even not do by outdoor marketing so same like here on your blog and web you can do it more by using some stylish widgets.

So there are many social media widget available online but here we have a simple pure CSS smooth sliding social media widget to add on your blog to attract user to like your social media where later you can post your daily content easily.

 

 

 

Features:

1.) Simple Smooth Sliding
2.) Top Sites Like Facebook, Twitter, GooglePlus, PinIt, RSS Button Added.
3.) No JavaScript Or JQuery.
4.) Work With Cross Browsers.
5.) No Platform Limitation.
6.) Pure HTML-CSS Coded.
7.) Short Coded.
8.) Available For Blogger And WebSites.
9.) Stylish Design Of Original Colors Codes.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <data:post.body/> Code.
7.) Now Copy The Below Code And Paste It After The Above Code..
8.) Click “Save Template” And Done.

How To Add In Website?

1.) Just Go To Your “HTML File“.
2.) Now “Copy” The Below Code And “Paste” It Between “<body> </body>“.
3.) “Save” It, Now You Are Done.

CSS:

<style>
.social_sliderbox{font:16px normal 'Denk One',sans-serif;display:inline-block;position:relative;width:95%;max-width:200px;padding:12px}
.social_slider{width:95%;max-width:280px;padding-top:8px;padding-left:8px;padding-right:8px}
.social_slider a{text-decoration:none!important}
.social_slider ul{margin:0;padding:0;list-style:none}
.social_slider ul li{display:inline;margin:0;padding:0;text-indent:0;margin-left:10px}
.social_slider ul li a.facebook{border-left:65px solid rgba(59,89,152,1);color:rgba(59,89,152,1);-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.facebook p{margin:2px 20px 0 -60px;display:inline-block;color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.facebook:hover{background:rgba(59,89,152,1);border-left:0 solid rgba(59,89,152,0.1);color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.facebook:hover p{opacity:0;-webkit-transition:all 1ms ease-in-out;-moz-transition:all 1ms ease-in-out;-ms-transition:all 1ms ease-in-out;-o-transition:all 1ms ease-in-out;transition:all 1ms ease-in-out}
.social_slider ul li a.twitter{border-left:65px solid rgba(64,153,255,1);color:rgba(64,153,255,1);-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.twitter p{margin:2px 20px 0 -60px;display:inline-block;color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.twitter:hover{background:rgba(64,153,255,1);border-left:0 solid rgba(64,153,255,1);color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.twitter:hover p{opacity:0;-webkit-transition:all 1ms ease-in-out;-moz-transition:all 1ms ease-in-out;-ms-transition:all 1ms ease-in-out;-o-transition:all 1ms ease-in-out;transition:all 1ms ease-in-out}
.social_slider ul li a.gplus{border-left:65px solid rgba(219,74,57,1);color:rgba(219,74,57,1);-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.gplus p{margin:2px 20px 0 -60px;display:inline-block;color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.gplus:hover{background:rgba(219,74,57,1);border-left:0 solid rgba(219,74,57,1);color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.gplus:hover p{opacity:0;-webkit-transition:all 1ms ease-in-out;-moz-transition:all 1ms ease-in-out;-ms-transition:all 1ms ease-in-out;-o-transition:all 1ms ease-in-out;transition:all 1ms ease-in-out}
.social_slider ul li a.pinterest{border-left:65px solid rgba(174,45,39,1);color:rgba(174,45,39,1);-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.pinterest p{margin:2px 20px 0 -60px;display:inline-block;color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.pinterest:hover{background:rgba(174,45,39,1);border-left:0 solid rgba(174,45,39,1);color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.pinterest:hover p{opacity:0;-webkit-transition:all 1ms ease-in-out;-moz-transition:all 1ms ease-in-out;-ms-transition:all 1ms ease-in-out;-o-transition:all 1ms ease-in-out;transition:all 1ms ease-in-out}
.social_slider ul li a.rss{border-left:65px solid rgba(255,102,0,1);color:rgba(255,102,0,1);-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.rss p{margin:2px 20px 0 -60px;display:inline-block;color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.rss:hover{background:rgba(255,102,0,1);border-left:0 solid rgba(255,102,0,1);color:#fff;-webkit-transition:all 1000ms ease-in-out;-moz-transition:all 1000ms ease-in-out;-ms-transition:all 1000ms ease-in-out;-o-transition:all 1000ms ease-in-out;transition:all 1000ms ease-in-out}
.social_slider ul li a.rss:hover p{opacity:0;-webkit-transition:all 1ms ease-in-out;-moz-transition:all 1ms ease-in-out;-ms-transition:all 1ms ease-in-out;-o-transition:all 1ms ease-in-out;transition:all 1ms ease-in-out}
</style>

HTML:

<div class="social_slider">
<ul>
<li><a class="social_sliderbox facebook" href="https://www.facebook.com/EXEIdeas2010"><p>12K+</p>Facebook </a></li>
<li><a class="social_sliderbox twitter" href="https://twitter.com/EXEIdeas"><p>15K+</p>Twitter</a></li>
<li><a class="social_sliderbox gplus" href="https://plus.google.com/+EXEIdeasNet"><p>14K+</p>Google+</a></li>
<li><a class="social_sliderbox pinterest" href="http://pinterest/EXEIdeas"><p>12K+</p>Pinterest</a></li>
<li><a class="social_sliderbox rss" href="http://feeds.feedburner.com/EXEIdeas"><p>11K+</p>RSS</a></li>
</ul>
</div>

Customization:

Replace all social media profiles links with your own links. Rest is ok. Edit it more if you are a pro or can ask for help.

Last Words:

This is what we have. If you liked it then share it with your friends and leave your comment and if you still have any quires then feel free to ask us. Thanks to be with us, will be with you on next codes. Be with us…

You Like It, Please Share This Recipe With Your Friends Using...

6 Responses to “Stylish And Smooth Sliding Social Media Widget For Blogger”

  1. Shariq says:

    Its great work this is nice way to attract audience and also unique and interesting article.

  2. Nick says:

    This topic will definitely help to create more useful blog than ever we had.Thank you for sharing.

  3. Adewale says:

    Please how to I add CSS to blogger? I only know how to add HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *