New Share Button With Counters On Blogger

0 commentaires



I'm sure you would have noticed the recent addition of share counters at the end of the article on my post pages. My friend, Paul Crowe from "Spice Up Your Blog", had posted a video tutorial about the same which you may check out on his blog. So, if you wish to have this new share counter on your blog, then just follow the steps in the tutorial given below.

What non-sense is he talking about? Is that the question that's running on your mind? Well, then have a look at the following picture to get a better idea about what I'm talking.
New-Share-Counters-For-Blogger
Before we start the actual tutorial, let's first get the scripts which make the share counters appear. Go the following link : Sharethis. Register with them and hit the "Publishers>>Get the Share Widget" tab. Select the following options on the page that appears.
1. Website or Blog? Choose website.
2. Pick your style - Third Option (Horizontal counters)
3. From the various networking sites, choose the ones which you want to have on your blog. Just use the left and right arrows to add and remove the various counters. The up and down arrows aligns your counters - which one should appear first in your list. It's pretty self-explanatory.
4. Choose the Oauth widget or Classic Widget.
5. Now, hit the "Get the button" tab and copy the scripts that are generated to two separate text documents temporarily and name them Script 1 (Script in the top/first box) and Script 2 (Script in the bottom/second box). 
share-button-tutorial
Now, you have the scripts with you. You need to place them on your blogger template with some CSS to make it more attractive. So, let's get it done!!!
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Add the following code (CSS) just above the line mentioned in step 1.
.sharethis {
border: dashed #ddd;
border-width:1px 0 1px 0;
margin: 10px auto 10px;
display:block;
padding: 3px 0 1px 0px;
overflow: hidden;
margin-left:0px;
}
3. Next, search for the following piece of code.
</head>
4. Place the coding present in the text document Script 2, just above the line mentioned in step 3.
5. Save your template. Then, expand your template and search for the following piece of code.
<div class='post-footer-line post-footer-line-1'/>
6. Add the following piece of code just below the line mentioned in step 5.
<b:if cond='data:blog.pageType == "item"'>
<span style='font-size:20px; font-family:Georgia; font-style: italic; line-height:21px; margin-top:1px; margin-bottom:-2px;'>Enjoyed the article?</span>
<div class='social'>
<div style='margin-left:10px; margin-top:0px; margin-bottom:3px;'>
YOUR SHARE THIS CODE FROM SCRIPT 1
</div>
</div>
<div class='clear'/>
</b:if>
7. Replace the line highlighted in green with the coding present in the text documentScript 1.
8. That's it! Save your template. 

Note: The counters will be visible only on post pages. If you wish to have them on all the pages, then remove the first and the last line in the coding mentioned at step 6.

I would like to point out one advantage with this counter which is better loading time. That is, you get all the counters at one place. So, it saves a lot of time in loading your scripts. Hope you enjoyed this post. Share your opinions about the counter/post via comments!
Alternative text

Subscription Box Using Tooltip For Blogger

0 commentaires



In my previous article about HTML Tooltip, I mentioned about "callingallgeeks.org". If you missed the article, then check out - Tooltip For Blogger Using jQuery & CSS. Harsh on his blog "callingallgeeks.org" used this effect to display the Tooltip over the share icons - RSS, Twitter, Facebook. You may experience the Tooltip effect on Yahoo! Cricket too - hover your mouse over the player names.
Subscribe-Tooltip-Demo
In this article, I'll just share the code which will create the Tooltip effect when you hover your mouse over the subscribe icons. If you need the code for the entire subscription box, well install the widget that appears on this article first - Tutorial to add the subscription box. Later, use the code that appears in this post to realize a proper subscription box. So, let's get started.

