Make a responsive website

To make a responsive web is not very easy, but if you know the problem that thing could be easy XD. The main principle of responsive website is only matching any element on a site to the main screen. The first thing is the element width, you need to change the width value to auto, the content wrapper must use value auto on css width. Then if the wrapper is disarranged in computer or in a big screen, you need to set max-width on the content wrapper. Then try to use font value with percent. Don't use pixel in css value. But if you need to use PX, you can use css media queries, for a responsive.

Media queries

@media screen and (max-width:1030px) { #outer-wrapper { width:100%; } }

That CSS mean: "this css will applied if the screen maximal width is 1030px". You can change it to max-width: 600px, or min-width: 600px;.

CSS3 text shadow

CSS3 text shadow is very good for web designing. With CSS3 text shadow, you can make a cool text like using photoshop!. The important thing before using text shadow, is know the rule, the rule is like this: text-shadow: 1px 1px 5px #000;. The red color is the text shadow property, the blue color is the x-offset or the position of the shadow horizontally, the green color is the y-offset or the position of shadow vertically, the pink color is the blur radius of the shadow, the yellow color is the color of the shadow. For example, i have many creation of mine, just copy the CSS to your element.

My CSS3 text shadow creation

3 Dimension

text-shadow: 0px 0px 0 rgb(-28,-28,-28),1px 1px 0 rgb(-57,-57,-57),2px 2px 0 rgb(-85,-85,-85),3px 3px 0 rgb(-113,-113,-113),4px 4px 0 rgb(-142,-142,-142),5px 5px 0 rgb(-170,-170,-170),6px 6px 0 rgb(-198,-198,-198),7px 7px 0 rgb(-227,-227,-227),8px 8px 0 rgb(-255,-255,-255), 9px 9px 0 rgb(-283,-283,-283),10px 10px 9px rgba(0,0,0,0),10px 10px 1px rgba(0,0,0,0.5),0px 0px 9px rgba(0,0,0,.2);

Brushed

text-shadow: 0px 2px 4px #000, 0px 4px 4px #000 /*1*/, 0px -2px 4px #000, 0px -4px 4px #000/*2*/, 2px 0px 4px #000, 4px 0px 4px #000/*3*/, -2px 0px 4px #000, -4px 0px 4px #000/*4*/, 2px 2px 4px #000, 4px 4px 4px #000/*11*/, -2px -2px 4px #000, -4px -4px 4px #000/*22*/, -2px 2px 4px #000, -4px 4px 4px #000/*33*/, 2px -2px 4px #000, 4px -4px 4px #000/*44*/; color: transparent;

Outlined

text-shadow: 0px 2px 2px #000, 0px 4px 2px #000 /*1*/, 0px -2px 2px #000, 0px -4px 2px #000/*2*/, 2px 0px 2px #000, 4px 0px 2px #000/*3*/, -2px 0px 2px #000, -4px 0px 2px #000/*4*/, 2px 2px 2px #000, 4px 4px 2px #000/*11*/, -2px -2px 2px #000, -4px -4px 2px #000/*22*/, -2px 2px 2px #000, -4px 4px 2px #000/*33*/, 2px -2px 2px #000, 4px -4px 2px #000/*44*/;

Double

text-shadow: 0px 40px 4px #000;

Blur

color: transparent; text-shadow: 0 0 10px #333;

Multipe Glow

text-shadow: 0 0 10px #fff, 3px 3px 10px #fff, -3px 3px 10px #fff, 3px -3px 10px #fff, -3px -3px 10px #fff, 10px 10px 30px #61cde8, 0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff, -10px 10px 30px #61cde8, 10px -10px 30px #61cde8, -10px -10px 30px #61cde8; color: black;

Convex

color: transparent; text-shadow: 5px 5px 5px #fff, 5px 5px 10px #333, 0 0 2px #000, -5px -5px 10px #333, -5px 5px 10px #333, 5px -5px 10px #333;

GLOW

color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #2e4585, 0 0 70px #2e4585, 0 0 80px #2e4585, 0 0 100px #2e4585, 0 0 150px #2e4585;

Multiple

text-shadow: 3px 3px 0 #52ffff,12px 12px 0 #ff383f, 22px 22px 0 #52ffff, 32px 32px 0 #ff383f;

Colorful

color: transparent; text-shadow: 5px 5px 10px #0044ff, -5px 5px 10px #ff1f1f, 5px -5px 10px #33ff1c, -5px -5px 10px #ffff00;

Color glow

color: #fff; text-shadow: 0px 0px 5px #fff, 5px 5px 10px #0044ff, -5px 5px 10px #ff1f1f, 5px -5px 10px #33ff1c, -5px -5px 10px #ffff00;

Rainbow

color: white; text-shadow: 1px 1px 1px #ff0000, 2px 2px 1px #ff0000, 3px 3px 1px #ff8800, 4px 4px 1px #fff700, 5px 5px 1px #fff700, 6px 6px 1px #22ff00, 7px 7px 1px #22ff00, 8px 8px 1px #00ffee, 9px 9px 1px #0011ff, 10px 10px 1px #0011ff;

ALL OF THIS TEXT SHADOW ARE CREATED BY DAMAR ZAKY

My word in this december

I don't know why, but in this december, i'll offline because, i'm so tired blogging, and i must study for exam, maybe in february i'll online and start blogging again. If you comment, but i'm not replying, i'm so sorry.

But later, i'll share about many blogger tutorial. And maybe i'll posting about design or template.

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....

Google ban several blogspot domain

I don't know why, but recently this 3 month, many blog of my friend is banned by Google. Some of my friend says, the blog is banned by google because the blog content is too much spam and too much ads. But why google hate spam and over ad display?, i think for spam is normal because it's disturbing the web, but for too many ads, i think it's because too many ads it's like not a normal website, or it's just like a spam, because when visit the site with too many ads, it makes that website looks like focus to the ad and not focus to the content. Conclusion, my opinion, if you have blogspot, don't add too many ads to your site, just add some ad maximal 10, don't do copy paste from another blog, don't posting an article more than 5 per days.

Mayanringan template download free

2 weeks never update blog.., but in 2 weeks i was creating a project, for create a blogger template. Maybe in internet it's so many blogger template, but this template is created by me and it's very simple. The template name is Mayanringan or in english like a simply template. This template is FREE, so if some people sell this template, don't buy it. Ok for download, just download :D.

WARNINGThis template is original by Damar Zaky, and this template is free. Don't remove the Damzaky treadmark, why?, i create this template very hard. I have no money, for blogging i must pays internet, i'm hungrry because blogging, i'm only eat bread everyday, because for blogging i need my money and i can't buy a food.

PERHATIANTemplate ini dibuat oleh Damar Zaky, dan template ini gratis. Jangan hilangkan link Damzaky dari template ini, kenapa?, kasihan gan orang susah. Saya sudah membuat template ini susah-susah. Saya tidak punya uang, untuk ngeblog saya harus bayar internet, saya lapar karena ngeblog, saya cuma makan roti setiap hari, karena untuk ngeblog saya butuh uang dan tidak bisa beli makanan karena uangnya dipakai ke warnet

Ok download it and enjoy it ;D

Advantage

• Minimalist
• Fast and simple
• Easy edit
• Fresh
• SEO friendly
• Breadcrumb, valid rich snippet, auto readmore with thumbnail

Screenshoot

PC screenshoot

Mobile screenshoot

Demo

http://mayanringan.blogspot.com/

http://mayanringan.blogspot.com/?m=1

Download

Download via Mediafire

http://www.mediafire.com/?0n94d54yp24e5ka

Download password: Damzaky

Download via Google

https://sites.google.com/site/cssfilehost/css/TemplateMayanringan%28www.damzaky.blogspot.com%29.rar?attredirects=0&d=1

RAR file password: http://damzaky.blogspot.com

Instruction

If you want to activate the mobile template, click this link: http://damzaky.blogspot.com/2012/10/how-to-designing-blogger-mobile-template.html

Ok happy using!

How to reenable highlighting text in browser

If you want to copy an article in some blog, but that blog is using an anti-copy or disable highlighting fonction,  just follow this tutorial, but this tutorial is not for bad use. REMEMBER only for share not for real. Ok it's easy, because the code for disable highlighting text is using Javascript, it's simply just disable your browser javascript for a while. For how to do that, how to disable javascript, you can using this following link:

• For chrome http://cyberqpale.blogspot.com/2012/06/re-enable-or-disable-javascript-google.html
• For firefox http://cyberqpale.blogspot.com/2012/06/re-enable-or-disable-javascript-firefox.html

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

How to get facebook post permalink

Maybe this post it's too much in google. But i just share this for a people who visiting this blog and not for targeting this article in SEO. Ok now i share about how to get a facebook post permalink, what is permalink?, permalink is a link for a post or a sub link from a domain. How to get it, it's easy, search for some post that you want to get the permalink (ex: your status, your friend's status), you see in the bottom of the status or the content, you may found a like, comment, promote and usually the permalink can shown in the right of promote, then right click, then copy link address, like this image.

Ok, happy trying...

At last, Damzaky got a pagerank

I don't know why, never update post, never blogwalking, never exchange link, never get a lot visitor, a forever alone blog, no comments, no like, not +, no tweet, but at last this november, exacly when my birthday month is coming, my blog got a pagerank. I don't know when this google pagerank update, but very thanks to my teachers. Ok "new pagerank, new spirit!", maybe i'll updating this blog every i've free time....

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!

What happen with facebook in 2012

Auto Like, Auto comment, Auto invite group, Auto chat , Auto subscribe, Auto status what next?. Did you know, in facebook now is used by million spammer, spammer?, the all auto that i mention is a spam, and did you know?, facebook is for social network for human, not for AUTO ROBOT. And i don't understand, why many facebook user want use all autorobot like that, so what next?, maybe facebook will only used by spammer auto robot. Conclusion: if you're agree about this, don't use any auto robot.

What visitor do when visit this blog

What visitor do when visiting this blog?, it's a long story, i don't know why but why the follower of tutorial always not follow good my tutorial?, my rules?, if before i've posting tutorial about how to remove unimportant widget javascript in blogger, in that article, i marking in my code div id='By Damar Zaky http://damzaky.blogspot.com don't remove this text if you're a real blogger. That's the rules, but the visitor who follow that tutorial always break the rules. And then all my creative code or the my pure idea of code, CSS, HTML, all plagiated without my permission, very plagiated all the code. And then if they visit, it's always only see article, never follow blog, like in facebook, never commenting, no respect or always like not supporting the blog. So what now?, for temporarily i'll not share about my nature or my pure idea of coding, because if i create with my nature idea, it's will be plagiated like always.....

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.

How to remove blogger CSS reset stylesheet (widget bundle)

I will share now, share what?, the trick for remove the CSS reset stylesheet in blogger. Maybe if you don't know about this code, you may not so like this article, but if you're understand many blogger code, you may think this article is very-very helpful. But why many peoples want to remove this code from HTML?, because, this is a CSS reset code of blogger, and if you're template designer, you may hate this code, because it's make multiple CSS and crashing CSS code. If you're not understand about blogger code, don't follow this tutorial!.


How to remove <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> in blogger?

How to remove <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css' /> in blogger?

WARNING!

Removing this code maybe can make your template destroyed, if you use official widget from blogger, the style 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 not real removing the code, but this tutorial is make that code is ignored by browser and not make blog CSS code replaced. It's simply this tutorial is just converting that code to HTML comments, why HTML comments?, HTML comments is ignored by browser, because that i just converting but not removing, and this tutorial can effecting page speed score in 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: <b:skin><![CDATA[
3. If you have found that code, in below that code you may found your CSS (of course XD), now block from below that code to before ]]></b:skin>, or block all your CSS and CTRL+X, paste in notepad.
4. Then the remaining code is <b:skin><![CDATA[    ]]></b:skin>
5. Block that code and replace it with this code:
   &lt;style type=&quot;text/css&quot;&gt;
   &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
