Posts

Showing posts from May, 2011

21 Amazing jQuery Tabs Collection

Image
Using jQuery,we can do many things very easily than normal JavaScript.So jQuery has became the most popular JavaScript library in use today.I wrote my previous article about popular jQuery featured content sliders,that are used by web designers.In this article I am going to show you a better jQuery Tabs collection you can use for your websites or blogs.When we go to websites,we can see different types of jQuery Tabs.If you add a tab view to your website,it save a lot of space in your web pages.Also it gives a better appearance to your website or blog. You can visit authors websites for configuration instructions/guides,can view live demos of these jQuery Tabs and also you can download files of these tabs using the URLs given below.I checked all of these links and they are working correctly.But in future if this links doesn't work, please leave a comment.I hope to add more jQuery tabs to this article in the future ,so bookmark this web page for future reference.If t...

Optimise Blog Title for Search engine Results and increase visitors

The default titles of Blogger Post pages are of the form Blog Title + Post Title . But don't you feel that the Post Title should be given a little more importance on the Post Page? The search results including those on search engines like google and yahoo use these titles.So it is always better to keep your title more related to your post content. So here we are going to tweak the Blog 's title tag in post pages..Here is a hack that will change the title to the following attractive format Post Title + Blog Title This trick will help you to optimise the blog title for Search Engines like google yahoo, live bing and others. I am damn sure that this trick will increase your site's visitor count.. It will take a while for the Formatted titles to appear in search results(will appear when it is reindexed by the corresponding search engine ). 1.Login to your blogger account 2.From your Dashboard opt for Layout 3.Now choose Edit Html 4.You will see your templa...

Facebook Like/Fan Box For Blogger

Image
This tutorial is for everyone who has already created a Facebook Fan Page . If have not created one, try making one. A Fan Box or Like Box allows your Blog visitors to like your facebook fan page, without leaving your blog. It can also display faces of the “likers” on your blog. To add the fanbox to blogger, follow these steps: 1. Find out your Facebook Fan Page URL. To do that, just visit your Facebook Fan Page, and copy the url in the address bar. In my case it is http://www.facebook.com/bloggerplugins (The url which you see in the address bar when you visit your fanpage.) .Copy this url from your address bar. 2. Visit This page http://developers.facebook.com/docs/reference/plugins/like-box You have already copied the facebook fan page url. Paste this into the Facebook Page URL field Select the choices appropriately and you can see a live preview of the Like/Fan box. 3.Once you are satisfied with the looks of the Like Box, Click on the “ Get Code ” button 4. Copy the i...

How To Show Post Title Only on HomePage in Blogger

Image
Do you like to show only your blogger post title on your home page?Then follow the steps 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'> <b:if cond='data:blog.pageType != "item"'></b:if> .post { margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:1.0em; height: 50 px; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:20px; font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif; font-weight:normal; line-height:1.4em; color: #cc6600 ; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color: #cc6600 ; font-weight:normal; } .post h3 strong, .post h3 a:hover {color: #333333 ;} .post-body {display:none;} .post-footer {display:none;} .comment-link {display:none;} .post img {display:none;} .post bl...

How To Compatible Blogger Blog With Mobile Phones

If you are using a Blogger Layout Template,this tutorial will helpful for you.But if your template is a blogger template,created by using Blogger Template Designer, usually this feature has already added to your template.This will really helpful to increase the number of mobile visitors of your blog. Now follow the simple steps given below to ready your blogger blog for mobile phones. 1.Login to your blogger Dashboard--> Design- -> Edit HTML 2.Scroll down to where you see below code: <b:include data='blog' name='all-head-content'/> 3.Now copy below code and paste it just before the above line. <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if> 4.Now save your...

How To Add Perfect Share Box to Blogger

Image
In this tutorial, I am going to show how to add a useful share box for your blogger blog. This share box contains official Tweet button with counter, official Facebook share button with counter, official Google Buzz button with counter, official Stumbleupon button with counter, BlogThis! link, Email This! link, Print This! link, Comments count link and Facebook like button. I have configure all this button for Blogger blogs, so you can add this share box quickly to your blog. Now follow the steps given below to add this share box for your blog. 1.Login to your blogger Dashboard and go to --> Design- -> Edit HTML 2.Click on " Expand Widget Templates " 3.Scroll down to where you see below code: <div class='post-header-line-1'/> 4.Now Copy Share Box code given below and paste it just below the above code. NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twitter tweet button...

Advanced Top Commentators Widget to Blogger

Image
This widget will decide the top commentators from the latest 5000 comments to your blog.But your blog hasn't such as more comments you can add that Top Commentators Widget instead of this one.It will decide the top commentators from the latest 500 comments . However your blog have more than 500 comments add this widget: 1.Log in to your dashboard--> layout- ->Page Elements 2.Click on 'Add a Gadget' on the sidebar. 3.Select 'HTML/Javascript' and add the code given below and click save. <script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value....

How To Install Dynamic Meta Description Tags

If you define a meta description tag for your home page it will be replicated for all your pages which would be taken as a duplicate ‘meta-tag’ in Google. With the code below you can have different description tag for each page of your blogspot hosted blog. 1.Login to your blogger dashboard-->layout--> Edit HTML 2.Scroll down to where you see this:- <b:include data='blog' name='all-head-content'/> 3.Copy the below code and paste it after above code. <META NAME='description' expr:content='data:blog.pageTitle + &quot;,PUT IN YOUR COMMON BLOG DESCRIPTION TAGS HERE &quot;'/> Replace PUT IN YOUR COMMON BLOG DESCRIPTION TAGS HERE with suitable description for your blog separated by comma. So if your blog is about Blogger tips,the tags can be blogger tips,tricks,hacks,blogspot tips ..... expr:content= ‘data:blog.pageTitle’ gets replaced by the title of your current page.So when combined with the common description t...

How To Add Facebook Like/Recommend Button For Blogger

Image
This tutorial will explains how to add facebook like/Recommend button to your blogger blog and how configure it as you like.To add this facebook like button to your blog follow steps given below. The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page. 1.Login to your blogger dashboard--> layout- -> Edit HTML 2.Click on " Expand Widget Templates " 3.Scroll down to where you see below code: <div class='post-header-line-1'/> 4.Now Copy your "StumbleUpon" bookmarking buttons code and paste it just below the above code. NOTE: If you can't find <div class='post-header-line-1'/> in your template,...

How to Install Linux Fedora 10 (Based GUI)

Image
First you prepare the first DVD Fedoranya or can be downloaded below: Download Fedora 10 Cambridge Following steps: 1. Turn on your computer. Sign in bios computer first with del or F2 key. Set bios boot with CD-ROM as first boot and hard drive as second boot as shown below. Insert the DVD of Fedora 10. Then set the bios press F10 to save the bios and then Enter or "yes". 2. After that the computer will restart and Fedora 10 will boot automatically as shown below. 3. Then fedora automatic loading as shown below. 4. Log on fedora desktop display. In this view click Install to Hard Drive and intalasi process was running. 5. At the Welcome screen select Next to continue. 6. Select type keyboard that will be used let difaultnya "US.ENGLISH. Then Next. 7. Then fill the Hostname. For example: Zainul (you can replace with the name you want). And Next. 8. At the time zone select Asia / Jakart...