Kelola Blogspot

Cara Menampilkan Hanya Judul Pada Blog

noreply@blogger.com (Kelola Blogspot) — Wed, 11 Jan 2012 16:06:00 -0800

Cara Pemasangannya
1. Login ke blogger -> Rancangan -> Edit HTML
2. Silahkan Copy kode dibwah ini dan Paste tepat diatas kode </head> kemudian simpan atau pratinjau apa sudah benar apa belum?kalau sudah silahkan di simpan, untuk warna judul, silahkan di ubah sesuai selera sobat.

Ini kode css nya

Bisa kan? Semoga bermanfaat. jgn lupa Komentarnya

Artikel yang ada di sini sebenarnya hanyalah berupa koleksi pribadi yang saya kumpulkan dari berbagai sumber. Namun jika menurut anda artikel ini menarik dan bermanfaat, Bagikan artikel ini agar orang lain bisa membacanya :

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Membuat Widget Sidebar Berada Di Tengah

noreply@blogger.com (Kelola Blogspot) — Wed, 11 Jan 2012 16:01:00 -0800

Secara default blogger telah memberikan tatanan Judul selalu berawal dari samping kiri. Baik itu judul blog, judul posting maupun judul sidebar. Memang sebagian orang ada yang puas dengan letak posisi judul pemberian dari blogger blogger. Namun sebagai seorang yang selalu ingin mengembangkan kreatifitas seperti saya ini pasti selalu kurang puas dengan apa yang telah blogger berikan.

Bila anda ingin mencoba merombak judul sidebar agar rata tengah maka ini langkah-langkah yang harus dilakukan yaitu :

