The disadvantage of using google+ comment on blogger

Google has give a new feature for blogger comment. That feature is google+ comment system but can be used on blogspot. Some of the advantage is the framework VALID HTML5, that's very nice for SEO (i think). But did you know?, the blogger commenter don't always have google+ account, some of people is just browsing and when wanna asking something, he must sign up or login to google, but how if the browser don't have google+ account?, they can't comment of course and you can't know what is their message and comment, so that's it, the normal visitor can't comment, that's the disadvantage....

Inset and outset text/elements on web design

Hello there, i just want to update a mini post :D. So i was wondering about 3D, i don't know how to make a 3D, i tried to use shadow, or gradient or the others, but now i got it, i got the trick suddenly sended to my brain xD. Maybe this post's not very important for a web designer, but i just want to share for people who don't know about this.

Outset/3D

The 3D actually is just an illusion, but this is my theory, the light is normally come from above, so if the element is 3D its must has a brighter color on top of the element. Then with logic, the color of the main element must be darker than the top, and but must be brighter than bottom. The bottom must be darker than background, element color, and the top light. So like this image:

Inset

The inset is easy, you just need to exchange the light and the dark border/shadow place. Just like this:

So just like that, i made the image with photoshop xD (sorry if it's not good).

Apply it with CSS

With css you just need to copy a code xD.

Demo: inset text & outset/3D text

INSET

OUTSET

Demo: inset & outset/3D element

INSET

OUTSET

Got it?, so that is, i'll update later :D

New blogger XHTML, post first image (thumbnail)

When i edit my blog template, i found a code that i never seen before. That code is post  first image. The code it's like an old blogspot code data:post.thumbnail, but the old code resolution is 72px, but this new code's resolution is like the src image resolution. So this is very good for a template post thumbnail.

The code

I will no give a tutorial, i just tell you the code
<data:post.firstImageUrl/>
That code will only work in the 'blog post' widget.

Mayanringan v1-1 super simple template for blogspot

Hoho, hello there, i never use this blog anymore xD. Actually i was created a template, that called "Mayanringan", in indonesian, it's mean a simple and fast template. I was released the v1 of mayanringan, but that template is very bad, so now i share a new template for blogspot that is seo friendly, valid HTML5, valid CSS3, valid microdata for google, very simple and fast load, elegant design, responsive and many-many others. Ok that's all, you can download after read the instruction below xD.

WARNING!!

This template is created by Damar Zaky. Before i want to make this template is premium and must pay for get it, but because so many who wants this template, so i share it for free. But with a prerequirement, it is: YOU MUST DO NOT DELETE OR REMOVE THE CREDIT LINK TO DAMZAKY, except if you edit it totally different from before. No more, just that ;D.

PERHATIAN!!

Template ini dibuat oleh Damar Zaky. Sebelumnya saya sempat berpikir akan membuat template ini berbayar, tapi karena banyak kawan dan lawan yang sangat ingin memiliki template ini, akhirnya saya membagikanya secara gratis. Tapi dengan satu syarat, yaitu: ANDA TIDAK BOLEH MENGHILANGKAN LINK KREDIT YANG MENUJU BLOG DAMZAKY, HARGAILAH KARYA ORANG!!!!. Kecuali kalau anda mengubah template itu sampai sangat berbeda dengan sebelumnya. Hanya itu saja hehe ;D.

Some feature of this template

Download template SUPER SEO FRIENDLY for blogspot with this feature. Only these....

• SUPER SEO friendly
• Valid HTML5
• Valid CSS3
• Simple and elegant design
• Fast loading
• Valid microdata (google richsnippet)
• Responsive design
• Easy navigation
• Auto-readmore (without javascript)
• High quality home post image thumbnail
• Available in several color
• Mobile template

Instructions

1. Not valid HTML5

Problem: "& did not start a character reference. (& probably should have been escaped as &amp;.)"

Cause: This problem maybe caused by widget quickedit fonction.
How to fix it:

1. Go to blogger.com, go to template section, backup your template for safety, then go to edit HTML
2. Tick the expand template widget
3. Then search (CTRL+F) this code:<b:include name='quickedit'/>
4. Delete that code (this code not always one, maybe you'll found more)
5. Save template

Note: if the error still exist, try to search that code and delete it untill you don't found that code. If the error still exist, contact me.

2. Deactivate mobile template and use the responsive template

You can follow the instruction here for understanding, then follow this instruction:

1. Open blogger.com, go to template section, then click the mobile settings
2. On that lightbox, check the No. Show desktop template on mobile devices.
3. Then just click save

Demo

DEMO

OR

DEMO

Download

Before download, please help me:

PASSWORD (if needed):

http://damzaky.blogspot.com

PASSWORD for fullpack edition unlocked xD (if needed):

http://damzaky.blogspot.com/404

Download

Download

Download

Download

Download

Download FULL PACK

ENJOY IT ;D, if you have any question write on comment in the template demo page ok?.....

Blogspot tld country redirect affecting SEO

Huuh, i'm a blogger but rare to posting XD. Okay to the topic, blogspot top level domain country redirect affecting SEO, what is tld country redirect?, and why it's affecting SEO?, tld is top level domain, in country and, top level domain in country redirect means, like this: if you try opening your blog with domain blogspot, it's like http://ourblog.blogspot.com, but if you're in india, or in some specific country, the domain wil redirected to http://ourblog.blogspot.in . In domain is a top level domain in India. This things can affecting seo because, your URL will be changed in specific country, and it means, your blog have unique URL and visitor, just like google, Google in some country has a specific domain, and check in alexa ranking, the rank is unique, in alexa you'll found your blog with unique domain. So this thing is very annoying, because your blog SEO will be bad, and other thing is internal and external linking, if you use a script for disable country redirect, your blog is .com, but the blogger XHTML will still .in, .be, .co.uk, so that is very affecting, and also for google pagerank. So conclusion buy a top level domain! XD. Just joke, the only one thing for save your blog SEO is use script for disable country redirect, but it will affecting to internal and external linking on your blog. If you want the script, just place this script after code <head> on your blog html.

The script

Copy this code, and paste after <head> tag on your blog HTML, don't forget to backup your template, for safety.

<script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf(&quot;.&quot;));
if (ctld != &quot;.com&quot;) {
var ncr = &quot;http://&quot; + blog.substr(0, blog.indexOf(&quot;.&quot;));
ncr += &quot;.blogspot.com/ncr&quot; + slug;
window.location.replace(ncr);
}
</script>

List of dofollow site high pagerank 2013

Dofollow is a blog who gives a backlink to a an external link of that site. Now i share the dofollow list and still working untill now. But attention, spamming is not good for your site reputation. Dofollow blog can give you backlink, and can make your blog have a high pagerank. Ok now for the list....

The list....

http://links.org.au/
http://blog.greens.org.nz/
http://filipinolibrarian.blogspot.com/
http://www.currybet.net/
http://newcritics.com/
http://blog.mofuse.com/
http://socialtimes.com/
http://eartheasy.com/blog/
http://weblogtoolscollection.com/
http://justintadlock.com/
http://blog.lendingclub.com/
http://www.grokdotcom.com/
http://www.educause.edu/blog
http://dig.csail.mit.edu/breadcrumbs/blog/4
http://pressblog.uchicago.edu/
http://blogs.nyu.edu/fas/dri/aidwatch/
http://delong.typepad.com/
http://www.communityspark.com/
http://focusorganic.com/
http://www.layercake.net/
http://www.hobo-web.co.uk/seo-blog/
http://justaddwater.dk/
http://www.krisbuytaert.be/blog/
http://blog.dmbcllc.com/
http://therenegadewriter.com/
http://www.iayork.com/MysteryRays/
http://www.lifeinthefastlane.ca/
http://elleeseymour.com/
http://profitsfinancesite.com/
http://newcritics.com/blog1/
http://www.uncommonphotographers.net/
http://links.org.au/
http://www.knrn.org/
http://blogs.cetis.ac.uk/asimong/
http://www.seobythesea.com/
http://www.oilman.ca/
http://andybeard.eu/

Responsive blogazine

Trying to make a responsive unique post in blogspot..., it's not very easy because, the post is unique and the device size is also unique :D. But I must try it, because if i'm not try it, i will never know the fault of the responsive. I don't know if this post is responsive or not....

Disable highlighting text script blogger

This article it's just about how to disable highlighting script for blogger. Because sometimes blogger doesn't like its article is plagiated. And the advantage of this script, your textarea, input, scroll will not effected. But the disadvantage is just if you have a blog with about coding, maybe the visitor will can't be highlight or copying your code. Ok this is easy....

Tutorial

Just add this code to a widget, or open blogger.com, select blog, click layout tab, add widget text/HTML, paste this code and save.

<script type="text/javascript">

/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

Ok just that, you are finish

Social share button without javascript

Hmm... everyday visitor come, and some visitor want all my blog secret is shared. Ok if that all you want, i'll share... The trick is very simple, it's just a link with sharer by a plugin of social network. Now i'll share only for facebook, twitter and google+.

How to add it on blogger

The system is simply, you just need to add a link to your blog.

1. Open and login to blogger.com, select your blog
2. Click template tab in left sidebar, backup your template
3. Click edit HTML and proceed
4. Now expand widget HTML
5. Search (CTRL+F) this code <data:post.body/>
6. If you have found that code, below that code add this code:
   <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style=' line-height: 20px; color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px; font-variant: normal; font-weight: bold;'>Share</a> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Tweet</a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 14px; line-height: 20px;'>Share</a>
7. Then save your template
8. Check your blog

Ok now finish, i'll update later....

Blogspot image host secret

Blogspot image secret is only a URL secret not the image. And actually the image is not secret but the Image url. The secret is only the resolution of image, we can change it like we want. This secret maybe you already know, but i share just for people who don't know.

How to change blogspot image resolution

So it's very easy, look at this image below:

The URL of that image is https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZXeKn20q1BaJWZ09C5jelpgGWPJVa3nazBF3kmwDGXnDfWNwnXv9SUOJLqWWjZqNgJwdubw8rkzhopeDl3QXh7cEfoappMJ18SwoDRH18d7CCCKLmoZDNwygBd4Q-EDik7MHzZjWRHe9/s320/400955_2375618285276_2146237091_n.jpg, then just change the s320 red code, with another resolution, but maximal resolution is s1600.

Pure CSS tooltip without javascript

Pure CSS tooltip is a tooltip or a more info about anything that hovered. Tooltip is very useful for more information about a link or anything that is hovered. Maybe in HTML there are already a tooltip, but that tooltip can't be customized. Now i'll share about how to make a tooltip with pure CSS and without javascript or Jquery.

How to create tooltip with CSS without javascript

It's simply, i just put a pseudo :after to a link element.

1. Open and login to blogger.com, select your blog
2. Click template tab in left sidebar, then backup your template
3. Edit HTML proceed, then search (CTRL+F) for this code: ]]></b:skin>
4. If you have found that code, before that code, paste this code:
   
   a.tltp{position: relative;}a.tltp:after{content:attr(alt);display:none;margin-left:10px;color:#000;background: #fff;border:1px solid #ccc; border-radius: 3px;padding:3px;width:300px;position:absolute;font-family:'Arial',sans-serif;line-height:1.5;letter-spacing:1px;text-transform: lowercase;font-weight: normal;font-size:13px;font-variant:normal;text-align: justify; font-style:normal;}/*CSS tooltip by Damar Zaky http://damzaky.blogspot.com*/a.tltp:hover:after{display:inline;}
5. Then save template

How to make the link with tooltip

For make a tooltip, in any link just put class='tltp' and alt='THE CONTENT OF TOOLTIP' or like this:

<a href='http://blablablac.com' class='tltp' alt='THE CONTENT OF TOOLTIP'>Link</a>

Demo

Link
Just that!

About Dofollow blog

What is Dofollow blog?, dofollow blog is a normal blog who gives a free backlink to the reader. This blog is not a dofollow blog, because this blog haven't comment form XD, Dofollow blog usually knowed by comment form in the blog. But using blog dofollow, there are an advantage and disadvantage.

How to make your blog be a dofollow blog

To make your blog transformed to dofollow it's very easy, you just need to show backlink on the comment on the blog. For tutorial, follow this

1. Open and login to blogger.com, select your blog.
2. In the left panel, click settings then post and comment.
3. In the Who can comment? section, select anyone.
4. In the Show Backlinks section, select Show.
5. Then save.
6. Now your blog is a dofollow blog

The advantage of dofollow blog

The advantage is, your blog will get and visited by many visitor. Your blog pageviews per day will increased. Your blog will not forever alone XD, because maybe many visitor will comment to your blog

The disadvantage of dofollow blog

The disadvantage is, too many backlink to external links, too many comments, too many Out Of topic comment, get penalty from google panda or pinguin (i don't know about this), and maybe your blog can be deleted by blogger.com because, your blog looks like a blog with only spam inside.

About blogger fav icon

Fav icon is most important thing in website or blog. Fav icon is symbolize a site logo. Now i'll share a little bit about fav icon in blogger. I'll share about how to change it, and about how to remove it. Ok now for tutorial....

How to change the fav icon

To change it's very easy, you just need to replace the official fav icon like this tutorial.

1. Open and login to blogger.com, select your blog.
2. Click the Layout tab in left panel.
3. Then you could see a blogger official fav icon, then just upload your own fav icon.

If that method not working, follow this tutorial

1. Open and login to blogger.com, select your blog.
2. Click the template tab in left panel.
3. Then backup your template for safety.
4. Then click edit HTML, search this code:  <head>
5. If you have found that code, paste the following code below that code
   <link href=' YOUR FAV ICON URL ' type='image/x-icon '/>
6. You are finish

Replace the YOUR FAV ICON URL with an image.

How to remove the fav icon

To remove the fav icon it's easy, just follow this tutorial.

1. Open and login to blogger.com, select your blog.
2. Click the template tab in left panel.
3. Then backup your template for safety.
4. Then click edit HTML, search this code:  <head>
5. If you have found that code, paste the following code below that code
   <link href='/' type='image/x-icon '/>
6. You are finish

How to designing blogger mobile template

Every day i'm sharing about blogger tutorial, hmm... i'm so tired for creating post. But i must do that because i'm a blogger, and time is money. So now i'll sharing about how to designing blogger mobile template and the explaination about template structure of mobile template. Ok without many word, i'll share now.

How to activate your own mobile template

For activating is easy, just follow this tutorial

1. Open and login to blogger.com, select your blog then click the Template tab.
2. In template tab, there are a mobile preview, then click the button below that preview.
3. Then check the  Yes. Show mobile template on mobile devices. and select the mobile template to custom (if you want to design your own mobile template)
4. And then save, then backup your template, then edit HTML then proceed.
5. Now search (CTRL+F) this code:  <body>
6. Replace that code with this code:
   <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
7. Then save template
8. For temporarily your mobile template is activated, but maybe it's still disordered and not customized

Explaination

For call the mobile selector in blogger you need to make a like this:

.mobile .class {property: value;}

or

.mobile #id {property: value;}

for mobile conditional tag is like this:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

How to make your layout is responsive

For design you need to know CSS of course, and you need to know your template structure.

For responsive style, i'll tell you some basic for responsive design.

If you want to make your wrapper is responsive, the first important thing is the #outer-wrapper. Then for make #outer-wrapper is responsive, you can use like this: 

.mobile #outer-wrapper {max-width: 630px; width: auto;}

or

.mobile #outer-wrapper, .mobile #main-wrapper, .mobile #sidebar-wrapper {float: none; width: auto;}

How to edit mobile HTML post layout

The mobile HTML post layout is in post widget, if you want to edit the layout, just edit like this:

Mobile HTML homepage:

<b:includable id='mobile-index-post' var='post'>

Mobile HTML item page (post):

<b:includable id='mobile-post' var='post'>

How to display widget in mobile

For displaying ONLY in mobile, in the
<b:widget> tag, just add this attribute:

mobile='only'

For displaying widget in desktop and in mobile, in the
<b:widget> tag, just add this attribute:

mobile='yes'

Ok that is the basic, maybe i'll update the advanced tutorial.... special thanks to Mas Sugeng for idea and inspiration, without him, i'll never know about mobile template in blogger

How to make blog super simple and blank

Hahahaha this post is very-very not important, why?, because it's very crazy to make a blogspot page only a blank page. This tutorial will tell you about the simplest blogger template. It's very easy because this blank page is just an empty template. So now for tutorial, trust me it's very easy.

Tutorial

1. Open and login to blogger.com then create a dummy blog with the simple template for first and DON'T use the dynamic views template.
2. Click Template tab and edit HTML
3. Block all HTML code (ctrl+a) and delete all code
4. And then paste this code in the empty HTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>Bloqcoba</title>
<b:skin><![CDATA[ ]]></b:skin>
</head><body>&lt;!--<b:section id='by damar zaky http://damzaky.blogspot.com'/>--&gt;</body></html>
5. And then save template

Explaination

This all code will make a blank page, if you want to make a simple text in one full page of that blog, paste a text below the <body> tag, like this:

<body>
<div style='color: #ff0000; font-size: 100px; font-family: arial, verdana, sans-serif;'>
HELLO WORLD!
</div>
</body>

you are finish, check your blog.

How to create unique or custom post in blogger

What is unique or custom post in blogger?, it's the different post than other post, every page have a different style. This time i will share about how to create that unique or custom post. This tutorial is easy for newbie, but i recommend to use this tutorial if you're understand about CSS. For example of unique post, you can see this blog: http://cyberqpale.blogspot.com, and if you want another demo, search in google with keyword "Blogaziner".  Have you see that?, ok if you want follow this tutorial.

The formula

1. Open blogger.com and login, and then create a blank post
2. Write anything in that post (whatever you want)
3. Then in post you'll see Compose tab and HTML tab, click the HTML tab
4. You found your text with html, then just put this code in the last line:
   <style type='text/css'>
   Put your CSS here
   </style>
5. Then that is the formula, just fill the CSS in that area
6. Still don't understand?
7. Ok, now i'll tell you if you're newbie in HTML

Template structure

Your template structure maybe have:

• #outer-wrapper
• #content-wrapper
• #main-wrapper
• #sidebar-wrapper
• #footer-wrapper
• #header-wrapper
• .post
• .post-body

If you want to make a page without a sidebar in the #content-wrapper, or if you want your page is only post and without sidebar, just do this.

below the <style type=text/css'>, paste this:

#sidebar-wrapper {
display: none;
}
#main-wrapper {
float: none;
width: 100%;
}

