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

Wednesday, 3 September 2014

How To Customize Blockquotes In Blogger ?

We use blockquotes to show some quote, a specific sentence, phrases etc. So blockquote has its own importance in blogging and if you are a blogger who likes to present the content in an effective and attractive manner then all features of a template must be working good to ensure the attractiveness of the blog. Some templates have very good blockquotes presentation while some other only shows the simple quotes, some just shifts the quoted text a little bit without changing anything in it. So if you are not happy with the block quotes of your blog and want to customize them according to your choice then this tutorial is for you.

Recently i have created a testing blog where i was trying to resolve all the problems related with the blogger templates, so i chosen a template that is provided by blogger and while customizing it i found that its blockquotes are not looking attractive so i decided to make them look attractive by using the CSS code. So there is nothing to worry if your template is not showing an attractive quoted text, you can customize it to according to your needs as i have customized it in this template. Previously blockquotes in this template doesn't have any border so i added a small css code and now you can see the block quotes in this template is looking quite good if not very attractive.

You can customize your templates block quotes easily by using CSS.

So below are the easy steps that you can follow to customize your blogs blockquotes :
  • First select any one of the style from the given styles.
  • Then Copy the code of that style.
  • Now log in to your Blogger Account.
  • Then go to Dashboard >>Template >>Edit HTML.
  • Now press CTRL+F and search ]]></b:skin>
  • Now paste the copied code just above ]]></b:skin>
  • Then Save your template and you are done.
Note: After the styles i have given the customizations tips that you can use to make these blockquote styles more suitable for your blog, so don't forget to read them.

Style 1: Blockquote With Border

Code:
blockquote {
margin:1em 20px;
border: 1px solid #619644;
padding: 10px;
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff
}

Style 2: Blockquote With Vertical Line On Left

Code:
blockquote {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #619644;
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff;
}

Style 3: Blockquote With Two Parallel Dotted Lines

* To Enlarge The Images Please Click On Them.

Code:
blockquote {
margin:.75em 0;
border:1px dotted #619644;
border-width:1px 0;
padding:5px 15px;
color: #000
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff;
}

Style 4: Blockquote With Changed Background Color

Code:
blockquote {
margin: 1em 3em;
padding: .5em 1em;
background: #58FAF4;
font-family: Vollkorn, serif;
font-style: normal;
}

Customizations:

  •   To change the background color of blockquote replace the HTML color code shown in blue.
  •   To change the font family simply change the font name shown in red.
  •   To change the border color replace the HTML color codes shown in green.
  •   To change the font style from normal to italic, simply replace the text 'normal' with 'italic' shown in orange.

How To Customize Credit Links In Blogger Template ?

Blogger provides us some free templates that lacks some features and again one of the major issue is credit links. In blogger templates blogger gives a credit link that shows powered by Blogger, copyright year of blog and name of the template but if want to add some other links like privacy policy, disclaimer, sitemap etc. then you can not directly do it. So for doing this we need to do some editing in our blog's template editor section. Basically in this tutorial i will show you how to add your credit links at the footer of the blog and then i will also describe how to remove the blogger attribution. We do not recommend to remove the attribution but you can add powered by Blogger attribution in the footer link that you create. So if you want to customize the credit links then you can follow this tutorial.

Steps to add your customized credit links:
  • Log in to your Blogger Account.
  • Then go to Dashboard >> Template >> Edit HTML.
  • Now press CTRL +F and search the following code:
]]></b:skin>
  • Paste the below code just above ]]></b:skin>
#credit{font-size:13px;color:#777;text-align:center;text-transform:capitalize;}
.content-wrapper{position:relative;width:100%;margin:0 auto}
  • Now again search the following line of code:
<b:section class='foot' id='footer-3' showaddelement='no'>
  • Then paste the below code just above  <b:section class='foot' id='footer-3' showaddelement='no'>
