Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Sobat mungkin sering melihat blog atau website dengan mesin wordpress yang menggunakan navigasi next-prev pager menggunakan judul post sedangkan home tetap. Trik tersebut sangat menarik karena memancing para pembaca dan pengunjung blog untuk melihat artikel sebelum dan sesudah dari post yang sedang dibaca, karena yang tampil adalah judul artikelnya. Trik ganti next-prev pager di blog ini belum
Seo Master present to you:
How to install Blogger Template - SMS
How to install Blogger Template, How to install a Blogger XML template ? HOW TO INSTALL BLOGGER TEMPLATE. How to install a Blogger template? Why I can’t install a template? Blogger gives an error. How do I log in to my blog without the navbar? How do I customize my template?
How can I edit the menu of my template? How to go back from Dynamics Views to standard templates
Why the date is displayed as “undefined” or this is not show? Why some images in my template disappeared? How to add the comment form to my template? How do I add my feed of Feedburner to my blog? How do I translate my template to another language? What should I do after I install my template?
How to display the navbar again in my template? How to display the last posts or comments on the sidebar?
Why is my blog shows few entries per page?

[SMS] Synthesizing Multiple Sources Tutorial

 1. Login to your blogger.com account.
 2. Go to Blogger dashboard.
 3. Go to Design tab.
 4. Now click Edit Html tab.
 5. Before editing your template, you may want to save a copy of it. Download Full Template
 6. Upload a template from a file on your hard drive (.xml file extracted): click Choose file option button.
 7. Now save your template.

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below codes :
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

Replace DESCRIPTION HERE,KEYWORDS HERE as below.

DESCRIPTION HERE:Write your blog description
KEYWORDS HERE:Write the keywords of your blog separated by comma.

How To Configure Favicon:

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.


HOW TO DISPLAY THE LATEST POSTS OR COMMENTS ON THE SIDEBAR?

 1. Go To Blogger (Dashboard → Design → Page Elements → Add a Page Element).
 2. Select a Feed widget, and use the following URL’s:

 To show the recent posts:
 http://YOURBLOGNAME.blogspot.com/feeds/posts/default

 To display the latest comments:
 http://YOURBLOGNAME.blogspot.com/feeds/comments/default


HOW DO I CUSTOMIZE MY TEMPLATE?
For color and the font size, some Blogger templates offer an option to change it from the Dashboard (Dashboard → Design → Template designer → Advanced or Dashboard → Template → Customize → Advanced in the new Blogger design).

CAN I REMOVE THE CREDIT FOR THE TEMPLATE?

 No, the vast majority of templates are licensed under a Creative Commons, GPL or similar license, thus removing the credits would be using an illegal copy of the same. You can simplify the credits or relocate, but not remove them. Remember that the templates are free, so keep the credits is a way to thank those who designed and / or adapt the template.
In this tutorial i am going to show you how to install blogger template in the new updated version of the blogger.
just simple follow the step and install a blogger template in updated blogger interface.

1. Login to your blogger account



2. Now just select Template and you can see bellow button at the right hand side.



3. Now just click on backup / restore button and one box will pop up (you can see it in bellow snapshot)




4. Now simply browse your template and click on upload and you have done !

You can also change the arrangement of the widgets using layout.

Or

Frequently Asked Questions

How to install a Blogger template?

0. If your are using Dynamic Views, you need first go to Design (Dashboard → Design) and then click on “Revert to previous template”.
1. Download the template and unzip the file (you can use a free unzipper software).
unzip-template
2. Go to your blog design section (Dashboard → Design → Edit HTML ).
In the new Blogger design: Dashboard → Template → “Manage” button.
3. Backup your previous template (Download full Template).
upload-template
In the new Blogger design:
4. Find and upload the xml file.
5. If you see the following warning:
warning-install-template
Click “keep widgets“.
6. Enjoy!

Why I can’t install a template? Blogger gives an error.

There are several possible factors that cause an error Bx-xxxx:
  • The code is directly copied, and Blogger did ‘t interpret it.
  • Temporarily Blogger  is not accepting  templates with certain codes or gadgets.
Possible solutions:
  • Remove widgets or gadgets that come with the template downloaded.
  • Clear your browser’s cookies.
  • Trying to upload the template with a different browser (Opera, Firefox, Chrome).
  • No copy and paste the code directly, upload the xml file.
  • Wait 24 hours and try again.

How do I log in to my blog without the navbar?

The Blogger navbar is just a plug and provides a shortcut to enter your blog, but you can always log in from Blogger.com.

How do I customize my template?