So just play the CSS, if you want to remove the header, footer, comments, just do this

#header-wrapper {
display: none;
}
#comments, .comments {
display: none;
}
#footer-wrapper {
display: none;
}

if you want to make a different style like change a background color of post or the blog background color, follow this tutorial and also you can change it with image

.post {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLj0OqYNiXS1GnIGeqbx-w3n0pGiMeHFfX8F3DJBWaZxkyWZ42S4EFaWuaQG8NBESim2aG2QP2WbXI-WCL35dERJLP5GBas7Sw9JnK7fDPjE2ONIdQZ8nRugMKfaPsU0nRzMi6mhiym0/s1600/wrapper.png") repeat-x scroll 0 0 transparent;
}
body {
background: #ccc;
}

Ok just that, happy playing CSS!

About blogger conditional tag further

Blogger conditional tag is very important in blogger, because this fonction can make every blogger page different style, not only style CSS but you can put anything. In internet has already many tutorial about this, but it's only a basic tutorial, this tutorial is not basic but advanced, not only page but it can be used for any condition. Ok now for the article....
Maybe you already know about index, homepage, item page, maybe you think there are not another ways about conditional tag, but i create an experiment in my dummy blog with conditional tag and i found many other of conditional tag. So the formula is easy

<b:if cond='data:blog.pageType == "index"'>