6. Then below the replaced code, place this code:
   <style type='text/css'>
   
   YOUR CSS FROM NOTEPAD
   
   </style>
7. Then below the <style type='text/css'> that you placed below the ]]></b:skin>, paste your all CSS from notepad.
8. Then save template.
9. You're finish!

Checking

Open your blog, then CTRL+U,  if you found code like this:

<style type="text/css">
<!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
<style id='page-skin-1' type='text/css'><!--
*/
--></style>

If you found that code in page source and all the color of that is black, it means the stylesheet link is ignored by browser and 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 'remove unused CSS', if you click, and you not found this code <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> , it means you're succes.....

That's all, special thanks to google group. I'll update later, if you have any question, send it with comments below....

Profile picture not showing in google search result

In 2012, if you search something in google, in the result you should found the profile picture of someone. And now many people has show his profile picture in google search result. But why my profile picture is not showing up, but i've waiting for five days to see my picture showing up in google search result. Now i'll tell you some solution for why my picture is not showing up in the google search result.

1. Incorrect linking code

Incorrect linking is an error in the HTML code or in the google+ profile, ok simply, maybe you need to change the code. If you have correct code, in the rich snippet testing tool, you will found like this picture:

I have verified and my picture is showing up in rich snippet, but why in the search result still not showing?, OK just continue reading....

