Search

Join this Blog for direct reference of any post into your inbox. To join just click on "Join this Site" under "Follower" then Login with your Email.*** DECLARATION: I Maintain this Blog for Helping Myself While at Work and Welcome any body Needing Help!!!.*** CAUTION: Using any of the script from this Blog may contain at Own Risk. These scripts May or May not have been Tested.***

Monday, 8 September 2014

How to add Google+ Follow & Other Widget Button with Blogger

Google New Gplus button for blogger that lets you to share your blog with many people across the world. Blogger introduces two Google+ gadgets (+1 Button and Google+ Badge).
The Google+ follow is simple button added with your blog which quickly allows visitors to add you or your page to their circles. When a user clicks on ‘Follow’ button, Google receives information including the URL of the page/profile/community followed, information about the user's Google profile, the user's IP address, and other browser-related information.
  1. Go to Google Developer Link: https://developers.google.com/+/web/badge/
  2. Add the URL to which you want to link Google+
  3. Once you added the Google+ URL, the Demo window on the right of the screen indicating the different type of Google Plus customization.
  4. By Clicking on “Advance Options” you can choose either a light background or dark background for Google+ button.
  5. Experiment with slider tool: You can choose the width of your Google+ follow badge
Alternatively you can paste your HTML/Java script code into your blog and later can updated this code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
<style>
.wc-gplusmod, .wc-gplusmod:before, .wc-gplusmod:after
{
background: #ffffff;
border-radius: 5px 5px 0 0;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.wc-gplusmod
{
position: relative;
width:250px;
padding: 1em;
margin: 50px auto;
}
.wc-gplusmod:before, .wc-gplusmod:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.wc-gplusmod:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
</style>
<div class="wc-gplusmod"><div class="g-plus" data-action="followers" data-height="290" data-href="https://plus.google.com/+ShahidAhmedShahidDBA/posts" data-source="blogger:blog:followers" data-width="290">
</div>
</div>
Note: Change the Red Colored Link with your own Google plus profile or page address.

Adding Google Clock with Blog:
1. Login with your blogger Dashboard and select Layout.
2. In the Layout select add a Gadget option “HTML/JavaScript” widget.
3. In the HTML/JavaScript widget paste your Generated code.
<iframe src="http://free.timeanddate.com/clock/i31i04p3/n214/szw110/szh110/hoced1c24/hbw10/cf100/hgr0/fiv0/fas34/fdi72/mqv0/mhc000/mhs3/mhl20/mhw1/mhd84/mmv0/hhs1/hms1/hsc000/hss1" frameborder="0" width="112" height="112"></iframe>

To design different custom analog Clock check this link: Design Analog Clock
Adding Live Exchange Rate with Blog
Same link above open your blogger Layout Choose HTML/Java script widget and paste below code:
<!-- Simple Currency Rates Table START -->
<link rel="stylesheet" type="text/css" href="http://www.exchangerates.org.uk/widget/ER-SCRT2-css.php?w=180&nb=10&bdrc=E0E0E0&mbg=FFFFFF&fc=333333&tc=333333" media="screen" />
<div id="erscrt2"><div id="erscrt2-widget"></div><div id="erscrt2-infolink"><a href="http://www.exchangerates.org.uk/Saudi-Riyal-SAR-currency-table.html" target="_new" ><img src="http://www.exchangerates.org.uk/widget/logo-333333.png" alt="ExchangeRates.org.uk" /></a></div>
<script type="text/javascript">
var tz = 'userset';
var w = '180';
var mc = 'SAR';
var nb = '10';
var c1 = 'USD';
var c2 = 'KWD';
var c3 = 'INR';
var c4 = 'AED';
var c5 = 'PKR';
var c6 = 'CAD';
var c7 = 'NPR';
var c8 = 'NZD';
var c9 = 'BDT';
var c10 = 'CNY';
var t = 'Live Exchange Rates';
var tc = '333333';
var bdrc = 'E0E0E0';
var mbg = 'FFFFFF';
var fc = '333333';
var ccHost = (("https:" == document.location.protocol) ? "https://www." : "http://www.");
document.write(unescape("%3Cscript src='" + ccHost + "exchangerates.org.uk/widget/ER-SCRT2-1.php' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
<!-- Simple Currency Rates Table END -->

Adding Live Traffic Feed with Blogger:
From Blogger Layout Choose HTML/Java script widget and paste below code:
<script type="text/javascript" src="http://feedjit.com/serve/?vv=955&amp;tft=3&amp;dd=0&amp;wid=1f1a4b880f9fb284&amp;pid=0&amp;proid=0&amp;bc=FFFFFF&amp;tc=000000&amp;brd1=012B6B&amp;lnk=100D9E&amp;hc=FFFFFF&amp;hfc=2853A8&amp;btn=C99700&amp;ww=175&amp;went=8"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>
or-
Adding Current Logon Number of Users:
<script id="_wau0lw">var _wau = _wau || []; _wau.push(["classic", "ytivnb4uxvs5", "0lw"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Adding PhotoSnack SlideShow with Blogger:
1. Go to PhotoSnack.com and create an account using either Google/Twitter anf Facebook Id.
2. Once login Make a SlideShow here and then upload your photo.
3. Now Click on "Preview and Customize" to customize a template for Sideshow.
4. Finally click on either Snakswebsite or Embed to generate the code.

5. Copy the generated Code and Paste it into HTML/Java Script Widget on your blog.
Example Generated Source Code:
<iframe style="border:none" src="http://files.photosnack.com/iframejs/embed.html?hash=pdnlda0q&useOnSW=true&t=1410188200" width="200" height="200" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="0"></iframe>

How to Create Social Icons and Button on Blogger:
Steps:
1. Design or Copy the button from any souce and Save it as a jpeg images.
3. Upload them to a photo uploading/sharing site like Flickr or photo bucket or any other.
4. Click on one of the images in that site and click the square with an arrow button. A grab the code box will pop up then copy that code. Modify the size (if require).
5. Go to your layout section, Choose to add ab HTML gadget.
7. Paste the HTML code into that window.
8. Grab the link you want this button to go to (like the instagram button goes to your instagram feed) and replace between the quotation marks of href=”PLACE LINK HERE”.
9. Add all your other buttons you would like.

How to Lock/Unlock Widget of Blogger:
When your blogger widget is unlocked then user’s can easily play and customized and play around with the templates framework otherwise you are not able to customize with your blog.
Login into blogger dashboard and go to the Templates -> Edit HTML.
Now from “Jump to widget” button select particular widget code to be lock and unlock.

To unlock the widget replace locked='true' with locked='false' this will unlock the widget the layout area. You are also able to remove the widget by removing all the code between <b:widget> to </b:widget> tags
And to lock the widget Locked='false' and finding it replace the False with True to lock the widget. I hope this article will help you lock and unlock the widget from your blogger.

0 comments:

Post a Comment