Blogger Design

The error when you setting up new template in a new blogger interface

noreply@blogger.com (Chum Visal) — Tue, 5 Jun 2012 18:05:00 -0700

The newest blogger interface will be relevant to all blog soon. Some of you up-to-date to the newest blogger interface and error message all of a sudden appear when setting up a new template.

For example ,you added a popular publish widget to blogger when using old template . However in new template ,there is no Popular publish widget in template itself . So error happened.
How to proceed in cases like this would be to remove Popular publish widget in Blogger and re-install later .
This is different to old Blogger interface . That old you will show a dialog for those widget that does not appear in new template and requesting keep these icons or remove . We are able to still keep your old widget with the code put in widget content .

So I recomment you to :

Do backup before installing any template
Copy widget content
Remove all widgets
Install new template
Add widget back to template

Khmerzee Template

noreply@blogger.com (Chum Visal) — Thu, 10 May 2012 18:28:00 -0700

Live Demo | Download

Here is the first blog that TheBloggerDesign has been edited and fixed lots of bugs and codes error also images. This template is not TheBloggerDesign owner, but it is fix and change a new style (I think it's batter than before) by us, also add full SEO in there. I hope you guys enjoy it with us. ~_^"

10 Dropbox Add-ons list

noreply@blogger.com (Chum Visal) — Tue, 1 May 2012 05:19:00 -0700

I am not confident that anybody out here's unaware of Dropbox cloud storage service. It’s a totally free online storage plan to share files among various products and can get on everywhere. Dropbox is among the most widely used among free cloud storage services and today Google Drive and Skydrive is targeted as much as join the league. Anyhow, within this publish we won't discuss Dropbox rivals but we'll consider awesome realm of Dropbox Addons, that will enhance dropbox consumer experience.

Dropbox is loaded with lots of Add-ons and helpful hacks, which further enhance its functionality to large degree. Now, let’s feel the listing of Dropbox Add-ons, to understand the hidden energy of Dropbox and also the all benefits they provide.

List Of 10 Dropbox Add-ons

Below is 10 add-ons and they are most popular one too. I can show very short of my list. Though, if you feel I miss out any of useful dropbox add-on, you can let me know via comment.

SendToDropbox : Wish to collect and save all of your E-mail accessories to some rut(Dropbox)? SendToDropbox is really a mighty service which upon configuration, can help to save all E-mail accessories to Dropbox. Not just that, it may save your valuable E-mails if you wish to. Just connect the 2 services, grab the E-mail address designated by them and you're simply ready in order to save E-mail accessories for your Dropbox account.
DropTunes : DropTun.es dropbox addon may be the service for music enthusiasts which enables customers to sync their music files saved in Dropbox account, now which may be performed while using web service, DropTun.es. It brings all of the audio recordings(mp3, m4a, ogg, wav) in the Dropbox account connected, which may be performed while using HTML5 media player. Make certain, you're ready using the latest modern internet browser(Google Chrome, Mozilla Opera, Ie, Safari, Opera). apple iphone customers can download the application to savor their tracks on the run, Android application is yet to really make it towards the market.
DropPages : DropPages is really a service for that beginners, would like to get the most from Dropbox, from it like a hosting company to host an easy static HTML websites. Not just the beginners, small company proprietors may also see it as the very best and also the least expensive choice to host their websites to aware the folks regarding their business and may market their product without needing to spend extra cash over website hosting and stuff.
JotForm : Consider JotForm since the best options to all or any people contact forms or Contact page WordPress wordpress wordpress plugin. You could make, tweak the form how you'd like them being. Not only that, using JotForm, clients could also upload/send data around 300 Mb. Apart from usual functions and buttons, text fields, JotForm also allows clients to embed payment(PayPal, Google CheckOut plus much more) buttons for his or her forms too. Rather than flooding your publish office box, you'll be able to configure it to deliver all your files and mails to Dropbox. Try it out. Accessible both in(Free and Paid out) variants.
CloudHQ Dropbox Addon : CloudHQ can be viewed as like a perfect friend for corporate people or perhaps a management team focusing on a task. CloudHQ syncs all of your documents to Google Paperwork and Basecamp instantly. CloudHQ is featured with bi-directional sync reflects the alterations produced in one service into another. CloudHQ can syncs all of your data to multiple web services including Dropbox, Google Paperwork and much more. Customers may even edit documents saved in Dropbox using CloudHQ. Another must try, compensated reely, your decision.
MacDropAny : You will find very couple of dropbox addons for mac can be found which is certainly one of individuals addon that we believe is going to be handy for Mac OS customers. MacDropAny enables customers to sync any folder on their own computer to talk with Dropbox cloud storage. MacDropAny works with Snow Leopard and Lion (from version 1.6), and could operate on older systems too. To sync folders, one have to drag-n-drop the folder onto MacDropAny icon, or simple run the plan to perform the relaxation for you personally.
Dropbox Folder Sync Add-on : Another Dropbox folder sync Add-on, but this for Home windows PC customers, similar benefits as those of MacDropAny. Aside from Dropbox native folders, you can just enter the brand new path from the folder which you need to synchronize with Dropbox. Pretty intuitive user-interface, together with that customers can easily Sync or UnSync folders from the best click context menu. Make certain, the folder is part of NTFS partition, on Home windows XP(SP 3), Vista and Home windows 7. Additionally, it requires .Internet framework too.
DropitToMe : DropitToMe enables other customers to upload files for your Dropbox account without hampering your Dropbox account security. Sign up for a merchant account there, connect the 2 services by granting the access. When you are done, you're offered a hyperlink, which you'll distribute towards the customers from whom you want to get some files together with the upload password that you simply set during the time of signing up your bank account. 75 Megabytes may be the file limit, which you'll request from others customers to upload it for your Dropbox account. Pretty nice start-up.
WriteBox : Another unique service, specifically for Writers/Authors, something which enables customers to create utilizing their internet browser, that is really synchronized using the Dropbox account. This means, all of your text and write-ups are instantly loaded towards the Dropbox account connected. Not really a full-fledge writing pad, but simply minimum text-pad which can be used as light documents and work.
Dropbox Automator : Would you like to impose some functions towards the file or content you upload for your Dropbox account? Dropbox Automator enables customers to impose pre-defined constraints towards the content they upload on Dropbox cloud storage service. Its an enormous service and handles large amount of benefits like transforming some document to 1 form to a different, delivering it to Google Paperwork, Amazon Kindle Fire and much more. If you are using Dropbox to keep your photos along with other albums, you are able to automate process including uploading the photo to Flickr, Picasa, along with other editing tasks which may be enforced on photo/images. Their email list really is limitless, it’s completely up to you the way you use Dropbox Automator. Must try Dropbox Add-on.

You can get Dropbox account. Register here !

A Way to Study the Website Link

noreply@blogger.com (Chum Visal) — Tue, 17 Apr 2012 10:24:00 -0700

Backlink building is among the most significant things when do SEO for any website . Maybe you have consider purchasing or buying and selling links as well as other websites to enhancing rank in Internet Search Engine ?

Over the older times of internet , websites used to fill the information having a certain keyword to boost and bolster their ratings within the search engines like google. The repeating the term many occasions with the content made sure the website got placed superbly coupled with a higher ranking from the internet search engine searches. Such practices jeopardized with the standard of content.
The Google ratings go with the on-page and off-page factors of Search engine optimization and backlink form probably the most important off-page factor for Search engine optimization ratings. These links are examined when it comes to the standard and quantity and therefore are the backbone of internet search engine ratings.

Building and looking after of links could be essential in experiencing this preferred high ratings within the search engine results from the search engines like goggle. All the backlinks made goods of high quality and really should be relevant or even the right areas too. Different links could be of various types and for that reason you have to evaluate the hyperlink carefully to offer the specific results.

Type of link

Links could be of many types only two can influence the ratings. They are the image and also the backlinks. Backlinks are thought better than image links and for that reason they have more preference. Other sorts of links such as the JavaScript links aren't given any importance through the search engines like google because the bots from the search engines like google cannot read or follow these links inside a most convenient way.

Anchor text

The anchor-text can be quite crucial in determining the need for a hyperlink. You ought to not focus on the title of the organization or website but will include the expected key words from the anchor-text from the backlink. This really is so since the ranking of the site is dependent around the words within the anchor texts from the links which point in the website. Worth more words get greater ranking within the internet search engine results.

The age of the link page

Age the hyperlink page on the web is also key point to become examined and really should be analyzed while determining the need for the hyperlink. Major search engines like Google trust individuals web pages which have been on the internet for any lengthy period of time.

Incoming and outgoing links

A backlink which links with other websites can provide good Search engine optimization value and also the more direct links will be more valuable. The hyperlinks which are provided on webpages will be more authoritative and may offer links of excellent value. If your internet site is associated with an expert website that's associated with other websites too then it's great for the status and ranking of the website. The need for the hyperlink also is dependent on the amount of outgoing links it's. If your link will get shown on the page then it requires increased traffic. You will find also 'no-follow' links which may be used to boost the traffic however they fail to offer the values which are set by Search engine optimization.

For anyone who is creating a website for Search engine optimization then you should think about the standards that offer value to links. It can save you time using the Search engine optimization tools. Examining links can be quite required for individuals who're starting a brand new website.

BlogSpot Advanced SEO

noreply@blogger.com (Chum Visal) — Sun, 25 Mar 2012 01:07:00 -0700

Today, appears to become a happy Blogger day for BlogSpot user as BlogSpot added a few of the advanced SEO choices for Blogger blogs. We'll dive into all of the new feature in particulars following a break but allow me to begin with a few of the from the subject talk.

So, lets not waste our some time and find out about brand new features and just how for doing things.

How to Enable BlogSpot Advanced SEO settings?

Login for your Blogger dashboard and under configurations > search preference you'll find all of the new Search engine optimization options that is added by Blogger team. You need to enable all of the configurations 1 by 1, and my suggestion would be to look at this guide seriously else an incorrect configurations (BlogSpot Robots.txt), can lead to complete de-indexing of the blog.

I don’t meant to scare you, but all I’m saying is it’s time to get serious as Google wants to take SEO very seriously. Period!.

Within this iteration, listed here are new Search engine optimization features added by Blogger team:

Description meta tag:
Custom 404 page message
Custom redirects (Redirect 404 pages to any page on your blog).
Custom robots.txt
Custom Robots header tags
No follow tag, open link in new tab

Lets Dive into World of BlogSpot Search preference settings:

Lets, consider all of the feature 1 by 1 and my suggestion implement it in your blog for better seo of the Blogger blog.

Description meta tag:

This is when you'll be explaining what your site is all about. An interesting description within 150 character can help visitors to learn about your site and will help you have more click from internet search engine. Also, from Search engine optimization perspective, I recommend you to employ your primary keyword within BlogSpot meta data description.

Here is my example : Blogger Design is the best blogger that you can get how to design blogger for free.

Make sure you explain about your blog within 150 characters, as search engine ignore characters after 150. Once you enable this feature and added meta tags, after search engine bot recrawl your site, search engine will show your meta description like this in search engine:

Custom 404 page message

A 404 page is generally a mistyped pages or perhaps a customer land on the page, which doesn’t exceed. This practice 404 message enables you to create custom HTML message, which you'll display in your Blogger 404 pages. Now, it’s time to make use of your creativeness and design something awesome.

Custom redirects

This is helpful, when any third party site associated with your website and added a hyperlink which doesn’t exist or maybe you remove a webpage and wish to redirect the traffic. You should use Google Website owner tool to locate these kinds of 404 pages and hang the redirection. It may be little extended process, but in some instances it's very helpful to tap the missing traffic and convert them into real traffic.

No follow tag

We use nofollow link for what? The answer is when you are writing about some anti-hacking trick and you have to link to hacking sites for giving examples. Or you do a way for webmasters to tell search engines "Don't follow links on this page" or "Don't follow this specific link.".

Custom Robots header tags

One necessary feature for Search engine optimization of the BlogSpot blog, although it appears like little confusing but this informative guide from Google will again attempt to explain my way through simple words.

Custom robots.txt

Well, this really is one a part of new BlogSpot SEO setup, that I really want you for doing things carefully. An incorrect, configurations can lead to deindexing of the large a part of your website. A Robots.txt file is use to prevent internet search engine bots from moving the “Not so important” a part of your site. For instance, Search pages, archive pages and so forth. If you're a new comer to Robots.txt, this video by Google Engineer, Matt Cutts provides you with enough fundamental information on BlogSpot robots.txt file:

In nutshell, It is best to to make use of Robots.txt to suggest for your sitemap URL and control No-indexing by noindex tag in custom robots meta data. To learn more, read official page on BlogSpot robots.txt. I'll cover an in depth information on Blogger robots.txt in future.

Improve SEO by Making Use of Headings for Post Titles

noreply@blogger.com (Chum Visal) — Fri, 23 Mar 2012 23:22:00 -0700

Today, The Blogger Design want to show you about SEO for Blogger user. Before I show you about this I want you to know what is SEO mean? Here is SEO mean

Follow this

1. Go to Blogger.com and login your account
2. Go to Edit HTML
3. Add this code below <head> or replace in the original code

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>&t/a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

4. Save
5. Done!

What is SEO mean?

noreply@blogger.com (Chum Visal) — Fri, 23 Mar 2012 23:13:00 -0700

Search engine optimization (SEO) is the process of improving the visibility of a website or a web page in search engines via the "natural," or un-paid ("organic" or "algorithmic"), search results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users. SEO may target different kinds of search, including image search, local search, video search, academic search, news search and industry-specific vertical search engines.
As an Internet marketing strategy, SEO considers how search engines work, what people search for, the actual search terms or keywords typed into search engines and which search engines are preferred by their targeted audience. Optimizing a website may involve editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines. Promoting a site to increase the number of backlinks, or inbound links, is another SEO tactic.
The acronym "SEOs" can refer to "search engine optimizers," a term adopted by an industry of consultants who carry out optimization projects on behalf of clients, and by employees who perform SEO services in-house. Search engine optimizers may offer SEO as a stand-alone service or as a part of a broader marketing campaign. Because effective SEO may require changes to the HTML source code of a site and site content, SEO tactics may be incorporated into website development and design. The term "search engine friendly" may be used to describe website designs, menus, content management systems, images, videos, shopping carts, and other elements that have been optimized for the purpose of search engine exposure.

Create a Video Slideshow in Sidebar

noreply@blogger.com (Chum Visal) — Sat, 10 Mar 2012 18:42:00 -0800

This is a wideget for embeddign video. You are able to place one video from video plan to this sidebar by placing the embed code directly into widget content . But we would like a slideshow for video within this widget ,is it feasible ?
Yes,it is possible . We can produce a small slideshow for video within this widget .

Download Loopedslider.js

How to do ?

Do backup before make anychanges

1,Go to Dashboard ->Design - >Edit HTML

2,Upload Looped slider script in your host or host them in blogger .

3,Add script of Jquery framework right after </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
After this line ,add script of looped slider .
<script src="your_host............./loopedslider.js" type="text/javascript"></script>

4,Add the script to activate loopedslider in the end of template ,right before </body>

<script>
$('.slides1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>

5,Add the CSS code right before ]]></b:skin>