login blogger -> design ->edit html
cari kode .sidebar h2 {
setelah ketemu tambahkan kode text-align:center; setelah kode .sidebar h2 {
kalau sudah jangan lupa klik save

Agar Judul Posting berada ditengah atau rata tengah, caranya sama saja dengan langkah di atas cuman bedanya kalau judul sidebar kodenya: .sidebar h2 sedangkan Judul posting kodenya: .post h3

Baiklah kalau masih bingung lakukan langkah berikut ini:

login blogger -> design ->edit html
cari kode .post h3 {
setelah ketemu tambahkan kode text-align:center; setelah kode .post h3 {
kalau sudah jangan lupa klik save

Tambahan :
Bila di dalam template anda sudah terdapat elemen .sidebar h2 { maupun .post h3 { sudah terdapat kode text-align:left; maka anda cukup mengganti left; menjadi center;
Agar lebih jelas, perhatikan kode berikut ini:

text-align: left; artinya tulisan rata kiri
text-align: center; artinya tulisan rata tengah
text-align: right; artinya tulisan rata kanan

Itulah tadi tips Membuat Judul Post dan Judul Widget Sidebar Berada Di Tengah mudah mudahan jelas dan bermanfaat.

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Mengedit Postingan Blogspot

noreply@blogger.com (Kelola Blogspot) — Wed, 11 Jan 2012 09:12:00 -0800

Editor posting Blogger memiliki 3 mode:

Tulis: Mode WYSIWYG di mana Anda dapat memanipulasi teks dengan tombol format.
Edit HTML: mode mentah di mana Anda mengedit html secara manual.
Pratinjau: mengubah tampilan kiriman lengkap, termasuk Judul, link dan gambar-nya.

Untuk beralih ke mode-mode tersebut, klik saja daftar link yang sesuai. Tombol format hanya tersedia pada browser tertentu.

Fitur, dari kiri ke kanan:

Font
Ukuran huruf
Tebal
Miring
Warna huruf
Link
Rata kiri
Tengah
Rata kanan
Rata penuh
Daftar (nomor) urut
Daftar (butir) tidak urut
Blockquote
Pemeriksa ejaan
Upload gambar
Menghapus format dari bidang pilihan

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Beberapa Shortcut dalam postingan blogspot

noreply@blogger.com (Kelola Blogspot) — Wed, 11 Jan 2012 09:10:00 -0800

Blogger memiliki beberapa cara pintas keyboard yang dapat digunakan ketika mengedit posting. Cara pintas tersebut berfungsi di Internet Explorer 5.5+/Windows dan keluarga Mozilla (1.6+ dan Firefox 0.9+), dan mungkin juga di browser lainnya. Berikut ini adalah jalan pintas tersebut:

control + b = Cetak Tebal
control + i = Cetak Miring
control + l = Blockquote (hanya pada mode HTML)
control + z = Undoh
control + y = Redoh
control + shift + a = Link
control + shift + p = Pratinjau
control + d = Simpan sebagai Draft
control + s = Publikasikan Kiriman
control + g = Transliterasi bahasa Hindi

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Membuat Kotak Komentar Di Bawah Postingan

noreply@blogger.com (Kelola Blogspot) — Tue, 29 Nov 2011 05:16:00 -0800

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yanghttp://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)

3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

8. Lalu simpan template kamu.

Lihat deh hasilnya, coba kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar seperti punyaku ini (Bagi yang berhasil).

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Membuat Link yang Bergaris Bawah

noreply@blogger.com (Kelola Blogspot) — Tue, 29 Nov 2011 05:14:00 -0800

Link yang digaris bawahi berarti link tersebut di garis bawahi .biar lebih jelas silakan sobat lihat link yang di daris bawahi di bawah ini.

ini adalah sebuah link yang di garis bawahi

Nah… itu dia yang dimaksud dengan LINK yang digaris bawahi..Link yang digaris bawahi juga lebih menunjukan sebuah link, jadi pembaca akan lebih tau bahwa itu sebuah link.
Untuk mencabanya silakan lihat contoh dokumen htlm dengan link yang di garis bawahi dibawah ini.

<html>
<body>
<p>
<a href=”http://www.denisahlan.co.tv “ target=”_blank”>ini adalah sebuah link yang di garis bawahi</a>
</p>
</body>
</html>

Untuk mencoba membuat dokumen html dengan link yang di garis bawahi silakan sobat ikuti langkah-langkah di bawah ini :

1.Klik Menu Pada computer sobat.

2.Kemudian Klik ALL PROGRAM.

3.Klik accessories.

4.Klik NOTEPAD.

5.Selanjutnya Copy Dan Paste dokumen html dengan Link yang digaris bawahi Di atas Ke dalam notepad tersebut.

6.Klik Save Dengan nama coba11tml.

7.Pilih All Files Pada File AS TYPE.

8.Untuk melihatnya silakan klik kanan File yang sudah sobat save ,Kemudian pilih Open With selanjutnya Pilih Mozzila Firefox.

Selesai

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Mengganti Tanggal Posting dengan Icon Kalender

noreply@blogger.com (Kelola Blogspot) — Tue, 29 Nov 2011 05:11:00 -0800

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. kalo udah cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalo ggak ada coba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://kendhin.890m.com/kalender/bluecalend.gifadalah gambar icon kalender. kamu bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan
kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah,
caranya kamu ganti text bluecalend.gif
dengan redcalend.gif.


blackcalend.gif	blue2calend.gif	bluecalend.gif

greencalend.gif	orangecalend.gif	pinkcalend.gif

redcalend.gif	ungucalend.gif	yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI.

4. langkah selanjutnya yaitu kamu cari kode ini
<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode.month { dan juga dibawah kode .day {

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Dokumen HTML : Tag Paragraf

noreply@blogger.com (Kelola Blogspot) — Tue, 29 Nov 2011 05:08:00 -0800

Tag paragraph adalah suatu tag untuk membuat suatu elemen paragraph dalam suatu dokumen HTML.Tag paragraph adalah tag <p>dan </p>. Tag paragraph berguna untuk membuat suatu elemen paragraph dalam dokumen HTML. Untuk mencoba membuat dokumen htlm dengan tag paragraph silakan sobat lihat contoh dokumen HTML dengan tag paragraph berikut ini.

<html>
<head>
<title> DOKUMEN HTML DENGAN TAG PARAGRAF</title>
</head>
<body>
<p>Ini merupakan contoh dokumen html dengan tag paragraph</p>
<p>Ini merupakan contoh dokumen html dengan tag paragraph</p>
<p>Ini merupakan contoh dokumen html dengan tag paragraph</p>
</head>
</html>

Untuk mencoba membuat dokumen html dengan tag paragraph silakan sobat ikuti langkah-langkah di bawah ini :

1.Klik Menu Pada computer sobat.

2.Kemudian Klik ALL PROGRAM.

3.Klik accessories.

4.Klik NOTEPAD.

5.Selanjutnya Copy Dan Paste dokumen html dengan Tag paragraph Di atas Ke dalam notepad tersebut.

6.Klik Save Dengan nama coba4.html.

7.Pilih All Files Pada File AS TYPE.

8.Untuk melihatnya silakan klik kanan File yang sudah sobat save ,Kemudian pilih Open With selanjutnya Pilih Mozzila Firefox.

Selesai………………

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Membuat Menu Dropdown

noreply@blogger.com (Kelola Blogspot) — Tue, 29 Nov 2011 05:04:00 -0800

Apa itu Dropdown Menu ?Dropdown Menu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah.Contoh dari Dropdown Menu Adalah sebagai berikut:

Berarti sekarang kamu udah tau kan apa itu Dropdown Menu.ya udah tenang aja karena dalam postingan kali ini klinik-it akan menjelaskan bagaimana Cara Membuat Dropdown Menu.Tapi sebelumnya klinik-it akan menjelaskan sedikit dulu tentang Dropdown Menu. Apa sich kegunaan dari Dropdown Menu ini.Dropdown Menu ini berguna untuk membuat menu tanpa harus memakan banyak tempat.misalnya saja untuk menu-menu postingan kamu,atau bisa juga sebagai menu utama blog. dan yang jelas Dropdown Menu ini tidak akan memakan tempat yang banyak.untuk membuatnya silakan ikuti tutorial Cara Membuat Dropdown Menu berikut ini.

1.Login Ke Blogger dengan ID kamu.

2.Klik Tata Letak.

3.Klik tab Elemen Halaman.

4.Klik Tambah Gadget.

5.Kemudian Pilih HTML/Javascript.

6.Lalu masukan Script Berikut ini.

<select onchange="document.location.href=this.options[this.selectedIndex].value;"><option value="0" selected="selected">MENU</option><option value="http://kelolablogspot.blogspot.com/2010/02/cara-download-video-youtube.html">Cara Download Video Youtube </option><option value="http://kelolablogspot.blogspot.com/2010/01/cara-nge-hack-facebook.html"> Cara nge-hack Facebook </option><option value="http://kelolablogspot.blogspot.com/2010/02/cara-konversi-file-online.html"> Cara Konversi File Online</option><option value="http://kelolablogspot.blogspot.com/2010/02/cara-buat-blog.html"> Cara Bikin Blog </option><option value="http://kelolablogspot.blogspot.com/2010/01/cara-nge-hack-facebook.html"> Cara nge-hack Facebook </option></select>

Keterangan : Silakan Ubah Link yang berwarna biru dengan link-link Blog kamu. Dan ganti Teks yang berwarna merah dengan Teks yang kamu inginkan.

7.Dari Script di atas maka hasilnya adalah sebagai berikut.

8.Jika kamu ingin menambahkan menu-menu yang lainya,kamu tinggal menambahkan Kode berikut ini di atas kode </select>.

<option value="URL link">Teks</option>.

8.Setelah jadi semua jangan lupa klik SIMPAN.

9.Selamat mencoba...

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Menampilkan Kode HTML Dalam Posting

noreply@blogger.com (Kelola Blogspot) — Sun, 31 Jul 2011 05:11:00 -0700

Jika kita memposting kode html, maka dalam tampilanya kode-kode tersebut akan dikonversikan ke pemaknaan kode itu sendiri.
Misalnya kita mau memposting
<a href="http://kelolablogspot.blogspot.com">Kelola Blogspot</a>
maka yang akan muncul adalah
Kelola Blogspot
Agar kita bisa memunculkan <a href="http://kelolablogspot.blogspot.com">Kelola Blogspot</a> , maka kita harus mengkonversikan dulu kode tersebut dalam bentuk encode yaitu < untuk (<); , > untuk (> .
Untuk mempermudah kita mengkoversi kode yang lain ke bentuk encode, kita bisa menggunakan situs centricle

Disamping itu kita juga bisa memblok kode tersebut dengan cara berikut
<br/><br/> <p align="left"><textarea name="code" rows="6" cols="400"><a href="http://kelolablogspot.blogspot.com">Kelola Blogspot</a></textarea></p>

dan hasilnya adalah sebagai berikut :

atau bisa memblok dengan cara menggunakan fungsi "select all" seperti contoh berikut.

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Template : MagzStyle Slide

noreply@blogger.com (Kelola Blogspot) — Sun, 31 Jul 2011 04:37:00 -0700

For a few days I’ve been busy making this new template. I like the color combination between lime-green and grey. I think they look perfect. I hope you agree with me too. Just go to this link to see the demo and see if you like it or not. Don’t forget to leave your comment, critics or question for me.

Type : Blogspot template
Name : MagzStyle Slide
Designer : Free Tips 4U
Added : 5 October 2009
Properties : 3 columns, fixed width, grey-lime green, with black header
Feature :
slide-show and author boxes under header & 3 columns on the bottom
Advertising boxes

Demo : Click Here!
Download : Template_MagzSlide.rar

Do you want to know why I named this template MagzStyle Slider? First, it’s a modified version of MagzStyle Brown – the first version of MagzStyle. Second, I like Mahusay template from FreeBloggerTemplate, mainly the slide box feature under it’s header. After I learnt the script, the slide is run automatically, but I still want a control of what’s going to show up in the slide-show. So, I remove some of the script, so I still have the control. So, go see the demo and if you like it don’t hesitate to use this template on your blog or just download it for your collection.

You may download and use my template freely as long as you agree to theUser Agreement.

Anda bebas mendownload dan menggunakan template buatan Free Tips 4U dengan mematuhi Peraturan Penggunaan (lihat di sini).

Oh ya, jangan lupa komentarnya, saran dan kritik juga boleh. Terima kasih.

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Template : Harry Potters III

noreply@blogger.com (Kelola Blogspot) — Sun, 31 Jul 2011 04:35:00 -0700

“Harry Potter and the Deathly Hallows Part 1″ proved once again that nothing can beat the Harry Potter magic when it comes to pulling in viewers to theatres – even for the 7th installment in the series. The first part of the much awaited last movie in the J.K.Rowling franchise came in as the top grosser at the box office over the holiday weekend, pulling in $50.3 million. The movie has earned over $220 million so far in the US alone.

Type : Blogspot template XML
Name : Harry Potter III
Designer : Free Tips 4U
Added : 04 Dec. 2010
Properties : 2 columns, fixed width, black,
Feature : -
Demo : Click Here!
Download: template-hpotter3.rar

This is the 3rd Harry Potter that I created. If you like the old versions you still can download by clicking the thumbnails below:

You may download and use my template freely as long as you agree to the Term of Use

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Bagaimana Cara Menginstall Template Blogpspot?

noreply@blogger.com (Kelola Blogspot) — Sun, 31 Jul 2011 04:25:00 -0700

1. Download template and unzip file (juga bisa langsung menggunakan free unzipper software).

2. Masuk ke rancangan/design blog (Dashboard → Design → Edit HTML ).

3. Backup dulu template sebelumnya (Download full Template).

4. Find and upload the xml file.

5. If you see the following warning:

Click “keep widgets“.

6. Enjoy!

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

There are several possible factors that cause an error Bx-xxxx:

The code is directly copied, and Blogger did ‘t interpret it.
Temporarily Blogger is not accepting templates with certain codes or gadgets.

Possible solutions:

Remove widgets or gadgets that come with the template downloaded.
Clear your browser’s cookies.
Trying to upload the template with a different browser (Opera, Firefox, Chrome).
No copy and paste the code directly, upload the xml file.
Wait 24 hours and try again.

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

How do I customize my template?

For color and the font size, some Blogger templates offer an option to change it from the Dashboard (Dashboard → Design → Template designer → Advanced). Here you can see the result directly in the template.

Major changes in the templates needed to know at least a little CSS and HTML. A quick way to modify a template is change the images in the CSS code, for others with the same dimensions. That is the process to change the header of a design, for example.

Additionally, some templates have their own settings instructions and customization, refer to the same download page of your template.

1. Most templates have a menu that can only be edited from the HTML (Dashboard → Design → Edit HTML). In many cases the code to look for is like:


Home
Posts RSS
Comments RSS
Edit

There you can edit the expr:href=’…’ code, with your own links: href=’http://mylink…’. Also see the instructions in your template for more information.

2. Some templates include a link list widget or a pages widget to edit the menu directly from the Dashboard.

For link liks widget: Dashboard → Design → Page Elements
For pages widget: Posting → Edit pages → New pages

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

Probably because you don’t choose the right date format. The format should be changed from the panel and usually the correct types are:

1. Dashboard → Settings → Formatting → Date Header Format

2. Dashboard → Settings → Formatting → Timestamp Format

Read the instructions of your template located on the download page.

Why some images in my template disappeared?

Although we host the largest number of images in Blogger, images may suddenly disappear because:

The images were removed from the original hosting.
You use a own domain.

Solution: Download the template from Templates again, or from the page’s original author and re hosts the images on an external service such as Photobucket, or ImageShack.

How to add the comment form to my template?

Blogger recently added the Comments Form within the same template, below the individual posts, if your template does not have the form there, you may need to manually add it or activate it.

To add it manually:

Enter in the code of your template (Dashboard → Design → Edit HTML) and search for:

Replace that code with the following:

To activate it:

Enter the options panel comments (Dashboard → Settings → Comments).
And in the “Comment Form Placement” section, select: Embedded below post.

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

On the menu: Many templates show the feed in the top menu, to change the default feed for feedburner, go to your template code (Dashboard → Design → Edit HTML) and search for:

Replace this with:

Now, in the settings panel of the feed ( Dashboard → Settings → Site Feed) also add your Feedburner URL.

How do I translate my template to another language?

Directly in the template code. (Dashboard → Design → Edit HTML), with a really simple process:

The text within an image need to be changed with a image editor (eg. Gimp or Photoshop) and then, replace that image url with the edited image url.

What should I do after I install my template?

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

Easy! Enter in the code of your template (Dashboard → Design → Edit HTML) and search for:

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}

Delete it and that’s it.

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

Enter the administrator page elements (Dashboard → Design).
Add a new feed widget, with the following URL’s:To show the recent posts:
```
http://BLOGNAME.blogspot.com/feeds/posts/default
```
To display the latest comments:
```
http://BLOGNAME.blogspot.com/feeds/comments/default
```

Why is my blog shows few entries per page?

Blogger recently implemented a mechanism called “auto pagination” to reduce the loading time of its blogs. This mechanism is to show less Blogger entries per page if it detects that the page is heavy to load.

To avoid that this happens, you can try to decrease the load time of your blog, some recommendations are:

Optimizing images. For example, using Smush.it or a free image editor like Gimp.
Eliminate unnecessary gadgets.
Use “read more” in your longer posts.
Optimize CSS code. For example, with CSS Optimizer.

Can I remove the template credits?

No, the vast majority of templates are licensed under a Creative Commons, GPL or similar license, thus removing the credits would be using an illegal copy of the same. You can simplify the credits or relocate, but not remove them. Remember that the templates are free, so keep the credits is a way to thank those who designed and / or adapted the template.

What does the icon of a gold medal in some templates?

We call them Free Premium Templates and highlight it with this icon because have an excellent graphic quality, are well designed for Blogger, bring additional features and / or are compatible with the major browsers (Firefox, Chrome, IE7).

I sent a template, why is it not published?

Usually we receive a big number of templates, we try to publish as soon as possible and ensure a minimum quality in the published templates in Templates, some of the criteria that we use to approve a templates are:

An acceptable graphic and technical quality.
Compatible with most browsers.
No installation errors.
A license that allows distribution.

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Template : eCommerce

noreply@blogger.com (Kelola Blogspot) — Sun, 31 Jul 2011 04:10:00 -0700

Download

Features:
Instructions:	How to use this template
Template author:	PBTemplates
Designer:	New WP Themes
Description:	eCommerce is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, space for ads, slideshow, twitter support, posts thumbnails and drop down menu. Download eCommerce for free in BTemplates.
Rating	4.1 out of 5 based on 16 bloggers.

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Memasang meta tag di blogspot

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 18:51:00 -0700

Tahukah Anda apa itu meta tag dan pentingnya menambahkan meta tag, ini adalah artikel yang rinci tentang bagaimana menambahkannya ke blogspot Anda, blog atau website manapun.

Menambahkan meta tag sangatlah penting jika Anda ingin mendapatkan traffic yang bagus dari mesin pencari seperti google, yahoo, msn, dll, terutama yang terpenting adalah meta tag deskripsi. Jika sampean tidak tahu apa itu yang disebut meta tag, Meta tag adalah tag yang menjelaskan tentang situs anda dan memberitahu search engine tentang apa saja tentang situs anda.
Menambahkan meta tags merupakan faktor penting dalam Search Engine Optimization (SEO). Meta tag memungkinkan mesin pencari untuk mengindeks halaman web anda lebih akurat. Dengan kata lain, Meta tag berkomunikasi dengan mesin pencari dan memberitahukan informasi lebih lanjut tentang situs Anda dan membuat indeks halaman web anda dengan benar dan akurat.
Berikut adalah contoh. Inilah yang saya dapatkan saat saya mengetik 'Blogger Trik' di Google Search Engine.
Seperti yang Anda lihat dalam gambar di atas, adalah "Blog tentang Blogger Tips, Blogger Template, Widget, hacks, Blogger Trik, dll" meta tag deskripsi yang saya ditambahkan ke situs saya.
Anda harus menambahkan dua tag meta ke bagian kepala template blogger Anda. Salah
satunya adalah Meta deskripsi yang menggambarkan situs
Anda dan satu lagi adalah Meta Keywords yang menceritakan tentang kata kunci situs anda (apa saja content tentang kata kunci situs Anda).
Berikut adalah cara menambahkan tag meta untuk blog) Anda blogger (blogspot:

Masuk ke dashboard blogger
Anda> Pilih Desain 'link' [lihat
gambar di bawah]
Klik pada 'Edit html'tab

Berikut adalah kode yang harus menambahkan

<meta content='ISI DENGAN DESKRIPSI BLOG ANDA' name='description'/>
<meta content='ISI DENGAN KATA KUNCI BLOG ANDA' name='keywords'/>
<meta content='ISI DENGAN NAMA ANDA' name='author'/>

URAIAN:
Ganti text yang berwarna merah dengan DESKRIPSI, KATA KUNCI, NAMA PENULIS blog anda
Tambahkan kode di atas hanya setelah ini [Lihat di bawah
screenshot]

<b:include data='blog'
name='all-head-content'/>

Jangan lupa untuk menambahkan deskripsi dan kata kunci. dan menyimpan perubahan.

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Merubah Warna Latar / Background Blog

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 18:47:00 -0700

Bagi Anda yang ingin merubah penampilan blog supaya menghasilkan blog yang enak dilihat namun tidak membuat silau mata, ada baiknya mencoba tips yang akan saya sampaikan dibawah ini. Walaupun banyak sekali yang membahas tentang bagaimana cara merubah background blog namun sekali lagi saya ingatkan bahwa postingan ini sudah saya praktekan sehingga berbagai kesalahan sudah bisa diminimalisir hehehehe... Yuk kita mulai.

1. Merubah Background Header Blog
Letaknya adalah paling atas, biasanya digunakan untuk meletakan judul blog, baik itu berupa tulisan atau sebuah banner. Cara merubahnya adalah :
Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #header-wrapper menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#header-wrapper {

background:

#f4f4f4;

dan seterusnya........

Jika Anda ingin merubah warna dengan kode #000000 maka hasilnya akan seperti ini :

#header-wrapper {

background:#000000;
dan seterusnya........

Bila tidak menemukan tulisan background:#f4f4f4; Anda bisa menambahkannya sendiri tulisan tersebut tepat dibawah #header-wrapper {
Apabila sudah sesuai silahkan simpan atau pratinjau terlebih dahulu.

2. Merubah Warna Background Body
Terletak paling dasar atau dibalik halaman posting. Cara merubahnya :

Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan body { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

body {
background:#000000;
dan seterusnya........

Silahkan Anda sesuaikan dengan kode warna yang diinginkan .apabila selesai klik simpan.

3. Merubah Warna Background Halaman Postingan / Main body
Terletak paling tengah dan dijadikan sebagai tempat posting. Cara merubahnya adalah :

Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #main-wrapper { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#main-wrapper {
background:#000000;
dan seterusnya........

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

4. Merubah Warna Background Sidebar
Terletak disebelah halaman posting/main body, cara merubahnya adalah :

Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #sidebar-wrapper { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#sidebar-wrapper
background:#000000;
dan seterusnya....

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

5. Merubah Warna Background Footer
Terletak berada paling bawah halaman blog,cara merubahnya adalah :

Masuk Dashboard-->Tata Letak-->Edit html, cari tulisan #footer { menggunakan CTRL+F ,saya contohkan hasilnya akan seperti ini.

#footer {
background:#000000;
dan seterusnya...

Silahkan Anda sesuaikan dengan kode warna yang diinginkan, apabila selesai klik simpan.

Ada beberpa template yang menggunakan kode warna css hanya dengan tiga digit bukan enam digit, nah terus bagaimana solusinya? Dibawah ini saya tuliskan beberapa kode warna html yang biasa dipakai oleh kebanyakan orang.

Berikut Kode Warna HTML dalam tiga dan enam digit

Kode	Warna	Kode	Warna	Kode	Warna
#f03 ( #ff0033 )	OOOOOOOO	#00f ( #0000ff )	OOOOOOOO	#cc3 (#cccc33)	OOOOOOOO
#000 ( #000000 )	OOOOOOOO	#900 ( #990000 )	OOOOOOOO	#f39 (#ff3399)	OOOOOOOO
#3f0 ( #33ff0 )	OOOOOOOO	#0cf ( #00ccff )	OOOOOOOO	#63c (#6633cc)	OOOOOOOO
#966 (#996666)	OOOOOOOO	#990 (#999900)	OOOOOOOO	#f63 (#ff6633)	OOOOOOOO
#666( #666666 )	OOOOOOOO	#c3c ( #cc33cc)	OOOOOOOO	#ccc ( #cccccc )	OOOOOOOO

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Membuat Scroll pada blogspot

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 08:44:00 -0700

Fungsi scroll sangat membantu kita dalam memaksimalkan fungsi tempat, karena dengan scroll kita dapat membuat tulisan yang panjang menjadi pendek, gambar yang besar menjadi kecil, dan sebagainya.
Cara membuatnya cukup sederhana yaitu dengan menambahkan kode html berikut pada setiap unsur yang ingin kita tampilkan dalam bentuk scroll

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
Elemen yang akan discroll

</div>

Ketrangan :
300px = lebar scroll
200px = Tinggi scroll
padding:10px : Jarak antar elemen
#eee = kode warna

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Cara Membuat Menu Multi Kolom

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 08:30:00 -0700

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Membuat Rating pada Setiap Postingan

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 08:27:00 -0700

Agar pengujung Blog dapat memberikan rating atau penilaian terhadap isi postingan ,maka kita bisa menambahkan fitur rating muncul pada setiap postingan.

Berikut langkah-langkahnya

1.SIGN IN ke situs Blogger.com
2.Jika telah masuk ke halaman Dashboard, klik link Layouts,lalu pilih Edit HTML.
3.Berikan tanda ceklist pada opsi Expand Widget templates, lalu pada kolom HTML
temukan kode berikut:


<b:include data='post' name='postQuickEdit'/>
</span>
</div>

4.Jika sudah menemukannya,ketikan Scrip berikut ini di bawahnya

<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS =&#39;http://widgets.outbrain.com/lang_en.js&#39;;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Maka susunanya akan menjadi seperti ini:


<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS =&#39;http://widgets.outbrain.com/lang_en.js&#39;;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
5.Lalu klik Save Template

Bagikan via twitter : Atau Pilih menu share yang anda ingin kan :

Template Menarik : 3Dlue V2 Blogger Template

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 07:44:00 -0700

Ada sebuah template yang sangat menarik yang saya kutip dari Blogtemplate4u beberapa waktu lalu. Penampilannya adlah seperti gambar di atas.

Kode XML untuk template tersebut adalah sebagai berikut :

<?xml version="1.0" encoding="UTF-8" ?><br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html lang='en' xml:lang='en' 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'><br />   <br /> <head><br /> <br />   <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/><br />   <meta content='blogger' name='generator'/><br /> <br />   <link href='/atom.xml' rel='alternate' title='BLOG TITLE- Atom' type='application/atom+xml'/><br />   <link href='/rss.xml' rel='alternate' title='BLOG TITLE - RSS' type='application/rss+xml'/><br /> <link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'/><br /> <br />     <b:if cond='data:blog.pageType == &quot;index&quot;'><br />     <title><data:blog.title/></title><br />     <b:else/><br />     <title><data:blog.pageName/> | <data:blog.title/></title><br />     </b:if><br /> <meta content='YOUR DESCRIPTION' name='Description'/><br /> <meta content='YOUR KEYWORD' name='Keywords'/><br /> <link expr:href='data:blog.url' rel='canonical'/><br /> <br />     <b:skin><![CDATA[<br /> <br /> /*<br /> Name:     3Dlue Template<br /> Designer: Juansah<br /> URL:      http://oketrik.blogspot.com/<br /> Date:     8 July 2011<br /> */<br /> <br /> /** Reset **/<br /> *{margin:0; padding:0;}<br /> ul,ol{margin:0 0 0 40px;}<br /> .status-msg-wrap, .feed-links {display: none;}<br /> <br /> /* Use this with templates/template-twocol.html */<br /> body{ background:#BFE4EA;  margin:0;  color:#999;  font:Arial,Tahoma,Verdana;  font-size:12px;  text-align:center}<br /> a:link{ color:#999;  text-decoration:none}<br /> a:visited{ color:#999;  text-decoration:none}<br /> a:hover{ color:#fff;  text-decoration:underline}<br /> a img{ border-width:0}<br /> <br /> #header-wrapper{ width:980px;  float:center;  text-align:center;  margin:0 auto;  padding:0 0;  height:110px}<br /> #header-inner{ background-position:center;  margin-left:auto;  margin-right:auto}<br /> #header{ margin:5px;  color:#000}<br /> #header h1, #header p{ line-height:1.2em;  text-align:center;  text-transform:uppercase;  letter-spacing:.1em;  Font-size:48px;  font-family:'Paytone One',arial,serif; }<br /> #header h1 a:hover, #header p a:hover{color:#fff;text-shadow:  1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;}<br /> #header a{ color:#000;  text-decoration:none}<br /> #header .description{ color:#666;  font-size:14px;  font-style:italic;  letter-spacing:.2em}<br /> #header img{ margin-left:auto;  margin-right:auto}<br /> <br /> #outer-wrapper{ text-align:left}<br /> #content-wrapper{ width:980px;  margin:20px auto}<br /> #main-wrapper{ width:615px;  float:left;  padding:2px;  word-wrap:break-word;  overflow:hidden}<br /> #sidebar-wrapper{ width:350px;  float:right;  color:#999;  padding:2px;  word-wrap:break-word;  overflow:hidden}<br /> #footer-wrapper{ width:960px;  clear:both;  margin:20px auto  line-height:1.6em;   letter-spacing:.1em;}<br /> <br /> .post{ background:#222; padding:0.5em;  font-family:Arial,Tahoma,Verdana;  margin-left:30px;  margin-right:31px;  border:3px solid #333;  color:#999;  -moz-border-radius:15px 15px 15px 15px}<br /> .post h1, .post h2{ margin:5px 0 0;  padding:0 0 2px;  text-transform:capitalize;  text-align:left;  font:bold 27px Times,Tahoma,Verdana text-decoration:bold;  color:#fff;  line-height:1.4em}<br /> .post h1, .post h2 a{ display:block;  font-decoration:bold;  color:#fff}<br /> .post h1, .post h2 a:hover{ text-decoration:underline}<br /> .post h1, .post h2 a:visited{ text-decoration:none}<br /> .post h1, .post h2{ font-size:140%;  font-family:Arial,Tahoma,Verdana;  font-weight:400;  margin:.4em 0 0;  padding:0 0 10px}<br /> .post-body{ margin:0 0 .75em;  line-height:1.7em}<br /> .post-body a{ text-decoration:underline}<br /> .post-body blockquote{ line-height:1.3em;   border-left:2px solid #ccc;  padding:5px 10px;  color:#666;  font-style:italic}<br /> .post-footer{ margin:.75em 0;  color:#999;  letter-spacing:.1em;  font:Georgia;  line-height:1.4em}<br /> .post-header-line-1{ margin:0 0 1.8em;  color:#888;  letter-spacing:.1em;  font:Arial;  font-size:11px;  line-height:1.4em}<br /> .comment-link{ margin-left:1px}<br /> .post img{ padding:4px;  margin:2px 8px 2px 0}<br /> .post a img{ border:1px solid #333}<br /> .post a:hover img{ border:1px solid #999}<br /> .post blockquote{ margin:1em 20px}<br /> .post blockquote p{ margin:.75em 0}<br /> .jump-link{ text-align:right;  margin:5px}<br /> .post-body ol li ol{list-style-type:lower-alpha}<br /> .blockquote{display:block; border-left:2px solid #aadd27; margin:0px 0 0 30px; padding:3px}<br /> <br /> #comments h4{ margin:1em 0;  font-size:18px;  font-weight:bold;  line-height:1.4em;  text-transform:uppercase;  letter-spacing:.2em;  color:#000}<br /> #comments-block{ margin:1em 0 1.5em;  font-family:Arial,Tahoma,Verdana;  padding:10px;  line-height:1.6em}<br /> .comment-author{ margin:.5em 0;  font-size:23px;  padding-left:3px;  padding-top:5px;  height:30px;  background:#069}<br /> #comments-block{ margin:.5em 0}<br /> #comments-block .comment-body{ margin:.25em 0 0;  background:#222; color:#999; border:3px solid #333; -moz-border-radius:15px 15px 15px 15px}<br /> #comments-block .comment-footer{ margin:-.25em 0 2em;  line-height:1.4em;  text-align:right;  text-transform:uppercase;  letter-spacing:.1em}<br />  #comments-block .comment-body p{ margin:0 0 .75em 30px}<br /> .comment-timestamp{ font-size:10px;  text-align:right}<br /> .deleted-comment{ font-style:italic;  text-align:right;  color:gray}<br /> <br /> .feed-links{ clear:both;  line-height:2.5em}<br /> <br /> .sidebar{  line-height:1.5em;     -moz-border-radius:15px 15px 15px 15px;   margin:0 23px 0 23px;   padding:10px;     border:3px solid #333;     background:#222; font-family:Arial,Tahoma,Verdana}<br /> <br /> .sidebar h2{  margin:1.5em 0 .75em -36px;   font-size:120%;   background:url(http://oketrik.googlecode.com/files/bgsdi.png) no-repeat;  height:50px;  width:360px;  padding-top:3px;  text-align:center;  line-height:1.4em;  letter-spacing:.1em}<br /> <br /> .sidebar ul, .footer-column ul{ list-style:none;  margin:0 0 0;  padding:0 0 0}<br /> .sidebar li, .footer-column li{ margin:0;  color:#069;  list-style:disc inside;  padding-top:0;  padding-right:0;  padding-bottom:.25em;  padding-left:15px;  text-indent:-15px; border-bottom:1px solid #333; line-height:1.5em}<br /> .sidebar .widget, .main .widget, .footer-column .widget{ margin:0 0 1.5em;  padding:0 0 1.5em}<br /> .main .Blog{ border-bottom-width:0}<br /> <br /> .footer-column {padding:0.5em;  font-family:Arial,Tahoma,Verdana;  margin-left:10px;  margin-right:30px; background:#222; border:3px solid #333;  color:#999;  -moz-border-radius:15px 15px 15px 15px;}<br /> <br /> .footer-column h2{  margin:5px 0 2px -32px;   font-size:120%;   background:url(http://oketrik.googlecode.com/files/bgsdi.png) no-repeat;  height:50px;  width:280px;  padding-top:3px;  text-align:center;  line-height:1.4em;  letter-spacing:.1em}<br /> <br /> .profile-img{ float:left;  margin-top:0;  margin-right:5px;  margin-bottom:5px;  margin-left:0;  padding:4px;  border:1px solid #333}<br /> .profile-data{ margin:0;  text-transform:uppercase;  letter-spacing:.1em;  font:sans-serif;  color:#999;  font-weight:bold;  line-height:1.6em}<br /> .profile-datablock{ margin:.5em 0 .5em}<br /> .profile-textblock{ margin:0.5em 0;  line-height:1.6em}<br /> .profile-link{ font:Georgia;  text-transform:uppercase;  letter-spacing:.1em}<br /> <br /> #siteinfo{ font-size:12px;  width:980px;  Font-family:Verdana,Tahoma;  text-align:right;  color:#000;  padding:10px;  margin:2px auto}<br /> #siteinfo a{color:#000}<br /> <br /> .showpageArea{float:center;font-family:Tahoma; font-size:12px; padding:6px 10px; text-align:center; font-weight:700}<br /> .showpageNum a{color:#000; text-decoration:none; border:1px solid #999; margin:0 3px; padding:2px 5px}<br /> .showpageNum a:hover{border:1px solid #069}<br /> .showpagePoint{margin:0 3px; padding:2px 5px}<br /> .showpageOf{margin:0 8px 0 0}<br /> .showpage a{color:#000; text-decoration:none; border:1px solid #999; padding:2px 5px}<br /> .showpage a:hover{border:1px solid #fff}<br /> <br /> .post-labels{color:#fff}<br /> .post-labels a{color:#BF0000}<br /> <br /> #related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}<br /> <br /> #related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Arial,Tahoma,Verdana; margin-bottom:0.75em; margin-top:0em; padding-top:0em}<br /> #related-posts a{color:#999; text-align:center}<br /> #related-posts a:hover{color:#fff; background-color:#069}<br /> <br /> #nav-element{width:910px; margin:0 auto; padding:0}<br /> #nav-left{float:left; display:inline; width:710px; padding-left:0; padding-top:5px}<br /> #nav-right{float:right; display:inline; width:200px; padding-top:8px; margin:0}<br /> *-- CURRENT MENU --*/<br /> #nav{height:28px; padding:0; margin-bottom:0; clear:both; margin:0 auto}<br /> #nav{clear:both; margin:0 auto; text-transform:normal}<br /> #nav ul{position:relative; overflow:hidden; padding:0; margin:0; font:1.0em Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}<br /> #nav li{cursor:pointer; float:left; margin:0 padding:0; height:30px; display:inline}<br /> #nav ul li{float:left; list-style:none}<br /> #nav ul li a, #nav ul li a:visited{border:1px solid #CDCDCD; margin:0 1px 0 0; float:left; padding:8px 15px; text-transform:uppercase; color:#fff; font-weight:bold; font-size:11px; background:#069; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}<br /> #nav ul li a:hover{color:#fff; border:1px solid #CDCDCD}<br /> <br /> #nav-element-bottom{width:910px; margin:0 auto; padding:0}<br /> #nav-element-on-bottom{border:1px solid #CDCDCD; color:#999; background:#222; width:auto; margin:0; padding-left:6px; padding-top:5px; height:30px; -moz-border-radius:0 4px 4px 4px; -khtml-border-radius:0 4px 4px 4px; -webkit-border-radius:0 4px 4px 4px; border-radius:0 4px 4px 4px}<br /> <br /> #search-onmenu{border:1px solid #C9D7F1;  height:18px; width:160px; padding:0;  background:#f6f4f4}<br /> #search-onmenu input{border:0;  background:none;  color:#575757}<br /> #s-onmenu{font-size:12px; width:120px; padding-left:4px;  margin:0;  background:none}<br /> #topsearch-onmenu #search-onmenu{margin-top:0px; -moz-border-radius-bottomleft:3px; -moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; background-color:#FFF; border:1px solid #CDCDCD}<br /> #topsearch-onmenu #s-onmenu{width:135px}<br /> .module:after{clear:both; content:"."; display:block; height:0; visibility:hidden}<br /> * html .module{height:1%; overflow:visible}<br /> *+html .module{min-height:1%}<br /> .breadCrumbHolder{font-size:12px; line-height:21px; color:#999; font-family:Arial,Helvetica,sans-serif; font-style:normal; font-variant:normal; font-weight:400; margin:15px 0 5px}<br /> .breadCrumbHolder a{color:#0E82C7; font-size:inherit; font-weight:inherit; text-decoration:none}<br /> .breadCrumb{float:right; height:21px; margin-right:30px; width:535px; border:solid 3px #333; background:#222; padding:5px}<br /> .breadCrumb ul{height:21px; display:block; margin:0; padding:0}<br /> .breadCrumb ul li{display:block; float:left; position:relative; height:21px; overflow:hidden; line-height:21px; font-size:.9167em; background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OE19eRfI/AAAAAAAAEeI/oQSb_A5WIGY/s800/Chevron.gif) no-repeat 100% 0; margin:0 6px 0 0; padding:0 10px 0 0}<br /> .breadCrumb ul li div.chevronOverlay{position:absolute; right:0; top:0; z-index:2}<br /> .breadCrumb ul li span{display:block; overflow:hidden}<br /> .breadCrumb ul li a{display:block; position:relative; height:21px; line-height:21px; overflow:hidden; float:left}<br /> .breadCrumb ul li.first a{height:16px!important; text-indent:-1000em; width:16px; margin-top:2px; overflow:hidden; background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OFFVF1kI/AAAAAAAAEeQ/Dr3dADHxd6M/s800/IconHome.gif) no-repeat 0 0; padding:0}<br /> .breadCrumb ul li.first a:hover{background-position:0 -16px}<br /> .breadCrumb ul li.last{background:none; margin-right:0; padding-right:0}<br /> .chevronOverlay{display:none; background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/TH5OFOpTroI/AAAAAAAAEeM/GxOgEVpiMPY/s800/ChevronOverlay.png) no-repeat 100% 0; width:13px; height:20px}<br /> <br /> #containerSlider{ width:550px;  height:300px;  margin:0 auto;  position:relative;  border:10px solid #333;  background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiorxezD7Z22N0qmOI5XyPgazQ03qYGcp2YwcAytVw8qs26vXHOemmNFdXTGeUwaxqg_Y2gZ_Z21rOOH2OETylJxuuSaF7Qnqvy5irTJKXYp9bq4oyX_HLKj5kovSoJhhPMQJNUk89mCbI/s1600/content-slider-back.gif) no-repeat}<br /> #contentSlider{ width:550px height:300px}<br /> #prevBtn, #nextBtn{ display:block;  margin:0;  overflow:hidden;  padding:0;  text-indent:-8000px}<br /> #slider ul, #slider li{ list-style:none;  margin:0;  padding:0;  text-indent:0}<br /> #slider, #slider li{ overflow:hidden;  width:550px;  height:300px;  margin:0 auto}<br /> #slider{ margin-left:0;  background:#000}<br /> #prevBtn, #nextBtn{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8IR0OVYpYu9eazqdGU5wlFpXXnyNkh-UAKcjJuOYkrTqnlVDkPfW_BJl4Cur_YaaKIYXYsK0UfQ_rYyIceTJD7qCvX2RQ-HZXkhyphenhyphenaqkwXd4sYLvaUqJRLygOV9ijfKIzv8wkI8MjD48o/s1600/PRE.png) no-repeat;  display:block;  height:53px;  left:-24px;  position:absolute;  top:200px;  width:150px;  opacity:0.7}<br /> #nextBtn{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlHwc_3LrBUsBc44ABirlX5gZpLIJFy8gSV0zS8-iFMG1xPwPpmm2OMnRCipJkhv91ZsZvlfNMvkAi59DN0eCGUnTPkf_wsnPSJQ6Dr50RzslZwu6xh0lRcRhcFDFNQUon8NLQqtaEvQ/s1600/NEXT.png) no-repeat;  top:50px;  left:439px}<br /> #prevBtn a, #nextBtn a{ display:block;  height:53px;  width:150px}<br /> #slider img{ padding:0;  width:100%;  height:100%}<br /> <br /> .mbtbar{text-shadow:none; float:center; width:100%; float:left}<br />    .mbtbar .count{color:#ccc; font-size:12px; font-weight:bold; font-family:Helvetica,Arial; background:#fff; height:45px; line-height:45px; vertical-align:middle; width:100%; padding:0 10px 0 4px}<br />    .mbtbar .count span.bigcount{color:#F17C18; font-size:18px; font-family:Helvetica,Arial; line-height:49px; vertical-align:top; padding-right:3px}<br />    .mbtbar .subicons{border-bottom:1px solid #262626; margin:0 0 0px 0; float:left; width:100%; font-family:Helvetica,Arial; font-size:14px}<br />    .mbtbar .subicons a{text-decoration:none; color:#ccc}<br />    .mbtbar .subicons a:hover{text-decoration:underline; color:#aadd27}<br />    .mbtbar .subicons .rssicon{border-right:1px solid #262626; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqS4MDlWmPa0TDgwrIgQgATA24HQBUppCjrmM4HZa-EGuxSOLbnI9YNSjrntdafAUvzYd8hp3J-rMBqRMMTG0JyzLoKwGtilymPgD0R6GDwea_JeR0xC0VFp7TO3pLAoRJpAjMTKatUzY/s400/rss.png) no-repeat left center; min-width:20px; height:38px; line-height:57px; vertical-align:middle; float:left; padding:0px 10px 0px 30px; margin:0 0 0 5px}<br />    .mbtbar .subicons .fbicon{border-right:1px solid #262626; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilNlwSCaxJuANF68K0Zy4dBAWJ1nOFBNHohHtA-4WYkOEnkRD0ncBBfsug7UZaOkJEq4GfakDCPm-twvPnLnlCbbdc2yw-NxDfPswNYnq8t3Au0BQ1tvX-4dtLAVp7vczpRm8uwaEYs70/s400/facebook.png) no-repeat left center; min-width:20px; height:38px; line-height:57px; vertical-align:middle; float:left; padding:0px 10px 0px 30px; margin:0 0 0 5px}<br />    .mbtbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpj7ITzxgu2_tMI7hh6UPb0CaZSzCPNI5yIlakj-gSizY4UKd91qXxmkB-GvmYdYBsAf0eM0LtSlySTjn4_x7zDvFqZz1N-r5nyB_fusCPLhaWFcJ8j9bgyf8I0nu-fkyDwyrT5XhbDag/s400/twitter.png) no-repeat left center; min-width:20px; height:38px; line-height:57px; vertical-align:middle; float:left; padding:0px 10px 0px 30px; margin:0 0 0 5px}<br />    .mbtbar .emailsub{border-bottom:1px solid #333; padding:0 0 20px 0; float:left; width:100%; font-family:Helvetica,Arial}<br />    .mbtbar .emailsub .emailicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeB2hqhMFKkf3T8jGW4x4Xz_L8ZvTcInxhCD3Zummv4wmQcFakdhveGz3KatqAuTs_sATmUzUsuOGAs9ZJz6u8dpI8znL2Wq3J4kIKeFkN90vsQXQa5kqpzmJ6402B2LAIKaqbVp83_24/s400/email.png) no-repeat left center; float:left; padding:5px 15px 0px 35px; margin:0 0 0 5px; width:200px; height:28px; line-height:15px; vertical-align:middle; font-size:14px; color:#ccc}<br /> .mbtbar .emailsub .emailupdatesform{margin:15px 0 5px 5px; width:100%; float:left}<br /> .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important; float:left; border:1px solid #d2d2d2; padding:0px 8px 0px 8px; color:#ccc; font-size:12px; height:25px; width:180px; -moz-border-radius:5px; -webkit-border-radius:5px}<br /> .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#D3EE91 0%,#AADD27 100%); background:-webkit-gradient(linear,left top,left bottom,from(#D3EE91),to(#AADD27)); border:1px solid #aadd27; text-transform:uppercase; color:#000; height:25px; padding:0 12px 0 12px; margin:0 0 0 5px; -moz-border-radius:5px; -webkit-border-radius:5px}<br /> .mbtbar .count span.bigcount{color:#F17C18; font-size:24px; font-family:Helvetica,Arial; line-height:34px; vertical-align:middle}<br /> .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border:1px solid #0080ff; text-transform:uppercase; color:#fff; font-weight:bold; height:25px; padding:0 12px 0 12px; margin:0 0 0 5px}<br /> <br /> ]]></b:skin><br /> <br /> <b:if cond='data:blog.pageType != &quot;item&quot;'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <style><br /> .post{margin:.5em 10px 1.5em 20px; width:240px; padding:5px 15px 5px 15px; float:left;}<br /> .post h1, .post h2{ margin:5px 0 0; width:190px;min-height:50px; max-height:50px; padding:0 0 2px;  text-transform:capitalize;  text-align:left; float-left;  font-size:140%;  font-family:Arial,Tahoma,Verdana;  font-weight:400; text-decoration:bold;  color:#fff;  line-height:1.4em}<br /> .post-body{text-align:justify; font-family:&quot;Arial&quot;,Arial Black; font-size:12px; line-height:1.4em; margin:0 0 0.75em; height:150px;}<br /> #blog-pager-newer-link{float:left;}#blog-pager-older-link{float:right;}#blog-pager{width:617px; float:left; text-align:center;}<br /> .comment-bubble{float:right; background:url(http://i46.tinypic.com/df97c4.jpg) no-repeat; width:55px; height:40px; font-size:18px; margin-top:-59px; margin-right:-18px; padding-top:3px; text-align:center}<br /> </style><br /> </b:if></b:if><br /> <br /> <script type='text/javascript'><br /> var thumbnail_mode = &quot;float&quot; ;<br /> summary_noimg = 250;<br /> summary_img = 250;<br /> img_thumb_height = 120;<br /> img_thumb_width = 120;<br /> </script><br /> <br /> <br /> <script type='text/javascript'><br /> //<![CDATA[<br /> /******************************************<br /> Auto-readmore link script, version 2.0 (for blogspot)<br /> <br /> (C)2008 by Anhvo<br /> <br /> visit http://en.vietwebguide.com to get more cool hacks<br /> ********************************************/<br /> function removeHtmlTag(strx,chop){<br /> if(strx.indexOf("<")!=-1)<br /> {<br /> var s = strx.split("<");<br /> for(var i=0;i<s.length;i++){<br /> if(s[i].indexOf(">")!=-1){<br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br /> }<br /> }<br /> strx = s.join("");<br /> }<br /> chop = (chop < strx.length-1) ? chop : strx.length-2;<br /> while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;<br /> strx = strx.substring(0,chop-1);<br /> return strx+'...';<br /> }<br /> <br /> function createSummaryAndThumb(pID){<br /> var div = document.getElementById(pID);<br /> var imgtag = "";<br /> var img = div.getElementsByTagName("img");<br /> var summ = summary_noimg;<br /> if(img.length>=1) {<br /> imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';<br /> summ = summary_img;<br /> }<br /> <br /> var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br /> div.innerHTML = summary;<br /> }<br /> //]]><br /> </script><br /> <br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br /> <script src='http://plugins.jquery.com/files/jquery.easing.1.2.js.txt' type='text/javascript'/><br /> <script src='http://www.comparenetworks.com/developers/jqueryplugins/js/jquery.jBreadCrumb.1.1.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> //<![CDATA[<br /> jQuery(document).ready(function() {<br /> jQuery("#breadCrumb").jBreadCrumb();<br /> });<br /> //]]><br /> </script><br /> <br /> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/><br /> <br /> <script src='http://oketrik.googlecode.com/files/easySlider1.5.js' type='text/javascript'/><br /> <br /> <script type='text/javascript'><br /> $(document).ready(function(){    <br /> $(&quot;#slider&quot;).easySlider({<br /> auto: true,<br /> continuous: true<br /> });<br /> });<br /> </script><br /> <br /> </head><br />   <br />   <body><br />   <div id='outer-wrapper'><div id='wrap2'><br /> <br />     <br />     <span id='skiplinks' style='display:none;'><br />       <a href='#main'>skip to main </a> |<br />       <a href='#sidebar'>skip to sidebar</a><br />     </span><br /> <br />     <div id='header-wrapper'><br />       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='3Dlue V2 Template (Header)' type='Header'><br /> <b:includable id='title'><br />   <b:if cond='data:blog.url == data:blog.homepageUrl'><br />     <data:title/><br />   <b:else/><br />     <a expr:href='data:blog.homepageUrl'><data:title/></a><br />   </b:if><br /> </b:includable><br /> <b:includable id='description'><br />   <div class='descriptionwrapper'><br />     <p class='description'><span><data:description/></span></p><br />   </div><br /> </b:includable><br /> <b:includable id='main'><br /> <br />   <b:if cond='data:useImage'><br />     <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'><br />       <br />       <div id='header-inner'><br />         <a expr:href='data:blog.homepageUrl' style='display: block'><br />           <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><br />         </a><br />       </div><br />     <b:else/><br />       <br />       <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'><br />         <div class='titlewrapper' style='background: transparent'><br />           <b:if cond='data:blog.pageType != &quot;item&quot;'><br />           <h1 class='title' style='background: transparent; border-width: 0px'><br />             <b:include name='title'/><br />           </h1><br /> <b:else/><br />           <p class='title' style='background: transparent; border-width: 0px'><br />             <b:include name='title'/><br />           </p><br /> </b:if><br />         </div><br />         <b:include name='description'/><br />       </div><br />     </b:if><br />   <b:else/><br />     <br />     <div id='header-inner'><br />       <div class='titlewrapper'><br />         <b:if cond='data:blog.pageType != &quot;item&quot;'><br />         <h1 class='title'><br />           <b:include name='title'/><br />         </h1><br /> <b:else/><br />         <p class='title'><br />           <b:include name='title'/><br />         </p><br /> </b:if><br />       </div><br />       <b:include name='description'/><br />     </div><br />   </b:if><br /> </b:includable><br /> </b:widget><br /> </b:section><br />     </div><br />  <br /> <div id='nav-element'><br /> <div id='nav-left'><br /> <div id='nav'><br /> <ul><br /> <li><br /> <a expr:href='data:blog.homepageUrl'>Home</a><br /> </li><br /> <li><br /> <a href='YOUR URL'>About</a><br /> </li><br /> <li><br /> <a href='YOUR URL'>Contac Us</a><br /> <br /> </li><br /> <li><br /> <a href='YOUR URL'>Sitemap</a><br /> </li><br /> <li><br /> <a href='YOUR URL'>Advertise</a><br /> </li><br /> </ul><br /> </div><br /> </div><br /> <div id='nav-right'><br /> <div style='float:right'><br /> <div id='topsearch-onmenu'><br /> <div id='search-onmenu'><br /> <br /> <form action='/search' id='searchform' method='get' name='searchform'><br /> <input class='keyword' id='s-onmenu' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search Here..&quot;;}' onfocus='if (this.value == &quot;Search Here..&quot;) {this.value = &quot;&quot;}' type='text' value='Search Here..'/><br /> <input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7Dm8qhjXUIN8F5ChT9sswqiC9EfUhD1NfdP0SuiOil8N2oA_sXdwtR0R02uRX2RkGaUBIkX6Jal7bWb_aRKZcf7_lbdWaFTyuiMZ7vCukbeSPXipkahx4lxCVDCsBeJ6JfNRwFw8fpU/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/><br /> </form><br /> </div><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div style='clear:both;'/><br /> <div id='nav-element-bottom'><br /> <div class='nav-element-on-bottom section' id='nav-element-on-bottom'><br /> <div style='float:left; padding-top:2px'><br /> </div><br />   <div style='float:right; font-size:11px;padding-top:0; padding-right:10px'><br /> <br /> <span style='margin-right:-45px;'><br /> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><br /> <g:plusone/><br />   </span></div></div></div><br /> <br />     <div id='content-wrapper'><br /> <br />       <div id='crosscol-wrapper' style='text-align:center'><br />         <b:section class='crosscol' id='crosscol' showaddelement='no'/><br />       </div><br /> <br />       <div id='main-wrapper'><br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <div id='containerSlider'><br />   <div id='contentSlider'><br />    <div id='slider'><br /> <ul><br /> <li><a href='URL SLIDE POST 1'><img alt='Post 1' src='URL IMAGE POST 1'/></a></li><br /> <li><a href='URL SLIDE POST 2'><img alt='Post 2' src='URL IMAGE POST 2'/></a></li><br /> <li><a href='URL SLIDE POST 3'><img alt='Post 3' src='URL IMAGE POST 3'/></a></li><br /> <li><a href='URL SLIDE POST 4'><img alt='Post 4' src='URL IMAGE POST 4'/></a></li><br /> <li><a href='URL SLIDE POST 5'><img alt='Post 5' src='URL IMAGE POST 5'/></a></li><br /> </ul><br />    </div><br />   </div><br /> </div><br /> </b:if><br />         <b:section class='main' id='main' showaddelement='no'><br /> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'><br /> <b:includable id='nextprev'><br />   <div class='blog-pager' id='blog-pager'><br /> <br /> <br />   </div><br />   <div class='clear'/><br /> </b:includable><br /> <b:includable id='shareButtons' var='post'><br />   <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><br />       <span class='share-button-link-text'><data:top.emailThisMsg/></span><br />   </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><br />       <span class='share-button-link-text'><data:top.blogThisMsg/></span><br />   </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><br />       <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span><br />   </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><br />       <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span><br />   </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><br />       <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span><br />   </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'><br />       <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span><br />   </a></b:if><br />   <b:if cond='data:top.showDummy'><br />     <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div><br />   </b:if><br /> </b:includable><br /> <b:includable id='backlinks' var='post'><br />   <a name='links'/><h4><data:post.backlinksLabel/></h4><br />   <b:if cond='data:post.numBacklinks != 0'><br />     <dl class='comments-block' id='comments-block'><br />       <b:loop values='data:post.backlinks' var='backlink'><br />         <div class='collapsed-backlink backlink-control'><br />           <dt class='comment-title'><br />             <span class='backlink-toggle-zippy'>&#160;</span><br />             <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a><br />             <b:include data='backlink' name='backlinkDeleteIcon'/><br />           </dt><br />           <dd class='comment-body collapseable'><br />             <data:backlink.snippet/><br />           </dd><br />           <dd class='comment-footer collapseable'><br />             <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span><br />             <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span><br />           </dd><br />         </div><br />       </b:loop><br />     </dl><br />   </b:if><br />   <p class='comment-footer'><br />     <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a><br />   </p><br /> </b:includable><br /> <b:includable id='post' var='post'><br />   <div class='post hentry uncustomized-post-template'><br />     <a expr:name='data:post.id'/><b:if cond='data:blog.pageType != &quot;item&quot;'><br /> <b:if cond='data:post.title'><br />       <h2 class='post-title entry-title'><br />      <b:if cond='data:post.link'><br />        <a expr:href='data:post.link'><data:post.title/></a><br />      <b:else/><br />         <b:if cond='data:post.url'><br />           <a expr:href='data:post.url'><data:post.title/></a><br />         <b:else/><br />           <data:post.title/><br />         </b:if><br />      </b:if><br />       </h2><br /> </b:if><br /> <b:else/><br />       <h1 class='post-title entry-title'><br />      <b:if cond='data:post.link'><br />        <a expr:href='data:post.link'><data:post.title/></a><br />      <b:else/><br />         <b:if cond='data:post.url'><br />           <a expr:href='data:post.url'><data:post.title/></a><br />         <b:else/><br />           <data:post.title/><br />         </b:if><br />      </b:if><br />       </h1><br /> </b:if><br /> <br />     <div class='post-header-line-1'><br /> <b:if cond='data:blog.pageType != &quot;item&quot;'><br /> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <b:if cond='data:post.allowComments'><br /> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a><br /> </b:if><br /> <div style='width:230px;height:70px;float:right;text-align:right;padding:5px 10px 5px 10px;margin-left:5px;padding-right:20px;margin-right:-28px;background:#000;color:#fff;font-family: Arial, Tahoma, Verdana;font-size;12px;background:url(http://oketrik.googlecode.com/files/BG%20data2.png) right no-repeat'><br /> <br />       <span class='post-author vcard'><br />         <b:if cond='data:top.showAuthor'><br />           <data:top.authorLabel/><br />           <span class='fn'><data:post.author/></span><br />         </b:if><br />       </span><br /> <br />       <span class='post-timestamp'><br />         <b:if cond='data:top.showTimestamp'><br />           <data:top.timestampLabel/><br />         <b:if cond='data:post.url'><br />           <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><br />         </b:if><br />         </b:if><br />       </span><br /> <br/><br /> <span class='post-labels'><br />         <b:if cond='data:post.labels'><br />           <data:postLabelsLabel/><br />           <b:loop values='data:post.labels' var='label'><br />             <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><br />           </b:loop><br />         </b:if><br />       </span><br /> <br /> <div style='float:right;margin-top:5px;'><br /> <br /> <br /> <div><a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/v2/lg-share-en.gif' style='border:0' width='125'/></a><br /> <script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b55855363d6632d' type='text/javascript'/></div><br /> <br /> <br /> </div><br /> <br /> <span class='reaction-buttons'><br />         <b:if cond='data:top.showReactions'><br />           <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><br />             <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'><br />               <span class='reactions-label'><br />               <data:top.reactionsLabel/></span>&#160;</td><br />             <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td><br />            </tr></table><br />         </b:if><br />       </span><br />  <br /> </div></b:if></b:if></div><br /> <br />     <div class='post-body entry-content'><br />       <b:if cond='data:blog.pageType != &quot;item&quot;'><br />       <b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><br /> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><br /> <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read More &gt;&gt;</a></span><br /> </b:if></b:if><br /> <br /> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br /> <br /> <div style='width:645px;margin-left:-43px;height:180px;text-align:left;color:#A87E00;font-family:arial, san-serif;font-size;12px;background:url(http://oketrik.googlecode.com/files/bwpost2.png) no-repeat;'><br /> <div class='separator' style='width:370px;clear: both; text-align: left;'><br /> <img alt='subscribe' src='http://oketrik.googlecode.com/files/Wooden-Mail-128.png' style='float:left;'/><h3 style='padding-top:20px;text-decoration:bold;color:#FFC824;'>Subscribe</h3><br /> <p>Monitor continues to update the latest from This blog directly in your email!</p></div><br /> <br /> <div class='separator' style='margin-right:30px;margin-top:-118px;float:right;width:200px;height:100px;border-left:1px solid #A87E00;clear: both; text-align: right;'><br /> <br />     <div class='emailupdatesform'><br /> <form action='http://feedburner.google.com/fb/a/mailverify' class='emailupdatesform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=oketrik&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input gtbfieldid='10' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;your email here...&apos;;}' onfocus='if (this.value == &apos;your email here...&apos;) {this.value = &apos;&apos;;}' type='text' value='your email here...'/><input name='uri' type='hidden' value='tntbystc'/><input class='joinemailupdates' type='submit' value='Join'/></form></div><br /> <br /> &lt;a href=&quot;http://feeds.feedburner.com/oketrik&quot;&gt;&lt;img src=&quot;http://feeds.feedburner.com/~fc/oketrik?bg=111604&amp;fg=aadd27&amp;anim=1&amp;label=listeners&quot; height=&quot;26&quot; width=&quot;88&quot; style=&quot;border:0;float:right;&quot; alt=&quot;oketrik&quot; /&gt;&lt;/a&gt;<br /> </div><br /> </div><br /> <br /> <div id='related-posts'><br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast != &quot;true&quot;'><br /> </b:if><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop><br /> <script type='text/javascript'><br /> var currentposturl=&quot;<data:post.url/>&quot;;<br /> var maxresults=5;<br /> var relatedpoststitle=&quot;Related Posts&quot;;<br /> removeRelatedDuplicates_thumbs();<br /> printRelatedLabels_thumbs();<br /> </script><br /> </div><div style='clear:both'/><br /> </b:if><br />       <div style='clear: both;'/> <br />     </div><br />   <br />     <b:if cond='data:post.hasJumpLink'><br />       <div class='jump-link'><br />         <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  <br />       </div><br />     </b:if><br />     <br />     <div class='post-footer'><br />     <div class='post-footer-line post-footer-line-1'><br />       <br />             <span class='star-ratings'><br />         <b:if cond='data:top.showStars'><br />            <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/><br />         </b:if><br />       </span><br /> <br />       <br /> <br />        <br />        <span class='post-backlinks post-comment-link'><br />          <b:if cond='data:blog.pageType != &quot;item&quot;'><br />            <b:if cond='data:post.showBacklinks'><br />              <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a><br />            </b:if><br />          </b:if><br />        </span><br /> <br />       <span class='post-icons'><br />         <br />         <b:if cond='data:post.emailPostUrl'><br />           <span class='item-action'><br />           <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><br />               <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/><br />           </a><br />           </span><br />         </b:if><br /> <br />         <br />         <b:include data='post' name='postQuickEdit'/><br />       </span><br />       </div><br /> <br />       <div class='post-footer-line post-footer-line-2'>      </div><br />       <br /> <br />       <div class='post-footer-line post-footer-line-3'><br />       <span class='post-location'><br />         <b:if cond='data:top.showLocation'><br />           <b:if cond='data:post.location'><br />             <data:postLocationLabel/><br />             <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a><br />           </b:if><br />         </b:if><br />       </span><br />       </div><br />     </div><br />   </div><br /> </b:includable><br /> <b:includable id='status-message'><br />   <b:if cond='data:navMessage'><br />   <div class='status-msg-wrap'><br />     <div class='status-msg-body'><br />       <data:navMessage/><br />     </div><br />     <div class='status-msg-border'><br />       <div class='status-msg-bg'><br />         <div class='status-msg-hidden'><data:navMessage/></div><br />       </div><br />     </div><br />   </div><br />   <div style='clear: both;'/><br />   </b:if><br /> </b:includable><br /> <b:includable id='comment-form' var='post'><br />   <div class='comment-form'><br />     <a name='comment-form'/><br />     <h4 id='comment-post-message'><data:postCommentMsg/></h4><br />     <p><data:blogCommentMessage/></p><br />     <data:blogTeamBlogMessage/><br />     <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br />     <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='500'/><br />     <data:post.friendConnectJs/><br />     <data:post.cmtfpIframe/><br />     <script type='text/javascript'><br />       BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);<br />     </script><br />   </div><br /> </b:includable><br /> <b:includable id='backlinkDeleteIcon' var='backlink'><br />   <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'><br />     <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'><br />       <img src='http://www.blogger.com/img/icon_delete13.gif'/><br />     </a><br />   </span><br /> </b:includable><br /> <b:includable id='mobile-nextprev'><br />   <div class='blog-pager' id='blog-pager'><br />     <b:if cond='data:newerPageUrl'><br />       <div class='mobile-link-button' id='blog-pager-newer-link'><br />       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a><br />       </div><br />     </b:if><br /> <br />     <b:if cond='data:olderPageUrl'><br />       <div class='mobile-link-button' id='blog-pager-older-link'><br />       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a><br />       </div><br />     </b:if><br /> <br />     <div class='mobile-link-button' id='blog-pager-home-link'><br />     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><br />     </div><br /> <br />     <div class='mobile-desktop-link'><br />       <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a><br />     </div><br /> <br />   </div><br />   <div class='clear'/><br /> </b:includable><br /> <b:includable id='postQuickEdit' var='post'><br />   <b:if cond='data:post.editUrl'><br />     <span expr:class='&quot;item-control &quot; + data:post.adminClass'><br />       <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'><br />         <img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/><br />       </a><br />     </span><br />   </b:if><br /> </b:includable><br /> <b:includable id='main' var='top'><br />   <br />   <div class='blog-posts hfeed'><br /> <br />     <b:include data='top' name='status-message'/><br /> <div class='breadCrumbHolder module'><br /> <b:include data='posts' name='breadCrumb'/><br /> </div><br /> <div class='chevronOverlay main'/><br />     <data:defaultAdStart/><br />     <b:loop values='data:posts' var='post'><br />       <b:include data='post' name='post'/><br />       <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />         <b:include data='post' name='comments'/><br />       </b:if><br />       <b:if cond='data:blog.pageType == &quot;item&quot;'><br />         <b:include data='post' name='comments'/><br />       </b:if><br />       <b:if cond='data:post.includeAd'><br />         <b:if cond='data:post.isFirstPost'> <br />           <data:defaultAdEnd/><br />         <b:else/><br />           <data:adEnd/><br />         </b:if><br />         <div class='inline-ad'><br />           <data:adCode/><br />         </div><br />         <data:adStart/><br />       </b:if><br />       <b:if cond='data:post.trackLatency'><br />         <data:post.latencyJs/><br />       </b:if><br />     </b:loop><br />     <data:adEnd/><br />   </div><br /> <br />   <br />   <b:include name='nextprev'/><br /> <br />   <br />   <b:include name='feedLinks'/><br />   <br />   <b:if cond='data:top.showStars'><br />     <script src='http://www.google.com/jsapi' type='text/javascript'/><br />     <script type='text/javascript'><br />       google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});<br />       function initialize() {<br />         google.annotations.setApplicationId(<data:top.blogspotReviews/>);<br />         google.annotations.createAll();<br />         google.annotations.fetch();<br />       }<br />       google.setOnLoadCallback(initialize);<br />     </script><br />   </b:if><br /> </b:includable><br /> <b:includable id='commentDeleteIcon' var='comment'><br />   <span expr:class='&quot;item-control &quot; + data:comment.adminClass'><br />     <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'><br />       <img src='http://www.blogger.com/img/icon_delete13.gif'/><br />     </a><br />   </span><br /> </b:includable><br /> <b:includable id='feedLinks'><br />   <b:if cond='data:blog.pageType != &quot;item&quot;'> <br />     <b:if cond='data:feedLinks'><br />       <div class='blog-feeds'><br />         <b:include data='feedLinks' name='feedLinksBody'/><br />       </div><br />     </b:if><br /> <br />     <b:else/> <br />     <div class='post-feeds'><br />       <b:loop values='data:posts' var='post'><br />         <b:if cond='data:post.allowComments'><br />           <b:if cond='data:post.feedLinks'><br />             <b:include data='post.feedLinks' name='feedLinksBody'/><br />           </b:if><br />         </b:if><br />       </b:loop><br />     </div><br />   </b:if><br /> </b:includable><br /> <b:includable id='breadCrumb' var='posts'><br /> <b:if cond='data:blog.homepageUrl == data:blog.url'><br /> <b:else/><br /> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <div class='breadCrumb module' id='breadCrumb'><br /> <ul><br /> <li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li><br /> <b:loop values='data:posts' var='post'><br /> <b:if cond='data:post.labels'><br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast == &quot;true&quot;'><br /> <li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li><br /> </b:if><br /> </b:loop><br /> <li><data:post.title/></li><br /> </b:if><br /> </b:loop><br /> </ul><br /> </div><br /> <b:else/><br /> <b:if cond='data:blog.pageType == &quot;archive&quot;'><br /> <div class='breadCrumb module' id='breadCrumb'><br /> <ul><br /> <li><a expr:href='data:blog.homepageUrl'>Home</a></li><br /> <li>Archive For <data:blog.pageName/></li><br /> </ul><br /> </div><br /> <b:else/><br /> <b:if cond='data:blog.pageType == &quot;index&quot;'><br /> <div class='breadCrumb module' id='breadCrumb'><br /> <ul><br /> <b:if cond='data:blog.pageName == &quot;&quot;'><br /> <li><a expr:href='data:blog.homepageUrl'>Home</a></li><br /> <li>All Article</li><br /> <b:else/><br /> <li><a expr:href='data:blog.homepageUrl'>Home</a></li><br /> <li><data:blog.pageName/></li><br /> </b:if><br /> </ul><br /> </div><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:includable><br /> <b:includable id='mobile-index-post' var='post'><br />   <div class='mobile-date-outer date-outer'><br />     <b:if cond='data:post.dateHeader'><br />       <div class='date-header'><br />         <span><data:post.dateHeader/></span><br />       </div><br />     </b:if><br /> <br />     <div class='mobile-post-outer'><br />       <a expr:href='data:post.url'><br />         <h3 class='mobile-index-title entry-title'><br />           <data:post.title/><br />         </h3><br /> <br />         <div class='mobile-index-arrow'>&amp;rsaquo;</div><br /> <br />         <div class='mobile-index-contents'><br />           <b:if cond='data:post.thumbnailUrl'><br />             <div class='mobile-index-thumbnail'><br />               <div class='Image'><br />                 <img expr:src='data:post.thumbnailUrl'/><br />               </div><br />             </div><br />           </b:if><br /> <br />           <div class='post-body'><br />             <b:if cond='data:post.snippet'><data:post.snippet/></b:if><br />           </div><br />         </div><br /> <br />         <div style='clear: both;'/><br />       </a><br /> <br />       <div class='mobile-index-comment'><br />           <b:if cond='data:post.allowComments'><br />             <b:if cond='data:post.numComments != 0'><br />               <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a><br />             </b:if><br />           </b:if><br />       </div><br />     </div><br /> <br />     <b:if cond='data:post.trackLatency'><br />       <data:post.latencyJs/><br />     </b:if><br />   </div><br /> </b:includable><br /> <b:includable id='feedLinksBody' var='links'><br />   <div class='feed-links'><br />   <data:feedLinksMsg/><br />   <b:loop values='data:links' var='f'><br />      <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a><br />   </b:loop><br />   </div><br /> </b:includable><br /> <b:includable id='comments' var='post'><br />   <div class='comments' id='comments'><br />     <a name='comments'/><br />     <b:if cond='data:post.allowComments'><br />       <h4><br />         <b:if cond='data:post.numComments == 1'><br />           1 <data:commentLabel/>:<br />         <b:else/><br />           <data:post.numComments/> <data:commentLabelPlural/> to <data:post.title/> :<br />         </b:if><br />       </h4><br /> <br />       <b:if cond='data:post.commentPagingRequired'><br />         <span class='paging-control-container'><br />           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a><br />           &#160;<br />           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a><br />           &#160;<br />           <data:post.commentRangeText/><br />           &#160;<br />           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a><br />           &#160;<br />           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a><br />         </span><br />       </b:if><br /> <br />       <dl id='comments-block'><br />         <b:loop values='data:post.comments' var='comment'><br />           <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'><br />             <b:if cond='data:comment.favicon'><br />               <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br />             </b:if><br />             <a expr:name='data:comment.anchorName'/><br />                         <b:if cond='data:comment.authorUrl'><br />               <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />             <b:else/><br />               <data:comment.author/><br />             </b:if><br />             <data:commentPostedByMsg/><br />           </dt><br />           <dd class='comment-body'><br />             <b:if cond='data:comment.isDeleted'><br />               <span class='deleted-comment'><data:comment.body/></span><br />             <b:else/><br />               <p><data:comment.body/></p><br />             </b:if><br />           </dd><br />           <dd class='comment-footer'><br />             <span class='comment-timestamp'><br />               <a expr:href='data:comment.url' title='comment permalink'><br />                 <data:comment.timestamp/><br />               </a><br />               <b:include data='comment' name='commentDeleteIcon'/><br />             </span><br />           </dd><br />         </b:loop><br />       </dl><br /> <br />       <b:if cond='data:post.commentPagingRequired'><br />         <span class='paging-control-container'><br />           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><br />             <data:post.oldestLinkText/><br />           </a><br />           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><br />             <data:post.olderLinkText/><br />           </a><br />           &#160;<br />           <data:post.commentRangeText/><br />           &#160;<br />           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><br />             <data:post.newerLinkText/><br />           </a><br />           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><br />             <data:post.newestLinkText/><br />           </a><br />         </span><br />       </b:if><br /> <br />       <p class='comment-footer'><br />         <b:if cond='data:post.embedCommentForm'><br />           <b:if cond='data:post.allowNewComments'><br />             <b:include data='post' name='comment-form'/><br />           <b:else/><br />             <data:post.noNewCommentsText/><br />           </b:if><br />         <b:else/><br />           <b:if cond='data:post.allowComments'><br />             <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br />           </b:if><br />         </b:if><br /> <br />       </p><br />     </b:if><br /> <br />     <div id='backlinks-container'><br />     <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'><br />        <b:if cond='data:post.showBacklinks'><br />          <b:include data='post' name='backlinks'/><br />        </b:if><br />     </div><br />     </div><br />   </div><br /> </b:includable><br /> </b:widget><br /> </b:section><br />       </div><br /> <br />       <div id='sidebar-wrapper'><br />         <b:section class='sidebar' id='sidebar' preferred='yes'><br /> <b:widget id='HTML1' locked='false' title='Subscribe Template by Email' type='HTML'><br /> <b:includable id='main'><br />   <br />   <b:if cond='data:title != &quot;&quot;'><br />     <h2 class='title'><data:title/></h2><br />   </b:if><br />   <div class='widget-content'><br />     <data:content/><br />   </div><br /> <br />   <b:include name='quickedit'/><br /> </b:includable><br /> </b:widget><br /> <b:widget id='Label1' locked='false' title='Labels' type='Label'><br /> <b:includable id='main'><br />   <b:if cond='data:title'><br />     <h2><data:title/></h2><br />   </b:if><br />   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'><br />     <b:if cond='data:display == &quot;list&quot;'><br />       <ul><br />       <b:loop values='data:labels' var='label'><br />         <li><br />           <b:if cond='data:blog.url == data:label.url'><br />             <span expr:dir='data:blog.languageDirection'><data:label.name/></span><br />           <b:else/><br />             <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a><br />           </b:if><br />           <b:if cond='data:showFreqNumbers'><br />             <span dir='ltr'>(<data:label.count/>)</span><br />           </b:if><br />         </li><br />       </b:loop><br />       </ul><br />     <b:else/><br />       <b:loop values='data:labels' var='label'><br />         <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'><br />           <b:if cond='data:blog.url == data:label.url'><br />             <span expr:dir='data:blog.languageDirection'><data:label.name/></span><br />           <b:else/><br />             <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a><br />           </b:if><br />           <b:if cond='data:showFreqNumbers'><br />             <span class='label-count' dir='ltr'>(<data:label.count/>)</span><br />           </b:if><br />         </span><br />       </b:loop><br />     </b:if><br /> <br />   </div><br /> </b:includable><br /> </b:widget><br /> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'><br /> <b:includable id='main'><br />   <b:if cond='data:title'><br />     <h2><data:title/></h2><br />   </b:if><br />   <div class='widget-content'><br />   <div id='ArchiveList'><br />   <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'><br />     <b:if cond='data:style == &quot;HIERARCHY&quot;'><br />      <b:include data='data' name='interval'/><br />     </b:if><br />     <b:if cond='data:style == &quot;FLAT&quot;'><br />       <b:include data='data' name='flat'/><br />     </b:if><br />     <b:if cond='data:style == &quot;MENU&quot;'><br />       <b:include data='data' name='menu'/><br />     </b:if><br />   </div><br />   </div><br />   <b:include name='quickedit'/><br />   </div><br /> </b:includable><br /> <b:includable id='flat' var='data'><br />   <ul class='flat'><br />     <b:loop values='data:data' var='i'><br />       <li class='archivedate'><br />         <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)<br />       </li><br />     </b:loop><br />   </ul><br /> </b:includable><br /> <b:includable id='menu' var='data'><br />   <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'><br />     <option value=''><data:title/></option><br />     <b:loop values='data:data' var='i'><br />       <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option><br />     </b:loop><br />   </select><br /> </b:includable><br /> <b:includable id='interval' var='intervalData'><br />   <b:loop values='data:intervalData' var='i'><br />       <ul class='hierarchy'><br />         <li expr:class='&quot;archivedate &quot; + data:i.expclass'><br />           <b:include data='i' name='toggle'/><br />           <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a><br />             <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span><br />           <b:if cond='data:i.data'><br />             <b:include data='i.data' name='interval'/><br />           </b:if><br />           <b:if cond='data:i.posts'><br />             <b:include data='i.posts' name='posts'/><br />           </b:if><br />         </li><br />       </ul><br />   </b:loop><br /> </b:includable><br /> <b:includable id='toggle' var='interval'><br />   <b:if cond='data:interval.toggleId'><br />   <b:if cond='data:interval.expclass == &quot;expanded&quot;'><br />     <a class='toggle' href='javascript:void(0)'><br />       <span class='zippy toggle-open'>&#9660;&#160;</span><br />     </a><br />   <b:else/><br />     <a class='toggle' href='javascript:void(0)'><br />       <span class='zippy'><br />         <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'><br />           &#9668;&#160;<br />         <b:else/><br />           &#9658;&#160;<br />         </b:if><br />       </span><br />     </a><br />   </b:if><br />  </b:if><br /> </b:includable><br /> <b:includable id='posts' var='posts'><br />   <ul class='posts'><br />     <b:loop values='data:posts' var='i'><br />       <li><a expr:href='data:i.url'><data:i.title/></a></li><br />     </b:loop><br />   </ul><br /> </b:includable><br /> </b:widget><br /> <b:widget id='PageList1' locked='false' title='Pages' type='PageList'><br /> <b:includable id='main'><br />   <b:if cond='data:title'><h2><data:title/></h2></b:if><br />   <div class='widget-content'><br />     <b:if cond='data:mobile'><br />       <select expr:id='data:widget.instanceId + &quot;_select&quot;'><br />         <b:loop values='data:links' var='link'><br />           <b:if cond='data:link.isCurrentPage'><br />             <option expr:value='data:link.href' selected='selected'><data:link.title/></option><br />           <b:else/><br />             <option expr:value='data:link.href'><data:link.title/></option><br />           </b:if><br />         </b:loop><br />       </select><br />       <span class='pagelist-arrow'>&amp;#9660;</span><br /> <br />     <b:else/><br />       <ul><br />         <b:loop values='data:links' var='link'><br />           <b:if cond='data:link.isCurrentPage'><br />             <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li><br />           <b:else/><br />             <li><a expr:href='data:link.href'><data:link.title/></a></li><br />           </b:if><br />         </b:loop><br />       </ul><br />     </b:if><br />     <b:include name='quickedit'/><br />   </div><br /> </b:includable><br /> </b:widget><br /> </b:section><br />       </div><br /> <br />       <br />       <div class='clear'>&#160;</div><br /> <br />      <br /> <br />     <div id='footer-wrapper'><br />       <b:section class='footer' id='footer'/><br /> <div class='footer2' style='width: 33%; float: left; margin:0; text-align: left;'><br /> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'><br /> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'><br /> <b:includable id='main'><br />     <b:if cond='data:title != &quot;&quot;'><br />       <h2><data:title/></h2><br />     </b:if><br />     <div class='widget-content'><br />     <b:if cond='data:team == &quot;true&quot;'> <br />       <ul><br />         <b:loop values='data:authors' var='i'><br />           <li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li><br />         </b:loop><br />       </ul><br /> <br />       <b:else/> <br /> <br />       <b:if cond='data:photo.url != &quot;&quot;'><br />         <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a><br />       </b:if><br /> <br />       <dl class='profile-datablock'><br />         <dt class='profile-data'><data:displayname/></dt><br /> <br />         <b:if cond='data:showlocation == &quot;true&quot;'><br />           <dd class='profile-data'><data:location/></dd><br />         </b:if><br /> <br />         <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if><br />       </dl><br />       <a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a><br />     </b:if><br /> <br /> <br />     </div><br />   </b:includable><br /> </b:widget><br /> </b:section><br /> </div><br /> <div class='footer3' style='width: 34%; float: left; margin:0; text-align: left;'><br /> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'><br /> <b:widget id='Feed1' locked='false' title='Trick and Tips' type='Feed'><br /> <b:includable id='main'><br />     <h2><data:title/></h2><br />     <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'><br />       <span style='filter: alpha(25); opacity: 0.25;'><br />         <a expr:href='data:feedUrl'><data:loadingMsg/></a><br />       </span><br />     </div><br />     <b:include name='quickedit'/><br />   </b:includable><br /> </b:widget><br /> </b:section><br /> </div><br /> <div class='footer4' style='width: 33%; float: right; margin:0; text-align: left;'><br /> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'><br /> <b:widget id='Feed2' locked='false' title='New Comment' type='Feed'><br /> <b:includable id='main'><br />     <h2><data:title/></h2><br />     <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'><br />       <span style='filter: alpha(25); opacity: 0.25;'><br />         <a expr:href='data:feedUrl'><data:loadingMsg/></a><br />       </span><br />     </div><br />     <b:include name='quickedit'/><br />   </b:includable><br /> </b:widget><br /> </b:section><br /> </div><br /> <div style='clear:both;'/><br />     </div><br /> </div><br /> <div id='info'><div id='siteinfo'><br /> <a href='/'><data:blog.title/></a> Design by <a href='http://oketrik.blogspot.com/' title='Trick and Tips'>Trick and Tips</a><br /> Powered by <a href='http://blogger.com/' rel='generator'>Blogger</a><br /> </div></div><br /> <br />   </div></div> <br /> <br /> <script type='text/javascript'><br /> var pageCount=2;<br /> var displayPageNum=5;<br /> var upPageWord =&#39;Previous&#39;;<br /> var downPageWord =&#39;Next&#39;;<br /> </script><br /> <script src='http://oketrik.googlecode.com/files/Page%20Navblack.js' type='text/javascript'><br /> </script><br /> </body><br /> </html>

Cara membuat Artikel terkait atau Related post

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 07:24:00 -0700

artikel terkait atau related post, mungkin dengan adanya artikel terkait ini, akan memudahkan pembaca untuk melihat artikel lain dengan artikel yang sedang dibaca, jadi pengunjung tidak susah-susah untuk mencari srtikel yang berhubungan, dalam membuat artikel terkait ini,

kita akan sedikit memodifikasi kode HTML template kita. untuk jaga-jaga jika sobat salah meletakkan kode HTNL nya, saya sarankan untuk membackup template sobat terlebih dahulu.
Buat sobat yang belum mengerti tentang 'artikel terkait' akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau label (kategori).

Artikel terkait itu biasanya dipakai para blogger berada dalam postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.

Bagi sobat yang ingin menggunakan artikel terkait ini, ikuti langkah dibawah :

Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :
<p><data:post.body/></p>

atau kode seperti dibawah ini :

<data:post.body/>
Kemudian letakkan script dibawah setelah kode <data:post.body/>

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

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Kemudian Save Template. selamat mencoba...

10 Bentuk Readmore Menarik

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 07:17:00 -0700

Applying the new style to the Read More Link

I have shared many CSS codes below which will change the look of the post summary link on your blogger blogs but first you must know who to add the CSS to your templates and Read More link.

Go to Blogger > Design > Edit HTML
Backup your template
Click the "Expand widget Templates" Box
Search for this,

]]></b:skin>

5. And paste your selected Read More Link style code just above it.

6. Next search for this,

<data:post.body/>

7. Just below it you will find the read more link code similar to this one,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More ->></div></a>
</b:if>

If you are using a read more link button then the code will look something like this,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a>
</b:if>

In both the cases, simply replace the highlighted code with this,

class="MBT-readmore"

8. Save your template and you are done!

Ten "Read More" Link Styles

Now select one of these styles for step#5

Style#1:

/*-------------------------- Narrow black Orange-------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#EB7F17;
margin:5px 0;
border-left:400px dashed #474747;
border-right:2px solid #474747;
border-top:2px solid #474747;
border-bottom:2px solid #474747;
padding:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#EB7F17;
color:#fff;
border-left:400px dashed #474747;
border-right:2px solid #EB7F17;
border-top:2px solid #EB7F17;
border-bottom:2px solid #EB7F17;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#2:

/*------------Light Purple long----------------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#6882C7;
margin:5px 0;
border-left:400px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
padding:1px 5px 1px 1px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
color:#000800;
border-left:50px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#3:

/*---------------- Rectangle left border-----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border-right:2px solid #009999;
border-left:10px solid #009999;
border-bottom:2px solid #009999;
border-top:2px solid #009999;
padding:5px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;
border-right:2px dotted #009999;
border-left:10px solid #006B6B;
border-bottom:2px dotted #009999;
border-top:2px dotted #009999;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#4:

/*-------------- Pink Left right -----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#FE80DF;
margin:5px 0;
float:right;
border-right:2px solid #FE80DF;
border-left:2px solid #FE80DF;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#5:

/*------------- Brown top Bottom----------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#B26B00;
margin:5px 0;
float:right;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#6:

/*-------------- Blue Blank-----------------*/
.MBT-readmore{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#7:

/*------------- Red + Dark Red------------*/
.MBT-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#8:

/*------------ White + Green -----------*/
.MBT-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#9:

/*---------- Black --------------*/
.MBT-readmore{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Style#10:

/*----------Orange One 1 ----------------*/
.MBT-readmore{
background:#EB7F17;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#FFB93C;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

Customization:

You can easily make changes to the colors and style by understanding this general guide.

Edit .MBT-readmore To Change background, border and font colors in Active mode
Edit .MBT-readmore:hover To Change background, border and font colors when a user hovers mouse cursor on the button
Edit .MBT-readmore a To change the link color
Edit .MBT-readmore a:hover To change the link color on mouse hover

Cara Menambahkan Media Sosial ke Blogspot

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 07:12:00 -0700

Cara Menambahkan Widget

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin> and paste the following code just above it,

/* -------------MBT SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxNuiDR-LVOc5PZHV_id6MTi-KNV94d4dlv2-nudanxShEJOFKkcc8h8bQ3qeuViEuJR3i49uHLUzVqe-QDeqTL727bi6EoWmo0MdJRTniDNq8lwo5JfWQOFTLcI65mwE1BUgBYN2ogI/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

To Change width of search box edit width:350px
To change width of search input area edit width:80%

4. Then Search for,

<div id='sidebar-wrapper'>

PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments.

5. Now Paste the following code just below it,

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3ntYlMIItXRg7KSv-1cwotaPuCXgX62M6rjk_dclGOoXdGM2jgQ6mr8qHgrG6y7YYFVNwLXitHpWWQ-FLWbRQM5mxPpeKjEV5g5M1xxJAess3RZ89ox7Mne8OGZMnjUVbNiyW3VC_MY/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHekJIpE56kxSeU6PiWfikLmnF1VPrmfm0gnBOc2jimOfzkS3imuZtIYtfxnlugUeHO3D9k3gcxqZabAso-_Mhb-7TYvIH3Nx9CM2GN6ZfeRQF5Bp8HxjBeO_Iy1NkETkxDYOAaV3NG8pG/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbu_IP1w0MLp6VWCphavM1aTT95eCsI6Pn54u0GTvqtvTYSPKPC34DSRBuymbvCl6a27_kw9ixqgKdemQi6wQUgr3q1zT5FbFxFK_MCRXGDpmCdNZxkKptTAbyYWHOd87-lrdtZNqzU4hQ/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpwc9RVbhBE_yzMLNzN8PZv-3jOmkK9NZTWilLhU8LOdvESYJqtin0fy7Tiie3nT-OZIGGnDYx_95YQ5VDHQGWK_NPAH7qVuUxUNRcVXv4aK-ZH_dBTKxBfsz2FbKVdkKcm_m9a-dVmmKp/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8_xiGKSB0TAi385brk7eTyZZ7Yzzrs_oC4Tr2AeJ8-FRqvXSVSbFQ7x7USn_YrKHsyNamksxSpGyvAi0mopxUhxUrtG5O_gQ5x_bhQTjcvBLcNVFmlbrnrlCCZyqzO_Br_Wwj1-Jgo0Q/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEindqSCAgYfw55KTmJJdJbxnafNNIncN531ti3Udizq4Bdsyr2CFjL06xpPtvw4X1y4p1PK-UMWUeBKaFl-T0emrwJMXb7XQ7ycXgiIX-yc_sXphDa754iX4LR-RQxaEVNYLQd8tuRf2eA/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRW77dum5q24Mf0F1hxICaJyPR4GhwDWtEYgtRJqMjh1b8YYc_hD7S2bHOp61DblGYxcrZliwPrj2pZQZCRMT4wqAESOES0ccwYh_PcekHocgkDQDoVMnLSACzd5QfRXij_NPUCaYCz-c/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio_1uKLOgKDkpR9xXatk8nTtdCFRkmtthuZaffwm82o6gJ4_juE8pMqPuRvdDDd93NZfjvKbICKj38CB1WrUa8LmZoM1k26XxfxYU5ETdh_Sw_AX5-brNCY3sUADJyOm8-1qV_b_VLwJc/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1lLpiZu22aH4_8MARrsMxwJnaVu0xMnuYe7cP7jiX0DdrQFlFNGYLDCOpRw-_v_CHuHMmyKaoOaVA3nPx7JFya_U-uuztha70qmseH6UYqkVUdWHQUIp-UzpKH4WCR2LIC0OnTDi4Y3Q/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDc0JiYIEz3r9s6evM_rM7CAXFs4xXy6pX5xRNlMsrMOUmnNOiqxPgMP7HMA1pW0Qfmw32Pvf0vb7Vi_RvLBWMG-NwEu8tZGIJa1RigBl5xYAN-tlD_nVYB4IhH7OSTethyphenhyphenZzOjSd7pU/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf9shasCbhNPxyd2T0mcDmXoHWcbC-TTttD_cYSmgjxmxA13P5XwZmiAtPYmY-9Fo4UUvk1iE6ZlHOr90D9XqiSwIfbWdNE6AmqhyWPlSDwu8yc5MhJTK2TVClm8uCidl2-Xh54V5GPZc/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

Make these changes:

Replace http://twitter.com/USERNAME with your twitter profile link
Replace http://facebook.com/USERNAME with your Facebook Profile link

6. Save your template and Bingo you are done! :>

Visit your blogs to see a beautiful new change. Hope you liked it. Questions are always welcomed.

You will also like to view the previous version,

Membuat Label Dengan Fungsi Scroll

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 06:56:00 -0700

Bagi yang ingin membuat label dengan fungsi scroll ini, ikuti langkah-langkah dibawah :

1. Login ke Blogger.
2. Buatlah Label dengan menambah Gadget pada sidebar,dan berilah judul Kategori.
3. Sekarang masuklah tab ke Edit HTML.
4. Klik Expand Template Widgets.
5. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “Kategori”.
6. jika sudah ketemu, sisipkan kode HTML yang ditandai dengan warna merah pada kode kategory pada HTML sobat.

<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>

</div>

</b:includable>
</b:widget>

7. Save Template. lihat hasilnya pada widget label yang sobat buat tadi..

ctt :
pada setiap Template berbeda-beda, ada yang didahului kode seperti ini

dan kode seperti ini

tapi itu tidak masalah, asal penyisipan kode yang berwarna merah diletakkan dengan benar..

selamat mencoba....

Membuat Fungsi Scroll Pada Arsip Blog

noreply@blogger.com (Kelola Blogspot) — Sat, 30 Jul 2011 06:52:00 -0700

Pertama Kita harus membuat dulu Arsip Blog

• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki

Pada Menu Diatas Itu belum terdapat fungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

Anda akan menemukan kode lengkapnya seperti ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut
Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan kawan ganti agar sesuai dengan blog kawan
Lalu jangan lupa untuk menyimpannya=> Klik Simpan

Kelola Blogspot

Cara Menampilkan Hanya Judul Pada Blog

Cara Membuat Widget Sidebar Berada Di Tengah

Cara Mengedit Postingan Blogspot

Beberapa Shortcut dalam postingan blogspot

Cara Membuat Kotak Komentar Di Bawah Postingan

Membuat Link yang Bergaris Bawah

Cara Mengganti Tanggal Posting dengan Icon Kalender

Dokumen HTML : Tag Paragraf

Cara Membuat Menu Dropdown

Cara Menampilkan Kode HTML Dalam Posting

Template : MagzStyle Slide

Template : Harry Potters III

Bagaimana Cara Menginstall Template Blogpspot?

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

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

How do I customize my template?

How can I edit the menu of my template?

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

Why some images in my template disappeared?

How to add the comment form to my template?

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

How do I translate my template to another language?

What should I do after I install my template?

How to display the navbar again in my template?

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

Why is my blog shows few entries per page?

Can I remove the template credits?

What does the icon of a gold medal in some templates?

I sent a template, why is it not published?

Template : eCommerce

Cara Memasang meta tag di blogspot

Merubah Warna Latar / Background Blog

Membuat Scroll pada blogspot

Cara Membuat Menu Multi Kolom

Membuat Rating pada Setiap Postingan

Template Menarik : 3Dlue V2 Blogger Template

Cara membuat Artikel terkait atau Related post

10 Bentuk Readmore Menarik

Applying the new style to the Read More Link

Ten "Read More" Link Styles

Customization:

Cara Menambahkan Media Sosial ke Blogspot

Cara Menambahkan Widget

Membuat Label Dengan Fungsi Scroll

Membuat Fungsi Scroll Pada Arsip Blog