Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts

Monday, October 22, 2012

How to remove Blog Name from Blog Title in Blogger

,



All blog posts have your blog name in their titles which can become a hurdle for search engine visibility,thus decreasing your blog's ranking,reputation and traffic.This problem can be easily by editing the HTML part of your blog with the help of a code.


Here is the method to remove blog name from blog titles.


1. Go to your blog's dashboard.
2. Select Template and click Edit HTML and then click proceed.
3. Now search the following code:


<title><data:blog.pageTitle/></title>
    
    and replace it with the following code

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/><title><data:blog.pageName/></title></b:if>

4. Then click Save template and then close.

Blog name has now been removed from the blog title.

Do send your suggestions and comments.





Continue Reading...

Monday, August 13, 2012

How to Get Rid of the Navbar on your Blogger Blog.

,

Blogger provide many facilities to make blogging experience easy and fun.Navbar is one of such features and a very useful one.It  shows above the header of your blog.

Why think twice before removing navbar from your blog:-


1)Search Function:Blogs using blogger templates do not have separate search feature.If you are using a custom template with a search box already built in this won't be a problem but if you are using one of the Blogger templates deleting the navbar will leave your blog without a search function.

2)Follow Button: Having this button on navbar encourages bloggers to start following your blog.You need to press the follow button on the bar and it is done.

3)Share Buttons:Blogger has added additional share buttons to navbar so that readers can easily share your blog on other networks such as Twitter,Facebook,Reddit etc.Hence,it will help improving popularity of your blog.

If you have all these features available in your blog and want to create it more professional then it is necessary to remove or hide navbar.Removing navbar is not difficult at all.Now you can easily remove navbar from blogger, and you do not need to insert any HTML code for it.



To do that, follow the simple steps:-



1)Login to Blogger.

2)Go to Layout.

3)Click on Edit on Navbar.


 
4)A popup will appear with options to change colours of navbar.In the end,you will see a recently added option to turn in Off. Check Off.Click Save.

5)
You are Done.



If you somehow cannot see Navbar Gadget link in layout then you need to hide/remove the navbar by using HTML/CSS code.



Step by step tutorial to easily remove navbar from blogger blog.



1)Go to Template >>>Edit HTML >>> Proceed.

2)
Search for the below given code.(Tip:press CTRL+F for quick search bar,paste the code in it and press enter).
                                                ]]></b:skin>

3)Now add the following CSS code just above it.


           #navbar-iframe { display: none !important; }


4)Save template.


Troubleshooting:-


If you later decide to reinstate the navbar simply remove the code you inserted.





Continue Reading...

Tuesday, July 31, 2012

3 Ways to Add 125x125 "Advertise Here" Banner in Your Blog.

,

Presently 125x125 ad-spots are the most famous ad dimensions in the blogosphere. For both publishers and advertisers these dimensions are perfect to display text & pictures attractively and at the same time these ads do not interfere much with the blog's content.
So if you are too planning to sell some place on your blog with these 125x125 ad spots, then here are three simple ways to do this.

Follow these simple instructions:

Method 1:


Step 1:

1.Log in to Blogger.
2.Go to "Layout".
3.Click on "Add a Gadget" ->->-> Select "HTML/JavaScript".
4.Paste the Below given into the HTML box:

<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
</tr></table></center>

The code in blue represents "no. of columns" (2 blue lines=2 columns) and code in purple represents "no. of rows" (2 purple lines=2 rows).

5.Save the widget.

Step 2:

As soon as an advertiser approaches you, replace the links in RED in the code above with the new ads.

TIP: Instead of showing all 4 banners as "Advertise Here", it is better to use 2 or 3 of them to show any affiliate ads and keep the last one as "Advertise Here".



Method 2:


1. Log in  to your Blogger account.
2. Go to Layout.
3. Click on Add Gadget and add the HTML/JAVASCRIPT gadget.
4. Copy the below given  in the gadget.