.slides1 { position:absolute; top:0; left:0; }
.slides1 div { position:absolute; top:0; width:500px; display:none; }

You can add or remove CSS code to make the slide display as you want .

6,Save changes .

7,Go to Page Elements ,Click on edit link sidebar widget which you want to add video slideshow ,or create a new HTML/Javascript widget .
Paste the HTML markup as structure bellow :
<ul class="slides1">
<li>
.............video embed code .............

</li>
<li>
................video embed code ..................

</li>
<li>
..................video embed code .............

</li>
</ul>
<ul class="pagination">
</ul>

Save changes .

10,Back to blog and see the result .

Auto Redirect Mobile for Blogger

noreply@blogger.com (Chum Visal) — Mon, 27 Feb 2012 01:34:00 -0800

Many many of blogger that using Blogger.com want to make your blog look nice and it so difficult to do like this, but I want to share you one is "Auto Redirect Mobile for Blogger". I know now Blogger has been making Auto Redirect Mobile easily in Blogger.com, but I share javascript file it can Auto Redirect Mobile to your sub-domain like this blog : www.SabayDL.com change to m.SabayDL.com in mobile phone.

1. Take the way here, its download javascript file -----> Download
2. After that open / edit the file has JavaScript with noteped.
In it find the link http://www.thebloggerdesign.com and change with your blog URL . When it is please do not forget to save and create a file format in javascript .js
3. Upload javascript .js on your hosting.
4. When it is uploaded and get the URL, please to go to the blogger ----> design ----> Edit HTML. do not forget the backups first, if an error occurs, then the error is not fatal. Also do not forget to check Exped Widget.
5. Enter the code below, the above code </ head> . Change the URL javascript. Js with the url. Js that you've uploaded earlier.