<!-- credit link start-->
<div id='credit'>
<div class='content-wrapper'>
  &#169; Copyright 2014 <a class='site_name' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - All Rights Reserved | Powered by <a href='http://blogger.com/'>Blogger</a> | <a href="#">Privacy policy</a> | <a href="#">Disclaimer</a> | <a href="#">Sitemap</a>
  </div>
</div>
<!-- credit link ends-->
  • Now Save your template.

Customizations: 

  • Replace # with your URL's of required pages.
Now you have successfully added your customized footer link so the next step is to remove the Blogger Attribution from template's footer section. To do this simply follow the below link:
Also Read:

Tuesday, 2 September 2014

How To Show Only Snippet/Post Excerpt/Some Description With Thumbnails On Homepage In Blogger?

Blogger offers some simple templates that look professional but they have few problems that don't let us use these templates. One of the major problem with these templates is when we post articles on our blog, it starts showing the entire articles on the homepage while other templates only shows some small description/snippet with thumbnails making the blog look more professional and attractive. So if you are the one who want to use the blogger templates but not using it because of this drawback then you can follow this tutorial. Basically there are two ways of doing it one method is given by blogger itself, which is not recommended by me and other is by using some code which will make your blog look professional and attractive. So in this tutorial i will show the two methods of doing this. Below are the two methods of doing this :

Method 1:

  • Log in to your Blogger Account.
  • Then create a new post or open a post that is already published or ready to publish in drafts.
  • Then after few lines from the start add a Jump Break as shown in below screenshots.
  • Basically Jump Break feature is used to show the selected content on the homepage not the entire post and it also adds the read more link after few lines like we see in other templates. So use a jump break after few lines to show only a small description of a post on the homepage not the entire article.
  • However this feature is not recommended because of the following reasons:
  1. You have to add jump break in each and every post.
  2. It is difficult for you to add Jump break at equal post length in all posts.
  3. It doesn't makes equal frames for images, so if some posts have larger images than others then it will not change their size and show it same as they are, hence makes your blog look unprofessional and less attractive.

Method 2:

This is another approach, here you can add the following code in your template to automatically generate the equal posts description and thumbnails.
  • Log in to your Blogger Account.
  • Go to Dashboard >> Template >>Edit HTML.
  • Before doing any editing in your template please backup your template using Backup/Restore tab.
  • In HTML Editor Section press CTRL+F and search </head>.
  • Now paste the below code just above </head>
<!--Script for displaying snippet on home page starts here-->
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!--Script for displaying snippet on home page ends here-->  
  • Now search <data:post.body/> and replace it with the below code.
Note: The above code <data:post.body/> appears three or four times in the code so remove the first,second and fourth one and replace the third one with below code.
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
  • Now Save your template and you are done.

Thursday, 21 August 2014

Problem Of Related Posts Widget In Blogger Templates

As i already said the templates provided by blogger lags various features and this problem is among one of them. Today we get the related posts widget inbuilt in most blogger templates but if want to use the templates provided by Blogger then you have to add this widget manually. There are many websites available online that provides free Related posts widgets for your blogs or websites such as LinkwithIn, Nrelate etc.

But we have to be careful while selecting a related posts widget because it can affect your blog in many ways. So before selecting a related posts widget for our blogs we must check the following things:
  • Check whether the related posts shown in the widgets are actually related or they are just showing the same posts all the time. This is an important step because if your visitors see the same posts all the time in related posts then they will get bored and will surely leave your site which will affect the bounce rate of your blog.
  • The second thing that we need to check while selecting a related post widget is one of the most important thing to be considered. Check whether your related posts widget is soaking your blog's link juice or not. If it is soaking your blog's link juice then it is not good for your blog. You can check it by clicking on any related post shown in related posts widget, when you click a post in related posts check whether it is directly redirecting you to your blog post or it is redirecting you first to its website(that is related posts widget providers website) and then back to your related post. The process of redirection is very fast so keep your eyes open and look at the address bar for redirection. One of the most known widget that has this problem of soaking link juice is LinkWithIn Related Posts widget, this widget looks good and professional but with this negative point of the widget i would not recommend you to use it.
  • Check whether your related posts widget widget provider site providing different styles of the widget or just a single style. This is not a very important thing to check but if a related posts widget doesn't fits in your sites design then it can make your site look unprofessional.
