Advertise on TechCreak.com
Showing posts with label Blogger Tricks. Show all posts
Showing posts with label Blogger Tricks. Show all posts

How to Place AdSense Ads anywhere in Blog Posts.

adsenseHere It will be explained, how to place AdSense ads anywhere in blog posts. You can place ads at left, right or center of blog post. So by implementing this tutorial, you can increase CTR in your blog and ultimately increase your AdSense earnings. To place AdSense ads anywhere in blog posts, Just follow simple steps given below:-

First Go to your Google adsense account >> My ads >> New ad unit

Design your ad and Save the changes and Copy generated code.

Now you can’t place this copied code directly in xml of your blog. Firstly you have to parse this code

Just visit link given below and paste your adsense code copied in text box  and click on parse.

                                Parse Your Adsense Code Here

Copy the new parsed code.

Login to your Blogger Account.

Go to Dashboard >> Design >. Edit HTML

Click on Expand Template Widgets option.

Press Ctrl+F and find this code <data:post.body/> in HTML of your blogger template.

Now replace above code with the code given below.
 

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- Your AdSense code --> </div>

<div expr:id='"aim2" + data:post.id'>
<data:post.body/> </div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script>


Remove text Your Adsense Code  with your AdSense parsed code.

Now clock on Save Template.

Now Go to Dashboard >> New Post

Write your post.

Click on Edit HTML

Place code <!—adsense -->  at the place where you want to display adsense ad. After this step don’t go to compose mode. Just publish blog post in HTML mode only.

Now Your blog post has been published and adsense ad has been placed at required place. So you can place adsense ads anywhere in your blog post to increase CTR. Lastly if you enjoyed this post don’t’ forgot to share it with your friends and Please leave your valuable comments and tell us  whether this tutorial is working or not.


Open Links in New Tab or Window automatically.

New-TabIf links on your blog or website opens in new window or tab, it has many benefits. Your visitors will still stay on your website or blog for longer time. They will not leave your site by clicking that links. Nobody likes visitors to leave their blog or website. If you can make links on your site which opens in new window or tab, Your problem will be solved. You convert text links or image links to open in new window or tab by simple steps given below:-

 

For Image Links

 

If you are using Images as links, then you will be using HTML code given as:

 

<a href="URL" title="TITLE"><img src="Image URL" border="0" width="25" height="35" alt="Description"></a>

 

In the above given code, just place  target="_blank" or target="new" after URL  of the link which opens after clicking on anchor text to open links in new window or tab. As given in below example.

 

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>

 

For Text links

 

Similarly you can open text links in new window or tab by using tag provided above. As given below:-

 

<a href="http://www.blogger.com/" target="_blank">Blogger</a>

 

Enjoy it.


How to Add Customized Fevicon To Blogspot.

blogspot feviconFevicon is a icon just before URL of any blog or website in address bar. In blogspot blogs the blogger fevicon is displayed by default. You can change this blogger fevicon with any image or icon of your choice having animation or without any animation. By using the below steps, You can replace the default Blogger fevicon with customized fevicon.

Design your Fevicon with online free services available. You can search on Google about these free fevicon generator services. Besides this, You can use free ready made fevicons. An animated Fevicon can also be created with the help of these services.

After your fevicon is ready, Host it on some online services available like Photobucket, Imageshack, Flicker etc.

After the uploading or hosting your fevicon, Take URL of fevicon provided by host service used.

Go to Blogger Dashboard > Design > Edit HTML

