Showing posts with label WIDGET. Show all posts
Showing posts with label WIDGET. Show all posts

Adding Related Post And Social Bookmarking Widget Tools For Blogger

Adding Related Post Below the content post is a highly recommend for the blogger. The advantage of installing this Widget is to keep visitors from their reading articles and stay it longer in your website. This widget collects all the related content in your post category or label.
  1. Go to  Dashboard.>> Layout >> Edit HTML
  2. Expand your widget by clicking on Expand widget templates
  3. Find the following code in your template. (Press Ctrl+F to make a search)
  4. <p><data:post.body/></p>
  5. Now paste the following code just below the above code.
 <!-- Social Bookmarking Widget Begin -->
<div style='float:left;'>
<ul class='actions'><h3>What's Next?</h3>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url   + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' border='0' src='http://3.bp.blogspot.com/_LW4mOVq5BJE/TNkouA5vVVI/AAAAAAAAAFk/GIR-NXj7njM/s1600/digg.png'/>Digg It</a></li>

<li><a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble This' border='0' src='http://2.bp.blogspot.com/_LW4mOVq5BJE/TNkou9CnEEI/AAAAAAAAAF8/DOEyU479Gr8/s1600/stumbleupon.png'/>Stumble It</a></li>

<li><a class='twitthis' expr:href='&quot;http://twitthis.com/twit?url= &quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitthis'><img alt='Twitthis' border='0' src='http://2.bp.blogspot.com/_LW4mOVq5BJE/TNko1FQugEI/AAAAAAAAAGE/c47HCp-0rEE/s1600/twitter.png'/>Twit This</a></li>

<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot;   + data:post.title' target='_blank' title='Add to Del.icio.us'><img alt='Del.icio.us' border='0' src='http://3.bp.blogspot.com/_LW4mOVq5BJE/TNkouABTjfI/AAAAAAAAAFc/SudkdpvFJgg/s1600/delicious.png'/>Save This Page</a></li>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url +   &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bookmark To Google'><img alt='Google' border='0' src='http://3.bp.blogspot.com/_LW4mOVq5BJE/TNkouh6RTTI/AAAAAAAAAFs/cRyYj4yqQ_o/s1600/googlebookmark.png'/></a>

<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=  &quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' target='_blank' title='Add to Yahoo web'><img alt='Yahoo' border='0' src='http://1.bp.blogspot.com/_LW4mOVq5BJE/TNko1ZVEDiI/AAAAAAAAAGM/BB-G1HOTK6I/s1600/yahoo.gif'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=  &quot; + data:post.title' target='_blank' title='Add to Reddit'><img alt='Reddit' border='0' src='http://1.bp.blogspot.com/_LW4mOVq5BJE/TNkoujMr_8I/AAAAAAAAAF0/prWcFlagPEE/s1600/reddit.png'/></a>

<a expr:href='&quot;http://technorati.com/faves?add= &quot; + data:post.url' target='_blank' title='Add to Technorati'><img alt='Technorati' border='0' src='http://1.bp.blogspot.com/_LW4mOVq5BJE/TNkpRQbAQpI/AAAAAAAAAGU/di4krN73_YY/s1600/technorati.png'/></a> </ul></div>
<!-- Social Bookmarking Widget END -->
<!-- Related Posts Widget Begin-->
<div style='float:Right;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 2;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
</div>
<!-- Related Posts Widget Begin-->

      5. Save Template

note: you can also customize the number of post in related post widget by changing the color blue numbers.
see screenshot below


Related Post and Social Bookmarking Widget Tools


How to Add Tabs to Sidebar in Blogger

How to Add Tabs to Sidebar in Blogger







In this tutorial I will tell you how to add tabs to sidebar of Blogger. There are many tutorials available out there but they are mostly complicated and not so easy to add. With the effect of jQuery, this widget lets you add any sidebar gadget you want to be included within the tabs. It is the easiest tabbed widget that will let you create your tabs for blogger.
Tabs for Blogger
First, go to Design > Edit HTML and backup your template.
Second is the CSS part. Place the below codes before ]]></b:skin>
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
In third part, you have to include the jQuery Library. Add the following script just after]]></b:skin>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
If you had previously added the jQuery library, then skip this part but remember to check if it's thelatest or not.
In fourth part, you need the script which will automatically create tabs to sidebar. Add this script before </head> tag.
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>
You have to change the following codes to let the widget work:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Explanation:
starttab - Starting number of the gadget to start the tab, it counts from ‘0’. (step 4.1)
endtab - The number for your last gadget where the tab ends. (step 4.2)
sidebarname - Your sidebar’s id that you have found out. (step 4.3)

