Blogger Helps

Rating Widget To Blogger "Thumbs Up, Thumbs Down"

2012-10-28T06:13:00.002-07:00

Blogger provides the default star rating widget but I just came across a widget by JS kit that offers two options. You can either use with a star rating look or you can set it to "Thumbs Up!" It counts the total number of thumbs up or thumbs down for each of your posts. The visitor just needs to click his rating option and the count will be automatically incremented. This widget also shows four tabs which displays the likes made by the visitor himself and also shows popular topics under the Hot/Top tabs. It also displays stats for that post. I really found it interesting and I would recommend that you add it to your blogs to engage your readers more and increase your overall page views. The readers would love to explore Hot and Top topics on your blog using this widget.

Add Thumbs Up Rating Widget To Blogger

Go To Blogger > Design > Edit HTML
Back up your template
Click the box "Expand Widget Templates"
Search for

<data:post.body/>

5. Just above it paste the code below:

<b:if cond='data:blog.pageType == "item"'>

<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'>
</div>
</b:if>

This will add Thumbs up widget just below your post titles. The widget will display only at post pages and not on homepage. If you wish to display it on homepage then simply delete the bolded lines.
If you would instead like to add the Star ratings look/skin then simply deleteview='score'

6. Now search for

</body>

7. Just above it paste the following code:

<script src="http://js-kit.com/ratings.js"></script>

8. Save your template and all done!

Visit any of your post and click the ratings to either Thumbs Up and Thumbs down the post. You can also explore the tabs.

Pinterest Floating Bar with Other Sharing Buttons

2012-10-28T06:06:00.001-07:00

This is one of the few social sharing widgets that took a lot of my time in designing it. You have seen the trend of floating sharing count buttons on popular blogs. The traditional icons are now replaced with auto incremented counter buttons that are updated in seconds. We created different versions of this bar applying both Jquery effects and CSS3 styles but this widget is different because it contains custom twitter, pinterest and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. Pinterest pin it buttons are causing great trouble and it badly fails in fetching the correct thumbnail image. In most cases it does not even select a image thus making the entire pinning concept tasteless. We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience. We have tested the widget on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.

Developers and bloggers are requested to link back to this post if in case they wish to share our code with their readers. Lets get to work now!

Which Social Networking Buttons To Use?

Your first priority should always be Facebook, Google+, Twitter, Linkedin and Now Pinterest. All these sharing counters play well in circulating your content over a wide range of visitors. Social Media is a non-stoppable engine, which if driven correctly and carefully can bring tons of valuable traffic each visitor worth a dollar. Since displaying too many count boxes could surely effect your blog load time therefore we have added a AddThis share button which provides visitors with over 330+ social sharing options all at one place.

How it works?

We have integrated both Addthis and ShareThis service in it. In order to customize the twitter button and others we took the Sharethis default code and customize it to change the button image, bubble size and count text. The widget that we initially developed looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below:

You can observe that both Twitter, Google Plus, Pinterest and Stumbleupon are displayed with custom shapes, same sizes and different count colors. I spent a lot of time trying to make all buttons of the same size by using a common image linked by a sprite but the only problem with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis. If you add this sharing bar to your blog, you will see zero on all counters unless someone clicks them and circulates your content.

To correct this issue I had to unfortunately dropped the idea of sharing the above designed version and share this tutorial widget instead. However the widget on our blog still contains the twitter button which wont display official count but that of ShareThis. If you would like to replace it with the official big size twitter count box then you can surely do this by customizing the code shared below.

Adding Floating Bar To Blogger

The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:

Go to Blogger > Template
Backup your template
Click Edit HTML
Click Proceed
Then Click Expand Widget Templates
Search for

<b:includable id='post' var='post'>

7. Just below it paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jh90sItEv8ErzxyS0AkfwsB9ylCgDszxN5oV_BQ75hmNp7H3yGHeB7L47Ejm4n8h3alWMf1pE-BL5HMLfUVPgJ1b3gvIh-1hwPyXj_eIzsf7ZeW96QJXDyK96yv-KTYZxVIgeL0HBwJz/s400/gc_social_sprite.gif') no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5jh90sItEv8ErzxyS0AkfwsB9ylCgDszxN5oV_BQ75hmNp7H3yGHeB7L47Ejm4n8h3alWMf1pE-BL5HMLfUVPgJ1b3gvIh-1hwPyXj_eIzsf7ZeW96QJXDyK96yv-KTYZxVIgeL0HBwJz/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}
</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='MasterJM16'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: "BLOGGER HELPS",
ui_header_color: "#ffffff",
     ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://bloggerhelps.blogspot.com/2012/10/pinterest-floating-bar-with-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Just replace MasterJM16 with your twitter username.