Now find this piece of code <b:skin><![CDATA[  in the template.

Paste the code given below just above <b:skin><![CDATA[

<link href='PUT YOUR FAVICON URL HERE' rel='shortcut icon'type='image/x-icon'/>


Replace the Text given in red with URL of the fevicon hosted by you in earlier step.


Click on Save template. You will see customized fevicon added just before your blog address in address bar.


How To Restore Deleted Blogspot Blog.

blogger-iconYou will be very frustrated, if You have done much hard work to make a blogger blog and this blog has been accidently deleted by you. Don’t worry, you can restore or recover accidently deleted blogger blog by the simple steps given below.

 

Go to Blogger Dashboard after sign-in into your Blogger Account.

Now you will see Displaying 4 of 5 blogs – Show all at the end of blog list.

 

blogger-dashboard

 

Click on Show all.

 

Your will see as given in below image when you hit on Show all.

 

Undelete-blog

 

 

 

Click on Undelete this blog.

 

Your blog will be restored and you will see the message like this.

 

             Your blog was successfully restored.


How to remove the Blogger Bar or Navigation Bar in Blogspot.

The Blogger Bar or navigation Bar in Blogspot has many utilities like Google search, Follow, Share, and also somebody can go to the random Next Blog.

navbar

You can select different styles for the Navigation bar by going to

Design >> Page Elements and as shown in image:-

nav1

But if you still want to remove or hide Blogger Bar or Navigation Bar,

Go to Design >> Edit HTML

 

design

Now search for the code by pressing Ctrl+F    <b:skin><![CDATA[

Just after this code, Paste the following code 

 

#navbar-iframe { height:0px; visibility:hidden; display:none; }

 

If this still does not work Try this one code:-

 

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

 

Finally click on the Save Template.

Now the Navbar or Blogger Bar will not be visible.


How to add Back to Top button widget to blogger.

Back to top icon is a link on any website or blog which sends the viewer to the top of that web page. Besides this, it adds a good look to your blog or website. It is very simple to add back to top button widget to blogger.
For this purpose, the following simple steps are given below:- 
  • Firstly you should have two arrows images, one small and one bigger.
  • We are giving two type of images given below. Just right click on the images and Click on Save image As to your computer.




  • Upload these arrow images from your computer to Photobucket or any other service.
  • Now go to Blogger > Design > Page Elements > Add a gadget > and add a HTML/JavaScript gadget
  • Now copy the following code and paste in this newly added gadget. 
 
;
  • Replace the text given in capital letters with the link address where the bigger and smaller images are uploaded as indicated in the code. 
  •  Keep the title of HTML/JavaScript gadget blank and click OK.
  • Place this  gadget at lower side of your blog anywhere.
      Save the changes and you will see a beautiful Back to Top botton in your blog.


How to add floating social media widget to blogger.


In the present time, the social bookmarking websites like Facebook, Google +1, Digg, Twitter, StumbleUpon play a major roll on the internet. These websites has a huge number of visitors daily. If you put sharing buttons for these websites on your website, they can drive much traffic to your website. Also your website will be more popular on these social networking websites as well as on the internet.
 In the following tutorial, you will learn to add these floating social media buttons to your blogger in the given simple steps:- 
Firstly you should disable share buttons for the “Blog Posts” widgets enabled by default. If you do not disable this option, the Google +1 button will not work properly.
1. Go to Dashboard > Design > Edit HTML. and search for <head> tag and Paste the following code just below it and Save the template.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>



2. Go to Design > Page elements
3. Add a gadget, Select HTML/Java Script gadget.
4. Now leave the “Title” blank and drag this Gadget to the left sidebar.
5. Copy the following code and paste inside this gadget in content box.


<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><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><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>

<div class="addbuttons"><a href="http://www.hints-and-tricks.com/2011/11/how-to-add-floating-social-media-widget.html " title="How to add floating social media widget to blogger. "><span class="getfloat">Get buttons</span></a> </div> </div>


6. Click on Save. The social media floating widget has been installed on your blogger.
You can see example of this widget on left hand side of this blog.


How to Update Facebook Fan Pages automatically using RSS feed.

Facebook logo 
In the present time, the role of Facebook cannot be ignored in promoting any product, a website or blog. If you have a website, organization or runs any business, You can make Facebook Fan Pages to promote your product on the Facebook. Generally the website or blog is made for promoting any product online and Administrator of the website or blog used to provide the updates about the product on his website or blog. Besides this, the Facebook Fan Page should also be updated accordingly. For this purpose, you can Update Facebook fan page automatically with the RSS feeds of your website or blog explained as below:-

  • Go to your Facebook account.
  • Click on the dropdown arrow next to “Account”.
  • Select the option “Use Facebook as Page”.
  • Click the “Switch” button given in the next instruction.
  • Click on the “Edit Page “option given at the top-right of the page.
  • Click on “Apps” in left sidebar and click the link “Go to Application” under Notes.
  • Click on “Edit import settings” given in the left sidebar.
  • Put your Blog RSS feed address in the web URL box. Confirm this action and follow the instructions given ahead.
  • Now click “Start importing” and Facebook validate your feed URL. In this way all the process is completed.


 
Home | About | Privacy | Proudly Powered By Blogger. | Blogger Template Design By Techcreak Go To Top