Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts

Monday, 5 September 2011

›› Related Post Widget For Blogger Blog

Hello Friends,
In This Post i'll make you learn how to install related post widget in your Blogger Blog.
It is very easy to install. Now Let's talk about the features About the Related Post Widget.
  • Increases Traffic to your Site
  • Visitors Stay engaged
  • Highly intelligent Only Displays the related post of the current label unlike others.
Ok Now Enough Let's install on your blog.. It will take only one minute to install  .

So here We Go...

Step 1:
Go to Dashboard » Design » Edit Html » Tick the Expand Widget Template.
Now find the Following Code by pressing Ctrl+F 
</head>
Now Paste the Bellow Code Just above it
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQf4T8_3NLOUAehHCWYY8-7WRHfQht9VQPfyv-s_6is7s8J5OHq4Uc8BvZjTIWVtv_7fvtyAPz0HpGC0suWqE6MLUNIR34nO3CYhU5Qyz0rrOO4Bosy_bxWu5tBa40-TqVmx9r0LUghQI/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://sidharth12.googlecode.com/files/Related_posts_hack.js' type='text/javascript'/>

Great now you have completed Step 1, Let's Proceed To Step 2

Step 2
Now Find this code :
<data:post.body/>

Now immediately Paste The Below code above the it.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Now Hit on preview if everything is alright click on save template.

Customization:
You can change the Number of related post to be displayed by changing the number which is highlighted in red color.

If you have any problems or questions feel free to ask in the comments 

Note:
If While finding the <data:post.body/> code is coming three time 
This Problem comes when we install Auto Read Hack in our Blogs

For this Problem Search for any one line from below and Put Above Section of Wdget Code after it!

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Sunday, 28 August 2011

Wordpress like Profile box under every post

Hello friends,
A very good morning to you..
In this post i'm going to make you learn how to show the profile box under every post..
It is a wordpress plugin in which one Can show about themselves Bellow the post..
For you i have specially made this plugin using which you can utilize it in a cool way :D....

The Above is The Preview of this plugin :)
So Come on Let's Implement it in your blog with 4 Easy Steps


Step1
Go To Blogger Dashboard, then Click on Edit Html, Then Tick on Expand Widget Templates.


Step2
Now Find The Following Piece Of Code :-
]]></b:skin>

Now Copy the Following Code just above it :
.profile-box {
background: #E1DCDC;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #CEC2C2;
overflow: auto;
}
.profile-box p {
margin: 0;
padding: 0;
}
.profile-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #DFC7C7;
}

Step3
Now Find The Following code and paste the Code in step4 above it
<div class='post-footer-line post-footer-line-1'/>
If the above code is not present then search these :
<div class='post-footer-line post-footer-line-2'>
or
<div class='post-footer-line post-footer-line-2'/>

Step4
Now Copy The Bellow Code above as mentioned in step3
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='profile-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='YOUR AUTHOR PROFILE IMG URL HERE' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/sidhpro'>sidhpro</a><br/>
Be My Friend on Facebook [at] <a href='http://www.facebook.com/sidh.xsoul'>Sidharth</a><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ILibrary&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqKyhkCR0KX3gzylZNKpjzs9O3s_gMfnAylOGmKSsHE2PCDkZgZyp44MgztJVyOAy5QZ8OjAVaDhB4_xuMHNSaC694dOPrnZa1j8ncbgW5aeYWxk5Yn4-puM59Tj6A7fUHgamR8ef6lg/s1600/myrss.gif) right center no-repeat;'/>Get Free Updates: <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' style='width:176px;height:18px; background: #ffffa0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMan5GtuyvP4LM56iiVpeyh57FfuxcSrcd2DN_8yMquzjfk5887fP5iCwTMXxW_LSLjIiu1pauYSmBbrBpNFbkdiYsVjxjy8q94Q90znsmDjclRaCSBPb3QkEfazt5z0Cf9cDozJhhITF/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value='ILibrary'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/>
<center><i>*Please click on the confirmation link sent in to your inbox.. and if not present there check it in Spam Folder.*</i></center>
</form>
</div></p></div></b:if>