The green color is a general code of conditional tag.
The blue code is a layout data tag. And the dark blue is the data of the blue tag. The explaination is --if the blog page type is index, (content of that if)--
So we can modify by logic with this explaination, we can replace the data:blog.pageType with data:post.author and then replace the index with the author name or example Damar Zaky. So the explaination is changed to --if the post author name is Damar Zaky, (content of that if)--. Then the code is maybe like this:

<b:if cond='data:post.author == "Damar Zaky"'>
<style>
CSS code
</style>
</b:if>

Page type conditional

This is the list for conditional page type
Index page, homepage, search page

<b:if cond='data:blog.pageType == "index"'>

Item page, a post page

<b:if cond='data:blog.pageType == "item"'>

Static page, for the static page or http://yourblog.blogspot.com/p/static.html

<b:if cond='data:blog.pageType == "static_page"'>

Archive page, for archive page page like http://damzaky.blogspot.com/2012_10_01_archive.html

<b:if cond='data:blog.pageType == "archive"'>

Home page, your home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Specific URL, a specific url

<b:if cond='data:blog.pageType == "PUT YOUR URL HERE"'>

Post and static page, post and static

<b:if cond='data:blog.pageType == "data:post.url"'>

The first post, not a page but for custom the column of the latest post

<b:if cond='data:blog.pageType == "data:post.isFirstPost"'>

