Cari Blog Ini
Tampilkan postingan dengan label Edit HTML. Tampilkan semua postingan
Tampilkan postingan dengan label Edit HTML. Tampilkan semua postingan

Jumat, 16 Agustus 2013

Increase Blog Traffic Using H2 Tags For Better SEO Tricks In Every Post

In this tutorial i am going to tell you how to add H2 tag in every post for better optimization and get organic traffic from search engine. Remember always organic traffic get better CPC in Google Adsense it is also a best and good more earning tricks. Now i am going to give you this easy trick.

To change post titles default H3 tag to H2 Heading Tags then follow the steps below.



  • Go To Blogger.com.
  • Go to Template.
  • Go to Edit HTML.
  • Press Ctrl+F for search H3 tag.
  • When you press Ctrl+F in HTML Body the Search box is appear on top right corner.
  • In the box Search for .post h3
  • Replace it with .post h2 (keep replacing that for all occurrences of .post h2)
  • Then search for.

<h3><data:title/></h3

 <h2><data:title/></h2>


Now save your template.

And enjoy you make a big change in your blog and you get organic traffic a lot definitely but this trick take a time also you can also use big heading in your post. These heading tag set for search engine means when you write a post then in search engine your h2 heading is appear.

Now keep visiting my blog and get more details and tricks about blogging and if you can't understand something then give comment on my blog the i must reply with my best answer.


Related Articles:

To change post titles default H3 tag to H2 heading Tag then follow the steps below, - See more at: http://www.helperblogger.com/2012/03/increase-traffic-by-using-h2-tag-as_05.html#sthash.EaKx7n4E.dpuf
To change post titles default H3 tag to H2 heading Tag then follow the steps below, - See more at: http://www.helperblogger.com/2012/03/increase-traffic-by-using-h2-tag-as_05.html#sthash.EaKx7n4E.dpuf
di Tidak ada komentar:
Label: , , , , , , , , , , , , ,

Minggu, 28 Juli 2013

Best Social Sharing Tool Box With Share Post Count Below Every Blog Post

In this tutorial i will show you how to Add Cool Shareaholic Sharing Icon below every article in blogger and which also tell how many time post is share on Social Media or Social Sites.

Best Social Sharing Tool Box With Share Post Count Below Every Blog Post
Best Social Sharing Tool Box With Share Post Count Below Every Blog Post
Now i am going to tell how to Add this on your blog posts. If you have already adding Social Sharing Widget/Gadget on blogger then remove it and replace with this widget because it is very simple show able and also occupies less space comparatively to other sharing widgets. It is a tool tips with Hover Effect means when some one place mouse on these icons its rises and also shows the sharing number of posts on social websites.

WordPress Best | Easy Plugins Installation List For SEO And Make Professional Wesbite After Blogger
Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect
Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

How To Add Shareaholic Sharing Icon on Blogger:


Follow my below tutorial and do same as my posts tell.

Go to Template.
Click On Edit HTML.
Press Ctrl+F in HTML Body Box.
When search box is appear in right to corner then paste below code/tag in it and press enter.

]]></b:skin>

When you find this above code then copy below coding and paste it just above/before ]]></b:skin> tag.


div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}
Shareaholic
Shareaholic

Now find another code in your template for adding Social Icons on below post or Footer of your blogger blogspot.

<div class='post-footer'>

When you find this code line then copy below given code and paste below this above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='shr_class shareaholic-show-on-load'> </div> <script type='text/javascript'> var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @trickofblogging&quot;}}; </script> <script type='text/javascript'> (function() { var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true; sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;; var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s); })(); </script><a href='http://trickofblogging.blogspot.com/' target='_blank'>Social Bookmarking Gadget</a></b:if>

Replace Red Highlighted Color my twitter page with your Twitter page by replacing name.
Now Save your template.
Click on view blog.
And you have done.

If you feel any problem about this widget or other gadgets for adding in your blog then submit your comment and get a beautiful and helpful answer.

Related Articles:


di Tidak ada komentar:
Label: , , , , , , , , , , , , , , , ,

Senin, 22 Juli 2013

Add | Give Comment Numbering On Blogger Threaded Comments Using Best Tricks

In this tutorial i will show you how to Add Comment Number with every comment using beautiful images or bubbles and also give number to every comment. It is very simply to add comment numbering in your blogger template and also very helpful because you can easily find how many comment you have to every post. It will add numbers like this way 1,1.a,1.b,1.c,1.d and so on you can easily see in a screenshot which is given below in image. This is done with CSS Tricks if you want to do this then follow my below small tutorial for adding this beautiful trick on your blogger comments.

Add Best Comment Numbering In Different Bubbles:


Go to Template.
Click on Edit HTML.
Now Press Ctrl+F in the HTML Body Box.
When you Press Ctrl+F then Search Box is appear top right corner.
Copy below Code/Tag and paste in search box and press enter.

]]>
]]></b:skin>

When you find this above tag in HTML Body then add below code just above/before this ]]></b:skin> tag.
Add | Give Comment Numbering On Blogger Threaded Comments Using Best Tricks
Add | Give Comment Numbering On Blogger Threaded Comments Using Best Tricks

.comment-thread ol {
    counter-reset: countcomments;
}

.comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 22px;
    color: #555555;
    padding-left: 10px;
    padding-top: 3px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1fjXcH8hUJ4g8DuUcbI789AMyJDBTzg8vl0UiBH_3_5n4QqsVY5iREus81vIaJOpXzBZx9ZIIC5IPGKFm50tGHlwzxoqZ2PUnaGkPBmoAYm2TMSmtdM62EbqL2qQ5oGnXPf3mPwVaz77/s1600/comment+bubble2.png) no-repeat;
    margin-top: 7px;
    margin-left: 10px;
    width: 50px;
 /*image-width size*/
    height: 48px;
 /*image-height size*/
}

.comment-thread ol ol {
    counter-reset: contrebasse;
}

.comment-thread li li:before {
    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
    counter-increment: contrebasse;
    float: right;
    font-size: 18px;
    color: #666666;
}

Now save your template and you are done and now turn to customization in blogger comments by replacing bubbles.

Customization In Comment Number In Bubbles:


padding-left: 10px; - Edit it to adjust the position of text(number) from left size
padding-top: 3px - By editing the value you can adjust the position of text(number) inside bubble from top.
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1fjXcH8hUJ4g8DuUcbI789AMyJDBTzg8vl0UiBH_3_5n4QqsVY5iREus81vIaJOpXzBZx9ZIIC5IPGKFm50tGHlwzxoqZ2PUnaGkPBmoAYm2TMSmtdM62EbqL2qQ5oGnXPf3mPwVaz77/s1600/comment+bubble2.png) no-repeat; - If you want to change the bubble image then simply replace image URL with yours.
margin-top: 7px; - By editing this value you can adjust the position of bubble from top.
margin-left: 10px; - Increase or decrease the value as per your requirements.


Bubbles Image URL For Adding In Comments:


Now i am going to give you some shapes, images or bubbles which you can easily add in your blogger comment for adding these bubbles shapes Copy the URL of bubble images which you want to add and replace with red highlighted text or url and then save it. How to pick the URL of image? Your Answer is here. Right Click on your desire picture which you want to add and click on view image in your browser and copy the url in your browser and paste it.



Now save your template and you are done.
It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies,you can see a screenshot below in image. - See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.Gv0yep4S.dpuf
It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies,you can see a screenshot below in image. - See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.Gv0yep4S.dpuf
It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies,you can see a screenshot below in image. - See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.Gv0yep4S.dpuf
It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies,you can see a screenshot below in image. - See more at: http://www.helperblogger.com/2012/08/add-numbers-to-blogger-threaded-comments.html#sthash.Gv0yep4S.dpuf

Related Articles:


di Tidak ada komentar:
Label: , , , , , , , , , , , , , , , , , ,

Selasa, 28 Mei 2013

Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger

Add or make simple CSS Drop Down Menu like WordPress on Blogger Blogspot.If you want to put drop down menu on home page then this tutorial is very simple and easy to make drop down links which you want to show. Like if you have too much pages on home page like Blogger Widget, Blogger Tutorials, Boost Traffic or also you have embed some blogger tools like Adsense Converter, Color Code Generator/Picker then you can easily make pages behind this means make pages and hide it and make drop down menu manually to make your blogger beautiful and when visitors comes on your site or blog then they easily find which they want like if visitor comes on site and he/she find HTML Color Code Generator then he/she go to tools and simple find then Color Code Picker.


Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
       
How I Can Write 100% Original Content For Blogger
How I Can Use Webmaster Tools Properly For Blogger
How I Can Boost Traffic With Targeted Country On Blogger  

What Is The Advantages/Benefits To Add Drop Down Menu On Blogger:


By adding drop down menu on blogger your visitor is easily find which they want and which they want to do. It is a simple steps which is every one find first if they can not find then they also left the blog and go to another to find simple steps and not fell in complex means if you make the pages with beautiful heading and put good links then 100% visitor are stay on your site my suggestion is that every blogger should add this amazing working on your site or blog.

I have simple and easy tutorial to add Drop Down Menu by editing your self and it is also very easy and also this effect make your blog perfect. For adding this widget follow my below tutorial.


Adding Drop Down Menu With Best Simple Blog Tricks:


Now we are going to add the drop down menu on your blog by hide the pages and make drop down using this pages.

Go to Blogger.com
Go to Template.
First Download your Full Template on your computer. Because if you make wrong changes then you can easily upload your full template and your blog come to again their position.
When you download your template.
Click On Edit HTML. Keep in mind There is New HTML Interface if you not working before this features then click this link and learn how to handle it.

How I Can Handle New Interface Of Blogger HTML Editor

When your in position to work it then according to above link tutorial click Ctrl+F to find below tag.

]]></b:skin>


When you find this tag then above/before it paste the below code.


/*----- TOB Drop Down Menu ----*/

#mbtnavbar {
    background: #04B431;
    width: 1000px;
    color: #FE2E2E;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #FE2E2E;
        height:45px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:45px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #190714;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #190714;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
  
      
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 234px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 136px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #FE2E2E;
    width: 120px;
    color: #190714;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
  
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #00BFFF;
    color: #190714;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Now Save your Template.
You have done.

How I Make My Blogger Good Looking Best Tricks
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank
How Remove Photos/Images Border In Simple Or Awesome Inc Templates Blogger

Adding Links Of Pages In HTML/Javascript:


Now it turn to add links in of pages of drop down menu its very simple and customizable any time and add new links any time it you choose only template embed links then it has big disadvantage. Disadvantage is when ever you want to make new link then you will go to template it also effect the template files that's why i choose this type of drop down menu when you want to add then just go to layout and then gadget and go to HTML and do that what you want.

Copy the below code and replace # this Hash tag with your page or post links and also change the heading. Like Get Social Bookmarking Button with your desire heading.

<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
        <a href="http://trickofblogging.blogspot.com/">Home</a></li>
<li>
<a href=" ######### ">Blogger Widget</a>
<ul>
<li><a href="#">Get Social Bookmarking Button</a></li>
<li><a href="#">Recent Post Code</a></li>
<li><a href="#">Page Navigation Code</a></li>
<li><a href="#">Facebook Like Button Code</a></li>
</ul>
<li>
<a href="#">Blogger Tutorials</a>
<ul>
<li><a href="#">Google Page Ranking 2</a></li>
<li><a href="#">Improve SEO</a></li>
<li><a href="#">Blogger Analytics</a></li>
<li><a href="#">Social Bookmarking Blogger</a></li>
</ul>
<li>
<a href="#">Blogger SEO</a>
<ul>
<li><a href="#">Boost Traffic</a></li>
</ul>
<li>
<a href=" ######### ">Blogger Tools</a>
<ul>
<li><a href="#">Google Adsense Converter</a></li>
<li><a href="#">Color Code Generator </a></li>
</ul>
</div>

