December 2011 ~ Nadori-News

Dec 17, 2011

Add Sliding Facebook LikeBox To

8:13 PM nadori news No comments

How to add a pop out facebook like box with slide effect like as you see in the image above. Basically it uses JQuery effect for sliding.

The image floats on the left side of the page when you put your mouse pointer on it. The image slide has a facebook like box with a cool style.
To get a facebook sliding likebox like this one , just follow as below:

Create forums for blogger (blogspot)

2:26 AM nadori news No comments

Creation of forums for your blogger (Blogspot) becomes very eazy today . if you want to create one as the image you see above, just follow the steps below:

1. Create and publish a new static page on your blog, exclusively for a forum.
check out my forums-static-page here, just for example:

http://nadori-news.blogspot.com/p/forums.html

2. Create a new forum by Signing to Free Forums at Nabble .then activate your account via registred e-mail within this site
3.1 Click on " Embedding Options " like in the image bellow:

3.2 Copy the javascript code generated in the widow after:

4. Go to Blogger Dashboard -> Design -> Edit HTML and mark the tick-box "Expand Widget Tempaltes".

5. Find (CTRL+F) this code, in your template:

<div id='content-wrapper'>

6. If you don't find the above mentioned code, then search for (CTRL+F) this one (for new templates made for Blogger Template Designer)

<div class='columns fauxcolumns'>

7. immediately ABOVE / BEFORE it, paste the code you got from Nabble, with this ADDITIONAL code (Highlighted in BLUE and RED):

<b:if cond='data:blog.url == "http://nadori-news.blogspot.com/p/forums.html"'>
PASTE_CODE_FROM_NABBLE_HERE
</b:if>

NB1 : Replace the code in RED, with the link to your forum-page

8. Save your temaplate.

++++ The step below will HIDE everything from your blog (post content, sidebar widgets etc.) and ONLY forum will be visible in your forum-page. ++++

9. Find this code in your template:

</head>

10. ABOVE/BEFORE it, paste this code:

<b:if cond='data:blog.url == "http://nadori-news.blogspot.com/p/forums.html"'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
.columns, .fauxcolumns {
display:none !important;
}
</style>
</b:if>

NB 2 : Replace the code in RED, with the link to your forum-page

11. save and view your new forums

NOTE: to replace an entire blog with a forum, as shown in the first example (Forum In A Blogger Blog), then, first create a new blog. Download the template as a backup. Now, replace everything between the BODY tags in the template:

...
<body>
...
...
...
</body>
...

with the code copied from Nabble. So your template, code will look something like this:

it will seem like this:

...
<body>
<a id="nabblelink" href="http://nadori-news-forums.******.n4.nabble.com/">nadori-news-forums</a>
<script src="http://nadori-news-forums.******.n4.nabble.com/embed/f******"></script>
</body>
...

Save the template and enjoy.

create a sitemap of blogger (blogspot)

12:23 AM nadori news No comments

Let us see how to create a sitemap (site map) of blogger blog . Once you have added your blogger blog to Google Webmaster Tools you need to add Sitemap of your blog to Google Webmaster Tools.

But how do you create sitemap for your blog?

It is simple.
You can either use your RSS feed or ATOM feed as sitemap in Google Webmaster Tools.
First find your RSS feed or ATOM feed URL.Normally it will be in the following format.
http://yourblog.blogspot.com/rss.xml
or
http://yourblog.blogspot.com/atom.xml
Normally the feed will not have all your blog entries,it will have the latest ‘n’ number of entries.

So how do you create a feed URL with all the blog entries?

You can do it as follows.
Just add the ‘start blog index’ and ‘number of blogs’ in the feed url as parameters as below.
http://yourblog.blogspot.com/rss.xml?max-results=500&start-index=1
The above url will include maximum 500 feed entries in the sitemap.

now add your feed to google sitemap and it's done

twitter flying bird for blogs

10:50 PM nadori news No comments

Harish of way2blogging has coded a beautiful twitter bird that flies from corner to corner of your web page as you scroll up or down your posts content. It has a follow me link as well as tweet link.
We have added it to Nadori-News and we are happy to share it with you.

So to implement this twitter addon to give your site more attractive view , just follow these few steps below:

Go To Blogger > Design > Edit HTML and check the box near "Expand Widget Templates"
Backup your template
Search for </body>
And just before it paste the code below.

<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = "Your Twitter Username goes here";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>

Just replace " Your Twitter Username goes here" with your twitter UserName

5. save templte and open a post in your site.
wow... do you see the cute bird following you from cornr to corner of your page?

To see a DEMO , just open this post in our blog .

How To LOCK or UNLOCK a Widget in Blogger?

9:03 PM nadori news No comments

Bloggers have observed that some widgets can not be removed from their emplacement or can be edited.. Thye are locked to prevent bad use or missconfiguration of the template by novice adminstrators of blogs.
But today , i will show you haow to change code of locked widgets so as to configure them as you like or , on the other hand , to lock else that you feel will be unmoved from their place.See examplof locked and ulocked idgets in my blogger:

click images to Enlarge:

Go To Blogger > Design
You will see many widgets in your page element section. Get the ID of the widget you want to remove. You can get the widgetID by placing your mouse cursor at the Edit link of that specific widget. You will see a link appearing near the status bar of your Mozilla/Chrome browser ,
or, click "edit" on widget and locate the widgetID in the browser window like this:
Simply note down the widgetID which in my case is Followers1. You widget ID is one that appears between widgetid= and &action

UNLOCK MODE:

You can clearly see that there are three buttons which are REMOVE, CANCEL and SAVE
Now we want to delete the REMOVE button so that the widget could only be edited but not removed.

4. Now go to Blogger > Design > Edit HTML and check:

5. Backup your template
6. Search for your widget ID. In my case I will search for (Followers1)

7. You will find a code similar to this,

<b:widget id='Followers1' locked='false' title='Membres' type='Followers'>

8. Now to LOCK the widget simply change the value of locked to true like bellow:

<b:widget id='Followers1' locked='true' title='Membres' type='Followers'>

9. Save your template and Your Widget is now LOCKED.
Go to Page Elements section and you will see that your widget has no REMOVE button now.

UNLOCK MODE:

Do these steps carefully specially when changing code in edit HTML mode. (steps: 4 to 8).

Enjoy D:)

Ostrich Runners

1:27 AM nadori news No comments

Fascinating animated arcade racing where the main ostrich heroes are funny and a little bit crazy

Police Supercars Racing

12:01 AM nadori news No comments

Play with police cars, here is the greatest Police Supercars Racing.
Sun City is the city of the future, but the rising crime rate makes this place dangerous for living. Extremists block roads, criminals crash cars and hackers override the city’s automatic traffic control. The Special Supercar Police Unit was organized to blow the whistle on these practices.

Passionduo-blogger Green Theme ~ Nadori-News

11:24 PM nadori news No comments

Passionduo-blogger Green Theme ~ Nadori-News

Passionduo-blogger Blue Theme ~ Nadori-News

11:20 PM nadori news No comments

Passionduo-blogger Blue Theme ~ Nadori-News

Passionduo-blogger Green Theme ~ Nadori-News

11:13 PM nadori news No comments

Passionduo-blogger Green Theme ~ Nadori-News

How To Add Breadcrumb Navigation to your blogger

9:09 PM nadori news No comments

To add breadcrumb navigation to your blogger so as users can see where they are in your blogger like this:
Home >Blogger tricks > How To Add Breadcrumb Navigation to your blogger
, you can follow the steps below:

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check the Expand Widget Templates box
4. Copy the code below,

.breadcrumbs{padding:5px 5px 5px 0;margin:0;font-size:95%;line-height:1.4em;border-bottom:4px double #cadaef;}

5. Find

]]></b:skin>

6. Paste the code above .

7. Copy the code below:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

8. find

<div class='post hentry uncustomized-post-template'>

9. Past the code above.

10. Save your changes.

NB: change the colored words by your choice

Adding meta tags to blogger,websites-SEO

6:53 PM nadori news No comments

If you don't know what meta tags are, and the importance of adding meta tags, here is the detailed article on how to add them to your blogger(blogspot) blogs or any website.

Adding meta tags is very important if you want to get some good traffic from search engines like google,yahoo,msn,etc,especially the meta description part is the most important one.

If you don't know what meta tags are,Meta tags are the tags which describes your site and tells the search engines what your site is all about. Adding meta tags is an important factor in Organic Search Engine Optimization (SEO). Meta tags allows search engines to index your web pages more accurately. In other words,Meta tags communicate with the search engines and tells more information about your site and make your webpages index correctly and accurately.

Here is an example. This is what I got when I typed 'Blogger Tricks' in the Google Search Engine.

As you can see in the above screenshot, " Blog about Blogger Tips, Blogger Templates, Widgets, hacks, Blogger Tricks,etc. " is the meta tags description which I added to my site.
You have to add two meta tags to the head section of your blogger template. One is the Meta description which describes your site and another one is Meta Keywords which tells about your site keywords(what your site is all about).
Here is how to add meta tags to your blogger(blogspot) blog:
1.Sign in to your blogger dashboard>Select the 'Design' link[see the screenshot below]

2.Click on the 'Edit html' tab

Here is the code you have to add

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>

DESCRIPTION HERE:Write your blog description
KEYWORDS:Write the keywords of your blog
AUTHOR NAME:Write the author's name(Your name)

{ UPDATE : }
Now..You don't need to do it manually.. I created an automatic Meta Tags Generator to make this process easy for you!
Just go to this page and Enter some basic information like keywords,description,etc.. It will automatically generate you error free, effective Meta tags. Once done, copy that code and follow the next step.

3.Add the above code just after this [Look at the below screenshot]

<b:include data='blog' name='all-head-content'/>

Don't forget to add description and keywords.
and save the changes.

IMPORTANT:
Many people are just filling the meta description with keywords. DON'T DO THAT. Google and other search engines will ban your site from the search engines list if you repeat your keywords too often. Make sure you don't repeat any keyword more than 3 times.
That's it!You have successfully added the metatags to your blogger(blogpsot) blog.If you want to check whether you added the meta tags correctly or not,just type 'meta tags analyzer tool' in the google and you will find so many sites which can check whether you have added the tags correctly or not.

from: http://www.bloggertricks.com