For color and the font size, some Blogger templates offer an option to change it from the Dashboard (Dashboard → Design → Template designer → Advanced orDashboard → Template → Customize → Advanced in the new Blogger design). Here, you can see the result directly in the template.
blogger-template-designer
Major changes in the templates needed to know at least a little CSS and HTML. A quick way to modify a template is change the images in the CSS code, for others with the same dimensions. That is the process to change the header of a design, for example.
Additionally, some templates have their own settings instructions and customization, refer to the same download page of your template.

How can I edit the menu of my template?

1. Most templates have a menu that can only be edited from the HTML (Dashboard → Design → Edit HTML or Dashboard → Template → Edit HTML in the new Blogger design). In many cases the code to look for is like:
 <li class='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
There you can edit the expr:href=’…’ code, with your own links: href=’http://mylink…’. Also see the instructions in your template for more information.
2. Some templates include a link list widget or a pages widget to edit the menu directly from the Dashboard.
  • For link liks widget: Dashboard → Design → Page Elements. Or Dashboard → Layout in the new Blogger design.
  • For pages widget: Posting → Edit pages → New pages. Or Dashboard → Pages → New Page in the new Blogger design.

How to go back from Dynamics Views to standard templates

If you are using the new Blogger templates, called Dynamics Views, you don’t have access to most templates on the web.
To go back from Dynamics Views to standard templates you only need:
  1. Go to Template designer (Dashboard → Design).
  2. Click on “Revert to previous template”.
That’s it. Now each time you enter in ‘Design’ section, you will be able to upload custom templates again.

Why the date is displayed as “undefined” or this is not show?

Probably because you don’t choose the right date format. The format should be changed from the panel and usually the correct types are:
1. Dashboard → Settings → Formatting → Date Header Format
In the new Blogger design: Dashboard → Settings → Language and formatting → Date Header Format
date-header-format
Or
2. Dashboard → Settings → Formatting → Timestamp Format
In the new Blogger design: Dashboard → Settings → Language and formatting → Timestamp Format
timestamp-format
Read the instructions of your template located on the download page.

Why some images in my template disappeared?

Although we host the largest number of images in Blogger, images may suddenly disappear because:
  • The images were removed from the original hosting.
  • You use a own domain.
Solution: Download the template from Templates again, or from the page’s original author and re hosts the images on an external service such as Photobucket, or ImageShack.

How to add the comment form to my template?

Blogger recently added the Comments Form within the same template, below the individual posts, if your template does not have the form there, you may need to manually add it or activate it.
To add it manually:
  1. Enter in the code of your template (Dashboard → Design → Edit HTML orDashboard → Template → Edit HTML in the new Blogger design) and search for:
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
  2. Replace that code with the following:
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
To activate it:
  1. Enter the options panel comments (Dashboard → Settings → Comments).
  2. And in the “Comment Form Placement” section, select: Embedded below post.
Note: If you are using the new Blogger design, you will need back to the classic version and follow the two step above.

How do I add my feed of Feedburner to my blog?

On the menu: Many templates show the feed in the top menu, to change the default feed for feedburner, go to your template code (Dashboard → Design → Edit HTML orDashboard → Template → Edit HTML in the new Blogger design) and search for:
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>
Replace this with:
<a href='URL del feed en Feedburner'>
Now, in the settings panel of the feed ( Dashboard → Settings → Site Feed orDashboard → Settings → Other → Post Feed Redirect URL in the new Blogger design) also add your Feedburner URL.

How do I translate my template to another language?

Directly in the template code. (Dashboard → Design → Edit HTML or Dashboard → Template → Edit HTML in the new Blogger design), with a really simple process:
  1. Using the browser search, find the text you want translate.
  2. Replaces that text with your translation.
  3. Repeat the process for all the words / phrases that you want to change.
The text within an image need to be changed with a image editor (eg. Gimp or Photoshop) and then, replace that image url with the edited image url.

What should I do after I install my template?

After installing a template, there are several things worth to check, update or modify, we recommend you to read our article with all the points.

How to display the navbar again in my template?

Easy! Enter in the code of your template (Dashboard → Design → Edit HTML) and search for:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Delete it and that’s it.

How to display the last posts or comments on the sidebar?

  1. Enter the administrator page elements (Dashboard → Design or Dashboard → Layout in the new Blogger design).
  2. Add a new feed widget, with the following URL’s:To show the recent posts:
    http://BLOGNAME.blogspot.com/feeds/posts/default
    To display the latest comments:
    http://BLOGNAME.blogspot.com/feeds/comments/default
Why is my blog shows few entries per page?
Blogger recently implemented a mechanism called “auto pagination” to reduce the loading time of its blogs. This mechanism is to show less Blogger entries per page if it detects that the page is heavy to load.
To avoid that this happens, you can try to decrease the load time of your blog, some recommendations are:
  • Optimizing images. For example, using Smush.it or a free image editor like Gimp.
  • Eliminate unnecessary gadgets.
  • Use “read more” in your longer posts.
  • Optimize CSS code. For example, with CSS Optimizer.