When you put or add links then paste it by doing according to below tutorial.

Go to Blogger.com.
Go to Layout.
Go to Gadget.
Click Add A Gadget.
Go to HTML/JavaScript.
Paste the code in HTML box.
Save this box.
You have done correctly.

Now if you want to add drop down menu for blog post or between the post then follow the below link to add the drop down link menu in blog post.

Add A Simple Drop Down Menu To Blogger Blog

Now according to second code where i highlighted the text how to replace easily.

To change the Background Color of Drop Down Menu simply add your desire color code  #04B431. 
To change the Color replace the code #FE2E2E.
To change the Color of Text replace the code #190714.
To change the Font of Drop Down Menu replace font:normal 12px Helvetica, sans-serif.
Now your work is complete if you face any problem then comment me without any hesitation.

To Generate The Color Code click go with this link.   Color Code Generator Tool


Related Articles:




 
di Tidak ada komentar:
Label: , , , , , , , , , , , , , , , , ,

Senin, 28 Januari 2013

Affilate Banner Put Below in your Blogger Post

In today's Blogger tutorial you will learn just how easy it is to place an affiliate banner at the end of each post of a Blogger Blog (Blogspot blog). This is a relatively easy task but does require adding a short snippet of code to your Blogger Template. For those new to Blogger or without much technical knowledge don't worry as I have broken down the steps so that any one can follow them even virtual beginners.

 

How to Add an Affiliate Banners Below a Blogger Post:
The Instruction below will place an [affiliate banner] below each post in your blog. The banner will appear on all pages including the home page. If you want faster loading times and the banner to appear only on individual post pages see tips and troubleshooting below for instruction on how to restrict the banner display to post pages only.

  1. Login to Blogger if not already logged in.
  2. Navigate to Design > Edit HTML.
  3. Backup your Blogger template as a precaution by downloading to your computer.
  4. Check the Expand Widgets Template Box.
  5. Find the following lines in your Blogger template with CTRL + F to bring up the search box.

<div class='post-footer-line
post-footer-line-3'/>
</div>

                 

6. Paste your affiliate banner code between these two lines.

           
<div class='post-footer-line
post-footer-line-3'/>
Place the Affiliate Banner Code Here
</div>

Once you have finished your code should like something like the following which places a horizontal like banner (468x60) in the post footer but any size banner can be inserted below each post provide your template is wide enough to accommodate it:

<div class='post-footer-line
post-footer-line-3'/>
<a
href='https://chitika.com/publishers.php?refid=
XXXXXX' style='text-decorate: none;'
title='Get Chitika | Premium'><ima alt='Get
Chitika | Premium' brorder='o'
src='http://scripts.chitika.net/eminimalls/logos/
468x60.png'title=Get Chitika | Premium'/><</a>
</div>
         
7. Save Template:

8. Click on View Blog to see your New Affiliate Banner in Action.

9. Get Chitika Premium:


10. Tips and Troubleshooting:

 


If your template does not have these lines kit may only have tow post footer lines in which case you can do one of two things.

           Add these lines to your Template:
         
<div class='post-footer-line
post-footer-line-3'/>
Place the affiliate banner code here
</div>

Or place the affiliate banner code between the following lines:

<div class='post-footer-line
post-footer-line-2'/>
Place the Affiliate Banner Code Here
</div>

If you would like the banner to appear below your post only on the post page and not the home page then you will need to add an if statement to the code as follows:


<div class='post-footer-line
post-footer-line-3'/>
<b:if cod='data:blog.pageType = = "item"'>
Paste Affiliate Banner Code Here
</b:if>
</div>

If you are having problems adding the affiliate banners code to the template make sure that only single quotes are used. The Blogger Template Code is sensitive to this and usually doesn't accept double quotes.
             
di Tidak ada komentar:
Label: , , , , , , , ,
Langganan: Postingan (Atom)