Error or 404 page, error or 404 page

<b:if cond='data:blog.pageType == "error_page"'>

Mobile page, not a page but for mobile conditional tag, if CSS put .mobile .class

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

Search label page, search label page or label page like: http://damzaky.blogspot.com/search/label

<b:if cond='data:blog.pageType == "data:blog.searchLabel"'>

Search with query, search label page or label page like: http://damzaky.blogspot.com/search?q=

<b:if cond='data:blog.pageType == "data:blog.searchQuery"'>

Search with query with specific query, search page with keyword like: http://damzaky.blogspot.com/search?q=css

<b:if cond='data:blog.searchQuery == &quot;The search keyword&quot;'>

Search label with specific label, search page with keyword like: http://damzaky.blogspot.com/search/label/NAME OF LABEL

<b:if cond='data:blog.searchLabel == &quot;NAME OF LABEL&quot;'>

Explaination

if you want to make except conditional change the == with !=  . Then this is special and unique tag, if you doesn't understand about layout data tag, you can see in this post http://damzaky.blogspot.com/2012/10/the-blogger-layout-data-tag-master-code_12.html. Then the special is like this, if you use data:post.author == name, you need to put that code in the blog post widget, why?, if you put that code in head, it will not working because data:post.author the red code meaning where the data dictionnary is placed, it means that word/code is placed in post widget, so if you want to put that code, you must put that code in below the <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> code.

