Keep Update

Enter your email address:

Delivered by FeedBurner

Subscribe to Blogging Arena by Email

Monday, November 21, 2011

How To Create Page Number Navigation on Blogspot.com

On this occasion I will try to share simple tips to beautify the look of your blog. The following tips are ways How To Make Page Number Navigation. With the following menu will make the visitors and readers of your blog is easier to know the content of your blog. Here are the steps :

1. Login to your blogger dashboard, then select Design > Edit HTML, do not forget to check the Expand Widget Templates.
 2. Use the search tool ( Ctrl + F ) and find the code ]]></b:skin>, then place the following code before the code ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


3. After that, find again the following code </body>, and place the following code before the code </body>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

4. And last, find again the code 'data:label.url', and replace the code 'data:label.url' with the code bellow
'data:label.url + &quot;?&amp;max-results=5&quot;'
 
5. After that save your template, and the result will be like the following picture
 




















A few simple tips from me, may be useful to beautify your blog. Thank you ^^

Sunday, November 20, 2011

How To Create Page Menu and Sub Page Menu Based On Label On Blogspot.com



On this occasion, I 'll give a try to share tips to beautify your blog. Tips that I will share tips on making the Page Menu and Sub ​​Menu page based on the label that you give to each post on your blogspot, as in the header of this blog.

Here are the steps :
1. Go to your Dashboard menu select Design > Edit HTML , do not forget to check the Expand Widget Templates ,
2. Use the search tool ( Ctrl+ F ) to search for code <div id='content-wrapper'>

3. Copy the following code and place it just above the code <div id='content-wrapper'>

<li><a href='#'>Blogspot</a>
<ul class='children'>
<li><a href='label blog URL'>Free Template</a></li>
<li><a href='label blog URL'>Tips and Trick</a></li>
<li><a href='label blog URL'>Tutorial</a></li>
</ul>
</li>

<li><a href='#'>Wordpress</a>
<ul class='children'>
<li><a href='label blog URL'>Free Template</a></li>
<li><a href='label blog URL'>Tips and Trick</a></li>
<li><a href='label blog URL'>Tutorial</a></li>
</ul>
</li>

<li><a href='label blog URL'>SEO</a>
</li>
       
</ul>
</div>
</div>
<div style='clear:both;'/>

Note : code red is the URL address from your post labels. Code pink is the name of the Page Menu. And the green is a Sub Page Menu.

4. Save your changes. To view the results please preview your blog.

Good luck and hopefully useful to you. Thank you for your visit ^^

Saturday, November 19, 2011

How To Create Menu Add Gadget On Blogspot.com

On this occasion I will give simple tips how to make the menu Add Gadget on your blogspot Page Template. By adding this menu, you can add gadgets to beautify your blog. Here are the steps:

Add Gadget to add in the header. Go to your blogspot dashboard., Then select Design > Edit HTML, and do not forget to check the Expand Widget Templates
Before Changes
1. Use the search tool ( Ctrl+F ), and find this code <div id='header-wrapper'>. And follow this picture below

2. Change the code <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> becomes <b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>. Note: Figures "5" shows the number of gadgets that you can enter. Replace your own.
3. Save your changes and the results are as shown below.
 After Changes
Add Gadget to add in the main body (posting). Go to your blogspot dashboard., Then select Design > Edit HTML, and do not forget to check the Expand Widget Templates. Same like in header
1. Use the search tool ( Ctrl+F ), and find this code <div id='main-wrapper'>. And follow this picture below
<b:section class='main' id='main' showaddelement='yes'>
2. Change the code <b:section class='main' id='main' showaddelement='no'> becomes <b:section class='main' id='main' showaddelement='yes'>
3. Save your changes and check your Page Element.

Good luck and hopefully useful for you. Thank You

Friday, November 18, 2011

How To Create and Setting Feed Burner On Your

feedburnerlogo

Feed Burner is a tool to feed your blog to make it easier for the visitors of your blog to always know the latest developments and post your blog. Additionally Feed Burner as well as one of your SEO tools to further popularize your blog. On this occasion I will try to share how to make the Feed Burner.

1. Got to Feed Burner sites

feedburnerRegister

2. Sign Up and fill out the registration form all boxes

3. Initial setting your feed burner as picture below

feedburner1

feedburner2

4. Name the title of the feed and change the address in accordance with your feed address,

ex: arena-blogging.blogspot.com/feed

feedburner3

keep Next

feedburner4

5. Check the box as picture below

feedburner5

6. Choose Publiceze tab

feedburner6

7. Choose Email Subscription in the left side bar and click Active

feedburner7

8. Copy the HTML code and put in your HTML/Javascript gadget in your Blogspot template

feedburner8

9. Finish and check your blog.

Good luck and hopefully useful for you. Thanks ^^

Thursday, November 17, 2011

How To Create Chat Box on Blogspot.com

On some blogs, you often find a chat box that can facilitate the visitors to communicate directly with the owner or with other visitors who are online. There are several sites that provide chat box for your blog, including the:

1. ShoutMix

ChatBox1

Please sign up Here. After registering, get and copy the code and then go into your blogspot dashboard. Add Gadget and then HTML / Javascript, and then copy the code in the box  your HTML gadget.

2. CBox

ChatBox2

Please sign up Here. After registering, get and copy the code and then go into your blogspot dashboard. Add Gadget and then HTML / Javascript, and then copy the code in the box  your HTML gadget.

And many more other sites. Good luck and hopefully useful for you. Thank You ^^