<Script src = ' javascript URL. js 'type =' text / javascript '/></Script>

6. Save and Done.

Make Blogger Contact

noreply@blogger.com (Chum Visal) — Sun, 26 Feb 2012 18:07:00 -0800

Really sometime difficult to find working contact for free for blogger.Which means this publish will help you add contact easily. it'll useful for your site visitors can send anything that he or she request. so that you can increase your blogger more popular.check it out.

Go to register:: Kontactr.com

1. Log in to blogger account > Go to Pages >> Create New page
2. Open New page that you create and change Compose to HTML >> Past code AJAX Widget >> Save

3. You will see like this on your blogger

Done

Make an Subscription Pop-Up

noreply@blogger.com (Chum Visal) — Sat, 18 Feb 2012 22:37:00 -0800

A lot of writers stated that the subscription pop-up very useful in growing the amount of subsriber . Some writers for example Johnchow use subscription pop-as much as show his new books and request for subscription from visitors .As you can tell ,the amount of customer in Johnchow website is extremely impressive .
Pop-up bad or good ? I don't pointed out here

In this publish ,I have would like to demonstrate steps to make a regular membership pop-up for the blog . This pop-up can look in the first-time you visit also it only appear again when you re-visit (you can change it up to you want). Live Demo

Here are steps for making a pop-up in Blogspot

