Saturday, August 4, 2012

Auto Backlink Generator

Posted by at 4:12 AM 1 comments
Read more ►

Wednesday, August 1, 2012

How To Add or Change Favicon on Blogger Blogspot

Posted by at 11:23 AM 0 comments
Favicon (Favorites Icon) is the small picture (usually 16px x 16px in size) you see beside some some site's name in your browser's address bar.

change blogger favicon

Having your own favicon with a nice graphical reminder of your site beside is a good way to get visitors attention again. Now Blogger users can add a custom favicon for their blogs from the Design > Page Elements tab, by clicking on the Edit link on the "Favicon" element above the navbar element.

"For many bloggers, having a custom favicon (the tiny image displayed in your browser’s window or tab) is the finishing touch that ties together the design and identity of a great looking blog. Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog. ~Blogger in Draft"

Steps adding your own favicon

1. Log in to your Blogger's Dashboard, go to the Design -> Page Elements.

2. Click on the "Edit" link on the "Favicon" setting above the navbar element.

3. A popup window will open where you can search for an image in your hard drive to replace the default favicon image. Click on "choose file" button and search for your favicon (it should have the .ico extension) - then click on "Save".

4. Now you should see your own favicon instead of blogger's default favicon.


Don't worry if it won't appear immediately. It may take some time until your new favicon will show in your Browser's tab or window.

If you want to add animated favicons to your Blogger blogs, then you should follow another method.

How to add an animated favicon in Blogger

1. Log in to your Blogger account > Design > Edit HTML > check the "Expand widget templates" box

2. Search (CTRL + F) for:

 <b:skin> 

3. And just above it, paste this code:

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

See the screenshot for more details
animated favicon blogger, how to




Note: replace your-favicon-links-goes-here with your favicon's link location
You can choose from here some cool favicons for your site/blog: http://www.favicon.cc/ (just download the favicon you like - upload it on tinypic or on a blogger's post, then copy the link address/direct link)

4. Save the Template.

Now your favicon should be alive. Just view your blog to see it in action (:
Read more ►

Simple Recent Posts Widget for Blogger/Blogspot

Posted by at 11:11 AM 0 comments
This Recent Posts widget will show not only post titles but also post excerpts or snippets on your blog.

What you can do with this widget:
  • display post titles only
  • change the number of posts
  • change the number of characters of the post snippet/excerpt
  • show the post dates
See the screenshot below:

How to add Recent Posts Widget to Blogger

1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://24blogtips.blogspot.com" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://24blogtips.blogspot.com" title="Recent Posts Widget">24blogtips</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMVvuys1mUWHspkX3D4CPuOuFSNQYLoUANXQ10Zy4TOm1TwA-O0CmjePSMnohyphenhyphenxDUxDaxKilGIWmfSLjZtNdQL68VFjCyyMHInLRMyZGa0LU-SFauwRwmpN_L9lg0Ew9GfPtB5DFzSmHh/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://24blogtips.blogspot.com/2012/08/simple-recent-posts-widget-for.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://24blogtips.blogspot.mx/2012/08/simple-recent-posts-widget-for.html" title="Recent Posts Widget">24blogtips</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMVvuys1mUWHspkX3D4CPuOuFSNQYLoUANXQ10Zy4TOm1TwA-O0CmjePSMnohyphenhyphenxDUxDaxKilGIWmfSLjZtNdQL68VFjCyyMHInLRMyZGa0LU-SFauwRwmpN_L9lg0Ew9GfPtB5DFzSmHh/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. Change 5 (option 1) and 10 (option 2) with the number of posts you want to show. Change false to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:
http://www.your-site.com/feeds/posts/default....

4. Save your widget. That's it!! Enjoy

Please let me know what you think of this widget by leaving a comment below.
And if you liked this post, please consider sharing it. Thanks!
Read more ►

Show Blogger Image only in Homepage and Hide it in Post Page

Posted by at 11:06 AM 0 comments

Want to know how to hide specific images from blogger posts pages and to appear only in homepage? In this tutorial we'll learn how we can do this! So let's start hiding our images from posts pages:

Step 1. 


If you are using the old Blogger interface:
  • Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
  • Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) this code in your template:

    }]]></b:skin>

