Add Sharing is Sexy Bookmark to Blogger

Social bookmarking is a great tool to drive tons of traffic to a blog/website within minutes. “Sharing is sexy” blog gadget/widget is one of the most popular social bookmarking widget in blogsphere. The button of this widget has autohide effect when you hover on it.

1. Log in to your "Blogger Dashboard "> "Template" > "Edit HTML".


2. Click on "Expand Widget Templates" check box.


3. Find (Ctrl + F) below code in your template:



]]></b:skin>



4. Copy and paste the code below before it.



.sexy-bookmarks {
 height: 54px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtsUtCnP6Z2W5NT0zN4tbq0qAp1Zhh1VH1Fvzj_dbkZAtksgZmHb2fBAl1OzrfDy7xM1wLH_9-cB9VICtPYXYPLr9zex10nBprt1vruwEY62EgoCkkXw0Ohzct0Dk7GzDLs9mUVo-z37G/s1600/11sharingsexy.png') no-repeat left bottom;
 position: relative;
 width: 540px; }
.sexy-bookmarks span.sexy-rightside {
 width: 17px;
 height: 54px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtsUtCnP6Z2W5NT0zN4tbq0qAp1Zhh1VH1Fvzj_dbkZAtksgZmHb2fBAl1OzrfDy7xM1wLH_9-cB9VICtPYXYPLr9zex10nBprt1vruwEY62EgoCkkXw0Ohzct0Dk7GzDLs9mUVo-z37G/s1600/11sharingsexy.png') no-repeat right bottom;
 position: absolute;
 right: -17px; }
.sexy-bookmarks ul.socials {
 margin: 0 !important;
 padding: 0 !important;
 position: absolute;
 bottom: 0;
 left: 10px; }
.sexy-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; }
.sexy-bookmarks ul.socials a {
 display: block !important;
 width: 48px !important;
 height: 29px !important;
 font-size: 0 !important;
 color: transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPLyDpX0wT1ZCD-lKLMaG6x4UHVdfZAQyHYOB6OpvnvpH5coeOovIhg_wm1DtlFsjZnrmoiOBt70gmkLpByhK4uBd7ghPPAODv3X5OcOGEftEC_Y-VIZJRPzfmpKUpqe9z14uNVe83XGl/s1600/11Sexysprite.png') no-repeat !important; }
.sexy-furl {
 background-position: -300px top !important; }
.sexy-furl:hover {
 background-position: -300px bottom !important; }
.sexy-digg {
 background-position: -500px top !important; }
.sexy-digg:hover {
 background-position: -500px bottom !important; }
.sexy-reddit {
 background-position: -100px top !important; }
.sexy-reddit:hover {
 background-position: -100px bottom !important; }
.sexy-stumble {
 background-position: -50px top !important; }
.sexy-stumble:hover {
 background-position: -50px bottom !important; }
.sexy-delicious {
 background-position: left top !important; }
.sexy-delicious:hover {
 background-position: left bottom !important; }
.sexy-yahoo {
 background-position: -650px top !important; }
.sexy-yahoo:hover {
 background-position: -650px bottom !important; }
.sexy-blinklist {
 background-position: -600px top !important; }
.sexy-blinklist:hover {
 background-position: -600px bottom !important; }
.sexy-technorati {
 background-position: -700px top !important; }
.sexy-technorati:hover {
 background-position: -700px bottom !important; }
.sexy-myspace {
 background-position: -200px top !important; }
.sexy-myspace:hover {
 background-position: -200px bottom !important; }
.sexy-twitter {
 background-position: -350px top !important; }
.sexy-twitter:hover {
 background-position: -350px bottom !important; }
.sexy-facebook {
 background-position: -450px top !important; }
.sexy-facebook:hover {
 background-position: -450px bottom !important; }
.sexy-mixx {
 background-position: -250px top !important; }
.sexy-mixx:hover {
 background-position: -250px bottom !important; }
.sexy-script-style {
 background-position: -400px top !important; }
.sexy-script-style:hover {
 background-position: -400px bottom !important; }
.sexy-designfloat {
 background-position: -550px top !important; }
.sexy-designfloat:hover {
 background-position: -550px bottom !important; }
.sexy-syndicate {
 background-position: -150px top !important; }
.sexy-syndicate:hover {
 background-position: -150px bottom !important; }
.sexy-email {
 background-position: -753px top !important; }
.sexy-email:hover {
 background-position: -753px bottom !important; }



5. Now find (Ctrl + F) this code in the template:



<data:post.body/>



6. Copy the following code and paste it just below it:



<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-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='sexy-syndicate'><a href='YOUR FEED BURNER URL' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/>
</div>



7. Save your template.

Remember to replace "YOUR FEEDBURNER URL" with your real feedburner url.

Read More...

How to Make a Top Ten Commenter List on Blogger

Blogger, a content publishing platform owned by Google, enables you to show the top commenters and their comments on your blog's sidebar using a widget. By showing the top comments to your readers, you give them more of an incentive to comment on your posts, as they receive some recognition if their comments are featured on your site.

1. Sign in to Blogger.com with your Google account.


2. Click the "Layout" link next to the blog you want to add the widget to.


3. Click "Add a Gadget."


4. Type "Top Comments" into the search box, and then click the magnifying glass.


5. Click the "+" icon next to the "Top Comments" widget.


6. Type "10" in the "Display Number of Comments" field, and then click "Save." Your top ten commenter list appears when you view your Blogger blog.

Read More...

How to Get Sparkles That Follow Your Mouse on Blogger

To add an interesting effect to your Blogger blog consider getting sparkles to follow your mouse. This way when a visitor moves her cursor over your site a line of glitter follows her movements. Blogger gives you access to your blog's code so you can add the JavaScript that produces this enhancement. Edit your blogger template code to assign a glitter effect to your mouse pointer.

1. Log in to your Blogger account. Click your blog's name in the menu bar.


2. Click the "Template" button that displays on the left side of the page and click the "Edit HTML". Your blog's code appears in a text box.


3. Position your cursor before the closing </head> tag. Copy and paste the following JavaScript code:

Black Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/blacksparkle-min.js" type="text/javascript"></script>


Blue Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/bluesparkle-min.js" type="text/javascript"></script>


Pink Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/pinksparkle-min.js" type="text/javascript"></script>


Purple Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/purplesparkle-min.js" type="text/javascript"></script>


White Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/whitesparkle-min.js" type="text/javascript"></script>



4. Click the "Save Template" to see the sparkles on your blog.

Read More...

How to Scroll to the Top With Jquery in Blogger

Scrolling to the top of a Web page can decrease productivity, especially if the page is long. A website visitor can scroll to different locations on a Web page using several methods including scroll wheels, keyboard keys and even mouse gestures. If you'd like to make a user's scrolling tasks a little quicker, add a simple jquery function to your HTML code that moves scrollbars to the top automatically.

1. Login to your Blogger Dashboard and proceed to "Template".


2. Add the jquery plugin to your blog. If your blog already have a latest jQuery plugin, then Ignore this step and directly follow the third step.



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>



3. Go to "Layout" and click "Add a Gadget" and choose "HTML/Javascript".


4. Copy the code below and paste it inside the content box.



<style type="text/css">
.scrollToTop{
 width:100px;
 height:130px;
 padding:10px;
 text-align:center;
 background: whiteSmoke;
 font-weight: bold;
 color: #444;
 text-decoration: none;
 position:fixed;
 top:75px;
 right:40px;
 display:none;
 background: url('http://bloggerxtutorials.googlecode.com/files/arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
 text-decoration:none;
}
</style>
<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<script src="https://bloggerxtutorials.googlecode.com/files/scrolltotop-min.js"></script>

<a href="#" class="scrollToTop">Scroll To Top</a>



5. That's all you need to do and "Save".

Your blog must have the jQuery plugin. If your blog do not have the latest jQuery plugin, then follow the step "Adding JQuery To Blogger"

Read More...

How to Add Random Post Link "I'm Feeling Lucky" on Blogger

In WordPress you can redirecting WordPress users and viewers to a random post on a WordPress website. It can be done in many different ways. Luckly, in Blogger you can use some tricks to redirect blog visitors to random post. This trick allows you to create a link to "yourblog.blogspot.com/?random" which will redirect someone to a random post on your blog without see the same post twice.

1. Login to your Blogger account.


2. Go to "Blogger Dashboard" > "Template" > "Edit HTML".


3. Check the  "Expand Widget Templates".


4. In the code window, search for (Ctrl + F) </head> tag.


5. Add below code just before </head> tag:



<script type='text/javascript' src='https://bloggerxtutorials.googlecode.com/files/bloglucky-min.js'></script>



6. Then put the following link wherever you want:



<a href='#random' onclick='feelingLucky()' title='Random Post'>I'm Feeling Lucky</a>



7. Save it.

Read More...

How to Add a Grab My Button on Blogger

Blogger is a blogging service provided with your free online Google account. You can create a "Grab a Button" widget on your blog's sidebar to encourage visitors to link to your blog. This widget displays ready-made HTML code in a text box that allows a visitor to copy and paste the code easily. When the visitor pastes the code on his website or blog, it will automatically create a button and link to your blog. You must have already uploaded the button image and have a URL address for the image to use in the HTML code.

1. Log in to your Blogger account and click "Layout" under the name of your blog.


2. Click "Add a Gadget" from the sidebar widget area. A new window will appear.


3. Click the plus sign next to the HTML/Javascript widget.


4. Highlight the following code, right-click and select "Copy" from the menu:



<center><a href="BlogUrl"><img alt="" src="ButtonURL" title="BlogName" /></a></center




<center><input type="text" onclick="this.focusundefined);this.selectundefined)" readonly value="&lt;center&gt;&lt;a href=&quot;BlogUrl&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;ButtonURL&quot; title=&quot;BlogName&quot; /&gt;&lt;/a&gt;&lt;/center&gt;" /></center>



5. Type a name for your widget in the Title text box. This can be something such as "Grab a Link" or "Grab a Button."


6. Right-click in the content text box and click "Paste" to place the code in the widget.


7. Highlight "ButtonURL" and replace this with the URL address for your button's image. You will need to do this for both instances of Button URL in the code.


8. Highlight "BlogName" and replace this with the name of your blog.


9. Highlight the "BlogURL" and replace this with the URL address of your blog.


10. Click "Save" in the widget box, then "Save" again on your blog template. Visitors will now be able to view your "Grab a Button" HTML code to copy and place on their own website.

Read More...

How to Make a Tag Cloud in Blogger

Blogger allows you to add tags to each post that you create. Blogger calls post tags "labels," and you can use them to add words and phrases that summarize the content of your posts. After you have created many posts for your blog, you can use your post tags to give your readers a way to find similar content after they read something they like. Add a tag cloud to your blog to display a list of each tag you have used and give your readers a way to find the content they want quickly.

1. Log in to Blogger.com by entering the email address and password associated with your Google account. This brings you to the management page for your blog.


2. Click the "Layout" link under the "Manage Blogs" heading to display the layout template for your blog.


3. Click one of the "Add a Gadget" links on the layout template to indicate where you want to place the tag cloud. The browser opens Blogger's "Add a Gadget" menu in a pop-up window.


4. Scroll near the bottom of the window and click the plus sign next to the "Labels" gadget.


5. Type a name for the tag cloud, such as "Tags" or "Labels," in the "Title" field.


6. Click the "All Labels" or "Selected Labels" radio button to indicate how many tags you want the cloud to display. Click the "Edit" link after clicking "Selected Labels" to choose the tags.


7. Click the "Alphabetically" or "By Frequency" radio button to indicate how you want the tags to be sorted.


8. Click the "Cloud" radio button to display the tags in a cloud configuration.


9. Click the "Show number of posts per label" check box to display the number of posts containing a given tag next to each tag in the cloud.


10. Click the "Save" button to add the tag cloud to your blog.

Read More...

Adding a Floating Social Media Share Button in Blogger

Social media buttons help visitors share your blog articles on sites such as Twitter and Facebook. Bloggers can attract more visitors to their blogs through links that are shared on these sites. Twitter and Facebook are two of the largest social networks on the Internet. In 2010, 100 million accounts were registered on Twitter. At the time of this publication, Facebook has more than 250 million active users. Finding an html code that works can be the hardest part of adding floating social media buttons in Blogger. With the correct html code, you can quickly add floating social media sharing buttons to your blog.

1. Login to your Blogger Dashboard and go to "Layout". 


2. Click on "Add a Gadget" > "HTML/JavaScript". 


3. Copy and paste the following code:

Float to Left



<p style="display:none;">Floating Social Media Share Button for Blogger by <a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<style type="text/css">
* html #fsm-box{
position: absolute;
}
#fsm-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;position:fixed;left:4%;
top: 20%;
height:200px;
height:auto;
}
#fsm-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#fsm-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}

