Monday, 3 September 2012

Social Bookmark Widget


Today, one of the ways to increase your website or blog traffic is by sharing the word about your site on social networks. This is sometimes called Social Bookmarking. Today, I will show you how to make a simple Social Bookmarking Widget that has the Facebook Like button, the Tweet Button and RSS Subscribe Button.
Follow the steps outlined below
  •  Log into Blogger
  • Click on Layout
  • Click on Add Gadget
  • Select the HTML/JavaScript Tab
  • Copy and Paste the below code in the HTML/JavaScript Opened Tab

<style type='text/css'>

#topbox{width:250px;border:4px solid #a1a1a1;background-color:#ffffff;}
#topbox:hover{border:4px solid #4e4c4c;background-color:#ffffff;}

#social1 .social2 h2.subscription { border:0; margin:0; padding:3px 0 0 55px; height:42px; font-size:14px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#social1 .social2 h2.subscription:hover {color:#1c5ef3; font-size:15px;}

#social1 .social2 h2.facebook { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqV8rL2tp-CNy1QwFnyDmaElISbVm8w9m_3irPDlGxfredrZn39RXsVRiQs6-l4FAeGaJR_9tRZO3mTzKZ08zNrhxqfDqxVOc0mEy8Pezl-GS0Xl2CPlMa13otd7RxC5uOTFBxK8Hyeo/s1600/bloggertrix-facebook-icon.png) no-repeat top left; }

#social1 .social2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGXXiar_VqvLxfPvPT0tV5mfPuFDsxo8eqQbkQWTNdJOiepbuEjZzF-nezgb1M9LYofgoB3GzMfnm78YEa2F2PJYLyB4ix6QRFAcgOYG_rSxqzcwGSBLS9JWj1cWJ4kqqVOqWCUiQqCY/s1600/bloggertrix-twitter-icon.png) no-repeat top left; }

#social1 .social2 h2.Rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-DshzLiG_sxnVfGSr4Pj4LuE1CkiBxhFW1AfXKZTV4xOSTGN_XjYUpargywUiGJI9q-uDuLAEhvJ38Oix-VaQWQ7rThd2E5SYc7hW9qU-8-y11_PD86IkGzf2D3I5wvQvN92NeAHHiU/s1600/bloggertrix-rss-icon.png) no-repeat top left; }

#social1 .social2 .subscription a { color:#252e28; text-decoration:none; }

</style>

<div id="topbox">
<div id="social1">
<div class="social2">

<h2 class="subscription facebook"><a href="Facebook URL" target="_blank">Like On Facebook</a></h2>

<h2 class="subscription twitter"><a href="Twitter URL" target="_blank">Follow On Twitter</a></h2>

<h2 class="subscription Rss"><a href="Your Email Subscription URL" target="_blank"> Subscribe On RSS</a></h2>

</div></div>
</div>
  • Replace the Red font phrase with your Facebook Page
  • Replace the Blue font phrase with your Twitter name
  • Replace the Pink font phrase with your Email Subscription URL or RSS URL

2 comments:

Unknown said...

This is a really great suggestion! I find the social networking blob facebook gave me to be too large and bulky.

Unknown said...

Thanks Betsy for the contribution and I hoped you enjoyed using it. Be sure to get more widgets from us.

BthemesandTricks is loading comments...