If you just want to show up HTML codes in your blogger post, that is without any customization, then use this site : Simple Code. This method will show the HTML as it is and looks very simple. If you want to customize the way it is displayed, like I do in my blog, then you should follow the next method. In this method, you will have to include some codings and then your job will be done.
Follow these simple steps to include the HTML/Java script codes in your blog post:
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
]]></b:skin>
(Note: I have used the first method here. Just to show you how it looks)
3. Once you find the code, paste the following piece of code above it:
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://img17.imageshack.us/img17/5162/codeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}<div class="codeview"> and </div>.
5. You can include the code straight away in the "Compose Mode" of your blog post area. After you complete your post, you can simply click the button "PUBLISH POST" and later, view the result.
If you still find problems with the display of HTML codes, then use Simple Code and get the simplified code from that site. Now, place this simplified code in between the two tags as mentioned in step four. That's all folks. Hope I made it simple and clear. Please post your views below through comments.
Why Rss Feed Count Decreased subscribers?
i.e why no of subscibers count on feedburner feed count decrease and increase every day.
Thats good question asked by one rss reader of mine?
How Feed burner calculates the subscribers count on its feed widget?
It total accounts for the e-mail subscribers and no of hits given by your rss readers daily.
i.e No Of Daily Subscribers=E-mail subscribers + Hits To Your Rss Feeds
As no of e-mail subscribers are always counted on the feed and are not reduced except if the reader unsubscribe, that often not happens for good blogger.
Fluctualtion comes Due to the hits given by tour Rss readers on daily schedule.
If you have 100 rss readers it depends 50 readers give you hits on that day on your new post or may be even 10 on nxt day if you have no new post and you will see an decrease in your rss feed count by 40 subscribers on the following day.
*Tip-Post Daily an article on your Blog to be an succesful Blogger
So not get tensed you all have your readers
Today i am going to share my experience with you or you can take it as trick to increase your visitors.As everybody has been blogging on different niche in which he's good but at one time in a day you would think for sure,today i should blog about which thing,that can give me visitors.Yes friends everybody want to increase the visitors to there blog and try to convert them to there readers as much as possible.
So i will share one trick on how to get increase your visitors from the search engines,if your blog receives a part of traffic from them.
Lets share an trick with you.What i use to do is,i daily use to check my traffic counter for visitors coming to my blog once a day for sure.As its not possible to check the all thousands visitors daily so just i use to check at random a day and at any time.
Now my counter let me know the keywords from which the visitors searched on engines and came to my blog.When i use to check these keywords,i daily use to find some keywords for which the visitors seems to coming to my blog but the content visitor needed based on those keywords was not into my blog.This means the visitors need some content on that topic and content is not easily provided and he's coming to my blog accidentally.So why not i should provide that content on my blog.
So why you miss an opportunity to blog about that particular information on your blog and lets increase your visitors from search engines,if you will do this regularly i promise not only your visitors will increase,your blog will also become so much seo that it will be started loving by engines and will give you high rank in it.
And if you try little bit to target some keywords too on search engines keeping in mind,what keywords people use,to find any particualr content on web and will easily find you with that keyword on top,will also help a lot in beggining.
I hope you would love this trick to make your blog seo and increase your blog visitors.If you have any other questions you ask me in comments.
How to submit blogger sitemap to different search engines.I hope most of us have done it with there blogs but most still would be not knowing on how to do it.But this post is for all bloggers even if they have submitted there sitemaps as i would share some method to remove some errors while you are getting in indexing all blog posts in search engines.
How to Submit Blogger Sitemap to Google.
Follow the simple steps to add blogger blog to Webmaster Tools
1. Login to Blogger Dashboard.
2. At the end of the page, under Tools and Resources box – Click on Webmaster Tools.You will Be asked To Enable Webmaster Tool Enable It.
3. If asked, enter username and password again to Login.
4. After Logging in Click Add A site Button.
5.Now Enter Your Blog Address And Continue.Dont Forget To Include '/' At the end of your blog address.Like this http://www.anshuldudeja.com/ .
6.Now you will be asked to verify your blog Just verify it as they say.
7. Inside Webmaster tools, click on Submit a Sitemap and add the following code inside the box :
atom.xml?redirect=false&start-index=1&max-results=100
8. If you have more than 200 posts then replace value 100 by something bigger number like 500.If they are more than 500 then add sitemaps in this format.
atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500
atom.xml?redirect=false&start-index=1001&max-results=500
As Labnol has developed the tool for it also. Just visit the tool page here to get submit blogger map to google yahoo and bing also.For More Help you can read this post also on how to use this tool with an video tutorial.
I hope you will do it easily now.If you still have any problems let me know in comments.I will try to solve them.
How To get post description or author name and post date to be shown with title of post altogether if you are using recent post widget for your blog and also show more that 5 posts as blogger feeds restrict you to show upto only 5 posts,but with feedburner you can show all of above with any number of posts you want to show up in your widget.
If you just want simple script of codes to extract any number of recent posts from your blog you can get it from this blog as it will display only recent post of your blog with only titles.
Now lets discuss on getting your posts displayed from your feedburner account.
First of all Benefits of using feedburner script:-
1)You can show description also with title if you want.
2)Favicon too can be showed.
3)Author name can also be shown.
4)Date of post.
5)And subscribe link too at the end.
So Just to install your recent posts widget from any blog or blog category login to your feedburner account.If you don't have burned your feeds with feedburner then just visit to feedburner and burn your feeds.
Now just open your feedburner account now and click on the title of the feed you want to show of your recent posts.If you have burned many feeds then only you will see many feeds with there title on front page else if you have burned only one you will get only one title so dont get confused.Like in picture below i have four blogs feeds,so i will select the title for which i want to set up this feedburner widget.
Now after clicking the title you will enter that feed.
1)Then you will see Publicize tab Enter there.
2)Now at left will see Buzzboost Click it.
3)Now you will see option like these in picture below to make your widget.
Now select all these option you want to show or not like author name,post description,post date,if yu wat to show up only post title then you can have seetings like i have dont in above picture.
After making all selections just hit the activate button below.If its already active you will see Save button as i got in picture above.Then you will be given codes to show of your widget,with the preview as well as how your widget will look.
Just copy the codes from there the login to blogger > Go to Layout > Page Elements > Add a gadget > Html/Javascript and paste the codes and save it.
Just whenever you want to make modifications to your widget just make it modified from your feedburner account it will change look itself in your blog mean to say you have no need to change the code again and again,just modify it and the changes will apply itself once you add the codes to blogger.
Hi Friends,i hope you all will be fine.As since it has been really a long time for me to have any useful post for you.As before i was busy in exams and after it i didn't got time but today i have an really useful post for you.As blogger is not very search engine optimized and we have to keep in mind some things to make it seo or have to implement some hacks to make it seo to an extent we can.
As previously i had an post on problem with blogspot blogs in seo,which also was very informative post for every blogger.You have to read it for sure before continuing this post.
Some other tips you can read on to increase your visitors are how to increase visitors from search engines and promote you random posts via emails.
Now let continue on some useful tips to make you blogger really seo by removing all duplicate content from your blog.Duplicate content can be urls,meta tags,titles and descriptions.
First Issue:-Adding Of Meta Tags:As we all bloggers add meta tags to there blogs.Meta tags are used to tell search engines about the important keywords of your blog and inform it to rank high,there blog for these keywords.As in the way we all add meta tags to blogger,we don't know that they are adding it in wrong way and effecting rank of all blogger pages,becuase the way we are adding meta tags,the seach engines are considering it for all your posts.As i will tell on how to add these meta tags correctly.
If you you don't know how to ad meta tags you can read for sure.
Solution:-Whenever you are adding meta tags to blogger just embed that tags between these two lines,i am writing below.As embeding between them will make it add only for blog home page url.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<-----------------Meta Content Here------------------->
</b:if>
Just add meta tags in between them,and to get meta tags you can read on this post.As now search engines will consider them for only your blog home page,not all blogger pages,which will remove duplication of same keywords for all your blogger posts.
Second Issue:-Different Urls With Same Content In your blog:As there is one more problem in blogger as search engines indexes comment links of blogger posts,now if you have comments on posts and search engine indexes blogger posts url and also indexes its comments link and find the same content in both,which make the duplicate content for search engines and your seo for that post will be effected,its an serious cause and should be solved.Just view the picture below to make it clear.
Image source From Bloggerstop.net
As you can see in image the post page is same but it is being indexed for two differnt urls,which creates duplicate content and affects seo.
Solution:-Go To (Layout -> Edit HTML), click on "Expand Widget Templates",
Then Press (CTRL+F) and find below codes:
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
And Replace above codes with any one codes you like:-
First One:-
<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + "#" + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>
These codes will change the form of link and stop them from being indexed.
Second One:-
<a expr:href='data:comment.url' title='comment permalink' rel='nofollow'>
<data:comment.timestamp/>
</a>
It will make the link simply nofollow and inform engines not to follow them.
Now your comments link will not be get indexed by search engines.In a month time, i am sure google will start visiting your blog more and make it seo.Best Of Luck From Me !!!
Tip: It is always effective to send out different links with your email to your Friends as they wont be boring seeing the same link all the time.
Lets see how we can add a link to a random post from your blog or website to your email signature
*Log in to your GMail account.
*Go to the Gmail Lab Page.
*Find the Random Signature and Signature tweaks.
*Enable both labs.
*Click Save Changes and Gmail will reload.
*Go to Settings
*Go to General
*Under signature select the signature box and type you name and other information you would like to display in your email.
*Then check the check box Append a random signature from feed and add the feed URL to your blog or website.
* click "Save Changes"
This is add random links to your post with the title from your RSS feed. Simple but quite effective method to add a random link to your signature from your blog or web.
If you liked his post please leave your comments as all will be appreciated.
We all use blogspot blogs,but do you know what drawbacks you are facing while using this free blogger service.Well i am not saying you not to use blogspot service,but want to make you aware of what you are gaining over here and what you are loosing over here,so as to make you aware of every aspect about using blogspot blogs leading to its pros and cons.
I will share here different problems with blogspot blogs which effect your seo heavily.
Now everybody think blogger is product of google so we can use blogspot service as it will be packed with seo in google search engines.
At this point suppose you are right,as me too when started my blog thought same as you will be thinking.
Assuming your thinking right,you are getting good seo from google search engines.Now what about other search engines,they dont give importance to blogspot domain names,as there are thousand of engines more to give you traffic,if you still leave them,you can't forget two basic search engines like of yahoo search and msn search.Using blogspot name you are loosing half of your traffic,as these engines can give you same traffic as given by google.Means leaving blogspot name can double your traffic from search engines for sure.
If we assume your thought correct then only you are lossing half of your visitors and how much visitors you will loose now when i will prove your thought wrong.
Yes the true is blogspot blogs are not seo in google search engines also,what we assumed above was wrong.As i will tell you some things to prove it.
First Thing:-Domain name is always preffered over blogspot domain name not only on other search engines but on google too.For some keyword you search,you will not to positioned to first position in results as always blogs with domain name will be a top,if they also have an post with that keyword.As if i would have used domain name,my traffic would have increased by 40 percent sure.
As you can see google adsense program now rejects all blogs on blogspot for there program,as they themselves avoids blogspot domain name and approves too quickly the self hosted blog with domain name.
Second thing:-Google search engines doesn't index blogspot label pages.But in self hosted blog your category pages get indexed also.
http://googlewebmastercentral.blogspot.com/search/label/webmaster%20tools
Now andy has explained here why google doesn't index them and some easy solution,you can read it.
This problem has to be solved by google blogger service,you dont have much to do in it.
Thirdly:- When you use older and newer post link to see different pages the link get like this below:-
http://anshuldudeja.blogspot.com/search?updated-max=2009-05-04T11%3A53%3A00-07%3A00&max-results=7
Even these links are not indexed by search engines.So again a great loss.
Now One more important Point:-Think you have been using blogspot for an year and you want to switch to wordpress,you are in threat to loose all your traffic and seo for your all post pages.As you can set redirects while switching to wordpress easily but it will not work as well as you think, Google will insert their virus/malware notice and all redirects will not work as easily as you think.
In that case i greatly liked the trick labnol used to switch to wordpress without loosing an page rank and search engine juice,you can read about it from here on how he switched from blogspot to wordpress.
Using custom domain name from beggining or from many months and then switching will not might be much problem for you.
So you must have to have custom domain name if still you are using blogger.
I have written this post reviewing andys post,you can read it from here also to make more clear about it and ask from him more about it.
Tweak Network 1.3 is the mozilla addon which will speed up the loading of web pages and increase the maximum number of simultaneous downloads from a site. If you are using Firefox browser? There are many ways to make Firefox work faster; perhaps you have ever read many tips on the internet to make Firefox faster.Now i will share a tip to make your Firefox faster which is installing Tweak Network Add-on.
It is very easy to get Tweak Network Add-on; you just need to download it here
After going there click on Add To Firefox > Then it will Ask for Install > Click Install Button > Then the Add On will get installed > It will Ask for restart of Firefox Restart it .
After you install Tweak Network Add-on, please follow the guides below.Please run your Firefox. Click Tools menu, when the options appear, click Tweak Network Settings.
Then an alert will appear Click OK. Now window will open.
Click Power button, then click Apply button ,Then Click OK Done
I hope this will speed up your mozilla if it works slow. Best of luck for this addon.Happy Browsing.
Improving page rank Of Blogger and websites that google counts.
Here are some Tips To increase the page rank.
Include useful high-quality information on your site.
Create content that users want and will share with others.
Submit your site to various web directories and reference sites.
A web directory “specializes in linking to other web sites and categorizing those links.
Post your site’s URL (web address) to popular web directories including Open Directory Project (ODP), Yahoo!, and LookSmart. Also post your URL to online reference, e.g., Wikipedia, industry-specific expert sites, blogs, etc.
Publicize your site to everyone with whom you communicate.
Add your site’s URL, e.g., www.googleguide.com, to every piece of communication you initiate. The TechSoup (The Technology Place for Nonprofits) article, Publicizing Your Web Site: Getting the message out there, recommends that “your Web address should be listed everywhere that your phone/fax number and mailing address,” e.g.,
* Business cards
* Letterhead
* Newsletters
* Brochures
* Press Releases
* Fax cover sheets
* Email signatures
Write a newsletter and send it out.
Inform people what’s new or noteworthy on your site. The newsletter will remind people about your site and encourage them to visit to find interesting content.
Provide a Rich Site Summary (RSS).
RSS is also known as Really Simple Syndication. JISC describes RSS as “a lightweight XML format for distributing news headlines and other content on the Web.”
In addition to making it easy for other sites to distribute your headlines and content, your RSS feed will be indexed by popular Blog search engines, including Technorati, BlogSearch, and Ask.com Bloglines.
Ask other high-quality websites to link to your website.
Getting other “good” websites to link to yours usually helps your website’s PageRank and ranking on Google.Note: If your site links to delisted websites, your website might also be removed from Google’s index.
Provide motivation for highly ranked websites to link to yours.
Getting highly ranked sites to link to yours will improve your ranking more than getting many poorly ranked sites to link to yours.Note: If Google suspects that you’ve traded links with other sites for the sole purpose of improving your ranking, it might penalize or blacklist your site.
Check out a site before you link back.
When you receive a request for a link, check the site before you link back. Is it a site worthy of your link, i.e., vote of confidence? Would a link be of value to your page’s visitors?Keep your website up. If your website is not accessible for an extended period of time, Google may reduce the ranking of your site.
Give away content.
Enable others to copy, distribute, and make derivative works.
If most of your site’s content is commercial — e.g., pages about your business — consider adding other pages with useful information for the public. For example, if you sell bicycles, include pages or a blog about bicycle paths, bicycle gear, or with tips on bicycling. Publicize these and encourage others to link to them.Translate your website into foreign languages.
If you don’t know a foreign language, find others that do.Thx To Google Guide For tips.
The Mail-to-Blogger feature in the blog enables you to publish the post via Email. For this feature you have to make a change in you r blog setting. Just go to “Settings” then click “E-mail & Mobile” or “E-mail”
You can create a Mail-to-Blogger address which you will use to publish the posts via email to your blog:
To post to your blog via email, you need to configure your Mail-to-Blogger email address in Settings | Email:
The format of the email address will be username.secretword@blogger.com. Note that this Email must be kept secret. Otherwise, anyone who gets it will be able to post as you.
Also be sure to specify whether or not you prefer your email posts to publish automatically. If this option is not checked, then your posts will be saved on your account but will not appear on your blog until you log in to Blogger.com and publish them yourself.
Once you have saved your Settings, you can send email to your blog. The subjects of your email letters will be the titles of your posts, and the body of the emails will be the posts themselves. To include an image in your post, you can attach an image to you your email.
Notes:
• Sometimes email programs append text to the bottom of each sent message; to make sure this cruft doesn't get posted to your blog, put #end at the end of your post.
Every new blogger faces this big question that "What topic to choose for his/her blog"? Some people blog just for fun or hobby and some blog purely to make money from it. If you fall in latter category, it is imperative to give some serious thought about choosing your blog niche. The success of your blog in terms of money depends heavily on how wisely you select the topic of your blog. Following are the guidelines, which will help you in your quest to select an appropriate topic for your blog:
Personal Interest:If you are blogging on the topic that you love and are passionate about it, then you have already won the half battle. The first and the most important thing is to select a topic that you love to explore, read and talk about. Readers are only going to come back on your blog if they find the content appealing and useful, which you can only serve them if you are comfortable and expert in your domain. You will also loose interest very soon in generating fresh content if it is not of your choice. Having the favorite topic in hand for the blog does not mean that you will surely get profit from your blog. There are other factors involved. Read on..
Popularity:Assessing the popularity of the chosen niche is the next step. If people do not search for the topic you have chosen, then no matter how hard you work, the results will never be promising. Start analyzing with search engine results. Google the first keyword that comes in your mind related to the topic and see the results.
Profit Potential:The popularity of the topic alone doesn't mean it can give you profits. The most critical thing is to look whether it has sufficient advertiser's base in major PPC Advertising networks. Google Adsense and Yahoo Publishers Network (YPN) are the two most popular PPC programs. Google has provided Google AdWords Keyword Tool and Google Adwords Traffic Estimator to look for high paying keywords related to your blog niche. You can use these toolsto get a fair idea about the traffic and average CPC for the relevant keywords for AdWords/Adsense. Although the provided data is not accurate estimate, still it will give you fair amount of data to assess the earning potential of your blog niche. For more accurate keyword research you can use WordTracker and can get the list of targeted keywords for the topic of your blog.
Content availability:To keep running your blog, you need fresh quality content at a consistent pace. Some bloggers face this situation where they start very enthusiastically, but soon they end up in searching for fresh ideas for their blog content space. For making a successful blog you have to feed it with new valuable content continuously. Choosing a niche that has scope of vast amount of content creation is a wise decision. You can subscribe to news bulletins, discussion forums and your peers in the Blogosphere to get new ideas and topics for fresh new content.
How to check if the blog is DoFollow or NoFollow. This is the very important trick wanted by everyone to check for the dofollow blogs becauase blogs searched from the result of dofollow blog search engines doesn't provide with full satisfying results.So i will give you today one trick to how to check if the blog you like is Dofollow or Nofollow.
Just you need is that you are using mozilla firefox and then download this addon and install it.
After installing it will ask for restart your firefox , restart it to take in effect the addon you installed.
Now you can go to any blog or website and right click over any link on website and select the option NoDofollow , and you will see all the links turning to blue and red colors.
All the Blue color links are Dofollow and Red are Nofollow.It's the best way to search for dofollow blogs or websites as you can check each and every link on any website or blog either it is dofollow or nodofollow.
How to Check Broken Links In your blog or website as if you would have many posts in your blog and its not possible to constantly check for any broken links in your website manually,and its importanat to find the broken links as the post may not be useful without that link.So you just need a program or software to check all your internal and external links in your blog or website for broken links.Dont you,If yes then for what you are waiting.
Just visit this site http://home.snafu.de/tilman/xenulink.html#Download to know more abut it
Read all about it if you want to know about whole process.This is the Download Link on above site to download the software.
Just download it unzip it to get set up and install it in your computer,i will just take seconds.
Then start the software it will ask for url provide it and click ok.The pocess will start,the time it takes depend upon the links you are having in your blog.Below is the snapshot my blog report,you can check it how good the software work.Its really helpful.
I hope you will love this software its really helpful to you as nobody checks for broken links as posts get old,but we should remove broken links as it never make you loose your readers.
Backup your blogger posts and comments regularly,this is blogger tip i think every blogger should follow for its safety,do you back up your blog posts regularly ? Very less amount of bloggers would have been using this tip including me,so lets follow this tip and start backing up your blog posts from now as i have stared it from today.
If you searching for backup of blogger template its here.
How to Back up bloggers posts for all Bloggers including blogspot users.
Login to http://draft.blogger.com
Then Go to
SETTINGS ► BASIC ► BLOG TOOLS, click on the Export Blog, and once more on EXPORT BLOG button.
Choose the location where you want to save the file, and click Save. And that's it!
Your Blog (content + posts) is save as .xml document. Quite small, too. You will not be able to see it, or read it on externally, but you can always upload it through Blogger.
Now you go to your any other blog and get there the import blog option following same path as above and upload the file you downloaded when it asks after clicking import blog option.Your all posts and comments will be uploaded,then the blogger will ask you to publish all posts,select the posts you want to publish and click Publish,all selected posts will be published.
Think how useful it can be for you in case your blog gets deleted by mistake or any other case by google,you can upload and make it to run again.
Yet another easy method for all type of blogging platforms. You just have to visit BlogBackUpOnline, open an account, register your blog, and it will be backed up daily. They offer enough memory (space) to store your Blog. Even for a Full time blogger.I hope you will be satisfied with this infomation.Best of Luck!!
Every blogger needs good and free image hosting services with unlimited bandwidth to host there images and blogger who designs template and have pictures blog need it very badly because there bandwidth completes very fast.As using these services on slow internet connections is very difficult as it takes much time to load page and upload images and the images upload is also as not easy as this service which i am going to review.
As all have been using image hosting services like Photobucket , Imagehack , Picasaweb , Flickr and many more but all these services gives you an limited space and limited bandwidth that exceeds in mid of month and creates an problem for you as your readers can't see the images.
The new image hosting service i got is Pict.com.
As you can see clearly from picture just click upload box select image from hardisk or web and upload in single click it will upload in seconds faster than other services.You will like this service for sure.
It has an one great feature also which i loved to use is that you can capture any website image or visible part of website or any selected part you want and directly upload it to your images or will save to your hardidsk.Like you take webshots i.e you can take webshots of any thing on web if you are using mozilla firefox.
They have provided firefox addon for this just download it and install it if you want to take webshots and directly upload your images.
After installing just right click on any website of which you want to take webshot and select Save Page To Pic.com and capture any part you like of that page.
Some Great Features of Pict dot com:-
1.Easy to upload
2.Unlimited hosting space
3.Unlimited Bandwidth
4.Upload speed very fast
5.No need to sign up
6.Can take Webshots of any site
7.Simple To use
I hope you will like this image hosting service,even if you don't use it for all your images hosting,host some of them here too,to reduce your load on other hosting services by using this service. Best of luck with this new image hosting service.
Yahoo messenger,i think everybody loves it.Many bloggers who love blogging may like using the messenger as well on there computer,as me too online on my blog and messenger always,think if both of these options combine in your blog it will add more interactivity to my readers and easy for them to chat with me.
Then i went to messenger and found a widget which can be added in your blog like google has feauture to add gmail chat in your blog,as same we can add yahoo messenger chat in the our blog.Its very easy to add it in your blog.Just visit the yahoo,customize widget get codes and add them.
As before we have also had tutorials on how add yahoo emotions in blogger posts and yahoo emotions in comments.If you want these too in your blog before visit them.
Now how to install yahoo chat box.
Visit this yahoo pingbox service.
Select there the theme you want and write text what you want to show and save it.
Then will be asked to login with yahooo id,sign in and you will be send to customizations page of the chat box.
Select the size you want and color of the text and get the codes for your widget.
After getting codes paste them anywhere in the blog sidebar html/javascript page element where you want your yahoo chat box to appear to chat with your readers.
I hope you will love this widget for sure.
How to add 'save As Pdf Button' in each blogger post of your blogger so as the readers can save your post in pdf format which they like.This tool will really help your readers in saving your post they like.I am vey happy to post this button as i m sure my readers will like this for sure as is very useful.After this post i will post an trick 'how to save any blogger all posts as pdf too' i.e to download all bloggers posts of any blog in pdf format.
How to add 'save As Pdf Button' ?
Login to Blogger > Layout > Edit HTML > Expand Widgets > Press Ctrl+F > Search For Below Red Codes
<data:post.body/>
If you are using Read More Hack you will find above code twice so use second code.
Add the below codes after the above codes
<script type="text/javascript">
</script>
<script src="http://web2pdf.freepdfconvert.com/pdfbutton.js" type="text/javascript">
</script>
Preview it.If its work fine.Save your template.
Some Blog Publisher & Webmasters wants to put some widget on their sides or blog that shows some fresh news on their blog or sides to attract the people.If till now you not having this type of widget then now this is for you.
you can Click Here
Or go to http://www.feedzilla.com
Freezilla is a frre widget for every one and you can chose the source,type of news you want to taget the visitor.
And also you can chose the method for installation like Flash, HTML, Javascript, Wordpress,myscpae,blogger and lots of more.
Why add Feedzilla news widgets to your site?
* Attract targeted visitors to your website by providing them with the latest news in over 1,700 categories of your choice.
* Increase your visitor's repeat traffic by providing fresh and relevant news.
* Add credibility to your site by providing news from top news providers.
* Improve your ranking on the search engines (SEO), by adding free, updating and customizable news to your site.
So now today we will start from the the first line of the codes so that not only you could design a template but know the exact meaning of each and every line in blogger template and learn xml.First i request you to please create a new demo blog with any name in your blogger account and choose a minima template (First template in Template Lists By Google) as its layout to learn the tutorials.
Then got To Its Layout > Edit Html and Check mark Expand Widgets To Expand.
Now lets start from the first line of codes.Below are the first 5-6 lines at the start of the template codes,which you will find same in all the blogger template codes.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Now i will explain these as what they mean and for what are they used.
That is the mandatory beginning for XML,documents may, and should, begin with an XML declaration which specifies the version of XML being used.
1)First Line in red is part of specifying what version of what mark-up language you have used.
2)Second Line in green is used to declare the Document Type Definition (DTD) which consists of a list of syntax definitions for each element in your XML document.
DTD means creating the syntax rules for any XML document that uses the DTD. You are specifying which element names can be included in the document, the attributes that each element can have, whether or not these are required or optional, and more.The DTD can either be internal (written into the same document that it's being used in), or external (located in another document).As this lines are same in all blogger templates so i think no need to go for further discussion.
The exact function of it if you wanna know is below as i got it while reading one Web Master forum.
Means that web browsers don't have to guess, and go into strict mode where they expect you to know what you are doing and render the page as specified by the W3C standards.
Withour DOCTYPEs modern browser go into 'quirks mode' which means they gloss over all your mistakes like if you forget to close some tags and stuff, but can't render exactly as you intended because they have to assume you don't know what you're doing and therefore the information you give it (via mark-up) may be incomplete.
As this is the fixed part of beggining in bloggers and not to much worry about.So just wait out for my second tutorial on design series.
How to change title tags for blogger,my third post to blogger template design series.Title tags for blogger play most vital role in search engine optimization.Today i will hold the tutorial on title tags and various ways on how to add these tags and what effect it makes to seo with various demos and pictures to make it all clear.
Let me first tell you, this post is the part of my blogger design tutorial series i have started.Below are the first two posts of my blogger design series.
The next part of codes to be explained are:-
<title><data:blog.pageTitle/></title>
<b:skin><
Then lets see how your title will be shown for your blogger posts if you use the above line as it is in your blogger template.
Where Funny pictures in above picture is title for blogger which will always remain before the title of blogger post pages,as a result your important keywords of post pages are left behind in search engines as will definately harm you in case of long title of blogger i.e more than two words.
Now you need to have the solution for this problem,you have to have title of blogger post pages coming before than blogger title.
If you want to show up the title of blogger post pages first and then the blogger title like this in picture below:-
Just install this hack from here and your blogger post title will always appear first than blogger title in search engines.
On more Hack is there,to use just blogger title at blogger home page and post title at post pages like in picture as below:-
Now if you want this type of hack get it from here,post title only in blogger posts pages.
Now one more thing i would like to tell you that many bloggers add by mistake or according to there wish the title line like below
<title>Funny Pictures Blog</title>
in there blogger template code after the <head> tag.
We use this type of title declaration in website pages,as to give each web page the title according to our wish and need.
As blogger codes will also accept this title tag but the result after using this will lead to same title in blogger home page and all blogger post pages.As i have given Funny Pictures Blog as my title,so my title for my blog and all post pages will always remain (Funny Pictures Blog) as i used in above example.
If you are using this type of tag you will not be able to implement the two hacks for change of title tags above i told you.
I think,have provided sufficient information on title tags for blogger yu need to know. If you have any further questions to be asked leave your comments below.
How to Add Meta Tags To Blogger,as this is second post of my blogger design series.As you would be knowing what importance is of adding meta tags to blogger if not,you should know.Meta tags tell bots about your keywords and tags you use so as to your blog get emphasized on those keywords which will help you to get better results in engines for those keywords.
To get learn from beggining from xml codes you can check my first post here on blogger design series i.e xml codes declaration.
First i request you to please create a new demo blog with any name in your blogger account and choose a minima template (First template in Template Lists By Google) as its layout to learn the tutorials.
Then got To Its Layout > Edit Html.And now check for below two lines in codes.
<head>
<b:include data='blog' name='all-head-content'/>
Now i will tell you something about head tag and how to add meta tags.
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.
The <title> tag defines the title of the document, and is the only must required element in the head section!
<b:include data='blog' name='all-head-content'/>
is a blogger specific directive. When blogger reads your template and parses through it, it does so from the top down. When Blogger hits this particular line, Blogger then realizes that it needs to 'inject' some HTML to replace this line.
Now below are the meta tags which you have to add after above two lines.
<meta name="keywords" content="Blog, Blogger, Google Blogger, Template, Blogger template, tutorial, hacks, blogger tutorial, tips, tricks, blogger tips, blogger tricks, blogger tips and tricks" />
<meta name="description" content="widgets, hacks, help, tips and tricks for bloggers using the Google Blogger platform for their blogs. Some posts also relevant for those using other blogging platform" />
<meta name="author" content="Anshul Dudeja" />
<meta name="ROBOTS" content="ALL" />
In red are the keywords and description for my blog,please change it with yours.Then third line in green is used to tell uthor name as is not necessary and the last one is used to tell all the search engine robots to follow the all content of this blog i.e to index all posts or giving permisssion to all type of robots to index in there engines.
And also check the image below on how exactly to add the meta tags if any problem.
I am sure you will now be able to add meta tags succesfully.
And dont forget to check my next post on blogger design series which will be on title for your blogger as is very important and then we will proceed towards the css part thats the design of blogger.
How To Change Fonts And Colors Of Blogger Templates you are using.This is my 5 th post in my blogger design tutorial series,if you haven't started reading this series then you are not late,as my most important posts will be getting starting from tomorrow which will cover all blogger css codes to give it different looks and how to modify it with there meanings explained.
My last posts on blogger design series are below,if you havent checked them check for sure.
Now i will continue on how to change the fonts and colors of your blogger template.
First i request you to please create a new demo blog with any name in your blogger account and choose a minima template (First template in Template Lists By Google) as its layout to learn the tutorials.
Then got To Its Layout > Edit Html
Now you will see codes like these in your html :-
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
Now in these codes all the colors of blogger like back ground color,title color,link color,text color,description color and many more mostly have been defined and most of the font types used in blogger too are defined.
Now actually this is the place to define the colors in blogger codes and has been made easy in to modify too by google,so google has defined mostly all colors used in blogger here,but nowadays we are using free professional blogger templates designed by various bloggers.So they usually define only some colors here according to there design and most are given while when they are writing codes for particular part like for header or sidebar,dont worry reading this just if you are regularly reading this series it will become all clear to you in end.
Now as i have shown you above codes,in them you can easily read and see the words like bgcolor,text color,link color defining background color of template,text color of template and link color of template.
Similarly all the below lines too,you can read and understand for which part it is defining the colors.If you wanna change any color from above what you have to do.Let me Explain,Just i am picking one line from above codes.
This is the line i took i.e 1st line from code:-
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
Now above line tells the background color of your blogger template.
How to change it ?
Just you have to change the red code in above line with your color code you want,as #ffffff is for white and #000000 is for black.If you want more color codes just visit here.
Now this way you can make changes to all colors and fonts defined in above codes.
Now one more way to change them in very easy way provided by blogger platform which will work for sure if you are using blogger default template and if you are using other free template then it is not sure it will work or not for all colors as it depends on the way designer designed his codes.
Just Go To Layout > Fonts And Colors.
You will see the option like these in the image below:-
At the left you have window to select for which you want to change color or font,just select from there and from right select the color you want,with all colors shown and then save your changes.In this way you can easily change the color you want for many things in blogger layout.This is very useful.
But if you are not using default google template then you have to study codes as i explained at the start of my post above and find the color where it is defined for any part which you want to change and make a color code change there manually and save the codes.
I hope now you will be able to easily edit color and font codes for your blogger template.For any questions just leave your comments below.
How to Change Background And Text Color Of Blogger template as is very easy task which can be done without any problem.If you still think you really doesn't know anything about codes and to do it is really a big problem then don't miss even a single post from this blogger design series.If you want from start just start reading my all posts on design from beginning which explain all codes to blogger used in its design on how to make your own blogger template.
Today i will be going to explain on the next part of codes coming in blogger template. and codes define the body section of your template.Below are the codes.
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
The body element defines the document's body.The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc and after defining all these the tag is closed at end.
So we start with writing body {
this symbol means we have started defining css for body and will close it when it will be complete with opposite symbol } and this tells the css for body has been defined.
Now in body css comes the next line background:$bgcolor; this line defines the background color of your template. But the color defined here is $bgcolor. So which color it is.
As i have also told you before on how to change the colors for blogger template in the previous post.There $bgcolor would have been defined in variable definitions,that color would be your blogger template background color.If you want to change it you can change $bgcolor it from there.
And one more is to just write color code in place of $bgcolor that color will be used as we use this way to design new blogger template like this background:#000000;.
You can get all color codes from here.
You can also use any image for you blogger background just write the above line like this.
background:url(http://url_of_the_image);
Your image will be used in place of color.
Now comes margin:0;.Now what does this tag do.As its clear from its name it defines all the space around the elements for which it is being defined,like you added any header in your template and now you want little spacing to it from top,below,left or right.So you have to use this to get space for the element from any part around it.
In full it can be defined as
margin:5px 10px 5px 10px;
That tell the
margin-top
margin-right
margin-bottom
margin-left
all 4 things define these 4 margins above from all four sides.
Then comes color:$textcolor; as this too is same to define color of your text as you can change it in by replacing text color code with $textcolor or just change $textcolor from from visiting this post.
Now come these lines
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
telling font and size of text to be used,you can define it as you want.As font defined is georgia you can define any one you want like arial,times roman anything you want.
Now the size has been given small you can give it medium,normal or large.
you can also define size in specific measure like this.
font-size:12px;
now this line text-align: center;
This aligns the text to the centre you can make it to align left or right also by just changing center to left or right.
and after defining all these the css for body tag ends with this symbol }.
Hi friends how are you,hope everything will be fine.Yesterday i was thinking how to help my blogger readers and other bloggers more to help in making there blog more beautiful and design it according to there own wishes as they want so as they can install any widget and hack at any place in there blog they want.
So i am planning to start a blogger design series on how to design a blogger template from scratch.So for this i would consider one default template of google for taking all my tutorials and that will be minima template,the first blogger template in list.
I will take all codes from this template and start explaining it from 1st line on how to modify it and what it means,so that you can alter it any time according to your wants.
And this will be done in a series of tutorials and will keep posting these tutorials with the time i get to post.I hope you all will love this design tutorial series.
Please leave your feedback on this below with your comments and all will be appreciated.If you have any other suggestions on this series please leave your comments we will discuss over it.
Features: Free Blogger template, 2 Columns, right sidebar, menu page links, search box, social bookmark.
Converted by : blogger templates 4 you
Features: 2 columns, right sidebar, dark, top menu links, custom search box, business blog, mac os.
Features: 3 columns, right sidebar, Football Blogger Templates, Green, social bookmark.
Instructions Page: instructions page here
How make work automatic read more hack with thumbnail from blogger static pages,as we have been using automatic read more hack with thumbnail in blogger templates alot.But after the the blogger released static pages feature for the bloggers, the read more hack started making problems in static pages.As when we open the static page in blogger,it openes with read more hack and remains same on expanding.So to make the pages feature work well with this hack we have to remove the automatic read more hack with thumbnail from pages to make the blogger pages work well.
So just now get continue with the implementation of hack to remove read more hack from blogger static pages.
Just Login To Blogger and Go To (Dashboard → Layout → Edit Html → Expand Widgets → Press Ctrl+F) and now search for below codes.
<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
What you have to do is find the code like above in your template, and add the red codes to them like i did to make static pages feature work properly with this hack.I have implemented this hack on my automatic read more hack with thumbnail.
I hope now you will be able to make pages feature work properly with this hack in your blog.If you have any other problems or using any other read more hack and facing problem let us know below in comments
Hi friends as this is my first tutorial on my blog from a long time, as i have been giving you a lot of templates for your blog from past few months.And thanx to you all for appreciating and using my templates.But From now i would be making tutorials for you as well with templates.So tutorial for you today is about adding the custom fonts to your blogger blog, for its post titles or for post body.As before also it was possible to add custom fonts to blogger using cufon, but it was bit complicated and difficult to do so in blogger and it also increased the loading time for our blog.
So now its very easy to add custom fonts to your blogger blog and it doesn't effect the loading time of your blog too.I will tell you two API to add custom fonts.Use the one where you like the font style to be used in your blog.
1.Google API (Best method to add fonts but as now font styles are very limited here will be more added soon by google.)
2.Kernest API (Its also an good API but with good collection of fonts.You also can use it for sure.)
Installation Steps For Custom Fonts From Google API
1. Go To Google API.You will see Fonts Written Like Below.
2.Just Hover your mouse over the font you like and you will see link click to embed font name.Just click the link or font only you liked.
3.Now you will be shown the get the code button and the the demo of how your font looks in different sizes.
4.Now just click the get the code button and you will be given the code like below.
5.Just copy the code from there.
Codes are like below.
6.Now Just go to blogger Layout > Edit Html > Press CTRL+F and find for </head> tag.
7.Now Just place the codes you just copied from google api before this </head> tag.And now you are done to place the font codes succesfully.
Now comes the part to define font in your css to which titles or post body you want to show that font.As to define font you need to know some css codes about your templates, to know which css property defining your particular font style.
Like you want to define this font for your header title, now you need to know in which css part of your template, the font -family for your header has been defined.As now most bloggers are using custom templates, so css for each of you is different.Its difficult for me to tell for each, which css you use for header title and which for sidebar titles.So i will just tell you the basic css style you need to add in your template considering the default codes the blogger template use.
.description {font-family:FontName;} */ This css style for Header description /*
.sidebar h2 {font-family:FontName;} */ This css style for Sidebar Title /*
.post h3 {font-family:FontName;} */ This css style for post Title /*
.post {font-family:FontName;} */ This css style for post body /*
#footer h2 {font-family:FontName;} */ This css style for footer Title /*
body {font-family:FontName;} */ This css style for whole template /*
Please dont forget to change the FontName with your custom font name,you using in the script,that you placed in blogger html.
Now just important thing to implement is :-
1.To which place in your template you want to use custom font.
2.After it,just need to find the css property defining that part in your template.
3.After finding it,just define the font-family in its css like i have shown above.
And here i complete an easy installation with custom fonts from google api.
If you want to use multiple fonts or wanna style them with bold or italic.You can go furher here to read on how to do that.Just you have to make small changes in codes you get.As you will come to know after reading.
Installation Steps For Custom Fonts From Kernest API
1.Just Go To Kernest.com
2.Now you will see page like below.You will get an option to search for fonts.Either you can do by writting font and hit enter or by browsing them with tags like popular fonts or latest fonts or from any designers.
3.After selecting font you like, will see domain embed url.Just click it.
4.Pop up window will open like below and just type your blog url and hit add.
6.Now below the font you will see the codes to be placed in blogger i.e to left of domain embed url.Just copy those codes to your notepad.The codes look like below.
<link href="http://www.kernest.com/fonts/riordon-fancy.css" media="screen" rel="stylesheet" type="text/css" /><!--//
HOW TO USE THESE FONTS FROM KERNEST
1. Paste this embed code into your website
2. Add the fonts to your CSS tags. Example:
p {
font-family: 'Riordon Fancy';
line-height: 140%;
}
3. Add this link in your website's footer
<a href="http://kernest.com">Fonts by Kernest</a>
4. Refresh
-----------
-----------
//-->
You just need to took the red codes and place them before the </head> tag as you did for google api fonts.
7.Now again you need to define the font style css.Its all same way you have to do as i told above for Google API Fonts in step 7.
I hope now you would have no problem in installing custom fonts for blogger.If you still feel any problem, just leave your comment below i will see over it and will try to solve your problems.