Simple and Elegant Social Media Widget for Blogger and Wordpress - DESIGNER: Simple and Elegant Social Media Widget for Blogger and Wordpress

Simple and Elegant Social Media Widget for Blogger and Wordpress

Unknown | الثلاثاء، 15 أبريل 2014

For Blogger Blogs

Log in to your blogger account and click the drop down menu.

Select “Layout ” option from the list of options given at left side on your screen.

Now, you need to click “Add Gadget” and then select ‘HTML/ Javascript’.

Paste the code given below.

Save the HTML/Javascript widget.

For Wordpress Blogs:

Log in to your Wordpress account and select Appearance > Widgets > Available Widgets.

Drag 'Text widget' to the sidebar.

Paste the code given below.

Save the widget.

<style>

    .ses-social-widget{background:#ffffff;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;

    -webkit-transition:all .6s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;

    }

    .ses-social-widget:hover{border:1px solid #269;background:#FFFEF9;

    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);

    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);

    box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);

    }

    .ses-social-widget a{text-decoration:none;font-weight:bold;font-size:14px;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}

    .ses-social-widget a:hover{color:#269}

    .ses-social-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}

    </style>

    

    <br />

    <div class="ses-social-widget" style="margin-bottom: 10px; margin-top: 0px;">

    <a href="http://feeds.feedburner.com/Smartbloggertricks"><img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFMwsQpYUAybGcC6jfbikd-7iCmZ3cWlNIYZeO8XmSiBZfO16n5bAvtSkrR3CBDFNieOqrLoHWqq74Vjt9A5Mipr1BOKW5sLkjdvEEBS8ASWRiCV0_WQ3bePukAjzKISJ8yxZpiY12agZ/s1600/social-connect-rss.png" /></a><a href="http://feeds.feedburner.com/Smartbloggertricks">Subscribe to our RSS Feeds!</a>

    </div>

    <div class="ses-social-widget" style="margin-bottom: 10px;"> <a href="http://twitter.com/TechSBT"><img alt="Follow Us on Twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjI6ty27bFqiFMv_jrsGFaxiCvVNV8kDXcWRr5xjpsJOvaM_9hgcRub-w0m-yDTbCmqYYN_i_QZ4iGIsmd1pA3LL-RQt6z0x9WNiaysEnSVRDVny4MlrCMe3qmnQ_7Eahi50UWb_PVzec/s1600/social-connect-twitter.png" title="Follow Us on Twitter!" /></a><a href="http://twitter.com/TechSBT">Follow Us on Twitter!</a></div><div class="ses-social-widget" style="margin-bottom: 10px;"><a href="http://facebook.com/smartbloggertricks"><img alt="Be Our Fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpkP5j_D2HfwPzJywyB0PcNa_ldxzKrGdLy_OhI-QS5fYFdixA5r3O-n-xCbL8Q2tesKhomhmjm7KyWUSBUVCvA_Af640swaOla_zHeXW3eOuR-p6UWp_rjqeiO2wI6ukJjWYO01TrFyL/s1600/social-connect-facebook.png' title='Be Our Fan" /></a><a href="http://facebook.com/smartbloggertricks">Follow us on Facebook!</a> </div>

Now, Replace 'http://facebook.com/smartbloggertricks' with your facebook page url, Replace 'http://twitter.com/TechSBT' with your twitter url and 'http://feeds.feedburner.com/Smartbloggertricks' with your feedburner's feed url.

You are done with the whole procedure of adding simple yet elegant social media widget to your blog.

******************

0 التعليقات:

الاشتراك في: تعليقات الرسالة (Atom)