So i have discussed all the major things that you must need to consider before selecting a related posts widget for your blog. So now i will describe you which related posts widget to use for your blog.

After seeing the negative points of LinkWithIn's Related Posts widget i decided to search for a better alternative that not only show effective related post but also provide various styles and customizations. After a little search i have found a widget which is actually good for our blogs and it is provided by Nrelate. This widget not only shows effective related posts but also provide various customizations and style for which i was looking. Also they do not force you to show their name nearby or below the widget in any way, it is totally optional so you can choose whether to show their name or not. One more thing about this widget, Nrelate offer you to show the sponsors ads in your related posts widget so you both can earn some money through your widget, but again it is totally optional so if don't want to show sponsors posts then simply select no in the options. I think this is the widget of choice for Blogger Templates, so if want to add Nrelate's Related Posts Widget to your blog then follow the below link:

Wednesday, 20 August 2014

All Problems With Blogger Templates Resolved

As a blogger user we always keep looking for best blogger templates that suit our requirements because the templates provided by blogger are not very effective for today's blogs. Blogger templates lacks various features that other template provider provide with their templates for free. But today i have decided that i will resolve all the issues related to the templates provided by Blogger.

So, i am writing here all the issues that we generally face with the templates provided by blogger and solve it one by one in separate posts specifically created for those problems. So lets first discuss all the issues that i found in a Blogger template, which are provided by blogger.

The Major Issues Found In A Blogger Template:

  • The first issue you will find in all the templates which are provided by blogger is that they do not have menu bar or rather call it drop down menu because you can use tabs in place of drop down menu but not drop down menu itself.
  • The second major issue that i have found in Blogger Templates is that Homepage shows full length posts instead of showing small description/snippet/post excerpt with images that almost all templates of today's shows effectively. This is also a negative point of blogger templates.
  • The third major issue is same as Homepage issue, the labels and archive posts also show the entire article instead of showing the post snippets.
  • The footer section's credit links also look awkward since they contain the templates name along with powered by blogger. And if you add copyright @ year and then blog name, in such case you cannot link your blog name with your blog's homepage. Also you cannot add more links in footer like privacy policy, sitemap etc. Overall it is not structured in Blogger templates so we have to correct it by removing Blogger Attribution.
  • Block Quote in Blogger templates doesn't look like block quote so it also need some customization, although this is not a major issue but if you want to make your blog look professional then you have to customize it.
  • One more major issue with Blogger templates is that on the header section they have huge empty space on the right side but you cannot use it to show advertisements because there is no option to add a gadget. So i will show you how to split a gadget into two so that you can use it show your advertisements. 
  • Last but not the least since changing layout in templates provided by blogger is quiet easy as compared to other blogger templates, so adjusting our templates layout is also a thing to be kept in mind.

How to resolve these issues ?