Fix: Wrong Description and Image on sharing posts to Facebook

When you share a post on Facebook, it will display a thumbnail picked from the post page along with a short description of the post. But in many cases Facebook fails to identify the correct image and description that it should use. This leads to irrelevant images and description coming up in Facebook when you or your readers share the post. This is totally annoying, and I had got many queries regarding this on my Facebook page and via email. So for those who are trying to figure a way out of this, here is the solution.

Which image and Description does Facebook pick from your Post Page

Facebook regularly scrapes your page and caches the data to your servers. They look for meta data information(Opengraph tags and others) in your post page. The meta data can explicitly specify the image and the description to use when the page is shared.If Facebook doesn’t find any meta data, then their Algorithms will fetch some description and image from your Page. Facebook shows a wrong description or image when their Algorithms are not able to fetch the correct image and description from your Post Page.

We will solve both of these issues using two different techniques.

1. Fixing the Wrong Image Problem.

You might have noticed that comment avatars, and other irrelevant images come up when you share the post on Facebook . The solution to this is to specify the image in the page meta data. We will be using open graph tags for the same.

Go to Template > Edit HTML and just above

</head>

Paste the following code snippet.
You can alter the image URL in the above snippet. That image will be used when no post thumbnail is present.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.matrixar.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' property='og:image'/>
</b:if>

Now when you share posts to Facebook, a proper post thumbnail will be displayed. If the post doesn’t have images, then the fall back image which we have specified in the snippet will be used. If you don’t see results right away , then it is because of the caching done by Facebook. You can force Facebook to update the cache by debugging the post URL using this tool.

2. Fixing the Wrong Description Problem

Wrong description comes up when Facebook is not able to recognize the content and structure of your page. This also can be rectified by using meta data, but since blogger doesn’t provide a post snippet tag outside the blog post widget, it is impossible to do that using valid HTML. So we will have to go for other alternatives. If meta data is not found, then Facebook normally uses the First paragraph in your page(which is big enough). So it will be a good idea to get used to the paragraph HTML tag <p>content</p>. The Blogger Post Editor doesn’t use paragraph tags but uses lots of line break tags instead. So if you are using the Blogger Post Editor, then you will have to go into the HTML mode of the post Editor, and make sure that you use paragraph tags(I do agree that it is a difficult thing to do). If you can’t take that headache, then you can use a third party Publishing Tool like the Windows Live Writer which has superior Editing Controls. After doing this, you will again have to force a Cache refresh using the Facebook Debug tool and your post should show a proper description on Facebook.

3. Scripts coming up in the Facebook Description

I had seen a couple of cases where JavaScript snippets come up in the Facebook Description. Facebook somehow mistook the script for content, and this is probably because of the way you have added the script. Go to your template and see if there are any special characters in front of that particular script tag. If you find one, then remove it, and force a Facebook Cache Refresh.

Source: [SMS] Synthesize Multiple Sources
2013, By: Seo Master


Seo Master present to you:

Last month, just before I left on vacation, I posted three sets of data to help implementors of the HTML5 parser specification optimise their code. There are several implementations coming along, for example those that are part of the html5lib project and the one behind Validator.nu.

The three sets of data that I posted are all derived from parsing several billion documents from Google's Web search index using a parser I wrote in Sawzall.

The first set of data gives the relative aggregate distribution of invocations of the "in head", "in body", and "in table" insertion modes, for each of the insertion modes. This allows implementors to determine, for instance, that invoking the "in body" code while in a cell must be very efficient, while invoking the "in body" code from the "after frameset" code need not be as efficient, in case the implementor has a strategy that optimises one at the cost of another. See: documentation, data.

The second set of data gives the relative aggregate distribution of tokens for each phase/insertion mode pair. This can help implementors that are using a cascade of if statements decide on the right order for their statements. For instance, the most common token type seen in the "in body" insertion mode is character data, and the second most token is the start tag token for an a element, but the isindex start tag was almost never seen. This tells implementors that they should check for characters and a start tags long before checking for isindex tags. See: documentation, data.

The last set of data examines the number of attributes per element. It allows implementors to decide on the optimum memory allocation strategy for attributes. For example, since most elements have 9 or fewer attributes, the data structure that stores attributes can be optimised for simply having 9 attributes, using little memory, and if an element has more than this number of attributes, the implementation can switch to a separate implementation that is more memory-heaving but is optimised for large numbers of attributes. See: data.

I hope this data is useful!

2013, By: Seo Master
Powered by Blogger.