1,Open template file by go to Blogspot Dashboard ->Design ->Edit HTML . Check the box "Expand widget templates"

2,Add this CSS code right before ]]></b:skin>

#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

3,Add this HTML code right before </body>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Pop-up title goes here</h1>
<p id="contactArea">
your pop-up content and subscription form ... goes here
</p>
</div>
<div id="backgroundPopup"></div>

This is HTML code of your subscription pop-up .
Replace the text in bold with title of pop-up and pop-up content .
To make this popup becomes a subscription pop-up ,you can add Feedburner subscription code into pop-up content . Like this

<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Subscription to The Blogger Design</h1>
<p id="contactArea">
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SabaydlKhmerMusic', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="Simplex" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</p>
</div>
<div id="backgroundPopup"></div>

The text in bold is the code of Feedburner subscription form .

You might ask me : how to get Feedburner subscription form ?
It's very easy .If you are using Feedburner ,login to your feedburner account -> click on your blog feed ->click on Publicize tab -> Click on Email Subscriptions -> Active this service -> code of subscription form is in text box .

If you do not use Feedburner ,you can add other code to pop-up content ....

4, Now it's time to add Jquery code . This code will make the pop-up work .
Add this code right before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$("#popupContact").css({
"position": "absolute",
"top": toppos,
"left": leftpos
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {

//load popup
setTimeout("loadPopup()",5000);
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
}
});

});
</script>