2. Profile picture

What's the problem with the profile picture?, this is my exprience, in the third day after i put the rich snippet code in my blog, the profile picture is showing up in google search, but i change my profile picture, then what happen in the fifth day after i put the code?, my picture is not showing up again, so what's the problem, then now i know the problem, before, i use my real picture in google+, but when the picture is showing up in search result, i change it with my close up photo but photoshoped, so what's the problem, the problem is the picture, your picture must your close up picture and your REAL face, i know all about picture is from google plus profile picture rules, you can see the rules here: http://www.google.com/+/policy/content.html

Ok maybe just that all, maybe i will update later.......

Football player when they were still young picture

Football player legend is very lot, and we can't calculate it exactly. I've got this photo from a page in facebook, maybe you're know it but, i just want to share to the people who don't know it. This is the picture of football legend, when they were still young:

Blogspot top link in alexa traffic list

Alexa traffic rank is the page or website ranking but with alexa. It's different with google pagerank, in google pagerank it's only 10 rank, in alexa is the really ranking. Now i'll share the list of alexa ranking of blogspot.com domain. And are your blog in the list?, check out now.

This is the list, just click the link below:

http://domenydomeny.pl/en/alexa_t.php?blogspot.com

The blogger layout data tag master code

The layout data tags is the most important code in blogger XHTML. Did you know all of this code?, if you don't know, now maybe you'll know. The code is easy, and simple, don't worry if you getting trouble, you can ask me on the comment. The format of code is: <data:name1.name2/>. It's started with <data: then the name is like: post, and name 2 is the name code subbed by code name 1. The example is <data:post.body/>, post is the widget, and body of post is inside the post widget. So if we translate it, data of post's body. Data meaning the text or anything that is not certainly, or it can be from the machine, that is XHTML, in blogger edit HTML section if you see: <data:post.body/> but if you open your blog and view page source, you'll not found the <data:post.body/>, but that code will be changed to the post contents, view page source it's mean not view the source from the HTML we edited, but the browser is take a source from converted version from blogger, so the conclusion is: if we edit the blogger HTML and save, it's not saved directly to your blogger HTML, but it sended to blogger machine, and blogger is converting the XHTML to HTML for browser. Tthere are many different tags you can use to include specific pieces of data in your template. They will all be formatted as <data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url.

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.