But how to use data:post.author?, this code will be used by a blog who haves author more than one. So the code like this maybe, different author not only marked with text but now we can change it with different author picture, like this:

<b:if cond='data:post.author == "Damar Zaky"'>
<img src='photo of author is photo of damar zaky'/>
<style>
.post {
background-color: #94eaff;
}
</style>
<b:if>
<b:if cond='data:post.author == "Ykaz Ramad"'>
<img src='photo of author is photo of ykaz ramad'/>

<style>
.post {
background-color: #e9ffb5;
}
</style>

<b:if>

If you want different label, different style, you can use this code:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;NAME OF LABEL&quot;'>
<style>
.post {
background-color: #f7e3ff;
}
</style>
</b:if>
</b:loop>

But be careful with the label, because it's very sensitive, if the label name is Blogger and if you change the NAME OF LABEL with blogger, it will not working, you must change with Blogger.

CSS float property problem

CSS float property is very important in web designig. What is float property in CSS?, the float property is a CSS property for placing element to 2 column in basicaly. But sometimes float property is a problem on web designing, the float property is make a floated element is placed outside of the element. How to solve that?, read this article about float problem.

Demo and example

Float property makes the ELEMENT1 is placed in outside of his parent, like this example.

ELEMENT1

Solved float property is like this example.