8. Save your template and you are all done!

Got Questions?

This floating bar would display on post pages only and wont display on homepage. The widget has a white background and floats to the left of blog posts. If incase you want it to float to right then all you need is to edit the part of the code bolded in black. You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves and your loved ones.

Announcement Widget For Blogger

2012-10-27T19:41:00.000-07:00

Again yet another MBT release of a useful blogger widget with scrolling headline links. The moment you hover the cursor on the links the scrolling stops and pauses and you can then read the headlines. These headlines can be a blog update notice, announcement or links to your featured posts. You can use it in million of ways. I found the script on dynamic drive and edited the code with some more colours and images to make it completely compatible with blogger blogs. It is several steps ahead of marquee effect because this widget uses some JavaScript to bring the dynamic effect. Again it is a one-step installation process. Please see the demo first,

Add Scrolling Headline Widget to your Blogs

Go To Blogger > Design
Choose HTML/JavaScript Widget
Paste the following code inside it,

<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller2{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJgWC5Mcown_RILQHkZa8Jsn0kwYIMs_16i53u4XYQcrtI5d0l7Tf0w9qy6Dmj29PmzJY05EPFg0im5c28SHvZAfH_lcNAsbFAHwlrKBmpP7Vcz8Sm4Gl1BsObiIWGGzCQRGwvySbcPs/s400/updates1.gif) no-repeat top left;
width: 430px; height: 20px;
border: 1px solid #ddd;
padding: 3px 3px 3px 40px;
margin:10px 0;
}

#pscroller2 a{
text-decoration: none;
color:#0080ff;
}

#pscroller2 a:hover{
text-decoration: underline;
}

.someclass{
}

</style>

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent2=new Array()
pausecontent2[0]='<a href="#">HEADLINE TEXT</a>'
pausecontent2[1]='<a href="#">HEADLINE TEXT</a>'
pausecontent2[2]='<a href="#">HEADLINE TEXT</a>'
pausecontent2[3]='<a href="#">HEADLINE TEXT</a>'

</script>

<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}

// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}

</script>

<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 1000)

</script>

Make these customizations:

To change the Loud speaker image change

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJgWC5Mcown_RILQHkZa8Jsn0kwYIMs_16i53u4XYQcrtI5d0l7Tf0w9qy6Dmj29PmzJY05EPFg0im5c28SHvZAfH_lcNAsbFAHwlrKBmpP7Vcz8Sm4Gl1BsObiIWGGzCQRGwvySbcPs/s400/updates1.gif

If you wish to increase the scroller width size then edit this width: 430px;
Replace 0080ff with your link colour.
Replace HEADLINE TEXT with anything you wish to write as announcement or updates. Write any text description you want.
Replace # with headline page link/url. On clicking this link the visitors will be taken to the headline related page. If you don't want to link your Headlines then simply delete # next to each HEADLINE TEXT that you don't wish to hyperlink.
To change the scroll change delay time kindly edit 1000 . The more your decrease this value the faster will the links scroll up and down.

4. Finally save your widget and you are all set!

Visit your blogs to see it scrolling beautifully.

How do you find this new widget?

Please let me know whether you liked this new widget or not. Also feel free to ask any related question. Would be a pleasure to help you out. Peace buddies.

The only favour I need is to kindly like it and +1'd it. :)

Cute Flying Twitter Bird To Blogger

2012-10-27T19:39:00.001-07:00

With Twitter's worldwide popularity and with over 200 million users, generating 65 million tweets a day, it has become a must for every web master to use twitter sharing buttons and applications as much on his web as possible. This lets users to easily tweet our blogs and websites which thereby generates traffic for us in return. Harish of way2blogging has coded a beautiful cute twitter bird that flies from corner to corner of your web page as you scroll up or down. It has a follow me link as well as tweet link. It is compatible with all browsers.

I am sure you will love to see that bird flying. So here goes the demo,

How To Add the Twitter Flying Bird To Blogger?

Go To Blogger > Design > Edit HTML
Backup your template
Search for </body>
And just above it paste the code below

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = "MasterJM16";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>

5. Replace MasterJM16 with your twitter account username.

6. Save your template and you are done!

7. View your blog to see it flying. :)