I have created some specific post for these problems, so i am giving you the links that contains the solutions of these problems. You can follow them one by one and i think these posts will definitely sort out all your problems regarding with blogger templates.
I hope you will like all these posts.

    Tuesday, 19 August 2014

    5 Flash Animated Twitter Badge Widget For Blogger

    In my previous post i have given you 7 different types flash animated twitter bird widget that you can use to promote your blog on twitter and increase the number of Twitter followers. So today i have decided to give you some new widgets that are as cool as the twitter bird widget. Basically these widgets are small badges that look pretty cool as well as they do not require much space of your blog or website. So if you are very choosy about widgets and place only specific widgets that don't acquire much space of your blog then these badges are for you. These badges are very easy to install and customize so you can easily change their height and width as per your requirements. Here i am providing you 5 different types of badges so first choose any one of the badge that you like the most and then follow the tutorial to install and customize it.

    # These Flash Animations are designed and developed by twitterflash.net.

    Type 1:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-1.swf" width="125" height="125"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-1.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For All Blogging Tips And Widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-1.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="125" height="125" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 2:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-2.swf" width="125" height="125"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-2.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For All Blogging Tips And Widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-2.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="125" height="125" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 3:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-3.swf" width="125" height="125"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-3.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For All Blogging Tips And Widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-3.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="125" height="125" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 4:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-4.swf" width="125" height="125"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-4.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For All Blogging Tips And Widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-4.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="125" height="125" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 5:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-5.swf" width="125" height="125"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-5.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For All Blogging Tips And Widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-badge-5.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="125" height="125" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    How to add Flash Animated Twitter Badge to Blogger ?

    • Log in to you Blogger Account.
    • Then go to Dashboard >> Layout >> Add a Gadget.
    • Then select HTML/JavaScript from the list.
    • In HTML/JavaScript box, copy and paste the code of your chosen badge from the above badge types.
    • Then click on Save tab and you are done.

    Customizations:

    • Replace Amit00006 with your Twitter Username.
    • To change the height and width of the widget change the values shown in blue.

    Monday, 18 August 2014

    7 Animated Flash Twitter Bird Follow Me Widget For Blogger

    Nowadays Twitter is one of the most famous social networking site available online. Twitter has huge number of users and that is the reason why most bloggers try to promote their blogs on it. Having a huge number of followers on any social networking site always gives a pleasant feeling to anyone. There are various different kind of twitter widgets available online that you can use to promote your blog on twitter but i think these widgets are one of the coolest widgets i have seen till now and i hope that they will not disappoint you.

    So today i am going to provide you some animated widgets that look very cool and they can surely increase the number of your twitter followers. These widgets are quiet easy to install and also enhance the looks of your blog/website. Here i am providing 7 different types of twitter bird widgets so choose any of the widget that you like the most for your blog and follow the instructions to add it to your blogger blog.

    # These Flash Animations are designed and developed by twitterflash.net.

    Type 1:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-1.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-1.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-1.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 2:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-2.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-2.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-2.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 3:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-3.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-3.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-3.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 4:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-4.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-4.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-4.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 5:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-5.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-5.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-5.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 6:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-6.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-6.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-6.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    Type 7:

    For All Blogging Tips And Widgets
    <object type="application/x-shockwave-flash" data="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-7.swf" width="150" height="150"><param name="movie" value="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-7.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=Amit00006" /><a href="http://www.bloggenes.com/" title="For all blogging tips and widgets">For All Blogging Tips And Widgets</a><embed src="https://sites.google.com/site/bloggenes1/home/flash-files/twitter-bird-7.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=Amit00006"></embed></object>

    How to add animated flash Twitter bird widget to blogger ?

    • Log in to your Blogger Account.
    • Then select the blog in which you want to add this widget.
    • Then go to Dashboard>> Layout >> Add a Gadget.
    • Then select HTML/JavaScript from the list.
    • In HTML/JavaScript box paste the copied code.
    • Click on Save button and you are done.

    Customizations:

    • Replace Amit00006 with your Twitter username.
    • To change the size of the widget change the value of Width and Height shown in blue. 
    Also read:

    Friday, 27 June 2014

    How To Index The Labeled Posts Of Blogger On Google ?

    We all know that for indexing a post on Google our posts require some content but sometimes we create very small posts basically of four to five lines. So we want them to be indexed as labeled posts but the problem is Google bots do not index the search and labeled posts. So what to do, today i have created a blog and when i tried to index my labeled post then it started showing error like "URLs restricted by robots.txt", then i decided to get rid of that problem. This problem is not that big as it looks like so don't worry.

    So now first of all i would like to give you a rough idea about robots.txt file. Basically robots.txt file is created to tell the Google bots which URL's are to be crawled and which are not. I think you have got the rough idea about the problem i.e. the problem is robots.txt file. So the next thing is how we can tell the Google bots to crawl our labeled and archived posts. You can do it by editing the robots.txt file in blogger settings, which is quite simple and takes only few seconds. So if you want to index your labeled posts on Google then simply follow the below steps :
    • Log in to your Blogger Account.
    • Then go to Dashboard >> Settings >> Search Preferences.
    • In search preferences go to Crawlers and indexing.
    • Then click on Edit tab next to Custom robots.txt as shown in screenshot.
    To enlarge the image please click on it.

    • Ignore the warning and enter the following below code in the box and save it.
    User-agent: Mediapartners-Google
    Disallow:

    User-agent: *
    Allow: /search
    Allow: /

    Sitemap: http://www.bloggenes.com/feeds/posts/default?orderby=UPDATED
    Customization: Replace my blog URL with your blog URL shown in red.

    Note: Basically here the main code that calls the Google bots to crawl your labeled and archive posts is shown in blue. "Allow: /search" means this code is allowing the Google bots to crawl the URLs that contains "/search" keyword. For example : Google bots do not crawl the URLs that look like "http://www.bloggenes.com/search/label/Blogger Tips" but after you allow them to crawl the URLs that contain "/search" keyword the Google bots will start crawling such URLs.

    To know more about above code read this post "How to set up the search preferences in blogger ?".
    • Now click on Edit tab next to the Custom robots header tags.
    • Again ignore the warning and fill the fields as shown in screenshots below.
     
    To enlarge the screenshot please click on it.

    • Then click on Save Changes Tab and you are done.
    • From now Google bots will start indexing your labeled pages.

    Thursday, 26 June 2014

    How To Change The Font Style Of Post Title In Blogger ?

    In my previous tutorial i have described about how to change the font style/font family of your posts body using two different approaches. But today in this tutorial i am going to show you how you can change the font styles of your posts titles in blogger.

    Posts titles always attracts visitors so writing an attractive heading is must for a blogger to get some additional visitors but in addition to the attractive heading if your post title look attractive then this would be like cherry on the cake. In my previous post i have described the two different approaches for changing the font style of posts body that is one is through template editor section and other is by editing your posts HTML section.

    But in this tutorial i am gonna show you only one approach that is through template editor section which is quite simple and easy approach. So without wasting your much time lets start the tutorial.
    Below are the simple steps that you can follow to change the font style of your posts title:
    • Log in to your Blogger Account.
    • Go to template and then click on Edit HTML tab.
    • In HTML Editor search the following type of codes:
     .post-title {font-family: Arial,Helvetica,Sans-serif;font-size:22px}
     Or
    .post h1,.post h2{font-family: Arial, sans-serif, Segoe UI,Arial,Tahoma;font-size:170%;line-height:1.2em;margin:8px 0 3px;padding:0;font-weight:normal;margin-bottom:15px;}
    Note 1: For searching this code you can use CTRL+ F.
    Note 2: These codes may not be the exact as given above so try to find the code that looks similar to any one of the above code.
    • Now change the font family as per your requirement, as shown in screen shots below:
    To enlarge the screenshot please click on it.

    To enlarge the screenshot please click on it.
    • Then save the template and you are done.

    Wednesday, 25 June 2014

    How To Change The Font Style Of Posts Body For Specific Posts In Blogger ?

    In my previous tutorial "How to change the font style of posts body in blogger?", i have described the first method that is using the template editor, which is quite easy if you get the right code at once. But if are not getting the right code then don't worry this method will definitely work for you and this is much easier than previous one.

    This method is quite easy but the problem is you have to enter the small code in each and every post to change the font style of all your posts. But if you want to change the font style for specific posts than this method is for you. So without wasting your much time lets start the tutorial. Below are the following simple steps describing the procedure of changing the font style of your posts using the second method:

    Step 1: Log in to your Blogger Account.
    Step 2: Open a post or create a new post.
    Step 3: Now click on HTML section of your post as shown in screenshots.
    Step 4: Just add the below code just after / below this Code "<div dir="ltr" style="text-align: left;" trbidi="on">" as shown in screenshot.
    <div style="font-family: Gabriola; font-size: 19px;">
    To enlarge the image please click on it.

    Step 5: Now change or add the font style that you want for your blog.
    Step 6: Then add the closing div tag at the end of the post that is </div> tag. 
    Step 7: Then save and publish your post and you are done.

    Sunday, 3 November 2013

    Are You Using Image Alt Tag In Blogger For Better SEO ?

    Its a good question because i have seen many bloggers who are not utilizing this awesome feature provided by Blogger. if you are not optimizing your blog's images then you are loosing a large quantity of traffic. We often use images in our blogs that are related to our content for making it more attractive but have you ever noticed that you are not optimizing your images to get additional traffic to your blog. As we all know today almost every search engine has an image searching tool where they show your blog images along with your blog URL and hence it is important for us to optimize our blogs for image search too. As i always use image search to search any widget because it saves my time and if we search through web search then we have to visit each and every blog to see that particular widget. In this tutorial i am going to show you how to optimize your blog's images in Blogger as well as in other platforms.

    Why it is important to use image Alt tag ?

    Using image alt tag is important because if you don't use an alt tag for a particular image then it may be difficult for search engine robots to categorize them. For example: Suppose you have uploaded an image in your blog post and not defined an alt tag for that image, even then search engine robots can easily crawl your image but it is difficult for them to categorize your images in best suitable category and hence it might be possible that they will not include your image in search results. But if you use an image alt tag for your images then it increases the possibility of your images to be categorized in best suitable category and hence as a result search engines will show your images in top positions whenever a query related to your image is inserted.

    Using alt image tags is not a difficult task to do, it is as simple as saving a small file to your computer because it does not take much time or require much coding. So now without wasting time lets start the tutorial.

    How to add an Alt tag to images in Blogger ?

    • Log in to your Blogger Account.
    • Then go to Dashboard >> Posts.
    • Then select a post that you have already created or create a new post.
    • Then upload an image or select a previously uploaded image.
    • Now click on the image and then click on properties as shown in screenshot.
    • Now in image properties you will see two fields : Title Text and Alt Text.
    Image properties in Blogger
    • Then enter your required title and alt text in Title and Alt text fields.
    • Now click on OK tab and you are done.

    Other important things for better SEO:

    Rename your image: This is also an important step, before uploading your image make sure you have renamed it with the most suitable keywords.

    Use dash instead of giving spaces while renaming images: If you are renaming an image with a sentence then always use dash for spacing words instead of giving spaces.

    For example: Are-you-using-image-alt-tags.jpg

    Use caption: Always use captions for your blog's images for better image SEO.

    How to add image Alt tag on other platforms ?

    You can use image alt tag for your images by using HTML as described below:
    • In your HTML editor section just look for your blog's image URL which will look like: 
    <img src="Your Image URL" /> (Before Adding Title and Alt Tags)
    • Now with your image tag add Title and Alt tags as shown below:
    <img src="Your Image URL" alt="Alt Text " title="Title Text" />  (After adding Title and Alt Tags)
    • Then Save your page and you are done.

    Friday, 1 November 2013

    Stylish Jumping Social Share Buttons For Blogger

    Social share buttons are the great widgets for promoting your blog on different social platforms. Although there are many social share buttons available online but the thing that we need to consider is to attract our blog visitors to share our posts. Attracting visitors to share our contents is not a big deal if you have stylish buttons that pull the visitors attention.
    jumping social share buttons
    Our social sharing widget must need to look attractive as well as allow the visitors to share your content with ease otherwise visitors might ignore sharing your posts. So, today i am going to provide you a fantastic share widget that can easily attract your visitors to share your posts. These social share buttons look very cool as well as they jumps whenever you move your mouse over them. These buttons are easy to customize and you can add as many as buttons you want. You can see the live demo of these button in this blog, just see below the post and decide whether they are cool or not. So lets begin the tutorial:

    How to add Jumping share buttons to Blogger ?

    • Then you will find three options:  Related Content, Share Buttons, Social Analytics.
    • Select Share buttons as we are here to add share buttons to our blogs and then click on Get Started, however if you want to select other options then you can select them too.
    shareaholic share buttons get started

    • Now it will ask you to create an account or log in with your Facebook or Twitter account.
    • Then create an account or simply log in with your Facebook or Twitter account.
    Shareaholic member login

    • Then it will redirect you to Add a new website page.
    • In Add a new website page enter your blog URL, Blog name, platform, category and language as shown in screenshot and then click on Continue tab.
    shareaholic add a new website page

    • Now you will be taken to Publisher Apps page.
    • In Publisher Apps page, enter the location where you want to show your share buttons that is below or above posts, theme, headline, alignment etc fields and then click on Save Settings.
    Shareaholic publisher apps page

    • Now it will show you two codes, copy both the codes.
    Shareaholic share buttons code

    • Now log in to your Blogger Account.
    • Then go to Dashboard >> Template >> Edit HTML.
    • Now in edit HTML section press CTRL + F and search the follwing code:
    </head>
    • Then paste your first code just above </head>.
    • Now again in Edit HTML section search the following code:
    <data:post.body/>
    Note: This code appears three times in Edit HTML section, so search the second one.
    • Then paste the second code just below <data:post.body/> to show the buttons just below your posts but if you want to show these buttons above your posts then paste the second code just above <data:post.body/>.
    • Then click on Save Template tab and you are done.
    Enjoy your new stylish share buttons !

    Also read:

    Thursday, 31 October 2013

    How To Setup Search Preferences In Blogger ?

    Blogger provides various features for effective blogging and one of its feature is search preferences. With the help of this feature you can better optimize your blog for search engines. Blogger offers various options in search preferences such as:
    • Meta tags
    • Errors and re-directions
    • Crawlers and indexing
    In this post i am going to discuss about all these features, their functions and how to setup them for better search engine optimization. Although all these search preferences are easy to setup but wrong setup can make your blog disappear from the search engines, so read this post carefully. Now without wasting your time lets discuss about these features and how to use it.

    Where to find Search preferences option ?

    This is quiet easy thing, just go to your Blogger dashboard >> Settings >> Search preferences.
    Blogger search preferences

    Now you are in search preferences section so start with the first option.

    Meta Tags:

    Meta tags are special HTML tags that provides information about a website to search engine robots. Although in this section you are not required to learn about meta tags because in Meta tags section it just asks for a small description about your blog. However if you want to learn more about Meta tags for better SEO then you can read my other post "Add meta tags to Blogger for better SEO".

    How to setup Meta tags ?

    Blogger meta tags
    So now, in meta tags section you will find a field called Description as shown in screenshot. In this field you just need to check the yes button and enter a short 30 - 40 words description about your blog and then save it. That's it, you are done with this field.

    Now we are moving to second field which is Errors and Redirections.

    Errors and redirections:

    This field has two separate sections:

    Custom Page Not Found:

    This field is generally for setting up a page that shows 404 error if somebody hits a bad link such as the pages or posts that you have deleted from your blog or for any other page that doesn't exist in your blog.

    How to setup a Custom Page Not Found ?

    Blogger custom page not found
    You can fill this field by just entering the text like 404 error, page not found or you can make it interesting by entering the text like:

    Whoops! It appears you hit a bad link. My bad luck! Please click the Back arrow on your browser to return to the previous page.
     Also in this field you can use HTML tags, so if you want to attract your visitors by showing some best articles on your blog then you can make it more interesting by using HTML for example:
    <h2><b>Whoops!</b></h2>It appears you hit a bad link. My bad luck! Please click the Back arrow on your browser to return to the previous page
    <br/>
    <h3>or </h3>
    <br>
    Read some best articles that i have picked from my site, just for you :
    <p>&#160;</p>
    <ol>
    <li> <a href="Your Post Link Here">Post Title 1</a></li>
      <li><a href="Your Post Link Here" >Post Title 2</a></li>
    <li> <a href="Your Post Link Here">Post Title 3</a></li>
    <li> <a href="Your Post Link Here">Post Title 4</a></li>
    <li> <a href="Your Post Link Here">Post Title 5</a></li>
    </ol>
    Now after entering the text of your choice, click on Save changes tab and you are done.

    Custom Redirects:

    This is a field which you can use to redirect a visitor from one link to another link automatically.

    For example:

    Suppose you have created a post and then you have deleted it and created another post that is an update of that post and because your deleted post is still indexed on search engines, so with this feature you can redirect the traffic of deleted post to your newly created post.

    How to setup Custom Redirects?

    Blogger custom redirects
    In custom redirects field, just click on Edit as shown in screenshot and enter your old post's link in "From" section and new post's link in "To" section. Then check the Permanent box and click on save changes and you are done with custom redirects.

    Note: you don't need to enter your entire post address in To or From section, just enter the address that appears after .com.

    Crawlers and Indexing:

    This is the third and most important field that you are required to fill up carefully. This also includes two separate sections:

    Custom robots.txt:

    Before setting up this field lets understand the meaning of Robots.txt file.

    What is Robots.txt file ?

    A robots.txt is a simple text file that website owners use to give instructions to the search engine robots that which part of their website or blogs are to be indexed or not.

    How to setup Custom robots.txt file ?

    blogger custom robots.txt
    In Custom robots.txt field just click on Edit and copy and paste the below code in it, as shown in screenshot.

    Code:

    User-agent: Mediapartners-Google
    Disallow:

    User-agent: *
    Disallow: /search
    Allow: /

    Sitemap: http://www.YourBlogURL.com/feeds/posts/default?orderby=UPDATED

    Customizations:

    Replace YourBlogURL with your own Blog URL.

    Now lets understand the meaning of above code.

    User-agent: Mediapartners-Google : This command is specifically for the blogs that are showing Google Adsense ads. However if you are not using Google Adsense then you can remove this field. This command generally tells the Adsense separate robots to crawl all the pages which are having AdSense Ads.

    Disallow: : This command is again for Adsense robots to allow them to crawl the entire blog.

    User-agent: * : This command is used to call all the search engine robots like Google, Yahoo, Bing etc to index the pages of a blog.

    Disallow: /search : This command tells the search engine crawlers not to index the search pages. In other words this command tells the search engine crawlers to not to index the URLs that contain the keyword search after the domain.

    For example:

    http://www.bloggenes.com/search?q=blogger&x=0&y=0

    Search engine crawlers will not include such URLs to index on search engine.

    Allow: / : This command allows the crawlers to index the homepage of your blog.

    Sitemap: This command tells the search engine crawlers to index the every new or updated post of your blog.

    How to check your blog's robots.txt file ?

    You can see your blog's robots.txt file by adding /robots.txt just after your domain.

    For example:

    http://www.YourBlogURL.com/robots.txt

    Custom Robots Header Tags:

    Now this is the last field in search preferences section, it is almost similar to custom robots.txt field but here instead of writing any command you just have to tick mark certain check boxes for effective SEO. So, here i am providing the default configuration of this section that is used by most of the bloggers but if want it to configure it by yourself according to your needs then you can refer the terms related to this field to understand the meaning of each attribute of this field.

    How to setup Custom Robots Header Tags ?

    Blogger custom robots header tags
    In Robots header tags section click on Edit and then check Yes the radio button.
    Then tick mark the fields as shown in screenshots and then click on Save Changes tab and you are done with this field too.

    Terms related to this field: 

    custom robots header tags attributes meaning
    Also read: