Blogging Sentral

Adding Pinterst Follow Button In Blog

2013-01-21T03:23:00.000-08:00

One of my loyal visitor Ishwor asked me how to add a pinterest pin it button in blog. This also probably my second post on pinterest after this. Many visitors were asking me about this. Finally I have written it.

To prevent my loyal visitors from misleading, I have simplified the method to add the pinterest follow button. See the table below;

Pinterest Follow Button;

Follow Button Types	Follow Button Code.
	`<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/follow-on-pinterest-button.png" width="156" height="26" alt="Follow Me on Pinterest" /></a>`
	`<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/pinterest-button.png" width="78" height="26" alt="Follow Me on Pinterest" /></a>`
	`<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/big-p-button.png" width="61" height="61" alt="Follow Me on Pinterest" /></a>`
	`<a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/small-p-button.png" width="16" height="16" alt="Follow Me on Pinterest" /></a>`

Here,

Replace username with your own.
You can use it any where as it works on other platform too. But be sure you switch to HTML mode to do so.

ADDING THE FOLLOW BUTTON;

In Blogger.
- Go to Blogger Dashboard>Layout
- Click on add gadget
- Select HTML/JavaScript
- Paste the Pinterest Follow button code.
- Click on Save
In Wordpress
- Go to WordPress dashboard>Appearance>Available widget.
- Drag text widget to sidebar
- In content box paste the code.
- Click on Save.

Now you have successfully added the button. ENJOY boosting your pinterest followers.

Adding Multi-Level CSS Drop down Menu

2013-01-19T01:53:00.000-08:00

Do like to play with CSS.Yesterday I found a cool site that was just awesome.The site name was CSSPlay.I found a Drop menu which was just Fantastic.So today We are here with how to add CSS drop menu tutorial.In that menu When we hover at tabs it will expand fly out menu will appear.It is just great.It supports up to 4th level as you can see in picture Today we will lean how to add it with easy effort..

To add CSS Drop menu kindly follow us. Lets proceed then;

Adding CSS codes.

CSS is Heart of HTML.To add CSS code you can get instruction from here.

Add the Following CSS code in your HTML.

/*
================================================================ 
This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
=================================================================== */
#menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {background:#3aa3d3;}
#menu ul.level2 {background:#ae4621;}
#menu ul.level3 {background:#c98b14;}
#menu ul.level4 {background:#9f690e;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {background-color:#555555;}
#menu li:hover > a,
#menu ul li:hover > a.fly {background-color:#555555;}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/

Where
1. In Line 5 change the width of CSS that suits your taste. Use measuring tool for measuring the width. You can learn it from here.
2. In line 13,14,15,16 change background-color:#xxxxxx ,to change the colour of level of Drop menu. You can get HTML color codes from here.

Adding CSS Drop menu;

The HTML Code of CSS Drop menu is;

<!-- Dropdown menu Start -->
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>
<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">From Airport</a></li>
<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>
<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
</ul>
</div>
<!-- BloggingSentral.blogspot.com -->
<!-- Dropdown menu End -->

Adding or Removing Tabs.

You may want to add or remove the tabs. In doing so be sure you remove the codes i.e from starting to finishing line completely. The class names used in this dropdown menu’s HTML are listed below. Please apply the appropriate class names when adding tabs.

Class name	To be added to
`level1`	Level 1 `ul` tag
`level2`	Level 2 `ul` tag
`level3`	Level 3 `ul` tag
`level4`	Level 4 `ul` tag
`level1-li`	Level 1 `li` tag with right or no dropdown
`level1-li left`	Level 1 `li` tag with left dropdown
`level1-a`	Level 1 `li a` tag for tabs with no dropdown
`level1-a fly`	Level 1 `li a` tag for tabs with dropdown
`fly`	`li a` tag for tabs (other than level 1) with flyout

Finally now we add it to our blog. Follow these steps;

Go to Blogger Dashboard>layout or Design .
Click on Add a Gadget,Below of header.
Select HTML/JavaScript
Add the CSS Drop menu HTML Codes.
ENJOY.

Bye friends for now.!-:)

Show/Hide Option For A Specific Text

2013-01-17T20:40:00.001-08:00

Hello there. Today I am going to show you an amazing trick in blogger. Your blogs might contain some information that you want to be saw by some people but not by all people ya. Blogger do allow this but it is not so suitable. So here is the suitable solution for it. See the preview below;
Using small JavaScript we can add show/hide effect on text. When we click on that button the text will be shown. Again if the button is clicked the text will be hidden. We can use that effect in Post or In Widget i.e Where we can add HTML.
Here is the live demo of it;

VISIBLE CONTENT HERE

So you wanna add it. It is very simple. Just add the below HTML code.

VISIBLE CONTENT HERE
<div id="spoiler" style="display:none"> 
Add Content To Show/Hide 
</div> 
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

Customization;

In "Add Content to show/hide" replace with your own which is to be shown or hidden in click.
You can replace “Show/hide” text with your own, in line 5.
To use a regular link instead of a button, simply replace the word button with a letter a.

BYE!!

Effective Ways To Earn Money

2013-01-16T19:13:00.000-08:00

Hello friends! A big hug after all this vacation ( kind of) to all out there. These days were really boring and that the most hard part was to remain detached with my friends and buddies. Seems to me that in this short period most things have changed and I am very happy to see that most of my friends now have a blog more upgraded..

As always today I am writing about some effective ways to earn money online and the best part is that it's free and quite easy. And most trusting fact is that they are not FAKE! at all. So shall we begin;

Create a blog;

The first step of it is a creation of blog. I see that most of you have already completed this step. But the key for it's proper completion is to remain sticked with it. The money your blog can make out is determined by your will. If that will ever weakens then soon the pillars of your blog ruins. SO no matter what happens stay sticked with your blog and before you even know, your blog will start to pay you off.

Stay Original;

The main theme of this step is to remain yourself always when you operate your blog. Never copy what others write and say. Using your capability you can create new things even if you share the same topic. The foundation may be same but the concepts of the building must be yours, i.e. original. If you copy of others you will not have the true enjoyment of what blogging truly is and you'll start to fade away from the blogosphere.

Raise yourself among people;

People who are crawling in the internet are the main source of every bit of penny you make online. So you should definitely have a good name amongst the public. You should always gain more followers. So stay tuned in many forums and communities and stay in touch with your visitors. And once you have gained your followers you will have your blog famed. Thus you will be receiving plenty of traffic.

Advertise & Sponsor;

Advertising your site falls in the best time after you complete the above steps. After you get traffic you should advertise your site. Advertising is the best way to earn money after all. Be sure you put decorative advertisements and be cautious about the colour and size of ads. It will attract more people.

Never leave working hard;

You might be able to advertise and earn money but be awared, if you start to become clumsy you will be soon facing trouble. I mean you may be earning low and your visitors might be sucked down just by clicking your ads. So friends mark my words and never leave working hard. See you next time..

Sites Where You Can Get Best Blogger Templates

2012-10-25T07:18:00.002-07:00

As said before we can change the Blogger Template as we change our cloth. Before changing the Template we need to get the Free Blogger and Word Press Templates.

Just a content is not sufficient, Design is also one major idea to increase the visitors. We can get many template as our wish and they are free too. If you want to do so then you can get your dream templates from here.

Btemplates.

Btemplates is the giant collection of high quality Blogger Templates with multiple choice available.

Best Theme.

Best theme is the collection of Blogger and Wordpress Template powered by html5 and css3 .

Best Blogger Template.

Best Blogger Template is the giants collection of template in which mainly new function are found. The author of the Template is Paul Crown who is friend of Blogging Sentral.

Deluxe Template.

Deluxe Template is the collection of Blogger Template which is simple, faster and highly customizable.

All Blog Tools.

All Blog Tools is the collection of Popular Templates same as the other ones, but rather with high defination.

Blogger Mint

Blogger Mint is the both tutorials and Template hosting site where new things can be found. Sometimes I also need to get there for something new.

Measuring The Dimension On Screen

2012-10-25T00:12:00.001-07:00

Are you wondering if you could measure the dimension in a screen so that you can make the layout easily. Using the tools you can measure the width and height in screen easily. You may need this if you want to set dimension of a image or if you are designing a page to set the layout.

I have found this tools named "Measure it”. It is very useful for making daily food in Blogger. Web Designing in More better than this. I have found many people are capturing image and finding width that results a loss of time but the plugins save your time with easy use. If you want to use it then the detail instruction is given Below;

Installing the "Measure it".

Go to frayd.us .
Click on Fx for Firefox , Sf for safari and Cr for Chrome.
The plugin will be downloaded .
Click on Install it .

If you are using Firefox.

In Firefox although the plugins(“Add on” what Firefox calls) is installed you will not able to see the measure it icon for that

Go to Firefox then near back forward icon ( < > ) right click on there like this .
Click on customize you will see like this(Scroll until you see measure it icon).
When you see the measure it icon drag the icon where you want to keep it.
You have successfully added measure it in Firefox.

In Chrome.

In Chrome the plugins will install successfully. But I have identified some bugs in that like layout part of Blogger will not seen because if it. Don’t worry the plugin author has said he will solve the problem soon.

How to Use measure it??

To use the measure follow this.

Click on icon of measure it.
You can see plus curser in screen draw the box from there.
You can notice the width and height of object in screen.
Congratulation you have find the length and height of Screen.

If you have any problem raise question Below.
Enjoy!!

Change The Mouse Cursor In Blog

2012-10-23T09:28:00.000-07:00

Do you want that every thing of your blog just go beyond the expectation of your readers? If you want to do so then it will be probable that you wan to make your blog different than others. There are many ways to do so and one of them is by changing the mouse cursor. Changing mouse cursor attracts your visitors towards your blog.

We can change the mouse cursor as we like. Just we need to add the simple CSS. By adding CSS the mouse cursor will be changed from pointer to the image of cursor as you like.

Downloading Curser.

Before changing the cursor it is probable that you shoudl get the direct link of an cursor image. Get your dream cursor from these sites which hosts vast numbers of cursors;

And host it to photo hosting sites like Picasa, Photobucket etc.

Installing cursor in Blogger.

After getting the link of the cursor it's time to transfer the image. For it follow the steps below;

Go to Blogger.com
Go to Template>Edit HTML.
Find ]]></b:skin> .

Add this code Just above it.

body, a, a:hover ,a:visited { cursor: url(YourCurserUrl), progress; }

Change YourCurserUrl with the direct link of the cursor you like.
You can also change cursor in some part like sidebar or only in post section part. For that use the conditions.
Preview the Template.
If it works then finally click on orange button “Save Template” and you are done.

Comment if you have any questions.
ENJOY!!

Easiest Way To Create A Contact Form

2012-10-23T08:47:00.000-07:00

Many visitor may have some difficulties in contacting the author. Sometimes it becomes a great need to contact a author, and if there are no any sufficient measures readers may be disappointed and leave that blog.

For that adding contact form is the best solution. Just we need to follow some simple steps. Many readers of Blogging Sentral also asked how to do so? So lets do it;

Creating The Form

Go to 123contactform.com .
Sign up at there.
In Dashboard you can see 6 boxes like this;
Click on Contact Form Box.
In Form Name enter the title of Contact Form and click on blue “OK” button.
You can see the layout of Form.
Make it as your wish.You can choose many themes ,Text boxes,Radio buttons and many more.
After customizing layout click on Continue
Manage the notifications,Themes, etc and after all is completed, click on Continue.
Select Blogger for Blogger platform. Select Embed Code for word press who have not pay for domain.
Copy the codes. For wordpress copy iframe code.

Adding Form;

In Blogger

Go to edit HTML>Edit Page
Click on New Page.
Switch to Edit HTML
Paste the codes.
Publish the page.

In Wordpress(who have not pay).

Go to Make a new Page.
Paste Inline codes.
Publish the Page

In Wordpress(Who have pay for Domain).

Download the files from here.
Extract the zip files.
Using FTP clients upload extracted folder to /wp-content/plugins/
Activate that plugins from Admin in Word press.
If you want to lean read more from here.

I hope both the blogger & wordpress users enjoyed this post.

Make Your Pages Printer Friendly

2012-10-22T08:31:00.000-07:00

I was shocked when I printed my Page. It was looking so weird in print paper that I dared to tear it apart. All the unnecessary stuffs like Adsense ads, Header, Navigation Menu, Comment form, Footers, Sidebars, etc were appearing. They were making such condition that it was better not to print that page.
But the problem was solved soon. By adding CSS we can make printer friendly page. We can remove sidebars, Scroll to Top button, Ads etc. using display:none method. We will also widen the content area of Blog. If we do so our blog page will be printer friendly. You can see demo just below. Did you liked it? Definitely yes ya, Lets do it;

Adding CSS code.

Go to Blogger.com
Click on Template.
Go to Edit HTML.
Find <b:include data='blog' name='all-head-content'/>

Add the following code just below it.

<style media='print' type='text/css'> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, footer {display: none;} #content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; } #main a { text-decoration: underline; color: blue; } </style>

Where
- In Line 1,2,3, we have added code which are excluded in Print paper. You can add the other id or classes like link bar etc.. which is to be excluded.
- In Line 3 we are are making content width automatic to printing paper.
- In Line 4 we are making link to be underlined.

Adding Print this Button in a Blog.

You may wish to add this button in a Blog. After adding this button if visitor click on Print Button the button will invoke to print the Page. To add simply follow below steps.

Be sure you are in Dashboard>Template>Edit HTML.
Tick on Expand widget located at top right part of code window.
Print Button HTML Code;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="javascript:window.print()"><img border="0" style="margin-right:5px" src="YourImageUrl"/>Print this article</a>
</b:if>

Find the location in your template where you want to add the Printer Button. Then just add the above code.
Finally click on save button and you are done.

Bye pals..

Keeping Image As A Background (Template Designer)

2012-10-22T05:34:00.000-07:00

Many visitors asked how i kept a image as a background in my blog. I was shocked why they felt it so hard because we can Install Background of The blog very easily. Today we are going to add the image using Template Designer. You can add the image as your wish. Adding a good background image helps to increase the beauty of Blog. You want to use image as background then follow the instruction below;

Downloading Image.

You can get various type of background image from these sites like

Grsites.com .
Backgroundlabs.com .

I prefer Background Labs because my background also goes to it. Just download the image and Upload it in Image Hosting Sites Like Picasa,Photobucket,Tinypic etc. After Uploading get the direct link of Image.

Some points to be noted before implementing Image as Background

The image size must be less than 300kb.
The image dimension should be proper.
The image should match with Blog. It should be a good combination with Blog.

Implementing Image as Background.

Go to Blogger.com
Click on Template>Edit Html.
Go to Template Designer
Go to “Background” Tab.
In Main Color theme select the color which match with your image. This is important because if the background image failed to load then color will be seen.
Click on Drop menu icon() that is located below the background image. Select Upload Image, then choose the image file. After choosing click on “Done” button.(Good news you can choose the image from there too.)
After uploading the image will be shown in preview part too. You can repeat, Position, Scrolling with page after uploading the image. To position click on Alignment. To repeat click on Tile. To scroll with page tick on scroll with page)
After implementing image click on orange button “Save Template”.
Hope you have understand properly.

Any problem!You can Comment Below.
ENJOY!!

Aligning The Blogger Linklist

2012-10-21T20:28:00.001-07:00

Previously I had wrote about how to align Header in Blogger. Visitors being satisfied asked us is there also some CSS trick to align PageList or LinkList widget? The answer is Yes. There is a such way. If you want to know follow us.
We will align Linklist using CSS. Just add CSS that suits your Taste. If you don’t know how to add CSS then Learn it From Here. If you use Pagelist instead of Link list then just replace Linklist with PageList in CSS code and I assure you that it will infact work.

For Horizontal LinkList.

Horizontal LinkList is the used in Blogging Sentral. To align this type of Link List Just add the below CSS;

To Center

.LinkList { text-align:center !important; } .LinkList li { display:inline !important; float:none !important; }

To Right

.LinkList { text-align:right !important; } .LinkList li { display:inline !important; float:none !important; }

For Vertical LinkList

To align Center

.LinkList { text-align:center !important; }

To Align Right

.LinkList { text-align:right !important; }

Enjoy!!

Adding Meta Tags In Blogger

2012-10-21T06:09:00.002-07:00

Meta Tag gives meta information of HTML to Search Engines. It is not displayed in page but it is machine readable. SEO use it while indexing the page.

Adding Meta Tag helps to improve the SEO of the page. It provides the keywords, description, last updates, author, etc. of the page. Today we are discussing "how to add the meta tag?"

Types of Meta Tag.

As informed above there are mainly two types of Meta tag that is keywords and description .Authors, last updated and other meta tag are optional meta tags, but it is better to add them in blog. In Description we add the short description of page and in Keywords we add the keywords related to content of Blog. Adding Meta Tag is useful as it is used by SEO. Meta tag are added in head section of Blog.

Adding Meta Tags in Blogger.

Go to Blogger.com
Click on Template
Click on edit HTML.
Find <head> tag.

Add the Following code just under it.

<meta content='KEYWORDS HERE' name='keywords'/>
<meta name="author" content="Author Name" />
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='BLOG DESCRIPTION HERE' name='description'/>
</b:if>

Where,
- In Line 1 Replace "KEYWORDS HERE" with the keywords that matches with your content, each separated by a comma.
- In line 2 Replace "Author name" with the name of admin of the blog.
- Line 3 is the conditionals tag which make content to appear in item (post page). Line 5 is the end tag of line 3
- In Line 4 Replace 'BLOG DESCRIPTION HERE' with the brief description of Blog

Adding Meta Tags in Word Press.

Sign in at Wordpress.
Go to Appearance
Then be forwarded to widgets.
Scroll the page and find widgets name “Meta”
Add the meta tag respectively that match to your Blog.

Checking Meta Tags.

You can check a meta tag of any page with our SEO Tool.
Hope you will find the solutions from here.
ENJOY!

Show Only Post Titles In Archive/ Label Page

2012-10-20T22:36:00.001-07:00

One of my Loyal subscriber asked me is there any way to show only post titles in Archive or Label page. I say not only to him, but to all of you; Yes. We can make this possible by editing some codes in Blogger Template HTML. He said me he is facing problem of Growing contents.

They are taking long time to load. Hence the tutorials deals with making post tiles to show in label and an archive page. He also said me is there any affect on home page. The answer is no. It only influences the label and the archive pages. So lets proceed;

Go to Blogger.com
Go to Dashboard>Template>Edit HTML.
Tick On Expand Widget.
Find this Line;
```
<b:include data='post' name='post'/>
```

Replace that code with this.

<!--Label and archive page title only hack-->
<!-- Bloggingsentral.blogspot.com -->
<b:if cond='data:blog.searchLabel'>
<h3 class='br-laatitle'><a expr:href='data:post.url'>
<data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='br-laatitle'><a expr:href='data:post.url'>
<data:post.title/></a></h3>
<b:else/><b:include data='post' name='post'/>
</b:if></b:if><!-- Bloggingsentral.blogspot.com –>

Now click on save button and you are done. An example of this tutorial on a test page is given below;
Click on Save Template.

Tweaking the Code.

If you want to make that as a list then replace all the codes of line 4&5 with the below code;
```
<h3 class='br-laatitle'><ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul></h3> 
```
1. You can replace ul to ol for making numbered list
You can Style the way it appears using you own CSS by adding below code just above ]]></b:skin>
```
.br-laatitle { /* Styling Codes Here*/ } 
```

If you have any Problem then you can Comment Us.
ENJOY!

Increase/Decrease The Size Of Blogger

2012-10-20T06:41:00.003-07:00

Many people would have desire to change their default size of their template. What about increasing or decreasing the sidebar at Blogger? But many use the Template that is not accessible with Template Designer. What should we do know? The answer to this question goes to the CSS. Via CSS we can do this very easily. Let's do it know;

Go to Blogger Dashboard>Template>Edit HTML.

Find the Following lines similar to this.

#header-wrapper { width:960px; } #outer-wrapper { width: 960px; margin:0 auto; padding:10px; } #main-wrapper { width: 610px; } #sidebar-wrapper { width: 320px; } #footer { width:960px; }

Margin means Space outside boarder. Padding means Space inside border. Width means space with out padding and margin. So get to know that Total Width=Width+Margin+Padding
We must also know that Outer Wrapper=Main Wrapper+Sidebar Wrapper.
Then if you want to increase width of Sidebar then you should reduce the width of main wrapper and increase width of Sidebar. This is reverse for increasing Width of post area.

Possible cases.

If you will increase sidebar but not width of outer wrapper or decrease main wrapper then Main post area will push sidebar to Bottom.
Padding and margin may affect your Blog..
Your border may get affected if your template use image for rounder corner.

I hope you have understood. My friends it's the time to advance more than others. Let's all know other tricks also..

Instant Traffic Boosting Tips

2012-10-19T05:33:00.001-07:00

Many blog lacks traffic that there content desires. Creating blog is easy but its hard to get organic traffic and visitors. Lets talk of Blogging Sentral. For first three month my blog hardly got less than 200 visitor daily but see my blog popularity has grown that my blog get more than 500 unique page view. Lets learn some key point to increase traffic.

Publishing High Quality content.

Every body likes the exclusive content. Your content must target what your Visitor want. You need to publish only genuine content which can make audience happy that surely increase your page view. It's generally good to publish about 3 articles in a week and a unique post in a month.

By Advertising.

Advertising is probably the the best way to increase traffic. For first three month it is better to advertise using Google Adwords. Just it is matter of money. After advertising you will see your blog level and cost goes high that you will never expect. For eg: if you spent $100 for your advertisement and even many of clicks are fake than also you can make profit, than also it is guaranteed that you will have your sales boosted as the same $100 comes in your hand like a boomerang with the net cost of $200 and even more.

Participation in Forum.

If you arise question or help other in Forum you will certainly get some Traffic. Thousands of people visit Forum then there is high possibility of Getting more Traffic. For Blogger it is better to participate in Blogger Help forum. You can also participate in Blogging Sentral's Forum.

Reducing Page Size.

If you reduce your Blog size then people will probably stay longer. A Blog that loads faster touch the heart of Visitor. Generally people recommend your site as valid if your site loads faster and they will be as referrals delivering you large amount of traffic.

Making SEO Friendly Blog.

Source : Google

Blogging Sentral gets 70% of traffic form Search Engines. From this you can know the eseentiality of SEO. To make SEO Friendly you must use alternate tags in image. You must also use nofollow, Titles etc. to your Link. Adding Meta tags helps in contribution of SEO. Don't forget to make your page title SEO friendly.

Connecting the Blog with Social Media.

Social Media helps to diversify your content. If you want to increase traffic social media has got high role. Blogging Sentral Gets 15% Traffic from Social media like Facebook, Google plus. To promote social media you need to make Facebook, Google + fanpages and upgrade and share your articles in them.

Using Google Analytic,Stat Counter.

At first we need to identify the Traffic Source of Blog. Blogger Stat is not effective so use Google Analytic and Stat Counter. You can get detailed information of your current traffic and use those traffic bases as a technique to boost your traffic.

Image,Video Blogging.

Adding Image and video helps to increase SEO in Google image and Google video and YouTube. Thus You can create may traffic source from it. Needless to say, youtube and google videos can instantly send you thousands of traffic.

Posting content regularly.

If you Post your Content Regularly 2-3 times in a day your visitor will stay longer with your Blog. This surely increase your Blog Traffic. It may not be possible for some bloggers, but I request them to post a content in a day.

Designing and choosing high quality Template.

You need to hire designer or choose a high quality template. Good Designed Blog touch the Heart of visitor. You can also hire the admin of Blogging Sentral For that contact the admin.

Enabling RSS,Email Subscription.

Use a feed burner to deliver the update of your Blog to Email of Visitor. Just you need to read this article. If you want to add RSS button the tutorial is access from here.

Pinging Blog.

Ping the Blog using ping-o-matic. Don’t use it beyond limit other wise you will get banned from search engine. You can use window live writer for pinging too.

I am sure that these tips would help you. If you know other tips also then you can comment below? We are waiting for your comments!!

Aligning A Blogger Header

2012-10-19T04:31:00.000-07:00

By default if you upload the header in a Blogger it will be automatically aligned to left. But what if we wish to align center or right part. The solution is by using CSS(Cascading Style Sheet).

For applying CSS we need to know the element unique ID name or common class name. This is the reason often There will be no action although there is CSS in Template. If you are using Blogger Designer or Simple 3rd party Template then “header-inner” is the ID.
For Aligning Header you need to Know which method you used for uploading. For example you might have used “Behind Title and Description” or “Instead of Title and Description”.

To add CSS you can learn from here.

“Behind title and description”

If you have used this method then your image will be behind of your header and title. Simply your image is used as background in Header. Use the below codes;

To Center Align(CSS Code)

#header-inner { background-position: center !important; }

To Right Align(CSS Code)

#header-inner { background-position: right !important; }

“Have description placed after the image”

If you have used this method then only image will be seen.

To Center

#header-inner img { margin: 0 auto !important; }

If you are using Template designer then add this more lines;

#header-inner { text-align:center !important; }

To Right Align
```
#header-inner img { margin: 0 auto 0 400px; }
```
Change 400 for adjusting left margin.
To Align Vertically
```
#header-inner img { padding-top: 30px ; }
```
Change 30px to the size where you can feel satisfied.

Aligning Header Title and Description.

If you have aligned Image only then we need to align Header Title and Description too. This is effective if you have used “Behind title and description” method in setting header.

To Center
```
#header-inner { text-align: center ; }
```
To Right Align
```
#header-inner { text-align: right ; }
```
To Align Vertically
```
.titlewrapper { padding-top: 50px !important; }
```
In option 1 and 2 you can see we have used text align for aligning center or right.

Aligning Header and Image Separately.

Image on left and Text on Side

#header-inner { background-position: left !important; width: 100% !important; } .titlewrapper, .descriptionwrapper { padding-left: 100px !important; }

Image on right and text on left.(Changing from left to right and right to left of option 1)
```
#header-inner { background-position:right !important; width: 100% !important; } .titlewrapper, .descriptionwrapper { padding-right: 100px !important; }
```
I do hope you all enjoyed this tutorial. Let me know your reviews??

Hiding A Specific Post In Blog

2012-10-19T00:32:00.002-07:00

As a blogger you might have written many posts. During that range sometime their might come a condition that you should hide a specific post from homepage only. During that condition you will ask with many other people but at last you will accept the failure. But here in Blogging Sentral, you don't have to because today I am going to show you the way to Hide a specific post from your blog homepage only.

I am going to use conditional tags to hide specific post in Blogger .Just we need to know about label. We will hide the post by labeling it and editing html for not showing the post with that label. Lets do it then;

Labeling the post.

Label the post giving unique name .Just go to Blogger Dashboard>New post. Write the post which is to be hidden and label it. For e.g we will take label as Hiddenpost.

If you want to hide another post then label it also "Hiddenpost".

Removing the Labeled post from Home Page.

Go to Blogger Dashboard>Template>Edit HTML.
Back up your Blog
Tick on Expand widget
Find this line
```
<b:include data='post' name='post'/> 
```

Replace that line with the below code;

<!-- Hiding post using Label -->
<b:if cond='data:post.labels == &quot;&quot;'>
<b:include data='post' name='post'/>
</b:if>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast'>
<b:if cond='data:label.name != &quot;hiddenpost&quot;'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
</b:if>
</b:if>
</b:if>
</b:loop>
<!-- http://bloggingsentral.blogspot.com -->

look at the code at line 7. Did you find “Hiddenpost” label. The post with the label will be hidden in homepage and from other pages like label page, etc. If you wish for other labelled post to be hidden then just change "hiddenpost" with the name of label which you want to hide in that post. But remember labels or case sensitive.
Finally, Click on orange button and you are done.

Now You may see that we have successfully hide the post from label page. Enjoy hiding posts in blog.

Adding Comment Counter In Blog

2012-10-18T23:11:00.002-07:00

What about adding a comment counter in a Blogger. Comment is very essential in Blog. Many visitor leave comments and author reply the comments as answer. Adding comment counter improves the communication between people of the certain blog. See the preview below of comment counter;

Advantage of Comment numbering.

Better communication between author and Visitor.
Easy to reply answer.
You can give then answer by giving comment number for previously answered question.
It help to give comment unique permanent link so that we can send visitor in right track.

Installing Comment Counter in a Blogger.

Go to Blogger Dashboard>Template>Edit HTML>Proceed.
Tick on Expand widget.
Back up your template

Find these lines in your template;

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
Some more contents here..........<b:else/>
<data:comment.author/></b:if>
<data:commentPostedByMsg/></dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
Some Contents more here...
<dd class='comment-footer'></dd></b:loop></dl>

Line 1 may be different in Layout Templates i.e it is <dl id='comments-block'>. Just go and find the codes similar to it.

Add following code just before <b:loop values='data:post.comments' var='comment'>.

<b:loop values='data:post.comments' var='comment'>
<!-- comment counter Start by bloggingsentral.blogspot.com -->
<script type='text/javascript'>
//<![CDATA[ var regexpatt = new RegExp('commentPage=([0-9]*)'); var results = regexpatt.exec( window.location.href ); if(results == null) { var CommentsCounter = 0; } else { var CommentsCounter = (results[1] - 1) * 200; } //]]></script>
<!-- Comment counter end by bloggingsentral.blogspot.com-->

Now, add following codes just before </dt> tag.

<!-- Comment count and display START by bloggingsentral.blogspot.com --> <div class='br-commentnumber' style='font-size: 20px;padding:0 10px;'> <a expr:id='&quot;comment-&quot; + data:comment.id' expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment permalink' style='float:right; margin-top:-25px;'>
<script type='text/javascript'>CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
</script></a></div>
<!-- Comment count and display END by bloggingsentral.blogspot.com -->

The final result should looks like this;

<dl expr:class='data:post.avatarIndentClass' id='comments-block'> <!-- set comment counter Start by bloggerrounder.blogspot.com --> <script type='text/javascript'> //<![CDATA[ var regexpatt = new RegExp('commentPage=([0-9]*)'); var results = regexpatt.exec( window.location.href ); if(results == null) { var CommentsCounter = 0; } else { var CommentsCounter = (results[1] - 1) * 200; } //]]> </script> <!-- set comment counter End by bloggerrounder.blogspot.com --> <b:loop values='data:post.comments' var='comment'> <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/>  <!-- Comment count and display START by bloggerrounder.blogspot.com --> <div class='br-commentnumber' style='font-size: 20px;padding:0 10px;'> <a expr:id='&quot;comment-&quot; + data:comment.id' expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment permalink' style='float:right; margin-top:-25px;'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </a></div> <!-- Comment count and display END by bloggerrounder.blogspot.com --> </dt> <dd class='comment-body'> ... some more contents here.... </dd> </b:loop> </dl>

Click on orange Save button and you are done.

Styling the Comment Numbering.

Style the widget by adding CSS. You can add your own CSS codes.
```
.br-commentnumber { /* CSS Styling Codes Here */ }
```
If you don’t know where to add CSS then learn it from here.

I hope you are successful to follow this tutorial. ENJOY!!

Split Your Blog Footer Into Three

2012-10-18T20:46:00.000-07:00

As you all already know, that in a simple blogger template their is just a single footer. So, are you all tired of adding widget in one column footer. If yes then it's time to go ahead by installing third column footer. It is easy as adding column(sidebar) in Blogger. If you are using blogger default template then this tutorial is not for you. The tutorial will just describe you how to install three column footer. But you need to identify the footer code as it varies in different template. Now let's proceed;

Back Up your Blog.
Go to Blogger Dashboard>Template.
Click on Edit HTML>Proceed.
Find the code which is similar to this.(It may be different in different template)
```
<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div> 
```

Copy the below code just after </div> tags.

<!-- Buttom Bar starts --><!-- Bloggingsentral.blogspot.com -->
<div id='buttom-wrapper'> <div id='buttombar-wrapper'>
<b:section class='buttombar' id='buttombar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='HTML Javascript' type='HTML'/>
</b:section></div>
<div id='buttombar-wrapper'>
<b:section class='buttombar' id='buttombar2' preferred='yes'/></div> <div id='buttombar-wrapper'>
<b:section class='buttombar' id='buttombar3' preferred='yes'/></div> <div style='clear:both'/></div>
<!-- Bloggingsentral.blogspot.com --><!-- Buttom Bar ends -->

Now, add the following CSS code in your blog.

#buttom-wrapper { background: #EEEEEE; width:99%; margin: 0 auto; padding: 0 10px  10px 0; } #buttombar-wrapper { float: left; width:30%; text-align: left; word-wrap: break-word; overflow: hidden; } .buttombar .widget-content { padding: 0px 3px 3px 3px; } .buttombar ul { list-style-type:circle; margin-left:10px; }

Here,

You can Change #EEEEEE to change background of footer. You can get six digit color code from here.
You can change width:99% as your wish in percent or pixel. If successful implementation we recommend you to use measure it.
Change width:30% for changing width of column of footer.
Change margin or padding to increase or decrease the space of inside or outside of container.
You can add More CSS as your wish after the final code for styling the footer.

Click on Save button
Go to layout of your Blog you can see three column like this.
Enjoy by adding Widget or Dragging Widget from sidebar to footer.

I hope you enjoyed this article. Bye Pals.

Embed Games In Blogger Blog

2012-10-18T08:00:00.000-07:00

Who won't like a game in this present time. Probably all will surely like it. People of very large range like games due to it's vast scope. Games can be for entertainment or for education.

But the most interesting is that we can add games in Blogger too. Imagine blogger & Game, what a great combination ya. Today this tutorial will help you to add the Online games in Blogger. This is Just really awesome Tutorial. Remember never keep a copyrighted game. They may claim their game and force to remove that post. So you may be in loss to. It's a simple guide. Lets Do it.

Making an Online Game.

If you can make a Game make it. But if you cannot you can try this;

Go to Google Search.
In Search box type “Embed Games”.
A list of URL will come.
Go to any of the URL.

Find the Embed code and copy it to notepad or other plain text editor.
Remember embed code usually look like this

<embed src="http://embedgames.ru/wp-content/games/hidden-valentine-hearts.swf" menu="false" quality="high" width="700" height="500" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>

In width and height you can keep yourseld which suits your taste.

If you want to host game file in your own sever then download embed games file with extension(.swf) and add it to server.

Adding An Embed Games.

Go to make a new post.
Switch back to HTML mode.
Add the embed code in the code window.
It is best to give credit to author although he does not say for it.

Demo Of Such Game.

If you ask for demo of embed game than here it is. I hope you will enjoy this game too. It may take a time to load but don't panic..

Using Mask Technique In Blogger

2012-10-18T02:31:00.001-07:00

Masking is a brilliant way to make a picture of any type look more attractive. It ultimately became a favorite technique of me as I knew how to mask a image for the first time in photoshop. After a long journey in photoshop, I came to blogger and i desired to mask a image in blogger too.

But for the few days i couldn't but as the day passed on i ultimately knew how to mask the picture easily in a blogger blog. Being an excellent designer our job is to provide the best quality things, and mask technique also falls in it. I know that many of you guys may already know about it, but still wide range of bloggers fall in the group who are not aware of it. So i came up with this post. But before see a live demo of masking a image;

So what is your remarks for this. Probably the masked image is better than that of real image. So what are you waiting for. Lets know how to do it;

Go to dashboard>template>template designer.
Add the below CSS code in your blog. If you don't know how to add CSS codes then learn it from here.

.maskeffect {
-webkit-mask-image: -webkit-gradient(radial, center center, 0, center center, 350, from(rgba(0,0,0,3)), to(rgba(0,0,0,0)));
}

Click on apply to blog.

Now, it's turn to mask the pictures.

For masking any pictures, just use the below code;

<div class="maskeffect">
<img src="emmasnap.png">
</div>

Replace "image url" with your image URL which you want to be masked.

Now your image is masked. But be sure you read the note below;

NOTE:The mask-image works only on webkit browsers, so do try this on Safari and Chrome to check the output.

ENJOY!!

Enable E-mail Subscription For Your Blog

2012-10-17T22:34:00.002-07:00

Enable Email Subscription to rise your Traffic. Many users worldwide are using it to earn money and confidence of audience. As far i know the only good mean for email subscription if feedburner.

Feed Burner, owned by Google is the best and easiest RSS reader, I have ever used. If you want to get the email from Blogging Sentral you can activate email subscription by clicking here. Do you want to do like that similar to your Blog then read below tutorial. I am sure you will certainly get the point;

Go to http://feedburner.google.com.
Below of “Burn a feed right this instant" enter your blog or feed address in the text area and click on next.
In “Identify Feed Source” tick on atom then click in “Next”
After clicking you will encounter this picture in your screen.
- In Feed Title enter the name of your Blog.
- In Feed Address enter the URL of feed that is easy to remember.
- Click Next.
If you encounter this type of picture in screen click on skip directly to feed management.
Go to Publicize Tab.
Go to Email Subscription.
Click on Activate.
After activating your screen will be seen like this.
In “Use as a widgets as” select your Blogging platform and click on Go.

Integration

If you are using blogger just click on add widget.
If you are using Word press just copy that code and go to word press Dashboard>Widget>Drag text to sidebar>And paste those codes.
If you are using other platform just paste the code in HTML editor.

I hope this helped you.

Installing StatsCounter In Blog

2012-10-17T21:41:00.003-07:00

StatCounter is a popular real web tracker which provides statistics of your Blog. Although many people use Google Analytics(GA), I too prefer StatCounter to my fellow bloggers because it is also best web tracker. From this you can find out your Visitors, page views , Popular Post and many more facts of your blog. I too use it. But some of my friends were having problem installing it correctly.
It was simple but still for them i am sharing this tutorial. And for those who prefer google analytics you can go here. But still i would like to draw their attention to try StatCounter once. I am sure they might like it.

Signing Up at StatCounter.

Before using this read privacy policy of stat counter from here.
Sign Up is free at StatCounter.
For sign up go to this page.
Enter your corresponding username,email,password etc.
You may be inserted to know following queries.

How StatCounter Works.
Why sign up at StatCounter is free.

Adding Website(Project) in StatCounter?

If you want to add Web Site just we need to add project. After sign up you may see the screen like this

In Project URL enter the URL of Your Blog.
In Project Title enter the name of your Blog.
In country select the country where you publish the content to your Blog.
Tick on Make Statistic public to show you analytic of your Blog to Visitors.
Tick on “Display a link to Your public Stats” to show the link to Visitor.
Change the text “View my stat” to text to be shown to visitor
Select the Counter or Buttons that will be shown at your Blog.
In email report tick in option what you want.

Installing the snippet in A Blog

After Creating a Project you may see screen like this

Select your Blog host.
Follow the instruction by stat counter.
Check whether your stat counter is properly added or not.

Checking the stat of Blog.

Log in at Statcounter or go to Dashboard.
After log in your screen looks like this
Click on project title.
Now you can see detail summary of page.
Enjoy exploring the page.

If you have any problem comments us. Enjoy!

Top Commentators Widget For Blog

2012-10-17T04:54:00.000-07:00

Appreciate the commenters by enlisting their name. The old way is not so easy way. In old way you have to search and find the Top commenters but Today We are going to do Something new. We will use Yahoo Pipe which will automatically display Top commenters. Lets do it.

Go to Blogger.com
Go to Layout or Design.
Click on “Add a Gadget”
Select HTML/JavaScript

Add the Following code;

<!-- Top commentators widget By Blogging Sentral --> 
<script type="text/javascript"> function getYpipe(feed) { document.write('<ol>'); var i; for (i = 0; i < feed.count ; i++) { var href = "'" + feed.value.items[i].link + "'"; if(feed.value.items[i].link == "") var item ="<li>" + feed.value.items[i].title + "</li>"; else var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } 
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=http://bloggingsentral.blogspot.com 
&ExcludedNick1=Martin Gajurel &ExcludedNick2= &ShowHowMany=10 &_callback=getYpipe &_id=23022d7836bf2dd3c10a329feb9be26a &_render=json" type="text/javascript">
</script> 
<span style="font-size: 80%; float:right;">
Get this 
<a href="http://bloggingsentral.blogspot.com/2011/03/top-commenters-widget-for-blogger.html">widget</a></span> 
<!-- Top commentators widget End --> 
<!-- Bloggingsentral.blogspot.com -->

The code is By Google System. Credit goes to Them.
Finally click on save and you are done.

Tweaking the Code.

The code is by Google System. Thanks to their invaluable Work.
In Line 9, Change the value of YourBlogURl with your own, without slash at end.
In line 10 change the value of ShowHowMany for the number of Top Commenters to be displayed.
In same Line 10 change the value of ExcludedNick1 with the author of blog or name which is to be excluded.
For Bulleted list change ol to ul in line 7.

ENJOY!!

6 Easy Ways To Backup Your Blog Posts

2012-10-16T20:00:00.002-07:00

There might come a time when you accidentally delete a blog which was worth than other things from you. Once it happened to me that i lost my 40 posts accidentally and now i repent on myself. So i don't want that any of you face this problem.
There maybe arise of problems in future if you are going to depend upon only one idea of Back Up. Sometimes Blog is delete automatically which hurt us very much. For fixing this backup is only one solution. Today We will learn some way to back up blog..

Using Export Function.

If you use Export Function then your Blog Post will only get backed up. Although this will back up your content excluding image.(Note it will just back up their link not image). Comment and pages will also be backed up using this method.To Back Up using this method follow below.

For Blogger: Go to Dashboard>Setting>Other. There Click on Export Blog. Download will be Start and your blog post will be successfully backed up.
For Word Press: Go to Word Press Admin>Tools>Export. Like Blogger Download will be started and your post and page will be successfully backed up.

By using Feed.

Feed is the best way to back up Blog.There are two different feed i.e Post Feed and Comment Feed.

For Blogger

At first ensure your blogger has been set up for full feed from Dashboard>Others>Allow Blog Feed to full. Then kindly go to these Feed sites.

For Backing Post

http://blogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

If you have more than 500 post then, open this link in new tabs too;

http://blogername.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500

If you have more than 1000 post then go to new tab and open this link too;

http://blogername.blogspot.com/atom.xml?redirect=false&start-index=1001&max-results=500

Before opening just replace Blogname with your own and press CTRL+S on keyboard and Download will be started and your Blog will be backed up.

2. For Backing Comment

http://YOURBLOGNAME.blogspot.com/feeds/comments/default?max-results=200

If you have more than 200 then do similar as above for backing post in blogger using feed.

By Using Email Feature.

If you use feed burner Email Subscription then you can get email in your inbox by subscribing own Email.The thing you have to do is just enter your e-mail in the subscription form which you have kept for others to subscribe to your blog. And then verify your e-mail.

By Downloading Offline Copy.

Download HTTrack from here.
It will download the offline copy and store data in hard Disk.
You can browse all post, comment and many more.
Just download and create project and store offline copy.

Turning Blog to Book.

This one is a more efficient way. Just make a PDF file of your Blog and print or store it in PDF format.
For Blogger.

Go to http://blogspot.sharedbook.com/ .
Then enter your Blog URL.
Choose color,template,front page and much more.
You can see what your Blog looks like.E.g Blogging Sentral looked like this;

Don’t think it's low quality(Its just in screen not in paper) you need to pay for making Ebook of your Blog.

For WordPress.
Download PDF24 Articles To PDF From here. For Instruction you can learn from here

By Using Window Live Writer.

It's probably the most easiest of all. Because if you use window live writer your post are automatically backed up. You can save it from My Computer>Document>My Weblog Post>Recent Post.

I do hope there are many ways out there. But the easy ways are posted here. Please use it before you make a big mistake of deleting your blog as you can start at any time after the deletion.