pay attention to this line setTimeout("loadPopup()",5000);
5000 is the delay time in millisecond . You can set another value if you want .
That's all . I hope this update can fill your requests and make the subscription pop-up more profesional. You can check it out yourself and see the result .

How To Make Blog Page Number Navigation

noreply@blogger.com (Chum Visal) — Sat, 18 Feb 2012 03:20:00 -0800

Really sometime difficult to find working number navigation gadget for blogger.Which means this publish will help you add page number navigation easily. it'll useful for your site visitors to help keep watching your other publish.so that you can increase page-sights.Its just blogger widget . check it out.

1. Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<style type='text/css'>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;

}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

you can change blue number that number you need to show on your blogger

4. Save HTML/Javascript. you are done.

How To Remove The Blogger Nav Bar

noreply@blogger.com (Chum Visal) — Fri, 17 Feb 2012 01:23:00 -0800

Many people who host their blogs on Blogger (www.blogspot.com) complain concerning the lack of ability to get rid of the blogger navigation bar via their elements page. Indeed, if that is where you stand searching, the only real factor you'll have the ability to do from there's alter the color to one of many pre-determined choices.

If you want to get rid of the blogger navigation bar, you have to access your HTML template. Before I say to you how to achieve that, however, Let me first discuss the reason why you might wish to take away the nav bar out of your blogspot blog.