Step 3. Copy and paste the following code just below it

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>

Step 4. Save the Template.

Now everytime you create a post, firstly add the pic you want to hide and then switch to Edit HTML tab where you'll see the HTML code of the image you have added that will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSI87JGUD2evvU9pUbC49Mqn0VNuM_E4ZaMHGp7XvlPiVI8_iaBzC_N83Kt0dbbirtUErvCHvkg2IZC3O-4CHGmpANkbqv3ODkkomNKgdfbdlfFwRAjuxTrCRuFgb-VnFISVaPnX2kyo/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSI87JGUD2evvU9pUbC49Mqn0VNuM_E4ZaMHGp7XvlPiVI8_iaBzC_N83Kt0dbbirtUErvCHvkg2IZC3O-4CHGmpANkbqv3ODkkomNKgdfbdlfFwRAjuxTrCRuFgb-VnFISVaPnX2kyo/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: it should be at the exact location where your image has been added (if the image is at the middle of the text, then the code should be located also at the middle)
All you have to do is to replace "separator" with "hidepic" as you can see in this screenshot below:


Read more ►

Monday, July 30, 2012

Recent Posts Widget with Thumbnails for Blogspot

Posted by at 3:02 AM 1 comments

The past days i've shared a tutorial on how you can add a Simple Recent Posts Widget, but today we will learn how to add a recent posts widget which comes along with posts thumbnails and snippets too.
recent posts, blogger widgets

Here is how you can add a Recent Posts widget/gadget with thumbnails to your Blogger (blogspot or custom domain) blog. It's pretty simple. Follow the steps below:

1. Go To Blogger > Design > Page Elements
2. Click on "Add a Gadget" link
3. From the pop-up window, choose HTML/JavaScript
4. Paste the following code:

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://24blogtips.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznuP9Nf3pOVnxuI7ImNq3dLzBhUiyTziNPJrkOootPw4YG2PSkUQ8B65Q4ChxnxFp4vWA7rSZ-L-Td54eiNuFci9YXbKX4NtCrMKqFJTE4-_t1yJRInXi2f4q_IsPk5_l1XEifzVpY4k/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://helplogger.blogspot.com) and be careful to have no forward slash symbol "/" at the end of your url

Settings
  • To disable the scroll bar, remove the number 500
  • By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
  • if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10

5. Save your widget. And that's it!

If you need more help, leave your comment below.
Read more ►

Google Translate Widget with Flags For Blogger

Posted by at 2:48 AM 0 comments

The Google Translate Widget allows your visitors to translate your site or blog in their own languages.
This widget auto detect your blog language and translate it to the readers chosen language.
It supports 12 different languages: English, French, German, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.

How To Add It To Blogger

Go to your Blogger Dashboard >> Design >> Page Elements >> Click on "Add A Gadget" link, choose HTML/JavaScript and paste the following code in the empty box:



Then click on Save

Enjoy (:
Read more ►

How To Change Avatar Size In Blogger Comments

Posted by at 2:39 AM 0 comments

This simple trick will help you to change the avatars size in Blogger comments. For changing the style and size of avatars, we should add some CSS codes in our Blogger template.


Step 1.

If you are using the old Blogger interface:
  • Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
  • Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Find (CTRL + F) this code in your template:

]]></b:skin>

Step 3. Copy and paste one of the following codes just above it:

[Works in Blogger threaded comment system]

.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

[for old blogger commenting system]

.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfipaAM4cCSuJ54zCFCW6FFPlcGaXbCmLGG8yroDzauRxdj79hCS-YcuHXaPqIwpqBoKIPsYPExMjBTxyW-uhXkSoHEdbFSj-J_v8OXIi2Iqqgtmcj-lEkkvgEOdryE47Iw2xl545UhVU/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

Note: If you want bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URL address in blue with your own. (works only for previous commenting system)

Step 4. Save the Template.

Now view your blog to see the results.
Enjoy!
Read more ►
Subscribe to: Posts (Atom)
 

Copyright © 24 Blog Tips Design by O Pregador | Blogger Theme by Jonaid Mahdi | Powered by 01199551837