<div align="center"><table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><tbody><tr> <td><center><a href="Affiliate URL" rel="nofollow"><img border="0" alt="Image Text" width="125" src="Affiliate Image URL" height="125"/></a></center></td> <td><center><a href="Affiliate URL" rel="nofollow"><img border="0" alt="Image Text" width="125" src="Affiliate Image URL" height="125"/></a></center></td> </tr><tr> <td><center><a href="Affiliate URL" rel="nofollow"><img border="0" alt="Image Text" width="125" src="Affiliate Image URL" height="125"/></a></center></td> <td><center><a href="Affiliate URL" rel="nofollow"><img border="0" alt="Image Text" width="125" src="Affiliate Image URL" height="125"/></a></center></td></tr> </tbody></table> <table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><tbody> </tbody></table> </div>


5. Replace the Affiliate URL with the Affiliate URL of your product. Replace the Affiliate Image URL with URL of the Banner and  Replace the Image Text with some Text or name of the affiliate product e.g if you have placed the affiliate banner of hostgator webhosting write hostgator etc.
6. Save it.
Now when you will view your log you will be having four neat looking 125×125  ads place. you can change the number of ads/affiliate bannesr as per your need.You can also change the background color by changing the background color code bgcolor in the code. you can also change the width of space carrying the 125×125 ads/affiliate banners by simply changing the width in the code.

Method 3:


Step 1:

Log in to your Blogger Dashboard and Navigate to Template->->-> Edit HTML.


Step 2:

Copy below code and paste it just before the ]]></b:skin> code.
.adslot {
border:2px solid aliceBlue;
margin:2px;
}

Step 3:
 Now Go to Layout ->->->Add a Gadget->->->HTML/JavaScript Gadget.

Give Title Name as "Sponsors" or Whatever else you want to put.Paste below image code in the content area and save your widget.

<img border="0" class="adslot" alt="Advertise wit us banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmZQOPmrxwRk6QvQJ6vPBPQMXJiLuROgwV3ITvLMH6MjxFyS29oAVQgvf5sDKQnOH1mFQboF3FJgkiaEWJ5hhET9Eyp3DlcXlBPpmmliPcLBi6s6A9ZST3ZFUurAYWaH_ClKbEaFruAA/s400/AdSpace+120-125.png">

Note: Repeat above given image code 3 times and you will be able to see 4 Advertise here banners on your blog.
 or you can use different images like these




<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfQAgaxStXXIBwf4LVD1ePXSLuajZNDSuKHc5J9WImJHEEnV5yHiGl3XgXVNcHnjMrB8_RHbTF9f2Uw6Ea3L4YGjA9yo0WTY4eDrv4DW8PMCWfUqpmlHSkDv1D38vOSUDkW_vC7iPju3g/s800/Advertise+Here+Money.png" alt='Advertise Here
Banner' />

 <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPjpRBKgjiA9dvAbZBe2tWZLGIQjjYJvo3YKcYJIgSbiqztn9YxHWVpJpJakWjaRo0ULZFTnMzBzDi4iNIExXAAxdjz-g7HKXI7y4vMAwtVFrgULKPg7ehVQ6cjtW1QhQa56r8cywr-RSr/s1600/125x125ad.png" alt='125*125 Ad spot banner' />


<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_Ozz6XrzLF-CG5ThGU9bsS3HM8DvN44TxcPqq89RMfbVgn6ArV9VvNlBjJw10U8SxTzvIpvmC5onLzgSWVtcHQp-9O2o-prJXHZWAMBcfdUXn9w-vwnjq-GohHDC4owhituttLUAhPmP/s1600/banner_125x125.png" alt='Banner 125*125' />

  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-QPiTT8md1A5kLwYkLZeTpsGO0Q-lllqOUqLy_HwsbqJ6Xz5ryRUkWA6FuaW0MsQxLhyphenhyphentlVin1S1regjgxIUKwhMgL7aBk_x_GOapiM86OYOgRnXZx3Vh5WOW6e8cElXSwTSrLfJZA92y/s1600/125-advertise-banner.gif" alt='HTML Code for Ad Banner' />


  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-8HRFHsMLOVvbGTUHz0qAURkli6cHF4DUVJ5MdD4h86wKMBJuXBQJvjOSgDba0HNXCdhcduaa9zCmRbi9tfhe9FxQCyubsecPdVkWL9V-DhSBP01dGk96N8Uc8f6-JAa3mNDvuPKetoV/s1600/Ad-Banner.jpg" alt='Ad Banner HTML Code' />




