Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Sunday, December 2, 2012

How to split div in blogspot Make new Div Blogger: web designing tools tip and tricks

Hello All Bloggers Today I will Share with you how to split div in blogspot / Blogger templates. Many blogger webmasters or owner want split single div into many div for many adsense ad formats or buysellads You set your ads here ...
how to split div in blogspot Make new Div Blogger: web designing tools tip and tricks

Here I Give you process step by step  just follow to me to split your single div into many or two or three

 First go your blogger dashboard   Now click in design tab and edit HTML    Expand your blogger template.

Also Read  

How To Adding Paypal Donation Button to Blogger
Buy all top domain name at cheap price : With Free Domain name

* Find out the below code



#header {
margin: 5px;
border: 1px solid $bordercolor;
* Now replace above code with below code
#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:30%; height:200px}
#header3{float:left; width:39%; height:200px}

Note- You can change #header2 and #header3 height and you can change width if you want.

* Now again scroll down to where you see like this code:





<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
</div> 

Note- Remember that YOUR-BLOG-TITLE is your real blog title.

* Now replace above code with below code






<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Change your blog title with your own.

Now save your blogger template now you are done.

Author:Jatin Baliyan is founder and webmaster of Arenamazza.org. You can follow me on TwitterFacebook and on Google Plus..

Wednesday, November 14, 2012

Javascript and html code site search code for web and internal site html code

Hello Friends I share  tool this for anyone that wants to add search functionality to their website, but does not have the technical background to do so. It utilizes Google to do the "heavy lifting", so you do not need a database on your server or run processes to keep your site indexed. So basically, if your site is in Google's index, it will work for you.

 i will give you some searching codes in these you can also get web and site search submit button google logo only site seach just use these code on your html sites

<iframe style="width:220px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org"></iframe>
                                                                                        LOok LIKe THIS
This Code Search engine like this   ====>>
Just Change The site Name And you Can also change width:220px and height:70px


2.

<iframe style="width:300px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org&b=1"></iframe>
                                                                                    LOok LIKe THIS
This Code Search engine like this   ====>>
Just Change The site Name And you Can also change width:220px and height:70px
&b=1 this is the submit button you can add or remove this 

3.

                                                                                                                            <iframe style="width:375px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org&b=1&l=1"></iframe>
                                                                                      LOok LIKe THIS
This Code Search engine like this   ====>>
Just Change The site Name And you Can also change width:220px and height:70px
&l=1 this is the logo of google If You Remove this just remove that code


4.

<iframe style="width:375px; height:35px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org&b=1&l=1&y=1"></iframe>
                                                                                      LOok LIKe THIS
This Code Search engine like this   ====>>
Just Change The site Name And you Can also change width:220px and height:70px
&y=1  Its a only site search and you can also remove google logo by removing this code &l=1



Thursday, October 25, 2012

How To Embed URL,HTML,Forum Links Code below Blogger Posts : web designing tips and javascript code

This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me (http://www.arenamazza.org/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>
4.Now find below code:
<data:post.body/>
5.Copy below code and paste it just after the <data:post.body/>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>If you find this article useful, please feel free to link to this page from your website or blog.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.arenamazza.org/' style='display:none;' target='_blank'>Widget by BloggerTipAndTrick</a></p>
&lt;/div&gt;<br/>
</b:if>
NOTE : Don't change anything in above code.
6.Save your template and you are done.

Sunday, September 16, 2012

How to Add Table to Blogger Blog Post


Currently it is not possible to add table in Blogger post through compose tab because blogger doesn't provide that option. If any one want to add table in blogger blog then it can be added by adding HTML code in HTML body of  Blog post.

How To Add Table To Blogger Post:-

How To Create A HTML Table

First of all we will create a HTML table and later used it with blogger. 

         <table border=1>
         <tr>
                   <th>Table heading 1</th>
                   <th>Table heading 2</th>
                    <th>Table heading 3</th>    
         </tr>

         <tr>
                   <td>Row 1 Data 1</td>
                   <td>Row 1 Data 2</td>
                   <td>Row 1 Data 3</td>
        </tr>
        <tr>
                   <td>Row 2 Data 1</td>
                   <td>Row 2 Data 2</td>
                   <td>Row 2 Data 3</td>
        </tr>
        </table>
How to Add Table to Blogger Blog Post
As you can see through the HTML programming there are three <tr> tag which defines three rows of the table and <th> tag defines table heading wheres <td> defines table data of the table and border=1 defines the border width. Forth row may be easily inserted in it by adding the following code.
<table border=1>
         <tr>
                   <th>Table heading 1</th>
                   <th>Table heading 2</th>
                    <th>Table heading 3</th>    
         </tr>
         <tr>
                   <td>Row 1 Data 1</td>
                   <td>Row 1 Data 2</td>
                   <td>Row 1 Data 3</td>
        </tr>
        <tr>
                   <td>Row 2 Data 1</td>
                   <td>Row 2 Data 2</td>
                   <td>Row 2 Data 3</td>
        </tr>
        <tr>        
                   <td>Row 3 Data 1</td>
                   <td>Row 3 Data 2</td>
                   <td>Row 3 Data 3</td>
        </tr>
       </table>
How to Add Table to Blogger Blog Post
How to Add Table to Blogger Blog Post

How to Add HTMl code to blogger Post:

  1. In blogger dashboard.
  2. Create a New post.
  3. And Paste the HTML code in Edit HTML page.
How to Add Table to Blogger Blog Post
So you seen that how easily one can easily add a table to post without any knowledge of HTML. If anyone find difficulty in placing the HTML code then comments are always open for that.

Saturday, September 15, 2012

INCOMING SEARCH TERMS FOR BLOGGER PLUGIN

blogspot templates cute blogger templates simple blogger templates google blogger templates blogger layouts blogger templates html blogger templates
A FEW EASY STEPS TO GET YOUR OWNINCOMING SEARCH TERMS FOR BLOGGER PLUGIN.blogspot templates cute blogger templates simple blogger templates google blogger templates blogger layouts blogger templates html blogger templates
(update 25 August 2012: Since this incoming search terms plugin and post became viral, I have received many offers to affiliate myself with a plugin that is sold to this community. So far I have not found one worthy to bother your guys with. But I will certainly make sure to keep you posted)

Until now, it has never been possible to do so, because this blogger script required you to run PHP. Well there is a work around. Not only does it require hosting php scipts on a google site, and some amazing javascript skills, we got as close as possible to generating Incoming Search Terms for your blog at blogspot.

Follow these 6 steps to get your own "incoming search terms" for Blogger:
  1. Go to Layout.
  2. Click on Add Gadget.
  3. Select HTML/JavaScript.
  4. Enter a title like: Incoming Search Terms.
  5. Copy and paste the Javascript code below:

    <script src=" http://yourjavascript.com/60941151562/incoming-search-terms-blogger-plugin.js " type="text/javascript">
    </script>
    <script type="text/javascript">
    write_ref(92073);
    </script>

  6. Click the Save button and voila !
It will take time to gather backlinks, but with time you will understand how the search terms pluggin works. 

This is a list of all blogger incoming search terms throughout the first few weeks of this blogs existence. 
I know its nothing to brag about, bout many people have asked me how to make incoming search terms blogger gadget, plugin or widget. Well the truth is that it is not possible yet as in wordpress. So this is the closest we could get.

How To Increase Blog Traffic By Dofollow Backlinks

Whenever we talk about SEO, some common works came in our mind like nofollow,dofollownoindex etc. Here we will learn the importance of nofollow and dofollow attribute in link building. Google page rank secured by any blog depends on the dofollowbacklinks developed on different sites. You can boost your page rank by creating backlinks with blogs or sites which have good page rank.

When we comment on a high PR dofollow blog then we get a free backlink that will help us to increase in Page rank or Alexa rank. 


How To Increase Blog Traffic By Dofollow Backlinks

What Is Dofollow or Nofollow

Nofollow is a HTML attribute of anchor tag. This attribute do not allow search engine to follow the link only human can follow your link. If any website linking back to you with Nofollow attribute then search engine will not follow your link or in simple words search engine will not consider your link while determining your page rank. Hence that link is useless for you.

Example of Nofollow link-


<a href="http://www.blogger.com" rel="nofollow">Blogger</a>

Dofollow is also a HTML attribute tag and it allow search engine to follow the link. Page rank of blog and website is governed by the number of high quality dofollow backlinks created by blog or website on another blog or website, which have good page rank ( page rank 5, page rank 6 page rank 7 ).

Example of Dofollow link


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

How To Make Blogger Comments Dofollow

To prevent our blog from spamming, blogger automatically add nofollow attribute to all comments. But if you want to increase the number of comments in blog then to attract visitors you have to make your comments dofollow by making small modification in template.

In blogger template search following piece of code


<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
And change it to


<a expr:href='data:comment.authorUrl'><data:comment.author/></a>

Save your template.

How To Increase Google Page Rank And Alexa Rank

As stated above, Increase in number of dofollow backlinks will result into decreasing Alexa rank and increasing page rank which will boost your blog traffic. So the list given below contains website and blogs which have dofollow backlinks.

List Of Forum Having Dofollow Backlinks

The Forum given below allows you to create dofollow backlinks just make an account in it and answer to discussed question with your blog URL.
  1. Capital Forum 
  2. DevianArt
  3. HTML Forum
  4. phpBBForum
  5. Webhosting Forum
  6. SiteOwner Forum
  7. MyGame Builder Forum
  8. File Sharing
  9. Domain Name
  10. CNET Forum
  11. JoomlaForum
  12. MySql Forum

Blogs Having Page Rank 7

  1. http://www.educause.edu/blog
  2. http://dig.csail.mit.edu/breadcrumbs/blog/4
  3. http://pressblog.uchicago.edu/
  4. http://blogs.nyu.edu/fas/dri/aidwatch/
  5. http://delong.typepad.com/

Blogs Having Page Rank 6

  1. http://weblogtoolscollection.com/
  2. http://socialtimes.com/
  3. http://eartheasy.com/blog/
  4. http://themallblog.com/
  5. http://interactiondesign.sva.edu/
  6. http://hurryupharry.org/
  7. http://thevirtualhandshake.com/blog/
  8. http://blog.photography.si.edu/
  9. http://justintadlock.com
  10. http://businessfinancemag.com
  11. http://jiscdigitalmedia.ac.uk/blog
  12. http://brazencareerist.com/
  13. http://moritzlaw.osu.edu/blogs/tokaji/
  14. http://themallblog.com
  15. http://blog.mofuse.com/
  16. http://midasoracle.org/
  17. http://carlgalloway.com/
  18. http://currybet.net/
  19. http://www.burningbird.net/
  20. http://sirpi.org/

Blogs Having Page Rank 5

  1. http://profitsfinancesite.com/
  2. http://blog.dmbcllc.com/
  3. http://justaddwater.dk/
  4. http://www.hobo-web.co.uk/seo-blog/
  5. http://www.layercake.net/
  6. http://www.communityspark.com/
  7. http://newcritics.com/blog1/
  8. http://www.seobythesea.com/
  9. http://elleeseymour.com/
  10. http://blogs.cetis.ac.uk/asimong/
  11. http://www.knrn.org/
  12. http://links.org.au/
  13. http://www.uncommonphotographers.net/
  14. http://www.krisbuytaert.be/blog/
  15. http://therenegadewriter.com/
  16. http://www.lifeinthefastlane.ca/
  17. http://www.iayork.com/MysteryRays/
  18. http://focusorganic.com/
  19. http://www.oilman.ca/
  20. http://andybeard.eu/

How To Add Google Adsense Between The Post

The money earn by Google Adsense directly dependent upon the placement of ad. Ad's place on main part of the blog means around your blog article, generates more money in relative to other parts. There was no method to be seen which allow blogger user to place ad in between the post. Finally, I got the way to display Google Adsense ad between the blog post. So lets increase our revenue.   

How To Display Adsense Ad Between The Post:-

  1. Get the copy of Adsense ad code that you want to display.
  2. Encode that code through Adsense code encoder then it will look like this
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;ca-pub-0816410872891802&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* Post_upper */
google_ad_slot = &quot;8660306256&quot;;
google_ad_width = 336;
google_ad_height = 280;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;
It simply convert all special characters in the JavaScript into HTML entities mean it converts complex HTML characters into plain text to make it usable in template and comment section.
  • < changes to &lt;
  • > changes to &get;
  • "" changes to &quot;
  • '' changes to &#039;
  • changes to &amp;
  1. In post editor, click Edit /  HTML.
  2. And paste the encoded text in between the content where you want to display Ad.

Please Note:-

If your blog shows Adsense ad code instead of showing of Adsense ad  then there is no need to encode your Adsense code and paste the original ad code to get the desired result.
How To Add Google Adsense Between The Post~to get high revenue from google adsense
In order to display Adsense ad in all the post, you have to add ad code in all the post which will be hesitating to you if your blog have large number of post. Due to this reason I will share this tutorial again which uses JavaScript to display Adsense ad in all the post automatically.