Step 4.1 and 4.2

To place the first three gadgets within the tab, your starting number is 0 and the ending number is 2. Or if you want to start the tab from the second sidebar gadget then the starting number is 1 and the ending number is 3 and so on.Let’s have a look at the pictures below for better understanding.
Understanding Tab Numbers
Tabs in Action

Step 4.3

Now comes the main part for finding the correct sidebar’s id. In most of the templates you can find the id of your sidebar by searching for “sidebar-wrapper” in Design > Edit HTML tab. For example, the id for Layout templates is “sidebar” and it's common for this type of templates.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
For the new designer templates from Blogger the snippet will be:
<div class='sidebar section' id='sidebar-right-1'>
You can also install a Firefox plugin called Firebug to find the correct ID, a great tool for Web Developers.
Find Sidebar Id
Lastly, save you template.
Now all you have to do is rearrange the gadgets and select the stating tab and the ending tabs. As I have told earlier, this is the easiest widget to add tabs to sidebar.
To be Noted:
You must add titles to every sidebar gadget to let this tab widget for Blogger to work properly.
Thanks to Abu Farhan and Dante Araujo of Blogger Tuts.

Add Two Sidebar Columns Below Posts in Blogger

Add Two Sidebar Columns Below Posts in Blogger





Today I will tell you how to add two extra widget sections / sidebar columns below Blogger post sections within main wrapper.

Step 1: Go to Design > Edit HTML tab and find for:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Step 2: Add the following snippet before the closing DIV. It is </div> marked in bold in step 1.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='col-left' showaddelement='yes' />
<b:section class='sidebar' id='col-right' showaddelement='yes'/>
<div style='clear: both;'/>
</b:if>
I have used the conditional tags highlighted in red to show these sidebar sections only in homepage of your blog. If you want these widget sections to be shown also on post pages then delete the conditional tags.

Step 3: Find ]]></b:skin> and before this add:
#col-left {
width: 48%;
float: left;
}
#col-right {
width: 48%;
float: right;
}

Step 4: Save you template and go to Blogger “Page Elements” tab. You will find that there are two widget sections added just below the post body. Now add some widgets to these and view your blog.

One more thing you will notice that the sidebar columns will be visible after the blog pager and blog feed links. Blog-pager links are “Older Post”, “Home” and “Newer Post” links and blog-feed links are “Subscribe to: Posts (Atom)” and “Subscribe to: Post Comments (Atom)” links that are visible in Blogger homepage and in item pages below every posts.

If you think that it looks bad then you can hide or remove these links so that the two sidebar widget sections will appear only after the post body. So let’s do another step.

Step 5 (Optional): Go to Design > Edit HTML tab and find for “]]></b:skin>”. Immediately below it add the following styling properties:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#blog-pager {
display:none;
}
.feed-links {
display:none;
}
</style>
</b:if>
Again note that here also I have used the conditional tags for homepage only. At last save you template.

It’s done.

Add 125x125 Ad Slots To Your Blogger/BlogSpot Blog

Add 125x125 Ad Slots To Your Blogger/BlogSpot Blog



Presently 125x125 ad-spots are the most famous ad dimensions in the blogosphere. For both publishers and advertisers these dimensions are perfect to display text & pictures attractively and at the same time these ads do not interfere much with the blog's content.
So if you are too planning to sell some place on your blog with these 125x125 ad spots, then follow these simple instructions:
Although many bloggers place and control these ad-spots through CSS but I am using simple HTML tables, so as to keep the process simple and so that you can easily customize it later.

STEP 1:
Log in to Blogger, go to "Layout", and click on "Add a Gadget" -> select it as "HTML/JavaScript".
Paste this code into the HTML box:
<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
</tr></table></center>
The code in blue represents "no. of columns" (2 blue lines=2 columns) and code in purplerepresents "no. of rows" (2 purple lines=2 rows).

STEP 2:
Save the widget.

STEP 3:
As soon as an advertiser approaches you, replace the links in RED in the code above with the new ads.

TIP: Instead of showing all 4 banners as "Advertise Here", it is better to use 2 or 3 of them to show any affiliate ads and keep the last one as "Advertise Here" banner.

You may use any of these "Advertise Here" banners:


This tutorial was requested by Mohammad Mustafa Ahmedzai from TNT-by-STC.

Add 4 in 1 Social Sharing Slide Pop out Widget To Blogger/Blog

Add 4 in 1 Social Sharing Slide Pop out Widget To Blogger/Blog



1

F
irst If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it. Kindly have a look at them:
And now I’m Back here With 4 In 1 Social Share sliding pop out widget Using jQuery ,
 and it's not only for facebook like box , but here you will also see your twitter widget sliding same like facebook like box , similarly for the google +1and Subscribe Popup form ,this look much useful and cute on it slide on your blog , live at a side of your blog when some one over his/her mouse over it , it pop up with a cute sliding effect , the Jquery effect ,
so ...let see how to get this.



How To Add 4 In 1 Social Shere Sliding Pop Out Widget To Blogger.
  • Go To Blogger>>>Design>>>Edit HTML
  • Tick Expand Widget Template
  • Search For The Tag </head> (Using ctrl + f )
  • Copy n Paste Below Code Before </head>
<link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]multipopoutwidget.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });
</script>

Note :- CTRL + F To Find Above Red jQuery Plugin URL In Your Template If You Have Already This Plugin Than Remove It .

Save Your Template

Now Adding HTML Code It's Simple
  • Go to Blogger>>Design>>>Add a Gadget 
  • Choose HTML/Javascript 
  • Copy n paste below HTML code Into It,
<div id="on">
    <div id="facebook_right" style="top: 18%;">
        <div id="facebook_div">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwdGaKhVs6kEXqT0AuE5woXeObjawoTa518QDpCLZ6R8wF7UZzr5J_Zt5YDQ4F1OE9HT40d-XphMopOIA43_SGN9E-QWCHs4sFgn5Cilool1P6nPSNZ9BD1bAEulnbaynMBgaxyRVd23Pk/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" />

            <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmakingdifferent&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe>
        </div>
    </div>
</div>
<div id="on">
    <div id="twitter_right" style="top: 35%;">
        <div id="twitter_div">
            <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW_BoJ0FsYdnfrKL6yWQXNRGO5pH0UAMNsA3OJmRTtFjb5OcU4ffXhTYK_k0bRa-dzEoap7Dq3GxddQc76fHRYvINrRyrfVXqhnGyuQIy27PDy1hHYkdkn_mK6mg75auF5537i-FolkjvI/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png">
            <script src="http://widgets.twimg.com/j/2/widget.js"></script>
            <script>
                new TWTR.Widget({
                version: 2,
                type: 'profile',
                rpp: 4,
                interval: 1000,
                width: 246,
                height: 265,
                theme: {
                shell: {
                background: '#63BEFD',
                color: '#FFFFFF'
                },
                tweets: {
                background: '#FFFFFF',
                color: '#000000',
                links: '#47a61e'}
                },
                features: {
                loop: false,live: true,
                scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all'                  }
                }).render().setUser('nitinmaheta').start();
            </script>
        </div>
    </div>
</div>
<div id="on">
    <div id="google_plus_right" style="top: 52%;">
        <div id="google_plus_div">
            <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJPxyVgMmhP8Qvg-NZxAd-uu6aewDd_qe2vUp8AU0vSpJ9vHxTDnRCrt8x7DW2AUL6gH-9jQxDm-ebwbsG9_StfR9YdOm6Xdk3uRDYjDttWwqn3Hsu6bhAgYPRGgvFZHdUlgdjAvQ9zI5/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.png">
            <div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div>
    </div>
</div>
<div id="on">
    <div id="feedburner_right" style=" top: 69%;">
        <div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MakingDiffrent', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="MakingDiffrent" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center>

            <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOu-VvK7qhvXDVJ3KrGrT4O0eGQ2ExggnNZgUO_HdD1K5eJpmWi3hG7XVf_odw2Dfmbq6pGZeeIRA25r6qk3jMfxORkh9kH0wI0tXqOXLvYeMR_3sRNrXpHEanHNzJd7CaaX0w-DoeaVC/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png">
        </div>
    </div>
</div>

Note:- Replace In Above Code
1. makingdifferent With Your Facebook User name
2. nitinmaheta With Your Twitter User name
3. MakingDiffrent With Your Feed Title
  • Save the widget and drag the widget anywhere on your right sidebar. Place it below all widgets on your right sidebar 
  • Finally Click the orange save button towards top right.
And that’s all!
I hope you like and enjoy it!