How To Remove It

If you have made the decision that you simply certainly wish to remove your blogger navbar, it's really a simple procedure that any non-technically-inclined person can accomplish effortlessly. Just follow these steps:

Login to your blogger dashboard.
Click "Layout"
Click "Edit HTML"
Find the BLUE code you see in the image to your right. The code will be quite near the top of your HTML section, you shouldn't have to scroll very far at all. The blue code should definitely be there, but the data box you see may not be, depending on where your template came from.
ADD the code you see in red precisely where you it see it in the image to your right. If you want to copy and paste it, do so from the bold text you see below:

#navbar-iframe {display: none !important;}

Preview It First!

Use your preview button before you click save! If you like what you see, go ahead and save.

What happens if I want the navbar back in the future?

Simply go back into your HTML the same way and delete the part you just added. It's really that simple!

How To Make a Blogger Template : DATA TAGS

noreply@blogger.com (Chum Visal) — Wed, 15 Feb 2012 17:24:00 -0800

How To Make a Blogger Template : DATA TAGS

In the past publish ,I pointed out on which is on icons and includable ,and today ,within this publish ,I wish to demonstrate the Blogger APIs,or data tags ,that can be used to incorporated specific bits of data in template file

All of these data tags has structure :
<data:name/> or <data:name1.name2/>
where name or name1,name2 is the name of the particular piece of data you want to use

Now ,we go further :

Within the publish on section and widget ,I said you will find 12 kinds of widget :

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

So you will find 12 categories of Blogger APIs (or data tags ) for 12 kinds of widget ,these APIs may use only within the corresponding widget and something group for Globally Available Data ( the information you should use anywhere in template )

1,Globally Available Data :

These data tags does apply towards the entire page, so technology-not only anywhere, unlike other data tags which could simply be utilized in a particular widget.

<data:title/>: Return the blog's title.
<data:pageType/>: Return type of the current page. It can be 'item', 'archive', or 'index'.
<data:url/>: Return the URL of the current page.
<data:homepageUrl>: Return the homepage of the blog.
<data:pageTitle/>: Return title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
<data:encoding/> : Return the encoding to use for the blog, e.g. UTF-8.
<data:languageDirection/>: Return either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
<data:feedLinks/>: Return the autodiscovery feed links for the page header.

How to apply them ?
Very simple ,in template ,in a place you want to show blog title ,just add a <data:title/> and the blog title will be shown .

Page Header

There are two data tags for this widget :
<data:title/>: The blog's title.
<data:description/>: The blog's description.

Blog Archives

The many styles provided listed here are for that different default choices on the Page Elements tab. If you are creating a new version, it's simplest to make use of 'FLAT' because the style, after which manipulate the relaxation from the data as preferred.
<data:title/>: The title of the widget.
<data:style/>: One of 'MENU', 'FLAT', or 'HIERARCHY'.
<data:data/>: A list of each archive unit, each of which contains:
<data:data.name/>: The name of this archive interval, e.g. "August 2006."
<data:data.url/>: The link to the page containing posts from this interval.
<data:data.post-count/>: How many posts there are in this interval.

Profile Widget

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.
<data:title/>: The title of the widget.
<data:userUrl/>: The author's profile URL.
<data:location/>: The location from the author's profile.
<data:aboutme/>: The "About Me" information from the profile.
<data:displayname>: The author's display name.
<data:photo/>: The user's profile photo, made up of the following:
<data:photo.url/>: The photo URL.
<data:photo.width/>: The photo's width, in pixels.
<data:photo.height/>: The photo's height, in pixels.
<data:photo.alt/>: The "alt" text for the photo.

On team blogs, the profile widget contains less information about more authors, as follows.

<data:title/>: The title of the widget.
<data:authors/>: The list of all authors, each of which contains the following:
<data:authors.displayname>: The author's display name.
<data:authors.userURL/>: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.
<data:title/>: The widget's title.
<data:content/>: The content of the widget.
Feed Widget

A feed widget's content is dynamically loaded using Google AJAX API after blog is rendered in a browser. It can be styled only using CSS.