Globally Data

This information applies to the entire page, so you can use it anywhere, unlike other data which can only be used in a specific widget. These should be referenced as part of the overall "blog" data, e.g. as <data:blog.title/>, etc.

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

Page Header

This is a simple widget with just two pieces of data. They can be referenced simply as <data:title/> and <data:description/>.

• title: The blog's title.
• description: The blog's description.

Blog Posts

This is the central part of any blog, and the most complex. You should definitely consider simply making modifications to one of the default templates before writing a blog posts widget from scratch. But however you want to do it, here's all the data available in this widget.

• feedLinks: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:
  • url: The feed URL.
  • name: The feed name (i.e. 'Posts' or 'Comments').
  • feedType: The type of feed (Atom or RSS).
  • mimeType: The mime type of the feed.
• olderPageUrl: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
• olderPageTitle: Title of the link to the older page of posts.
• newerPageUrl: The newer equivalent of olderPageUrl.
• newerPageTitle: The newer equivalent of olderPageTitle.
• commentLabel: The phrase to use to show the number of comments, e.g. "comments."
• authorLabel: The phrase to use to indicate who wrote the post, e.g. "posted by."
• timestampLabel: The phrase to use to indicate when the post was written, e.g. "posted at."
• postLabelsLabel: Phrase to introduce the list of post labels, e.g. "labels for this post."
• backlinksLabel: Phrase to describe backlinks to this post, e.g. "links to this post."
• posts: A list of all posts for this page. Each post contains the following:
  • dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.
  • id: The numeric post ID.
  • title: The post's title.
  • body: The content of the post.
  • author: The display name of the post author.
  • url: The permalink of this post.
  • timestamp: The post's timestamp. Unlike dateHeader, this exists for every post.
  • labels: The list of the post's labels. Each label contains the following:
    • name: The label text.
    • url: The URL of the page that lists all posts in this blog with this label.
    • isLast: True or false. Whether this label is the last one in the list (useful for placing commas).
  • allowComments: 'True' if this post allows comments.
  • numComments: The number of comments on this post.
  • showBacklinks: Whether to show backlinks for this post.
  • numBacklinks: Number of backlinks for this post.
  • addCommentUrl: The URL of the 'add a comment' form for this post.
  • emailPostUrl: The URL of the 'email this post' form for this post.
  • editUrl: The URL of the edit form for this post.
  • feedLinks: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
    • url: The feed URL.
    • name: The feed name (e.g. 'Posts' or 'Comments').
    • feedType: The type of feed (Atom or RSS).
    • mimeType: The mime type of the feed.
  • comments: A list of all comments for this post (on item pages only). Each contains the following:
    • id: The numeric ID of the comment.
    • body: The body of the comment.
    • timestamp: The time the comment was created.
    • author: The display name of the comment's author, or 'Anonymous'.
    • authorUrl: URL of the comment author's profile, if the comment is not anonymous.
    • deleteUrl: The URL for deleting this comment.
    • isDeleted: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)

Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.