</style>

<div id="fsm-box">
<div id="ssl-box">

<div id="icon_facebook">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>

<div id="icon_googleplus">
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
<script type="text/javascript">
  window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

  (function() {
    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>
</div>

<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>

<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>

</div>
<a id="fsm-get" href="http://bloggerxtutorials.blogspot.com/">Get this</a>
<div style="clear:both;"></div>
</div>


Float to Right



<p style="display:none;">Floating Social Media Share Button for Blogger by <a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<style type="text/css">
* html #fsm-box{
position: absolute;
}
#fsm-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;position:fixed;right:4%;
top: 20%;
height:200px;
height:auto;
}
#fsm-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#fsm-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}

</style>

<div id="fsm-box">
<div id="ssl-box">

<div id="icon_facebook">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
</div>

<div id="icon_googleplus">
<div class='g-plusone' data-size='tall' data-annotation='bubble' expr:data-href='data:post.canonicalUrl'></div>
<script type="text/javascript">
  window.___gcfg = {lang: '<data:language/>', parsetags: 'onload'};

  (function() {
    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>
</div>

<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>

<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>

</div>
<a id="fsm-get" href="http://bloggerxtutorials.blogspot.com/">Get this</a>
<div style="clear:both;"></div>
</div>



4. Click "Save". Facebook, Twitter and any other social media sites will appear as floating share buttons on your blog. It’s as simple as that!

Read More...

How to Make a Simple Back to Top Widget in Blogger

"Back to Top" links are a common feature in web design. Placed at the end of a long article or at intervals throughout an article, they enable the reader to click once to jump back to the top of the page without having to use the scrollbar. You can add such links to your Blogger posts by opening a post in Blogger's HTML editor mode and adding the simple link code.

1. Create or locate the image you want to use as your button. This does not have to be fancy and may web authoring programs have built-in button creating functions. If not, check free button generator sites, like Buttongenerator.com.


2. Login to your Blogger Dashboard and proceed to "Layout".


3. Click "Add a Gadget" and choose "HTML/Javascript".


4. Copy the code below and paste it inside the content box.



<a title="Back to Top" href="#top" style="position: fixed; bottom: 5px; right: 5px;"><img src="URL of Image"></a>



5. Be sure to replace "URL of Image" with the link to the image you want to use.


6. "Save" it. It’s as simple as that!

You can search some images of "Back to Top" on search engines

Here few images for you:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvkMgOLc-iKYMOhQMomOMOX3kfjJ4ji17sNLyNlSn2rd5L6y5Af_JQ7cm7g1CSKBIBKOWPX-z98PwnNQ1VXvCGGSn3fsOxavMjbWkGM4bNRDjeLNi9ky4qJ7b2MHxh3UuRwcUHlm_Pqrx/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFroqdTVKZMmqGPnGnhhrxoyjDNSEQWHkPyfeKh6vsp9erfrl9gWiriq1n5Yli4YkwgSmCAbMlwojzzH0ItPPN3sRzFn-MZkrAVhj5n_ISJy4qaBjh1dMKghZlL1zEtkDYmi0Q0hoQiI6-/s400/bttp-12.png

Read More...

How to Add Floating Follow and Dashboard Button Widget on Your Blogger

Have you seen Tumblr Follow Button.? Did you ever think of the same widget on your blogger blog. Well, this time we will create a follow button that similar like Tumblr. Tumblr is the one platform for into blogging. If you look under the blog service Tumblr is at the top right corner there is always a follow and dashboard button. This lets your visitors to follow your blog quickly and in a different manner. Usually this works as a Google Friend Connect but instead of the Default Friend Connect Widget. We will add this Floating Follow and Dashboard Button Like Tumblr widget.

1. Go to  Blogger Dashboard > "Layout".


2. Click on "Add a Gadget" > "HTML/JavaScript".


3. Copy and paste the following code:



<div style="position: fixed; top: 5px; right: 95px;">
<a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=123456789" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a>
</div>
<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<div style="display:scroll; position:fixed; top:5px; right:5px;">
<a class="linkopacity" href="http://www.blogger.com/home" target="_blank" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a>
</div>

Change "123456789" with your Blog ID.


4. Save the widget and you're done. That's it.

Read More...

How to Add a Sharing (Sociable) Button on Your Blog/Website

A sharing button, or better known as a sociable button is a button for your readers to click on if they want to share a certain page via email, Digg, MySpace, Facebook, Twitter, Delicious, StumbleUpon, Aim - almost any social website! Having this button will allow your readers to post and share your site on their favorite sociable website, creating more exposure for you! I will share with you a very simple way to do this.

1. Go to AddThis. Click on 'Free! Get Started'.


2. Choose from the styles of Sharing/Bookmarking buttons, and choose where you are going to be putting your sociable button. Then click on 'Get your button code'.


3. Next, register for a free account, you just need to choose a user name and password. Provided your email address.


4. After you register, it will show you the preview. You can decide if that's the button you want. Follow the instructions on how to put the sociable on your blog/website. It usually involves you copy and pasting the html.


5. Go ahead and follow the instructions - it is different for blogs and websites. Add it to your blog, and you should see it. Easy and great way for your readers to share your blog/website!

It's free.

Creating the account is so that you can go back in and get another code if you have more than one website/blog.

Always backup your template/html before you change it (in case something goes wrong).

Read More...

How To Make Post-It Sticky Note In Blogger

A Post-it note (or Sticky Note) is a piece of paper stationery with a re-adherable strip of adhesive on the back, designed for temporarily attaching notes to documents and other surfaces. Although now available in a wide range of colors, shapes, and sizes, Post-it notes are most commonly a 3-inch (76 mm) square, canary yellow in color. A unique low-tack adhesive allows the notes to be easily attached and removed without leaving marks or residue. In this tutorial you’ll learn how to make a realistic looking sticky note using just HTML and CSS that is easy to create and cross-browser compatible.

You may also to like read: How To Create A Sticky Post On Blogger

1. Login to your Blogger Dashboard and go to "Layout".


2. Click on "Add a Gadget" > "HTML/JavaScript".


3. Copy and paste the following code:



<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>

<style type="text/css">
.sticky {
 /* General */
 margin: 0;
 /* Padding: Top/Bottom Left/Right */
 padding: 8px 24px;
 /* Width: Adjust to your purpose */
 width: 380px;
 /* Uncomment the following line if you'd like to maintain a square  shape */
 /* height: 380px; */
 /* Font: After importing font, put font's name in single quotes */
 font-family: 'Nothing You Could Do', Arial;
 font-size: 1.4em;
 /* Border */
 border:1px #E8Ds47 solid;
 /* Shadow */
 -moz-box-shadow:0px 0px 6px 1px #333333;
 -webkit-box-shadow:0px 0px 6px 1px #333333;
 box-shadow:0px 0px 6px 1px #333333;
 /* Background */
 background: #fefdca; /* Old browsers */
 background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Opera11.10+ */
 background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* IE10+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0 ); /* IE6-9 */
 background: linear-gradient(top, #fefdca 0%,#f7f381 100%); /* W3C; A catch-all for everything else */
}

.sticky p {
 /* Text-Align: align the heading to the center */
 text-align: center;
}

.sticky ol {
 /* Margin: Distance from top of list to heading */
 margin: 12px;
}

.bxt-moresubs {
background: none repeat scroll 0 0 #EBEBEB;
border-style: solid;
border-width: 1px;
border-color: #fff #ccc #ccc;
padding: 3px 8px 3px 3px;
text-align: right;
font-size: 7px;
letter-spacing: 1px;
}

.bxt-moresubs a {
display: inline-block;
font-weight: bold;
color: #1E598E;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}
</style>

<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>

<div class="sticky">
    <p>
    <strong>Today's to-do list</strong>
    <br />
    <small>Monday, September 19th</small>
    </p>
    <ol>
        <li>Write a blog post</li>
        <li>Go to the bank</li>
        <li>Study for exams</li>
        <li>Renew web hosting account and domain name</li>
        <li>Learn something new</li>
        <li>Update project log</li>
    </ol>
</div>

<div class="bxt-moresubs">
<a href="http://bloggerxtutorials.blogspot.com/">Get This Widget</a>
</div>



4. Click "Save". It’s as simple as that!

Article Source: binvisions.com

Read More...

How To Add Link To This Post Widget To Blogger

Link To This Post widget permits you to easily create a link to an existing content of your blog. Besides that, it can help you to increase page views and traffic on your blog. This widget contains two text areas, in first it contains a URL of that respective post and the second text area contains a HTML code which includes title and URL of your post.

1. Go to "Blogger Dashboard" > "Template" > "Edit HTML".


2. Check "Expand Widget Templates" Check box.


3. Find the below code in your template:



<data:post.body/>



4. Copy and paste the code below after it.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='color: #7AA1C3;font-weight: bold;'>Do you like this post? Please link back to this article by copying one of the codes below.</p>
<p style='color: #CF152A;font-weight: bold;'>URL Of Post:
</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea><br/>
<p style='color: #CF152A;font-weight: bold;'>HTML Link Code:</p>
<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>
<p style='color: #CF152A;font-weight: bold;'>BB (forum) link code:</p>
<textarea id='BB-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'>[url=<data:post.url/>]<data:post.title/>[/url]</textarea>
<div style='text-align: right;font-size: x-small;'>
<a href='http://bloggerxtutorials.blogspot.com' target='_blank'><span style='color: #838383;'>Link To This Post Widget</span></a></div></b:if>



5. Finally "Save" your template.

Use the "Ctrl F" function on your keyboard to search for the <data:post.body/> within the code on your template.

Read More...

How To Create A Sticky Post On Blogger

In blogging, "Sticky Post" refers to a post that remains at the top of the author's page indefinitely, often to announce important information to the reader, such as a contest or upcoming event. Creating a "Sticky Post" on Blogger is quick and simple, and you don't have to be computer savvy to do it.

1. Connect to your Blogger account and click "Layout" in the "Dashboard."


2. Select "Add a Page Element" and choose the function you want to use as your "Sticky Post." For example, if you would like to announce an ongoing contest, you can choose "Text" and enter the details. "Text" allows you to add and edit HTML. By selecting "HTML/JavaScript," you also can choose to link to a previously written, archived post that gives the written details of the contest.


3. Complete the "Add a Page Element" template, click and drag the item to the "Blog Posts" section.
4. Click "Preview" to make sure the sticky post appears at the top of the page. Then click "Save."

You can create more than one "Sticky Post."

Using a "Sticky Post" is an effective way to drive traffic to additional sites you may have, such as another blog or online retail shop.

"Sticky Posts" have no expiration date. To remove a "Sticky Post," simply click "Remove Page Element."

Read More...

How to Make the Attribution Widget in Blogger Go Away

By default, every blog on Blogger has an attribution widget on the bottom. This is a small line of text that reads "Powered by Blogger," and it contains information on the creator of the template that particular blog uses. Blogger doesn't provide an automatic option to remove this text. However, if you wish to get rid of the attribution widget you can do so with just a small amount of editing of the Blogger template.

1. Log into your Blogger account and open the Blogger Dashboard page. Click the "Template" tab underneath the blog from which you wish to remove the attribution widget.


2. Click the "Edit HTML" tab at the top of the page.


3. Click the box next to "Expand Widget Templates." This should cause the page to reload.


4. Delete the line of text reading "<!-- outside of the include in order to lock Attribution widget -->" from the "Edit Template" window. Then delete the following text, leaving everything else in the box as it was:



<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != ""'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>



5. Click the orange "Save Template" button to save your changes. The attribution widget is now gone from your Blogger page.

Leave the line of text that reads "<b:section class='foot' id='footer-3' showaddelement='no'>" alone when deleting the other content as removing this will cause error problems.

Read More...