<data:title/>: The widget's title.
<data:feedUrl/>: The URL of the feed.
Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.
<data:title/>: The title of the widget.
<data:sourceUrl/>: The URL of the image.
<data:width/>: The image's width, in pixels.
<data:height>: The image's height, in pixels.
<data:caption/>: The image caption.

Labels Widget

The labels widget includes a list of all labels that are in use on the blog.
<data:title/>: The widget title.
<data:labels/>: The list of labels, each of which contains:
<data:labels.name/>: The text of the label.
<data:labels.count/>: How many posts have this label.
<data:labels.url/>: A link to a page displaying posts with this label.

List Widget

The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.
<data:title/>: The widget title.
<data:items/>: The list of items.

Link List Widget

A slightly fancier list, where each item has two parts to it: the text and the link.
<data:title/>: The widget title.
<data:links/>: The list of links, each of which contains:
<data:links.name/>: The link's text.
<data:links.target/>: The link's URL.

Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.
<data:fullButton/>: The URL of the Blogger button you've selected.

Blogger Offer Five Dynamic Views For Visitors

noreply@blogger.com (Chum Visal) — Tue, 14 Feb 2012 19:02:00 -0800

Blogger has offered five dynamic sights for visitors . Now ,we are able to browse your blog without only normal blog design ,but additionally in five different sights .Using the latest in web technology, including AJAX, HTML5 and CSS3 ,during these sights we are able to :

Find out more posts without needing to reload or click to some second page .
Read posts in various layout (flipcard,sidebar,variety,snapshot and timeslide )
Browse a webpage faster because images only load whenever we view ,not all at one time .

Make it possible for different sights to blog:

Your site is public. Your visitors do not need to register to see your site.
Your site has feeds fully enabled. Within the Configurations Site feed tab, you've enabled either Full or Jump Break for the Publish Feed.
You haven't disabled dynamic sights. Within the Setting Formatting tab, the choice for Enable Dynamic Sights is placed to Yes.

To determine your blog in various sights , simply give a /view in the finish of blog url . For instance ,to determine The Blogger Design blog in sights ,you can turn to this address :
http://thebloggerdesign.blogspot.com/view

In most sights, search will come in top of the right hands corner. Hitting the ">" arrow within the top left from the header bar will slide the header bar across and permit you to distinct sights for that current blog in addition to key in a brand new blog URL.

An essential factor these sights require modern browsers for example Ie 8 , Opera 3.5 , Chrome or Safari. Many aspects of these sights won't work for those who have a mature browser.

Please be aware these sights don't presently support most of the features your original blog might have, including exhibiting ads. Blogger team stated that they'll let user personalize these sights, including supplying a choice to create a specific view because the default and exhibiting ads within the coming several weeks.

Multi-Level Menu For Blogger Template

noreply@blogger.com (Chum Visal) — Sun, 12 Feb 2012 18:12:00 -0800

Here is how to add Multi-Level Menu For Blogger Template. You can get Multi-Level Menu For Blogger Template with follow this one.

Here's steps for adding multi-level menu :

1. Add this code before </head>
<script src="http://dinhquanghuy.110mb.com/superfish.js" type="text/javascript"></script>
2. Find this
.nav li ul { background:#fff; position:absolute;left:-999em;width:172px; margin:0px 0px 0px -2px; border:1px solid #dfdfdf; border-width:1px 1px 0px; z-index:999; }
and delete left:-999em;
3. Add this code before ]]></b:skin>
.nav li ul {display:none;}
4. Now find this code :
<ul class="nav" id="cat-nav">
<b:section id='menu' showaddelement='no'>
<b:widget id='LinkList1' locked='false' title='menu' type='LinkList'>
<b:includable id='main'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</ul>
and replace it with the code of menu like that :
<ul class="nav" id="cat-nav">
<li><a href="link to category">Category</a></li>

<li><a href="link to category">Category</a></li>

<li><a href="link to category">Category</a>
<ul>
<li><a href="link to sub-cateogry">link to sub-category</a></li>
<li><a href="link to sub-cateogry">link to sub-category</a></li>
<li><a href="link to sub-cateogry">link to sub-category</a></li>

</ul>
</li>
</ul>

That's all . I really hope it useful for you .