• title: The title of the widget.
• style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
• data: A list of each archive unit, each of which contains:
  • name: The name of this archive interval, e.g. "August 2006."
  • url: The link to the page containing posts from this interval.
  • 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/>.

• title: The title of the widget.
• userUrl: The author's profile URL.
• location: The location from the author's profile.
• aboutme: The "About Me" information from the profile.
• displayname: The author's display name.
• photo: The user's profile photo, made up of the following:
  • url: The photo URL.
  • width: The photo's width, in pixels.
  • height: The photo's height, in pixels.
  • alt: The "alt" text for the photo.

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

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

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.

• title: The widget's title.
• 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.

• title: The widget's title.
• feedUrl: The URL of the feed.

Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.

• title: The title of the widget.
• sourceUrl: The URL of the image.
• width: The image's width, in pixels.
• height: The image's height, in pixels.
• caption: The image caption.

Labels Widget

The labels widget includes a list of all labels that are in use on the blog.

• title: The widget title.
• labels: The list of labels, each of which contains:
  • name: The text of the label.
  • count: How many posts have this label.
  • 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.

• title: The widget title.
• 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.

• title: The widget title.
• links: The list of links, each of which contains:
  • name: The link's text.
  • target: The link's URL.

Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.

• fullButton: The URL of the Blogger button you've selected.