1. Navigate to "Design >> Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Paste the following piece of code just above the line mentioned in step 1.
#dhtmltooltip {
background-color: #484848;
background-image: url("https://lh4.googleusercontent.com/-5SQOgS6ij1A/TiE0rmXU9gI/AAAAAAAABUQ/KwaaLmoeP4c/s800/mouse-hover-bg.png");
background-repeat: repeat-x;
border: 1px solid #AAAAAA;
color: #F2F2F2;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 20px;
padding: 10px 20px;
position: absolute;
text-align: center;
z-index: 100;
visibility:hidden;
}
#dhtmlpointer{
position: absolute;
z-index: 101;
visibility:hidden;
}
.social-subscribe ul {
list-style: none outside none;
}
.social-subscribe li {
float: left;
}
.social-subscribe li a.rss {
background: url("https://lh3.googleusercontent.com/-HTQ6s6GmBLg/TiE0rFVVQsI/AAAAAAAABUI/pWdIwOUEuA8/s800/icon-rss.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.facebook {
background: url("https://lh6.googleusercontent.com/-tkdaWLGbFQI/TiE0rPLM1QI/AAAAAAAABUE/DG4wcOs1xwY/s800/icon-facebook.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.twitter {
background: url("https://lh4.googleusercontent.com/-bIK53VccMss/TiE0ra0pGKI/AAAAAAAABUM/NewFfwHhH7U/s800/icon-twitter.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
3. Save your template and navigate to "Design >> Page Elements >> Add a Gadget" and choose "HTML/Javascript".
4. Download the following text document - HTML FOR TOOLTIP EFFECT ON SUBSCRIBE ICONS. Just copy the code present in the text document and paste it on the window that pops up. Make the following customizations before you save the widget.
  1. Replace FEEDNAME with the name of your feed obtained from FeedBuner. Your feed name is nothing but your feed title. So, open your FeedBurner account and check out the Feed details. There are two instances where you need to replace FEEDNAME with your feed name.
  2. Replace TWITTER-USERNAME with your twitter user name. There are two instances where you need to replace the same.
  3. Replace FAN-PAGE-URL with your facebook fan page URL. Similar to the previous two customizations, this replacement should also be made at two instances.
5. Once the above customizations are made, just save the widget and your done!

In case you find the customization part a bit difficult to understand, then take a look at the example coding which I used on my demo blog by downloading this text document -SAMPLE CODE. This effect was tested on all major browsers - Firefox, IE, Safari, Chrome, Opera. If you have some unique ideas to illustrate this same effect in a different manner, then share it via comments! Would love to hear from the CSS and Jquery geeks out there!
Alternative text

Cool Image Hover Effect On Blogger - Popout Details

0 commentaires



I recently came across a cool image hover effect on a WordPress blog which made me to work out the codes for achieving a similar effect on blogger. The idea behind this effect is to display a short snippet/detail about the image on hover using only CSS. Many had already seen the demo on my test blog while those who did not, just take a look at the live demo by visiting the link below.

POPOUT DETAILS EFFECT ON BLOGGER - LIVE DEMO

Cool... Isn't it? Just follow the instructions given below to get a similar effect on your blog as well. Just create a back up in case something goes wrong. To do so, navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. That's it!

1. Once the back up is over, paste the following piece of code anywhere between the 'body' tags on your template - probably below <div id='content-wrapper'> (or) <div class='columns fauxcolumns'>.
<ul class="columns">
 <li>
  <a href="#"><img src="IMAGE URL" /></a>
    <div class="info">
      <h2>TITLE</h2>
      <p>DESCRIPTION</p>
    </div>
 </li>
</ul>
2. Replace '#' with the link you wish to point to and 'IMAGE URL' with the URL of your image, probably with the following dimensions - 220x200px. Similarly, replace 'TITLE' and "DESCRIPTION' with the title and description you wish to have on hover, respectively. Repeat the codes within 'ul' tags for adding multiple images.
You may download the reference code, which I used on the demo site, here - Reference.
3. Let's style the above HTML with some CSS. To do so, search for the following code on your template.
]]></b:skin>
4. Paste the following piece of code just above the line mentioned in step 3.
ul.columns {
width: 480px;
list-style: none;
padding:0px;
margin-left:10px;
}
ul.columns li {
width: 220px;
float: left; display: inline;
margin-top:15px;
margin-left:7px;
margin-right:7px;
margin-bottom:7px; padding: 0;
position: relative;
}
ul.columns li:hover {z-index: 99;}
ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 210px 10px 20px;
width: 220px;
display: none;
background: #fff;
font-size: 1.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:Georgia,"Times New Roman",Times,serif;
text-align:justify;
}
ul.columns li:hover .info {display: block;}
ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
font-family:Georgia,"Times New Roman",Times,serif;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}
5. You need not modify anything the codes above except for the margin positions to best fit your blog. That's it! Save your template and take a look at the cool effect on your blog.

The above effect worked successfully on the major browsers which includes, but not limited to, IE, Firefox, Chrome, Opera and Safari. So, give them a shot on your blog and let us know whether you enjoyed this cool effect via comments! See you soon with another interesting tutorial. You may check out the other image hover effect here -Shadow Effect.
Inspiration for the above article - Sohtanaka.
Alternative text

Collapsible Message Panel Demo

3 commentaires



I've been constantly trying to pull out unique articles for blogs run on blogger. I'm sure you would have noticed the same provided you are a constant follower of my blog. So, we've yet another interesting article based on jQuery, called the "Shutter Effect for the Images On Blogger", inspired from tutorialzine. Just take a look at the live demo of the effect by hitting the link below and we'll get started...

SHUTTER EFFECT ON BLOGGER - LIVE DEMO
Interesting effect... Isn't it? I would suggest the above effect for blogs based on photography. While, webmasters and web designers can use the above effect to showcase their portfolios. I'm sure there are lots more places wherein you can use the above effect. So, I'm open to your suggestions... Well, let's get started with the tutorial.

JAVASCRIPT/JQUERY
1. Navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. Once the back up is over, search for the following code in your template.
</head>
2. Paste the code present in the following text document - Jquery For Shutter Effect, just above the line mentioned in step 1.
3. That's it! Save your template temporarily.

HTML
1. Look out for any one of the following codes in your template.
<div id='content-wrapper'>
(or)
<div class='columns fauxcolumns'>
(or)
<div id='main-wrapper'>
2. Paste the following code just below the code, you searched for, in step 3.
<div id='container' style='position: relative;'>
<ul>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
</ul>
<div class='shutterAnimationHolder' style='width: 600px; height: 450px; display: none;'>
<div class='film' style='height: 15000px; width: 1000px; margin-left: -500px; top: -300px;'>
<canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/>
</div>
</div>
</div>
(Note: It is not necessary that you place the above code below those lines mentioned in step 3. You can place them anywhere in your template. If you end up with some layout issues or bugs, then leave a comment below.)
3. Replace "IMAGE URL" with the URL of your images - image dimensions shall be 600x450px. Save your template again.
4. If you wish to change the width and height of the images (600x450px), then you need to change the codes highlighted in blue mentioned at step 2.

CSS
1. Search for the following code in your template. 
]]></b:skin>
2. Add the following piece of code just above the line mentioned in step 1.
#container{
    width:600px;
    height:450px;
    margin:0 auto;
    border:5px solid #fff;
    overflow:hidden;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-bottom:5px;
}

#container ul{
    list-style:none;
    margin-top:0px;
}
.shutterAnimationHolder .film canvas{
    display: block;
    margin: 0 auto;
}
.shutterAnimationHolder .film{
    position:absolute;
    left:50%;
    top:0;
}
.shutterAnimationHolder{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    z-index:1000;
}
3. Save your template and we're done. 
Just in case you customized the image or in other words, followed the step 4 in HTML part, then change the codes highlighted in green mentioned at step 2. If not, just neglect this step and check out the stunning effect on your blog.