Continue Reading...

Monday, July 30, 2012

How to Display Post Title Before Blog Title for Search Engine Optimization.

,




Default blogger page title settings are not Search Engine Friendly thus creating a hindrance in indexing and optimizing your blog by search engines.Google only shows a maximum of 70 characters in the title results so it is very important to show your post title before your blog title to get target readers.

Here are the simple steps through which you can display blog post title before blog title.

1)Open Blog options>>>Template.

2)Backup your template.

3)Click on Edit HTML.

4)Search for the below given line.(press CTRL+F for quick search)

<title><data:blog.pageTitle/></title>
5)Now replace the above searched line,with the following code.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

6)Preview your template.

7)Save.

You are Done.

Continue Reading...

Saturday, July 28, 2012

Link Within:Smart Way to Show Related Posts in Blogger

,

 
LinkWithin is a new and awesome blog widget that appears under each post, linking to related stories from your blog archive for easy access.It retrieves and index all stories from your blog archive making them accessible to new or casual readers of your blog who would not otherwise encounter them.

The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.

This widget is absolutely free and ad-free as well.No sign up required.It only takes a minute to get the widget up and running on your blog.



Here i will not make any tutorial about it because you will find a step by step guide on the Link Within page about installation method.I just wanna let you guyz know about this superb feature.


After installation it will look something like this.
(Image belongs to The Recipe Corner ).







Continue Reading...

Friday, July 13, 2012

How to Create Extra "Add a Gadget" Slot in Blogger.

,
 add header extra slot

Most of the two column blogger templates come with 3 ADD A GADGET slots.It is very useful to have extra Add a Gadget slot in the blog especially in the Header.Many bloggers want to post there advertisements , special offers or Marquee in/below the blog header but due to absence to this feature,they have to discard the whole template.

 

Here is example of a Blog which does not have an extra add a gadget slot in header But within 5 minutes you can add an extra slot anywhere you want with this little tip.
add a gadger slot


 1)Go to Dashboard>>Design>>>Edit HTML.(Always backup your template by downloading the full template just in case you mess up the things)

2)Click on Expand the Template.

3)Look for showaddelement.(Tip:press CTRL+F to open a search bar...then paste desired term over there for quick search).

4)Change showaddelement='no' to showaddelement='yes'.

If there is a maxwidget='1' in front of showaddelement then change it to  maxwidget='2' or leave it as maxwidget='' for unlimited number of slots.

5)Now "Save the template".

Here you can see same blog with an additional add a gadget slot on top of the header.




Continue Reading...

Sunday, May 6, 2012

Introduction to Blogging and Types of Blogs.

,


What is a Blog?


A blog is a website in which items are posted on a regular basis and displayed in reverse chronological order. The term blog is a shortened form of weblog or web log

Authoring a blog, maintaining a blog or adding an article to an existing blog is called “blogging”. Individual articles on a blog are called “blog posts,” “posts” or “entries”. 
A person who posts these entries is called a “blogger”. A blog comprises text, hypertext, images, and links (to other web pages and to video, audio and other files). 

Blogs use a conversational style of documentation. Often blogs focus on a particular “area of interest”, such as Washington, D.C.’s political goings-on. Some blogs discuss personal experiences.Source

Basically blogging is widely used nowadays to share your thoughts and to connect like minded people having similar interests.


Different Types OF Blogs: 


1)Personal blog – This is the most famous type of blog.A lot of people are using their    
 personal blogs to generate income directly or drive traffic to another website.

2)Cultural blog – Discusses all about music, arts, theater and other popular culture.

3)Topic blog – Focuses on the function like some of the search engines present now.