Source: http://support.google.com

Understanding the general blogger code

Blogger is not only for blogging, or creating post, but we can use blogger for design, what design?, design of the template with HTML of course. But coding in blogger is not easy; you need to understand the XHTML code of blogger, and you need to understand, where you can place the code. In blogger XHTML is many of a code, maybe you're already know some code like, CSS, ]]></b:skin>, <b:widget>, <b:includable>, <head>, <body> and many others. But the question is, did you know does this code meaning?, or where is the code placed?, what is the rule for placing code?, so here we are, i'll share the explication of the code.

Layouts Data Tags

The layout data tags is the most important code in blogger XHTML. The format of code is: <data:name1.name2/>. It's started with <data: then the name is like: post, and name 2 is the name code subbed by code name 1. The example is <data:post.body/>, post is the widget, and body of post is inside the post widget. So if we translate it, data of post's body. Data meaning the text or anything that is not certainly, or it can be from the machine, that is XHTML, in blogger edit HTML section if you see: <data:post.body/> but if you open your blog and view page source, you'll not found the <data:post.body/>, but that code will be changed to the post contents, view page source it's mean not view the source from the HTML we edited, but the browser is take a source from converted version from blogger, so the conclusion is: if we edit the blogger HTML and save, it's not saved directly to your blogger HTML, but it sended to blogger machine, and blogger is converting the XHTML to HTML for browser.

For the complete list of Layout data tags, you can see it in here: http://damzaky.blogspot.com/2012/10/the-blogger-layout-data-tag-master-code.html

Blogger XHTML structure

The Blogger XHTML structure is the very important code in HTML. The structure is easy, like the normal HTML, but in blogger have a rules for realese the XHTML. The simples structure of blogger HTML is:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[

YOU PLACE THE CSS IN HERE

]]></b:skin>
</head>
<body>
<b:section id='test'/>
</body>
</html>

Red : The red code is the key of HTML/XHTML, if you delete this code, when you save HTML, blogger won't save it.
White : I don't know about this code, but i think this is the most important code.
Blue : The blue code is the basic structural of HTML and the most important tag in HTML.
Green : The green code is the important code in blogger, but the ID is not only test, it can be another id because without this, code won't save the HTML.
Black : The black code is the place for CSS is not so important, but without CSS, blogger can be designed.
Dark blue : The dark blue is most important code in blogger, you can't delete it (maybe), but it's needed for replacing <style> tag in blogger.

Definition:
<html> is used for the key of HTML/XHTML.
<head> is used for placing the code that not showing in the display, like javascript, CSS.
<body> is used for placing the code that is showing in your monitor.
<b:section> is code for the place of widget in blogger.
<b:skin> is used for placing the CSS code.