ELEMENT1

So how to solve that?, it's easy you just need to add clear: both before and after the floated element and inside the parent. Like this example below.

Before:

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="float: left;">
ELEMENT1
</div>
</div>

After:

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="clear: both;">
</div>
<div style="float: left;">
ELEMENT1
</div>
<div style="clear: both;">
</div>
</div>

Or like this if you have two floated element in a row

<div style="background: #ccc; border: 1px solid #999; padding: 5px;">
<div style="clear: both;">
</div>
<div style="float: left;">
ELEMENT1
</div>

<div style="float: right;">
ELEMENT2
</div>

<div style="clear: both;">
</div>
</div>

you just need to add clear both, remember that!

About using CSS in 2012

CSS or we can say cascading stylesheet, if you're a blogger or a personal website, you must know it. CSS is can be used for design, style, ornament, decoration in a web page. But sometimes, web designer use CSS too over, or using too much in their web page, so what's the problem?, there are no problem but if you know CSS has a level 1, 2, 2.1, 3. So what?, the problem it's just the browser supportable. So, CSS3 it's start supported in -+ June 2011, with the updated browser. Then how about using CSS3?, maybe CSS3 will supported in the new browser, but if in the world, there are people who still using the not updated browser software, so what happen?, in your browser you'll view like you want, but how about in another computer?, in another computer of course not like your view. And CSS will still updated because actually CSS3, CSS4 has released, but the problem is only the browser supportable. No browser, No CSS. And untill now the updated browser also still need the prefix tag like: -moz-, -webkit-, -o- or others.

Conclusion

Don't use too much CSS3 in your web page, because in another computer the layout will be different, so use with variation like combinating CSS level 1, 2, 3 and better use CSS level 1 and 2 more than CSS level 3 on your webpage.

But if you're not agree, do like you want, this just my experience......

How to remove blogger widget javascript

If before i've posting about how to remove the blogger CSS reset, now i'll posting about how to remove the blogger widget javascript in before body tag. But i don't know the fonction about this script so maybe there are a risk if removing this code. But many of my friends yesterday asking about how to remove this, so now i'll share it. But remember this tutorial is ADVANCED tutorial not recommended for newbie coder.

How to remove <script type="text/javascript" src="//www.blogger.com/static/v1/widgets/1708301263-widgets.js"></script> in blogger?

WARNING!

Removing this code maybe can make your template destroyed, if you use official widget from blogger, the fonction can be totally changed. If you're don't understand about this code, don't do this. This tutorial is ADVANCED tutorial, not recommended for newbie or intermediate coder.

Explanation

This tutorial is simple, just like my post before, i just add a HTML comments before </body> tag and the javascript of HTML will converted to HTML comments, so browser will ignore them. This tutorial will be effected to Gtmetrix.

Ok now for tutorial.

Tutorial

1. Open blogger, edit HTML, and backup your template for safety.
2. Edit HTML, proceed, then CTRL+F this code: </body>
3. Replace that code with:
   
   &lt;!--<div id='by Damar Zaky http://damzaky.blogspot.com do not remove this text if you are a real blogger'/></body>--&gt;&lt;/body&gt;
4. Then save template.
5. You're finish!

Checking

Open your blog, then CTRL+U,  if you found the <script type="text/javascript" src="//www.blogger.com/static/v1/widgets/1708301263-widgets.js"></script> turning to green and below that code all are green, that means you're succes.

Or you can open http://www.gtmetrix.com then type your blog in the form, if the site finish checking, you may found the tab 'Minify JavaScript', if you click, and you not found this code http://www.blogger.com/static/v1/widgets/1708301263-widgets.js , it means you're succes.....

Ok i'll update later, if you have any question or problem, you can ask in comments.