4)Business blog – Talk about the stock markets and other business related topics.

5)Science blog – It is the mode used to disseminate information and data.

6)Collaborative blog – This kind of blog is written / managed by two or more authors.

7)Eclectic blog – It focuses on niches individually or collaboratively made.

8)Educational blog – Usually used by students to post articles, research papers or their findings.

9)Directory blog – Focuses on particular news and happenings.

10)Forum blog – Allows two or more bloggers to post discussion on the net.




 

Continue Reading...

Protect Content-Disable right click on Webpages.

,


By disabling right click you can protect your important information,images or source codes.It will only take a few minutes to complete the whole process by inserting a few lines of JavaScript in your blog.With this trick you can disable right click on all pages and posts however you can also use it to disable right click on certain pages.This trick is used by bloggers especially to protect their images from blog readers.

Here are simple steps on how to disable right click in your blog or website? 

1)Go to DashBoard>>>Design>>>Edit HTML>>>Backup Template(Skip the first step if using independent website than Blogger)

2)Search this code in Template(use CTRL+F,for quick search)

  </head>
3)Now paste the below given code before the searched line.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
//]]>
</script>

4)Save Template...Check you Blog.


Continue Reading...

Friday, April 20, 2012

Mashable like Floating Social Media Buttons for Blogger.

,


Social Media is a very popular way to get free traffic for your blog or website.There are so many social media sites available on Internet that if used properly,they alone can boost your revenue by generating handsome amount of traffic.Some very popular sites are facebook,twitter,stumble upon,digg etc.


Not only your shared links but your readers shared/posted links also play an important role in getting higher position in search engines.The more people share your site,the more traffic you get.But this process of sharing posts and favorite pages is very hectic which many people avoid.No worries now,here i am presenting a quick solution to this common problem of bloggers and readers.Now your readers can share and like the posts without leaving your blog.

Here is a tutorial on how to add a Mashable-Like Floating bar of social media button to a blogger blog.
 
1)Go to Blogger DashBoard.

2)Go to Design >> Page Elements.

3)Click Add A Gadget.

4)In Add A Gadget window, Select HTML/Javascript .

5)Copy the below code and paste it inside the content box.


 <!-- floating page sharers Start http://toolsandhacks.blogspot.com/-->
<style type="text/css">

#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Get this from http://toolsandhacks.blogspot.com/">

<div class='sbutton' id='fb'>

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</div>

<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</div>

<div class='sbutton' id='su'>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>

<a class="DiggThisButton DiggMedium"></a>

</div>

<div class='sbutton' id='gplusone'>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall"></g:plusone>

</div>

 <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://tutorialsandtricksforall.blogspot.com/2011/08/how-to-add-floating-social-media.html/">widget</a></div><!-- Do not remove this link -->
</div>

<!-- floating page sharers End -->

6)Save the gadget.

7)Drag the gadget and reposition it as per your choice.

8) Click Save button on upper right corner.

You are Done!!! 

Continue Reading...

Latest Animated Flying Twitter Bird Gadget For Blogger.

,


This awesome flying twitter bird widget is very popular among bloggers and readers.

 This widget is visible on all pages.It contains both current page title and URL for example if you are on a label page then the tweet automatically contains Label Name and text.This is a two-in-one widget:providing facility to share tweets on your wall and following the author at the same time.

Here is a quick tutorial on how to add a cute flying twitter bird to your blog/website.

1)Go to Dashboard>>Design>>Edit HTML
2)Back Up your template.
3)Search for </body>.(Use CTRL+F for quick search).
4)Change the given user name(in red) with your twitter username in the below given code and place this code just before the above searched  </body> tag.

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js"></script><script type="text/javascript">vartwitterAccount = "Uphoricdysforia";var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";tripleflapInit();</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Tech Tips and Info' href="http://techtipsandinfo.blogspot.com/" target='_blank'>Blogger Widgets</a></span>

5)Save the template.


Continue Reading...
 

Tips and Tricks Center Copyright © 2013