And that is the basic XHTML, but in blogger there are a general XHTML, that is used by many blogger.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Blog title</title>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[
a {
color: #fff;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section id='main'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section id='sidebar'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
</div>
<div id='footer-wrapper'>
<b:section id='footer'>
<b:widget id='Text1' locked='false' title='Footer text' type='text'/>
</b:section>
</div>
</div>
<b:section id='test'/>
</body></html>

<b:include data='blog' name='all-head-content'/> : meaning the all content of head tag like: meta, link, script
<b:widget : meaning some widget in the blog

And this is the HTML that is converted and ready to readed in browser

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Blog title</title>
<meta content='ur-blog ur-blog' name='Description'/>
<meta content='ur-blog ur-blog' name='keywords'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var a=window,b="jstiming",d="tick";var e=function(c){this.t={};this.tick=function(c,p,h){h=void 0!=h?h:(new Date).getTime();this.t[c]=[h,p]};this[d]("start",null,c)},f=new e;a.jstiming={Timer:e,load:f};if(a.performance&&a.performance.timing){var g=a.performance.timing,j=a[b].load,k=g.navigationStart,l=g.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_","_wtsrt",l),j[d]("tbsd_","wtsrt_"))}
try{var m=null;a.chrome&&a.chrome.csi&&(m=Math.floor(a.chrome.csi().pageT),j&&0<k&&(j[d]("_tbnd",void 0,a.chrome.csi().startE),j[d]("tbnd_","_tbnd",k)));null==m&&a.gtbExternal&&(m=a.gtbExternal.pageT());null==m&&a.external&&(m=a.external.pageT,j&&0<k&&(j[d]("_tbnd",void 0,a.external.startE),j[d]("tbnd_","_tbnd",k)));m&&(a[b].pt=m)}catch(n){};a.tickAboveFold=function(c){var i=0;if(c.offsetParent){do i+=c.offsetTop;while(c=c.offsetParent)}c=i;750>=c&&a[b].load[d]("aft")};var q=!1;function r(){q||(q=!0,a[b].load[d]("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",r,!1):a.attachEvent("onscroll",r);
 })();</script>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://ur-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://ur-blog.blogspot.com/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="ur-blog - Atom" href="http://ur-blog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="ur-blog - RSS" href="http://ur-blog.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="ur-blog - Atom" href="http://www.blogger.com/feeds/3522685956630332245/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=3522685956630332245" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://ur-blog.blogspot.com/" />
<meta content='ur-blog ur-blog ur-blog' name='description'/>
<meta content='index,follow' name='robots'/>
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
<style>
a {
color: #fff;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<div id='main-wrapper'>

<div class='main section' id='main'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>

Blog post content

</div>
</div>
</div>

</div>
<div id='sidebar-wrapper'>

<div class='widget Label' id='Label1'>
<div class='widget-content cloud-label-widget-content'>

Widget content

</div>
</div>

</div>
</div>
<div id='footer-wrapper'>

<div class='widget Text' id='Text1'>
<div class='widget-content text-widget-content'>

Widget content

</div>
</div>

</div>
</div>

<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/130042055-widgets.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ;
</script>

</body></html>

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> : this code is reset code of CSS, i want to delete it, but it's impossible, but some people says that code can be deleted by using HTML comments.


<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/130042055-widgets.js"></script> : for this code also i don't understand the fonction, but i think is the reset code for widget, and it can't be deleted.



<script type="text/javascript">(function() { var a=window,b="jstiming",d="tick";var e=function(c){this.t={};this.tick=function(c,p,h){h=void 0!=h?h:(new Date).getTime();this.t[c]=[h,p]};this[d]("start",null,c)},f=new e;a.jstiming={Timer:e,load:f};if(a.performance&&a.performance.timing){var g=a.performance.timing,j=a[b].load,k=g.navigationStart,l=g.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_","_wtsrt",l),j[d]("tbsd_","wtsrt_"))}
try{var m=null;a.chrome&&a.chrome.csi&&(m=Math.floor(a.chrome.csi().pageT),j&&0<k&&(j[d]("_tbnd",void 0,a.chrome.csi().startE),j[d]("tbnd_","_tbnd",k)));null==m&&a.gtbExternal&&(m=a.gtbExternal.pageT());null==m&&a.external&&(m=a.external.pageT,j&&0<k&&(j[d]("_tbnd",void 0,a.external.startE),j[d]("tbnd_","_tbnd",k)));m&&(a[b].pt=m)}catch(n){};a.tickAboveFold=function(c){var i=0;if(c.offsetParent){do i+=c.offsetTop;while(c=c.offsetParent)}c=i;750>=c&&a[b].load[d]("aft")};var q=!1;function r(){q||(q=!0,a[b].load[d]("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",r,!1):a.attachEvent("onscroll",r);
 })();</script> : this code in XHTML is placed inside the <b:include data='blog' name='all-head-content'/>



Maybe that's the basic, i'll update this article later, because i haven't more time now.....

Facebook emoticon in comment

Now in facebook, you can comment with add an emoticon. It's start from today 12 october 2012, i know when i open facebook, because when i see my comments with emoticon *alpha, it's converted from alpha to image. How to do that?, simply, like in the chatting box in facebook, when you write a comment just add :D :v or -_- or anything. But you can't use the custom emoticon like: [[facebook]], [[zuck]] or [[google]]. Look my screenshot below:

Auto readmore in blogger without javascript NEW

Maybe now you're know what is auto readmore, in internet has many tutorial about this, but in many tutorial are using javascript, but now i'll share the tutorial for automatic readmore without javascript. This trick is very-very simple and easy way, but you must understand it.... Ok now for tutorial....

1. Method (Snippet)

With this trick is very simple, you just need to add the code of snippet to change the post body in homepage. I found the code from XHTML of Popular post widget. Now to the point:

1. Open and login to blogger.com
2. Then select your blog and go to Template tab in left panel
3. Then back-up your template for safety
4. Click edit HTML, then proceed, then check the expand widget html
5. Then (CTRL+F) search for this code:  <data:post.body/>
6. If you've found it, replace that code with:
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <data:post.body/>
   <b:else/>
   <b:if cond='data:post.thumbnailUrl'>
   <div style='clear:both;'/>
                 <span style='float: left; border: 1px solid #eeee; width: auto; height: auto; margin: 5px;'>
                   <img expr:src='data:post.thumbnailUrl'/>
                 </span>
   <b:else/>
                 <span style='float: left; border: 1px solid #eeee; width: auto; height: auto; margin: 5px;'>
                   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQgdMObZlcf4sAlFi_RtJ3bDYbqKNUHD2790kSZHKzKIWhlp4Pk5fTEEAwuccM0AiePVlWNOctyuHPiZ2v29FCHgUnnakGF1_XtOCACnrHqzmmLXaqAo2c90BH0sgXV5CY-ScG3qysMZc/s72-c/nophoto.png'/>
                 </span>
   </b:if><div style=''><data:post.snippet/></div>
   <div style='clear:both;'/>
   </b:if>
   </b:if>
7. Then save template
8. Check your blog

The advantage of this method

With this method is easy and simple, because is only used the little bit of code.

The disadvantage of this method

You can't setting how long or how many letter/word in the post body. With this code maybe the maximal letter is 143.

2.Method (Playing CSS) [Advanced]

With this method, is not very easy, because you need to understand your blog's html, if you're newbie in blogger, maybe you can't understand this code.

Currently unavailable

The list of my favourite blog with beautiful template

Before, i don't want to blogging, why?, because i like design, and before i think blogger template is only from blogger, and can't edited or can't changed with my own template, so now i blogging because design, and the design is inspirated from this list. Now i will share it for you, because maybe you too, you'll be inspirated ;D

The List (only Blogger.com's blog)

1. http://www.hermanblog.com- This is my first inspiration, maybe the template is ordinary and simple, but this blog is still my first inspiration to blogging.
2. http://www.mybloggertricks.com - I like this blog because, i start learning and understanding about CSS, HTML, and all tutorial for blogger code. 
3. http://urang-kurai.blogspot.com (the best for me) - Maybe this blog is first inspiration for creating a custom CSS and maybe because this blog, now i can create my own templatel, the owner of this blog is a blogaziner.
4. http://farixsantips.blogspot.com - And also, i learning CSS, HTML, and javascript here.
5. http://alfirouz.blogspot.com - I just like the template and the post in this blog.
6. http://artistutorial.blogspot.com - Nice template, i don't know the owner, and i don't know about the template, is the template original created by the owner of this blog? or not?.
7. http://sin1aja.blogspot.com - Nice template.
8. http://willstvn.blogspot.com
9. http://hompimpaalaihumgambreng.blogspot.com
10. http://cyber-jm.blogspot.com
11. http://ypsrandy.blogspot.com
12. http://www.ladidacafe.in
13. http://cyberqpale.blogspot.com - My blog XD
14. http://damarzaky.blogspot.com - My about page XD

That's all, maybe i'll update later.....