Now Change The Following :

  • YOUR AUTHOR PROFILE IMG URL HERE with your image url
  • Write About Yourself Here!!! with your Short Bio
  • <a href='http://twitter.com/sidhpro'>sidhpro</a> with you twitter URL and Name
  • <a href='http://www.facebook.com/sidh.xsoul'>Sidharth</a> with your facebook URL and Name
  • ILibrary with you Feedburner ID
Now We have successfully completed the installation of this plugin in your blog...
Enjoy :) !!

Tuesday, 16 August 2011

Add A Twitter Fan Box To Your Blog

Hi Friends,
Most of you must be familiar of the Facebook Like Box...
It is a cool widget by which the Visitors Can like the page by just a single click..
But in the case of twitter it is not so, one has to go to the profile page and click on the Follow button to be a follower.....
While Surfing in net i got a idea in my mind to let me think about the Twitter Fan-box widget..
It is Just like The Facebook like box...
This widget is perfect for those who wants to show their twitter followers..... ;)
Just Follow The Simple and Easy Steps :-

Step 1
Go to blogger, Click on Design >> Click On Add a Gadget >> Select Html/Java Scripts

Step 2
Now Paste The Following Code snippet :-
<script src="http://s.moopz.com/fanbox_init.js" type="text/javascript">
</script><div id="twitterfanbox">
</div>
<script type="text/javascript">
fanbox_init("username");
</script>

Step 3
Now in place username type your username.
Note : you should write "sidhpro" here sidhpro is my username...

If you liked this Widget... Take a moment to share this ;)

Monday, 15 August 2011

Auto Hide [ Sharing Is Sexy/Caring ] Bookmarks

Hi Friends,
I am Posting A Widget After So many Days.....
But in this post there is going to be something special..
In this post i will make you learn how to enable sharing is sexy/caring bookmark under your every post like here in ILibrary...

As Social Bookmarking Widget is A must For Blogs To Enrich Quality Traffic, So here is a cool Bookmark style For All my Readers.....

Step 1:
Log in to Blogger, go to Layout >> Edit HTML and mark the "Expand Widget Templates" box.

Step 2:Now find (CTRL+F) this in the code:
</head>

Now Immediately Before/Above it Paste the Following :
<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://imgboot.com/images/cybersidh/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://imgboot.com/images/cybersidh/sharingsexy.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://imgboot.com/images/cybersidh/sexysprite.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
<!--HIDDEN-BOOKMARKS-STOPS-http://ilibrary.co.in-->

NOTE: To show the phrase "Sharing Is Caring" instead of "Sharing Is Sexy", edit the above code like this:
Search For 
left bottom and right bottom and replace it with left top and right top respectively.


Step 3:
Now find this in the code:
<data:post.body/>

And Immediately Paste The Following Code BELOW/AFTER it
<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/ILibrary' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>
Great !
Now The Widget is sucessfully Installed...
Save The Template...

Note:
If While finding the <data:post.body/> code is coming three time 
This Problem comes when we install Auto Read Hack in our Blogs

For this Problem Search for any one line from below and Put Above Section of Wdget Code after it!

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Monday, 8 August 2011

Blogumus The Flash Labels

Hello Friends,
I got a cool Flash widget for you all. It is called as blogumus and is working 100%...
Now no need to show the old fashioned instead you can have a cool Flash label....
Demo (Click on the Labels on the left of this blog.)
1) Go to Blogger >> Design
2) Then Click on “Add a Gadget”
3) Select Labels and Rename it as ‘labels123’
4) Now click on Save.
5) After saving click on “Edit Html”, click on Expand Widget Templates” now Press (ctrl+F) ,in the box which appears type ‘labels123’
6) Just Above that paste The Following :-
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://bloggerhosting.appspot.com/serve/dualtranz.googlepages.com/swfobject.js' type='text/javascript'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://www.swfcabin.com/swf-files/1265483417.swf&quot;, &quot;tagcloud&quot;, &quot;300&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
</div>
</b:includable>
</b:widget>

Search Tags:-

  • Install Blogumus on my blog
  • Flash labels
  • Tag cloud
  • Webmaster
  • Free Flash labels

All Rights Reserved ILibrary |