Customized Blogger's Popular Posts

2012-10-27T19:36:00.001-07:00

I rarely use a tool unless I know I can design it according to my preferences. Blogger Team introduced their official Popular Post widget which could display a snippet of your most viewed posts along with a thumbnail image based on your Analytics stats. But wait! the widget today is a step ahead of it. We will override the stylesheet for this widget completely with our custom fonts and colours. You can view this popular gadget right on our sidebar.

The biggest advantage of this widget is that we don't need to install any heavy Javascript because we are using a widget stored on Blogger's servers and we will just alter its look to make it blend perfectly with your blogspot blogs.

I hope you will find today's tutorial pretty interesting. So lets go playing!

Adding Popular Posts Widget To Blogger

Go To Blogger > Design
Click on add a gadget and select the "Popular Posts" gadget from the list provided by blogger
Now make these settings

Set Most viewed to all time
Uncheck image Thumbnail and snippet. We only need to display popular links so we don't need that bulky image and unnecessary intro text.
You can display between 1 to 10 posts. So choose at least 7 posts.

4. Save your widget

5. Now go to Blogger > Design > Edit HTML

6. Backup your template

7. Search for this

]]></b:skin>

8. Just above it paste the following CSS code,

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

}

.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

Make these changes to customize the default look:

To change the bullet image replace the image link in bolded black in the code above with your bullet URL.
To change the border color in active mode edit #dddddd
To change the border color on mouse hover edit #6BB5FF

You can use our color Chart for changing the colors.

9. Finally save your widget and say bingo!

Visit your blogs to see it hanging just fine on your sidebar. Do let me know if you needed any further help in changing the font type or color. The widget will automatically apply to it default colors of your blog but in case you wish to change them to something different then feel free to let me know by posting your comments below.

Credits

This widget model is brought to you by MBT therefore if you liked this widget and wish to share it with your readers then kindly link back to this tutorial.

Customized PayPal Donate Button For Blogger

2012-10-27T19:30:00.002-07:00

Below every post at “MY Blogger Tricks” you have seen a PayPal donate button customized with some Author description next to it. It’s indeed a wizard tool that helps you tremendously with your Blog’s revenue. Some people are really generous and they do help new bloggers and keep them motivated with their precious donations. Some great people have even donated us $20-$25 just for making them smile. :) I had kept this little PayPal donation code for my premier services but I thought it would be nicer if I share it with all those who wish to go forward. See a screen shot below,

How To Get the PayPal Donate Button Code?

Kindly follow these steps,

Log into PayPal
Click The Merchant Services Tab and then select Donate Option under Create Button

    3. Then Fill the form with relevant details as shown below. Leave step-2 and step-3 as default.

     4. Hit Create Button
     5. Click Remove code protection Link in order to simplify the code. Its completely safe even this way.

       6. Copy the code and jump to the next part of the tutorial below.

How to add Customized PayPal Donate Button To Blogger?

Note:- Before adding the customized code shared below to blogger if you wish to try it on MBT HTML Editor and customize the look then its not a bad idea. :)
As usual I have tried my best to keep it simple. So here we go,

Go To Blogger > Design > Edit HTML
Back up your template
Check the Expand Widget Templates box
Search for data:post.body
Just below it paste the code below,

<b:if cond='data:blog.pageType == "item"'>

<table border='0' cellpadding='2' cellspacing='0' width='590'><tbody>
      <tr>
        <td><div style='border:5px solid #37BD07; padding:5px 10px; margin-right:5px;'> <br/> PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE </div> </td>

        <td>
          <p align='justify'><font color='#2FAA2F'><em><strong>Respected Readers:</strong></em></font>
                  <br/><em>WRITE YOUR SHORT REQUEST MESSAGE HERE</em></p>
       </td>
      </tr>
    </tbody></table>
</b:if>

Replace PASTE PAYPAL DONATE BUTTON CODE RIGHT HERE with your PayPal code that you got earlier. And replace WRITE YOUR SHORT REQUEST MESSAGE HERE with something that may catch reader’s attention. You can get an idea from my request message.
6. Save your template and visit your blog and see it hanging in action :)

How To Customize The Code?

To Change the width of the widget change the value width='590'
To Change the border size and colour change border:5px solid #37BD07

That’s it!

Please not that if PayPal is not available in your countries then you can use Donate button of any Online account that you may have. If you needed any help just let me know. If this tutorial helped you a little then kindly consider contributing a small donation. :)