The above effect was tested to work perfectly fine on all the major browsers that include, not limited to, FF, Chrome, Opera and Safari. If you find the HTML part difficult to customize, then you may refer to the following text document for the coding that I used on the demo blog - Reference for Shutter Effect. Share your opinions via comments!


Alternative text

Collapsible Message Panels On Blogger

0 commentaires



When I was browsing a design blog called "impressivewebs", I found a header that could collapse itself. Impressed by the effect, I sat down to work out the logic and it was pretty simple to achieve it on blogger. In this article, I'll illustrate the collapsible effect with simple message panels while you may apply the same logic to your header or post area or to any widget of your choice.

COLLAPSIBLE MESSAGE PANELS ON BLOGGER - LIVE DEMO

So, take a look at the live demo by hitting the link above. I guess you liked it... Interested to add this on your blog, as well? Then, follow the steps below.
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Just paste the following piece of code above the line mentioned at step 1.
.message_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 383px;
}
.message_list li {
    padding: 0;
    margin: 0;
    background: url(https://lh5.googleusercontent.com/-rFKQUJCuaBU/TkdtUFeNzGI/AAAAAAAABec/bn_KIzqh03c/s800/message-bar.png) no-repeat;
}
.message_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
}
.message_head .timestamp {
    color: #666666;
    font-size: 95%;
    position: absolute;
    right: 10px;
    top: 5px;
}
.message_head cite {
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}
.message_body {
    padding: 5px 10px 15px;
}
.collapse_buttons {
    text-align: right;
    border-top: solid 1px #e4e4e4;
    padding: 5px 0;
    width: 383px;
}
.collapse_buttons a {
    margin-left: 15px;
    float: right;
}
.show_all_message {
    background: url(https://lh3.googleusercontent.com/-SYzKGAtmZa8/TkdtUMVjh4I/AAAAAAAABeY/VXlnQnXlEQ4/s800/tall-down-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.show_recent_only {
    display: none;
    background: url(https://lh6.googleusercontent.com/--99zjaBlqYY/TkdtURvdWRI/AAAAAAAABeg/Z8Yismgt5YY/s800/tall-up-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.collpase_all_message {
    background: url(https://lh4.googleusercontent.com/-_mvlatWt3m4/TkdtUCz8LII/AAAAAAAABeU/mctqJi0fkbs/s800/collapse-all.png) no-repeat right center;
    padding-right: 12px;
    color: #666666;
}

3. Next, search for the following piece of code.
</head>
4. Paste the following piece of code just above the line mentioned in step 3. Save your template.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    //hide message_body after the first one
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();  
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideUp()
        return false;
    });
});
</script>
Note: Do not include the first line in the script mentioned above if you've already added the latest jquery file on your blog. 
5. Now, paste the following piece of code in the document - HTML FOR COLLAPSIBLE EFFECT, anywhere inbetween your <body> and </body> tags - probably within the post editor (or) below <div class='main-wrapper'> (or) <div class='columns fauxcolumns'>.
6. That's it! Save your template or publish the article and view the same to enjoy the effect.

HTML CUSTOMIZATION - FOR CODE MENTIONED IN STEP 5
If you wish to generate the time for your messages (displayed at the top right) by default, then change the text that appears in between  <span class="timestamp">and  </span> tags. Similarly, you can change the text from "NAME" and "CLIENT" with your names and clients respectively. I've added my name and a small message in the first few div tags for reference. Check the same (code mentioned in text document at step 5) for your reference.

I've tested the above effect on all the major browsers which includes, but not limited to, IE, FF, Chrome, Safari and Opera. Let me know if you find some bugs with the above coding. If you need assistance in extending this effect to other elements on your blog, then leave a comment below and I'll help you out when I'm free:) Do share your opinions about the article via comments!
Alternative text

 

Sponsors

Protected by Copyscape Web Copyright Protection

All For Blogs. Copyright 2011 All Rights Reserved powered by Revolution Church Theme hosted on Blogger