DIALIHKAN

Kanata Blogger Template

<h1><span style="font-size: large;"><b>Kanata Blogger Template | Tutorial Blog</b></span></h1><div><span style="font-size: large;">Template Features</span></div><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Kanata Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>Kanata</b> is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/deluxe-templates/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">9th Sphere</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><div><img alt="Kanata Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2009/06/kanata.jpg" style="cursor: pointer; height: 250px; width: 300px;" /></div><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2009/blogger-template-kanata/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/1105/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Kanata Blogger Template Description...

Red Light Blogger Template

Arijal 0 Blogger Templates 21:33

<h1><span style="font-size: large;"><b>Red Light Blogger Template | Tutorial Blog</b></span></h1><div><span style="font-size: large;">Template Features</span></div><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Red Light Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>Red Light</b> is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/falcon-hive/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">TemplateLite</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><div><img alt="Red Light Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2009/07/Red-Light.jpg" style="cursor: pointer; height: 250px; width: 300px;" /></div><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2009/blogger-template-red-light/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/1152/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Red Light Blogger Template Descr...

Menu Dropdown dengan Background

Arijal 0 Tutorial Blogspot 21:18

<h1><b>Menu Dropdown dengan Background | Tutorial Blog</b></h1><div style="text-align: justify;">Dulu saya pernah posting cara <a href="http://wadahtutorial.blogspot.com/2011/11/membuat-menu-dropdown.html">Membuat Menu Dropdown</a>, pada postingan ini kita akan membuat menu dropdown dengan background image.</div><div style="text-align: left;">Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :</div><a name="more"></a><div style="text-align: left;"><ul><li>Login ke blogger Anda, klik menu <b><span style="color: red;">Design > Edit HTML</span></b>.</li><li>Lalu beri centang <span style="color: red;">expand widget templates</span>, sebaiknya backup dulu template Anda.</li><li>Cari kode <span style="color: red;"><b:skin><![CDATA[</span>, lalu letakkan kode berikut <u style="color: blue;">diatasnya</u>. <div style="background: #bdf; border: 1px solid #00F; height: 300px; overflow: auto; text-align: left; width: 450px;"><script><br />var last_expanded = &#39;&#39;;<br />function showHide(id)<br />{<br />var obj = document.getElementById(id);<br />var status = obj.className;<br />if (status == &#39;hide&#39;) {<br />if (last_expanded != &#39;&#39;) {<br />var last_obj = document.getElementById(last_expanded);<br />last_obj.className = &#39;hide&#39;;<br />}<br />obj.className = &#39;show&#39;;<br />last_expanded = id;<br />} else {<br />obj.className = &#39;hide&#39;;<br />}<br />}<br /></script></div></li><li>Kemudian cari kode <span style="color: blue;">]]></b:skin></span>, letakkan kode berikut ini <u style="color: blue;">diatasnya</u>. <div style="background: #bdf; border: 1px solid #00F; height: 300px; overflow: auto; text-align: left; width: 450px;">.dropdown-b {<br />background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');<br />text-align:center;<br />width:165px;<br />font-family: georgia, Helvetica, sans-serif;<br />padding-left:20px;<br />padding-right:20px;<br />padding-top:10px;<br />padding-bottom: 10px;<br />margin-top: 4px;<br />display:block;<br />text-decoration: none;<br />color: #000000;<br />height: 8px;<br />}<br />.dropdown-bg {<br />background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');<br />text-align:center;<br />width:165px;<br />font-family: georgia, Helvetica, sans-serif;<br />padding-left:20px;<br />padding-right:20px;<br />padding-top:13px;<br />padding-bottom: 10px;<br />display:block;<br />text-decoration: none;<br />color: #000000;<br />height: 8px;<br />}<br />.hide{<br />display: none;<br />}<br />.show{<br />display: block;<br />}<br />a{cursor: hand}</div></li><li>Lalu klik <b style="color: red;">Save Template</b>.</li><li>Kemudian klik menu <b><span style="color: red;">Design > Page Element > Add a Gadget</span></b>.</li><li>Pilih HTML/Javascript, lalu masukkan kode berikut ini : <div style="background: #bdf; border: 1px solid #00F; height: 300px; overflow: auto; text-align: left; width: 450px;"><a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a><br /><div id="dropdown-b-1" class="hide"><br /><a href="URL" class="dropdown-bg">Link 1</a><br /><a href="URL" class="dropdown-bg">Link 2</a><br /><a href="URL" class="dropdown-bg">Link 3</a><br /><a href="URL" class="dropdown-bg">Link 4</a><br /></div><br /><a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a><br /><div id="dropdown-b-2" class="hide"><br /><a href="URL" class="dropdown-bg">Link 1</a><br /><a href="URL" class="dropdown-bg">Link 2</a><br /><a href="URL" class="dropdown-bg">Link 3</a><br /><a href="URL" class="dropdown-bg">Link 4</a><br /></div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a><br /><div id="dropdown-b-3" class="hide"><br /><a href="URL" class="dropdown-bg">Link 1</a><br /><a href="URL" class="dropdown-bg">Link 2</a><br /><a href="URL" class="dropdown-bg">Link 3</a><br /><a href="URL" class="dropdown-bg">Link 4</a><br /></div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a><br /><div id="dropdown-b-4" class="hide"><br /><a href="URL" class="dropdown-bg">Link 1</a><br /> <a href="URL" class="dropdown-bg">Link 2</a><br /><a href="URL" class="dropdown-bg">Link 3</a><br /><a href="URL" class="dropdown-bg">Link 4</a><br /></div></div></li><li>Terakhir klik tombol <b style="color: red;">Save</b>. Selesai...</li></ul></div>Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog Dulu saya pernah posting cara Membuat Menu Dropdown , pada postingan ini kita akan membuat m...

Photoplus Blogger Template

Arijal 0 Blogger Templates 21:20

<h1><span style="font-size: large;"><b>Photoplus Blogger Template | Tutorial Blog</b></span></h1><div><span style="font-size: large;">Template Features</span></div><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Photoplus Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>Photoplus</b> is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/dante-araujo/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">Dante Araujo</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><div><img alt="Photoplus Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2009/08/Photoplus.jpg" style="cursor: pointer; height: 250px; width: 300px;" /></div><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2009/blogger-template-photoplus/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/1189/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Photoplus Blogger Template Descr...

Optimasi SEO Menggunakan Anchor Text

Arijal 0 Seo, Tips Dan Trik 21:38

<h1><b>Optimasi SEO Menggunakan Anchor Text | Tutorial Blog</b></h1><div style="text-align: justify;">Anchor text merupakan sebuah teks berisi tautan link yang menuju pada sebuah halaman. Anchor Text dapat meningkatkan pageview, memperbanyak backlink dan meningkatkan trafik. hal tersebut dapat membuat sebuah situs memiliki tempat penting pada halaman Search Engine Result Page (SERP).</div><a name="more"></a><div style="text-align: left;">Dalam membuat Anchor text sebaiknya mengandung kata kunci yang di targetkan, menarik, dan mengandung arti yang mudah di mengerti. </div><div style="text-align: left;">Berikut beberapa contoh penulisan kode html untuk membuat anchor text :</div><ul><li>Membuat Anchor Text sesuai judul Blog. <div style="background: #bdf; border: 1px solid #00F; overflow: auto; text-align: left;"><a href="http://wadahtutorial.blogspot.com/">Tutorial Blog</a></div></li><li>Membuat Anchor Text untuk salah satu artikel. <div style="background: #bdf; border: 1px solid #00F; overflow: auto; text-align: left;"><a href="http://wadahtutorial.blogspot.com/2011/12/widget-recent-comment-valid-xhtml.html">Widget Recent Comment Valid XHTML</a></div></li><li>Membuat Anchor Text pada image. <div style="background: #bdf; border: 1px solid #00F; overflow: auto; text-align: left;"><a href="http://wadahtutorial.blogspot.com/"><img alt="Tutorial Blog" border="0" src="Url Image" />Tutorial Blog</a></div></li></ul><div style="text-align: left;">Beberapa hal yang perlu diperhatikan dalam penggunaan anchor text : </div><ul><li style="text-align: justify;">Kerapatan keyword dalam sebuah postingan. Beberapa forum SEO menyarankan kerapatan anchor teks yang baik minimal 300 karakter terdapat 1 anchor text. </li><li style="text-align: justify;">Jumlah karakter anchor text maksimal 60 karakter, karena search engine biasanya mengambil 60 karakter terdepan dari keyword. Jika lebih terkadang search engine tidak mampu mengindeks keywordnya.</li><li style="text-align: justify;">Anchor text untuk link di dalam blog sebaiknya berhubungan dengan judul postingan atau lebih baik jika keyword yang di gunakan juga terdapat di judul postingan, meta tag, judul blog, nama domain dan deskripsi blog agar robot searcgh engine memberi bobot relevansi yang tinggi. Jika halaman target di luar blog Anda sebaiknya gunakan keyword yang berhubungan dengan judul halaman yang akan di link.</li><li style="text-align: justify;">Perhatikan pesaing Anda di google search, jika kita menggunakan blog yang masih rendah Pageranknya, sebaiknya lakukan optimasi dari keyword yang rendah saingannya. contoh: keyword Bisnis Online lebih ketat persaingannya dibanding keyword Teknik Bisnis Online, Bisnis Online untuk pemula. Usahakan mendapatkan backlink dengan keyword yang anda optimasi tersebut agar cepat muncul di halaman pertama mesin pencari. </li><li style="text-align: justify;">Optimasi keyword seiring dengan peningkatan trafik, jika di dalam sebuah blog terlalu banyak link tetapi jumlah kunjungan berkurang, maka akan menyebabkan pagerank halaman tersebut berkurang. Dan bisa mempengaruhi google pagerank blog secara keseluruhan. Semakin banyak keyword yang anda pasang maka semakin banyak trafik yang dibutuhkan untuk mengimbangi, agar pagerank halamannya bisa bertahan atau meningkat.(sebagai catatan: setiap halaman mempunyai pagerank sendiri).</li><li style="text-align: justify;">Anda bisa melakukan rotasi anchor teks, misalnya dalam 3 bulan pertama gunakan Cara Mudah Belajar Bisnis Online untuk pemula, kemudian 3 bulan berikutnya ganti dengan Teknis Bisnis Online, dalam melakukan rotasi sebaiknya gunakan potongan dari keyword awal, dengan catatan anda harus menambah kalimat baru untuk menempatkan keyword baru tanpa mengubah struktur kalimat lama.</li><li style="text-align: justify;">Terus membuat keyword baru pada postingan baru, karena search engine senang jika mendeteksi update pada blog/website. </li><li style="text-align: justify;">Anchor text Anda perlukan untuk membangun backlink, bisa dengan melakukan link antar halaman dalam sebuah blog, atau link dari blog lain ke blog anda.</li><li style="text-align: justify;">Hindari penggunaan anchor teks yang kurang tepat, misal : d@wnload (kombinasi simbol dan alfabet), dan kata tidak baku lainnya.</li><li style="text-align: justify;">Hindari menggunakan keyword yang tidak dikenali oleh search engine. misalnya dalam pertukaran link menggunakan kata : Namapemilikblog, url tetap terindeks, tetapi penempatan keywordnya yang kurang tepat,karena mungkin 50% pengguna internet jarang mencari nama atau url di search engine saat mencari blog, terkecuali jika blog anda sudah terkenal maka biasanya banyak pengunjung yang mengetikkan nama anda untuk menemukan blog.</li></ul><div style="text-align: left;">Semoga artikel ini bermanfaat buat kita dalam optimasi blog. </div>

Optimasi SEO Menggunakan Anchor Text

Optimasi SEO Menggunakan Anchor Text | Tutorial Blog Anchor text merupakan sebuah teks berisi tautan link yang menuju pada sebuah halaman. A...

Web Blog Blogger Template

Arijal 0 Blogger Templates 21:02

<h1><span style="font-size: large;"><b>Web Blog Blogger Template | Tutorial Blog</b></span></h1><div><span style="font-size: large;">Template Features</span></div><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Web Blog Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%">Description</td><td class="Table-Post2" height="25" width="56%"><b>Web Blog</b> is a free blogger template with 2 columns, right sidebar, slideshow and abstract.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/alexiel/</td></tr><tr><td class="Table-Post2" height="25" width="30%">Designer</td><td class="Table-Post2" height="25" width="5dd6%">Template Mo</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><div><img alt="Web Blog Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2009/09/Web-Blog.jpg" style="cursor: pointer; height: 250px; width: 300px;" /></div><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2009/blogger-template-web-blog/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/1282/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

Web Blog Blogger Template

Web Blog Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Web Blog Blogger Template Descrip...

Menampilkan Tag Clouds di Blogger

Arijal 0 Tips Dan Trik, Tutorial Blogspot, Widget / Gadget 21:11

<h1><b>Menampilkan Tag Clouds di Blogger | Tutorial Blog</b></h1><div style="text-align: justify;">Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer.</div><a name="more"></a><div style="text-align: left;">Berikut cara Menampilkan Tag Clouds di Blogger :</div><div style="text-align: justify;"><ul><li>Login ke akun anda klik <b style="color: red;">Dasbor > Design > Page Elements > Add a Gadget</b>.</li><li><div>Kemudian pilih <b style="color: red;">Label</b>. Pada display ganti dari Daftar menjadi <b style="color: red;">Cloud</b>.</div><img alt="Menampilkan Tag Clouds di Blogger" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/dya21/tagcloud1.gif" /></li><li>Lalu klik <b style="color: red;">Save</b>. </li></ul></div><div style="text-align: justify;">Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut :</div><ul><li>Klik <b style="color: red;">Design > Edit HTML</b>, beri centang pada <b><span style="color: red;">Expand Template Widget</span></b>.</li><li>Copy kode dibawah ini, letakkan tepat <u style="color: red;">di atas</u> kode <b style="color: red;">]]></b:skin> </b><div style="border: 1px solid #0000FF; height: 200px; overflow: auto; text-align: left; width: 450px;">/* Label Cloud Styles */<br />#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />#labelCloud a{text-decoration:none}<br />#labelCloud a:hover{text-decoration:underline}<br />#labelCloud li a{}<br />#labelCloud .label-cloud {}<br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />#labelCloud .label-cloud li:before{content:"" !important}</div></li><li>Copy kode dibawah ini, letakkan tepat <u style="color: red;">di bawah</u> kode <b style="color: red;">]]></b:skin></b><br /><div style="border: 1px solid #00f; overflow: auto; text-align: left; width: 450px;"><script type='text/javascript'><br />// Label Cloud User Variables<br />var cloudMin = 1;<br />var maxFontSize = 20;<br />var maxColor = [0,0,255];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br /></script></div></li><li>Simpan template Anda dan lihat hasilnya!.</li></ul>Sekian tutorial tentang Menampilkan Tag Clouds di Blogger.

Menampilkan Tag Clouds di Blogger

Menampilkan Tag Clouds di Blogger | Tutorial Blog Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika ...

Masunurin Blogger Template

Arijal 0 Blogger Templates 21:04

<h1><span style="font-size: large;"><b>Masunurin Blogger Template | Tutorial Blog</b></span></h1><div><span style="font-size: large;">Template Features</span></div><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Masunurin Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>Masunurin</b> is a free premium blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, space for ads and neutral colors.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/themecraft/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">Padd IT Solutions</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><div><img alt="Masunurin Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2009/11/Masunurin.jpg" style="cursor: pointer; height: 250px; width: 300px;" /></div><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2009/blogger-template-masunurin/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/1437/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

Masunurin Blogger Template

Masunurin Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Masunurin Blogger Template Descr...

Optimasi SEO pada Image

Arijal 0 Seo, Tips Dan Trik 21:08

<h1><b>Optimasi SEO pada Image | Tutorial Blog</b></h1><div style="text-align: justify;">Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita optimalkan, maksudnya Image yang kita beri "ALT TAG", hal ini merupakan bagian dari optimasi seo on page. Sama halnya seperti tag HTML normal lainnya yang digunakan sebagai teks alternatif ketika image/gambar tidak dapat ditampilkan.</div><a name="more"></a><div style="text-align: justify;">Untuk mengoptimalkan image, dapat kita lakukan melalui dua cara, yaitu melalui nama file dan penggunaan alt tag. Alt berasal dari kata alternatif, hal ini memungkinkan kita untuk menentukan teks alternatif bagi gambar jika tidak dapat ditampilkan karena bermacam alasan, juga sebagai identitas gambar/image di search engine, misalkan saat kita mencari pada Google Image, maka Alt tag tersebut sangat berfungsi pada hasil pencarian. Ketika search engine menjelajah halaman web atau blog, mereka menganggap nama file dan alt tag sebagai isi gambar.</div><div style="text-align: left;">Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO pada Image :</div><ul><li>Jangan gunakan "gambar1.png" atau "gambar2.jpg" sebagai nama file. Cobalah gunakan nama file Anda sebagai kata kunci atau keyword, contoh, "seo-on-page.png" atau "alt-tag.jpg"</li><li>Gunakan nama file dan alt tag yang singkat tapi deskriptif, hindari penulisan alt tag yang panjang, karena terkadang mungkin bisa dianggap spam</li><li>Pasokan alt tag bisa menggunakan gambar sebagai link, hal ini bekerja sebagai anchor text</li><li>Format gambar  dengan jenis file - JPEG, GIF, PNG, dan BMP</li><li>Simpan semua gambar dalam direktori yang sama.</li></ul><div style="text-align: left;">Contoh penggunaan Alt tag pada Image / gambar </div><div style="background: #bdf; border: 1px solid #00F; overflow: auto; text-align: left;"><a href="URL image"><img style="border-width: 0px; margin: 0px; title="title image" alt="<b><span style="color: red;">alt tag image</span></b>" src="URl image" align="right" border="0" width="180" height="120"></a> </div>Semoga artikel ini berguna bagi kita dalam meningkatkan Optimasi SEO.

Optimasi SEO pada Image

Optimasi SEO pada Image | Tutorial Blog Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita op...

MusicBlog Blogger Template

Arijal 0 Blogger Templates 21:51

<h1><span style="font-size: large;"><b>MusicBlog Blogger Template | Tutorial Blog</b></span></h1><div><span style="font-size: large;">Template Features</span></div><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>MusicBlog Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>MusicBlog</b> is a free blogger template with 2 columns,  right sidebar, exclusive design for Blogger, slideshow, social icons  and vectorial elements.<br />Excellent layout for blogs about girls or music.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/deluxe-templates/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">Deluxe Templates</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><div><img alt="MusicBlog Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2012/02/musicblog-blogger-template.jpg" style="cursor: pointer; height: 250px; width: 300px;" /></div><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2012/blogger-template-musicblog/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/4233/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

MusicBlog Blogger Template

MusicBlog Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name MusicBlog Blogger Template Descr...

Outubro Blogger Template

Arijal 0 Blogger Templates 06:50

<h1><span style="font-size: large;"><b>Outubro Blogger Template | Tutorial Blog</b></span></h1><span style="font-size: large;">Template Features</span><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>Outubro Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>Outubro</b> is a free blogger template with 2 columns, right sidebar, neutral colors and posts thumbnails.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/templates-novo-blogger/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">Templates Novo Blogger</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><img alt="Outubro Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2009/12/Outubro.jpg" style="cursor: pointer; height: 250px; width: 300px;" /><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2009/blogger-template-outubro/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/1500/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

Outubro Blogger Template

Outubro Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name Outubro Blogger Template Descripti...

Menampilkan Smiley Pada Postingan Blogger

Arijal 0 Tips Dan Trik, Tutorial Blogspot 04:00

<h1><b>Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog</b></h1><div style="text-align: justify;">Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, kali aja masih ada yang belum tau.</div><a name="more"></a><div style="text-align: justify;">Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti <img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />,<img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" />,<img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif" />, <img alt="Smiley" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" />, <img alt="Smiley" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif" />, <img alt="Smiley" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" />, <img alt="Smiley" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif" /> dan lain lain. </div><div style="text-align: left;">Caranya gampang Sob, silakan ikuti tutorial berikut :</div><ul><li>Login ke blogger trus pilih <b style="color: red;">Layout > Edit HTML</b><b>.</b></li><li>Beri tanda centang pada <b style="color: red;">Expand Widget Templates</b>.</li><li>Cari kode ini <b><span style="color: red;">]]></b:skin></span></b> .</li><li>Masukkan script berikut ini dibawah kode <b><span style="color: red;">]]></b:skin></span></b><div style="border: 1px solid #00f; overflow: auto; text-align: left; width: 450px;"><script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/></div></li><li>Terakhir klik <b style="color: red;">Save Template</b>. Selesai...</li></ul><div style="text-align: left;">Berikut beberapa kode yang dapat Anda gunakan : </div><table border="1" cellspacing="5" style="width: 500px;"><tbody><tr><td valign="top" width="100">:D</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /></td><td valign="top" width="100">:P</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" /></td></tr><tr><td valign="top" width="100">:)</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" /></td><td valign="top" width="100">;)</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" /></td></tr><tr><td valign="top" width="100">:-S </td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" /></td><td valign="top" width="100">:-B </td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" /></td></tr><tr><td valign="top" width="100">:-h </td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif" /></td><td valign="top" width="100">:-a </td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif" /></td></tr><tr><td valign="top" width="100">:x</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" /></td><td valign="top" width="100">:(</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" /></td></tr><tr><td valign="top" width="100">:-t </td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" /></td><td valign="top" width="100">:-bd</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif" /></td></tr><tr><td valign="top" width="100">:-c </td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif" /></td><td valign="top" width="100">:-*</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" /></td></tr><tr><td valign="top" width="100">8-7</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif" /></td><td valign="top" width="100">8-|</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" /></td></tr><tr><td valign="top" width="100">7:P</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bbhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif" /></td><td valign="top" width="100">=D7</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" /></td></tr><tr><td valign="top" width="100">8-}</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" /></td><td valign="top" width="100">X(</td><td valign="top" width="100"><img alt="Menampilkan Smiley Pada Postingan" class="bhsmly" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" /></td></tr></tbody></table><div style="text-align: left;">Sebenarnya masih ada beberapa kode lagi, berhubung saya sudah lupa jadi segitu dulu, jika ada yang mau menambahkan silakan tulis di kolom komentar.</div><div style="text-align: left;">Selamat mencoba dan semoga berhasil... </div>

Menampilkan Smiley Pada Postingan Blogger

Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smi...

Tips Dalam Mengganti Template

Arijal 0 Tips Dan Trik 21:26

<h1><b>Tips Dalam Mengganti Template | Tutorial Blog</b></h1><div style="text-align: justify;">Untuk membuat blog terlihat lebih cantik biasanya kita menambahkan beberapa widget pada blog, atau mengedit css tempalate, bisa juga dengan mengganti template tersebut. Namun sebelum Anda mengedit atau mengganti template blog ada baiknya Anda perhatikan beberapa hal dibawah ini.</div><a name="more"></a><div style="text-align: justify;">Tips berikut hanya menurut saya yang masih baru dalam dunia blogging, jadi kalau ada kesalahan harap di koreksi, jika ada tambahan dari Sobat blogger atau para master silakan Anda tulis di kolom komentar di bawah postingan ini.</div><div style="text-align: left;">Berikut Tipsnya :</div><ul><li>Pastikan Sobat back up template anda terlebih dahulu. Caranya masuk ke dasboard > Design / Rancangan > Edit html, lalu klik Download Full Template / download template lengkap.</li><li>Simpan semua kode html yang Anda tambahkan pada template tersebut di sebuah Notepad. Jadi jika Anda memerlukannya sewaktu-waktu, Anda tinggal copy saja dari Notepad.</li><li>Simpan ke Notepad semua kode widget yang Anda gunakan. </li><li>Sesuaikan design template yang baru dengan design sebelumnya. Misal latar design sebelumnya berwarna hitam, sebaiknya untuk template baru juga menggunakan latar hitam. hal ini untuk menghindari warna latar yang sama dengan warna link text, seandainya pada waktu latar hitam Anda pernah memberi warna font putih pada sebuah Link, lalu Anda menggunakan warna latar putih pada template baru maka link tersebut tidak akan terlihat.</li><li>Sebaiknya gunakan blog dummy (blog cadangan) dulu, agar tidak berisiko jika salah, disana kita bisa  leluasa mengutak atik template, kalau sudah pas download template-nya lalu upload pada template blog yang ingin kita ganti templatenya.</li><li>Dalam mengganti template, sebaiknya jangan terlalu sering, agar para pembaca tidak bingung karena tampilan berubah terus, selain itu menurut beberapa blogger kalau terlalu sering mengganti template akan beresiko merusak keberadaan SEO yang sedang kita bangun.</li></ul>Sekian tips dari saya, semoga bermanfaat buat Sobat yang ingin mengganti template.

Tips Dalam Mengganti Template

Tips Dalam Mengganti Template | Tutorial Blog Untuk membuat blog terlihat lebih cantik biasanya kita menambahkan beberapa widget pada blog, ...

Membuat Template Blog Secara Online

Arijal 0 Blogger Templates, Tips Dan Trik 03:03

<h1><b>Membuat Template Blog Secara Online | Tutorial Blog</b></h1><div style="text-align: justify;">Cara yang satu ini banyak digunakan para blogger untuk mengganti template, walaupun ada cara yang lebih mudah yaitu dengan mendownload template jadi dan langsung menguploadnya, atau dengan menggunakan fasilitas Blogger template designer, namun dengan template hasil karya sendiri tentunya Anda memiliki kebanggaan tersendiri.</div><a name="more"></a><div style="text-align: justify;">Dibawah ini ada beberapa situs online gratis yang dapat sobat gunakan untuk membuat template sendiri. Situs yang menyediakan fasilitas membuat template biasanya sudah menyediakan template template tertentu yang nantinya bisa anda edit sendiri. berikut ini situs yang menyediakan editing template secara online. </div><ul><li style="text-align: justify;"><a href="http://www.profilebrand.com/blogger-templates/" rel="nofollow" target="_blank"><b>Profilebrand</b></a> : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll )</li><li style="text-align: justify;"><a href="http://www.pimp-my-profile.com/generators/blogger.php" rel="nofollow" target="_blank"><b>Pimp my Profile</b></a> : Untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya.</li><li style="text-align: justify;"><a href="http://www.dotemplate.com/dt/viewThemes.do?i=0" rel="nofollow" target="_blank"><b>DoTemplate</b></a> : Dotemplate ini menyediakan 12 template XHTML dan CSS compliant dasar gratis yang bisa anda pilih sendiri. Anda bisa memilih salah satu dan kemudian mengkustomisasinya dengan mengubah warna, font, teks, posisi teks dan lain sebagainya pada background, container, footer, menu dan boks. Selain itu anda juga bisa menambahkan efek seperti drop shadow, gradien dan round corner. Layanan ini sangat menarik karena tidak memerlukan pengetahuan html yang terlalu banyak untuk mempergunakannya, selain itu ada pilihan untuk mengupload gambar anda sendiri. Setelah anda selesai membuat template blognya, anda bisa langsung mendownloadnya disana.</li><li style="text-align: justify;"><b><a href="http://cssez.com/" rel="nofollow" target="_blank">CSSEZ</a></b> : ini adalah generator template online untuk blog wordpress dan movable type. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.</li><li style="text-align: justify;"><b><a href="http://xlecom.com/?q=node/152" rel="nofollow" target="_blank">Drupal Theme Generator</a></b> : Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.</li><li style="text-align: justify;"><b><a href="http://www.erisfree.com/d2/apart.php" rel="nofollow" target="_blank">Eris Template Generator</a></b> : Generator ini menyediakan 11 skin untuk blog anda dengan tiga pilihan kolom untuk setiap skinnya. Saat ini layanan ini mendukung diaryland, diary-x, movabletype, blogger, wordpress, b2 dan free html site template lainnya. Anda bisa menambahkan tagline, meta tag dan termasuk link ke index, arsip, email, notes, profile, buddylist dan juga 5 entri untuk diaryland, 10 entri untuk movable type, kalender untuk b2, blogroll untuk wordpress, XHTML compliant dan content copyright, webring, chat screen name dan button.</li><li style="text-align: justify;"><b><a href="http://www.wannabegirl.org/firdamatic" rel="nofollow" target="_blank">Firdamatic</a></b> : Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.</li><li style="text-align: justify;"><b><a href="http://www.maketemplate.com/" rel="nofollow" target="_blank">www.maketemplate.com</a></b> : Online generator ini mampu membuat template situs PHP, bersamaan dengan file CSS dan HTML. Anda juga bisa mengkustomisasi style sheet, header, sidebar, dan footer dengan menambahkan sendiri font, warna, margin dan alignment pada form online template generator. ANda juga bisa membuat sendiri scriptnya yang bisa anda kopi dan simpan untuk keperluan anda nanti.</li><li style="text-align: justify;"><b><a href="http://psyc.horm.org/" rel="nofollow" target="_blank">PsycHo</a></b> : Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.</li><li style="text-align: justify;"><b><a href="http://templatr.cc/" rel="nofollow" target="_blank">Templatr</a></b> : Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.</li><li style="text-align: justify;"><b><a href="http://www.weebly.com/" rel="nofollow" target="_blank">Weebly</a></b> : Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.</li><li><div style="text-align: justify;"><b><a href="http://www.yvoschaap.com/wpthemegen/" rel="nofollow" target="_blank">WordPress Theme Generator</a></b> : Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.</div></li></ul>Selamat mencoba dan semoga sukses Membuat Template Blog Secara Online.

Membuat Template Blog Secara Online

Membuat Template Blog Secara Online | Tutorial Blog Cara yang satu ini banyak digunakan para blogger untuk mengganti template, walaupun ada ...

FreeDream Blogger Template

Arijal 0 Blogger Templates 05:20

<h1><span style="font-size: large;"><b>FreeDream Blogger Template | Tutorial Blog</b></span></h1><span style="font-size: large;">Template Features</span><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>FreeDream Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>FreeDream</b> is a free blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, minimalist, simple look, geometric motifs and vectorial elements.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/designer/dreamweaver-gratuit/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">Dreamweaver Gratuit</td></tr><tr><td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><br /><img alt="FreeDream Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2011/03/freedream-blogger-template.png" style="cursor: pointer; height: 250px; width: 300px;" /><br /><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2011/blogger-template-freedream/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/3485/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

FreeDream Blogger Template

FreeDream Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name FreeDream Blogger Template Descr...

Tombol To Page Down WordPress

Arijal 0 Tutorial Wordpress 07:04

<h1><span style="font-size: large;"><b>Membuat Tombol To Page Down di WordPress.com | Tutorial Blog</b></span></h1><div style="text-align: justify;">Beberapa waktu yang lalu saya pernah posting tentang <a href="http://wadahtutorial.blogspot.com/2012/01/tombol-back-to-top-wordpress.html" target="_blank">Membuat Tombol Back To Top di WordPress.com</a>, pada postingan tersebut ada pertanyaan dari sobat <a href="http://ibnzuhri.wordpress.com/" rel="nofollow" target="_blank">ibnzuhri</a> tentang membuat tombol back to down atau to page down di wordpress.com. Jadi pada postingan kali ini akan saya buat tutorial tentang Membuat Tombol To Page Down di WordPress.com.</div><a name="more"></a><div>Berikut tutorialnya :</div><ul><li><div>Login ke Wordpess Anda, Klik <b style="color: red;">Appearance > Widgets</b>.</div><img alt="Tombol To Page Down WordPress" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Dashboard/wgtWP.gif" /></li><li><div style="text-align: left;">Drag <b style="color: red;"><i>Text</i></b> ke Sidebar.</div><img alt="Tombol To Page Down WordPress" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/dya21/Optimize/wdgtWP4.jpg" /></li><li>Lalu letakkan kode berikut pada area Text. <div style="background: #3399FF; overflow: auto; padding: 3px; text-align: left; width: 400px;"><code><div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='</code>to page down<code>'></code><code><img src='<span style="color: red;">URL Icon</span>' /></a></div></code></div><div style="text-align: left;">Ganti <span style="color: red;">URL Icon</span> dengan URL Image, Contoh : </div><div style="background: #3399FF; overflow: auto; padding: 3px; text-align: left; width: 400px;"><code><div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='</code>to page down<code>'><img src='</code><span style="color: red;">http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png</span><code>' /></a></div></code></div><div style="text-align: left;">Untuk URL Icon, dapat Sobat gunakan Url yang lain. Jika sobat ingin memasang tombol page down dan page up sekaligus, Sobat dapat menggunakan kode berikut</div><div style="background: #3399FF; overflow: auto; padding: 3px; text-align: left; width: 400px;"><code><div style="display:scroll;position:fixed;top:300px;left:10px;"><div><a href='#' title='to page up'><img src='<span style="color: red;">http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png</span>' /></a></div><div><a href='#footer' title='to page down'><img src='<span style="color: red;">http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png</span>' /></a></div></div></code><code></code></div></li><li>Terakhir klik <b style="color: red;">Save</b>. <div><img alt="Tombol To Page Down WordPress" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Dashboard/SavewgtWP.gif" /></div></li></ul><div>Catatan : Karena setiap template berbeda, ada kemungkinan kode diatas tidak bekerja, namun pada blog wordpress.com saya cara ini sudah berhasil.</div><div style="text-align: justify;">Semoga tutorial ini bisa membantu Sobat dalam membuat Tombol To Page Down di WordPress.com</div>

Tombol To Page Down WordPress

Membuat Tombol To Page Down di WordPress.com | Tutorial Blog Beberapa waktu yang lalu saya pernah posting tentang Membuat Tombol Back To Top...

SimpleVideoblog Template

Arijal 0 Blogger Templates 03:11

<h1><span style="font-size: large;"><b>SimpleVideoblog Template | Tutorial Blog</b></span></h1><span style="font-size: large;">Template Features</span><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>SimpleVideoblog</b><b> Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>SimpleVideoblog</b> is a free blogger template with 2  columns, right sidebar, gallery-styled, perfect for photologs,  minimalist, space for ads, footer columns and posts thumbnails.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/free-blogger-template/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">FBTemplate</td></tr><tr> <td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><br /><img alt="HomeDesign Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2011/11/simplevideoblog-blogger-template.jpg" style="cursor: pointer; height: 250px; width: 300px;" /><br /><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2011/blogger-template-simplevideoblog/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/4081/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

SimpleVideoblog Template

SimpleVideoblog Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name SimpleVideoblog Template Descript...

HostingPro Blogger Template

Arijal 0 Blogger Templates 04:20

<h1><span style="font-size: large;"><b>HostingPro Blogger Template | Tutorial Blog</b></span></h1><span style="font-size: large;">Template Features</span><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>HostingPro</b><b> Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><b>HostingPro</b> is a free blogger template adapted from WordPress with 2 columns, right sidebar, space for ads, slideshow, social icons, posts thumbnails, tabs and drop down menu.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://btemplates.com/author/pbtemplates/</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">PBTemplates</td></tr><tr> <td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><br /><img alt="HostingPro Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2012/02/hostingpro-blogger-template.jpg" style="cursor: pointer; height: 250px; width: 300px;" /><br /><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2012/blogger-template-hostingpro/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="http://btemplates.com/download/4216/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

HostingPro Blogger Template

HostingPro Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name HostingPro Blogger Template De...

Membuat Tombol di Blog

Arijal 0 Tutorial Blogspot, Tutorial Wordpress 21:31

<h1><b>Membuat Tombol di Blog | Tutorial Blog</b></h1><div style="text-align: justify;">Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah <button>Tombol</button> entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini.</div><a name="more"></a><ul><li><b>Membuat tombol untuk Blogspot :</b></li><ul><li>Login ke blogger Sobat.</li><li>Untuk membuat tombol di postingan klik <b style="color: red;">Posting > New Post</b>, lalu pilih tab <b style="color: red;">Edit Html</b>.</li><li> Jika Anda ingin menampilkannya di widget klik <b style="color: red;">Design > Page Element > Add a Gadget > HTML/Javascripts</b>.</li><li>Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini)</li></ul></ul><ul><li><b>Untuk Wordpress.com :</b></li><ul><li>Login ke dasboard Anda.</li><li>Untuk menampilkan di postingan klik <b style="color: red;">Posts > Add New</b>, lalu pilih tab <b style="color: red;">Html</b>.</li><li>Untuk menampilkan di widget klik <b style="color: red;">Appearance > Widgets</b>, lalu letakkan <b style="color: red;">Text</b> pada sidebar.</li><li>Selanjutnya letakkan kode untuk menampilkan tombol.</li></ul></ul><div style="text-align: left;">Untuk kodenya dapat Sobat lihat dibawah ini :</div><ul><li><button>Tombol</button><div style="text-align: left;">kodenya seperti ini :</div><div style="background: #bbddff; border: 1px solid rgb(0, 0, 150); color: blue; padding: 5px; text-align: left; width: 450px;"><button>Tombol</button> </div></li><li>Posisi tombol ditengah : <div style="text-align: center;"><button>Tombol</button></div><div style="text-align: left;">berikut kodenya :</div><div style="background: #bbddff; border: 1px solid rgb(0, 0, 150); color: blue; padding: 5px; text-align: left; width: 450px;"><div style="text-align: center;"><button>Tombol</button></div></div><div></div></li><li>Untuk tombol yang berisi Link berikut kodenya : <div style="background: #bbddff; border: 1px solid rgb(0, 0, 150); color: blue; padding: 5px; text-align: left; width: 450px;"><a href="http://alamatblog.com/"><button>LINK</button></a></div></li><li><div>Untuk membuat tombol berisi link yang akan dibuka ditab baru, cukup tambahkan <span style="color: red;">target="_blank"</span></div><div style="background: #bbddff; border: 1px solid rgb(0, 0, 150); color: blue; padding: 5px; text-align: left; width: 450px;"><a href="http://alamatblog.com/" <span style="color: red;">target="_blank"</span>><button>LINK</button></a></div></li></ul><div>Gimana Sob, mudah kan ?!?</div>Sepertinya cukup sekian dulu tutorial tentang Membuat Tombol di Blog.

Membuat Tombol di Blog

Membuat Tombol di Blog | Tutorial Blog Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah Tombol entah itu berisi lin...

Macam Macam Div Style

Arijal 0 Tips Dan Trik 06:06

<h1><b>Macam Macam Div Style | Tutorial Blog</b></h1><div style="text-align: justify;">Pada postingan ini saya akan berbagi tentang beberapa kode untuk membuat Div Style. Langsung saja Sob, berikut kodenya :</div><ul><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Tulis Text Disini</div> </div> </div></div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 2px solid blue;"><div style="border: 3px solid red;"><div align="center">Tulis Text Disini</div></div></div></li><a name="more"></a><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Tulis Text Disini</span></div> </div> </div></div></div><div style="text-align: left;"><b>Hasilnya </b></div><div style="border: 4px solid yellow;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div></div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Tulis Text Disini</div></div></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Tulis Text Disini</div></div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Tulis Text Disini</center></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><div align="center">Tulis Text Disini</div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border-style:inset;border-width:5pt;border-color:black" align="center">Tulis Text Disini</div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div align="center" style="border-color: black; border-style: inset; border-width: 5pt;">Tulis Text Disini</div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Tulis Text Disini</div></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Tulis Text Disini</div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></div></div></div></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></div></div></div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></li><li><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;"><div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;"><br /><div align="center"><span style="color: red;">Tulis Text Disini</span></div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div></div></div><div style="text-align: left;"><b>Hasilnya :</b></div><div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></li></ul><div>Sepertinya segitu dulu Sob, kalau ada yang mau menambahkan silakan tulis di komentar.</div>Silakan dicoba dan semoga berhasil...

Macam Macam Div Style

Macam Macam Div Style | Tutorial Blog Pada postingan ini saya akan berbagi tentang beberapa kode untuk membuat Div Style. Langsung saja Sob,...

Mengganti Tampilan Thread Comment

Arijal 0 Blogger Templates, Tutorial Blogspot 21:16

<h1><b>Mengganti Tampilan Thread Comment | Tutorial Blog</b></h1><div style="text-align: justify;">Postingan ini Lanjutan dari <a href="http://wadahtutorial.blogspot.com/2012/02/thread-comment-pada-custom-template.html" target="_blank">Menampilkan Thread Comment pada Custom Template</a>, jika Sobat sudah berhasil <a href="http://wadahtutorial.blogspot.com/2012/01/menampilkan-thread-comments-di-blogger.html" target="_blank">Menampilkan Thread Comments</a> biasanya tampilannya polos tanpa variasi. Pada postingan kali ini kita akan meng-edit css Thread Comment agar tampilannya seperti gambar berikut.</div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><img alt="Mengganti Tampilan Thread Comment" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/dya21/trdcmn.gif" /></div><br /><div style="margin-left: 1em; margin-right: 1em;"></div><div style="text-align: justify;">Caranya cukup mudah Sob, Sobat cukup menghapus kode css komentar di template Anda, lalu ganti dengan kode berikut : </div><div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Kode</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left; width: 450px;"><div style="display: none;">.comments {<br />  clear: both;<br />  margin-top: 10px;<br />  margin-bottom: 0px;<br />  line-height: 1em;<br />}<br />.comments .comments-content {<br />font-size: 12px;<br />margin-bottom: 16px;<br />font-weight: normal;<br />text-align:left;<br />line-height: 1.4em;<br />}<br />.comments .comment .comment-actions a {<br />display: inline-block;<br />margin: 0;<br />padding: 1px 6px;<br />border: 1px solid #dddddd;<br />border-top-color: #eeeeee;<br />border-left-color: #eeeeee;<br />color: #333333 !important;<br />text-align: center;<br />text-shadow: 0 -1px 0 white;<br />text-decoration: none;<br />-webkit-border-radius: 2px;<br />-moz-border-radius: 2px;<br />border-radius: 2px;<br />background: #eeeeee;<br />background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );<br />background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );<br />font: 11px/18px sans-serif;<br />padding:2px 8px; margin-right:10px;<br />}<br />.comments .comment .comment-actions a:hover {<br />text-decoration: none; background:#fff; border:1px solid #0099ff;<br />}<br />.comments .comments-content .comment-thread ol {<br />  list-style-type: none;<br />  padding: 0;<br />  text-align: none;<br />}<br />.comments .comments-content .inline-thread {<br />  padding: 0.5em 1em;<br />}<br />.comments .comments-content .comment-thread {<br />  margin: 8px 0px;<br />}<br />.comments .comments-content .comment-thread:empty {<br />  display: none;<br />}<br />.comments .comments-content .comment-replies {<br />  margin-top: 1em;<br />  margin-left: 40px;   font-size:12px; background:#bbddff;<br />}<br />.comments .comments-content .comment {<br />  margin-bottom:16px;<br />  padding-bottom:8px;<br /><br />}<br />.comments .comments-content .comment:first-child {<br />  padding-top:16px;<br />}<br />.comments .comments-content .comment:last-child {<br />  border-bottom:0;<br />  padding-bottom:0;<br />}<br />.comments .comments-content .comment-body {<br />  position:relative;<br />}<br />.comments .comments-content .user {<br />  font-style:normal;<br />  font-weight:bold;<br />}<br />.comments .comments-content .user a {<br />color:#225577; font-size:14px; font-weight: bold;text-decoration: none;<br />}<br />.comments .comments-content .icon.blog-author {<br />  width: 18px;<br />  height: 18px;<br />  display: inline-block;<br />  margin: 0 0 -4px 6px;<br />}<br />.comments .comments-content .datetime {<br />float: right;<br />font-size: 11px;<br />text-decoration: none;<br />}<br />.comments .comments-content,<br />.comments .comments-content .comment-content {<br />  margin:0 0 8px;<br />}<br /><br />.comment-header {background-color: #eeeeee;<br />    border: thin solid #dddddd;<br />    margin-bottom: 5px;<br />    padding: 5px;<br />}<br />.comments .comments-content .comment-content {<br />  text-align:none;<br />}<br />.comments .comments-content .owner-actions {<br />  position:absolute;<br />  right:0;<br />  top:0;<br />}<br />.comments .comments-replybox {<br />  border: none;<br />  height: 250px;<br />  width: 100%;<br />}<br />.comments .comment-replybox-single {<br />  margin-top: 5px;<br />  margin-left: 48px;<br />}<br />.comments .comment-replybox-thread {<br />  margin-top: 5px;<br />}<br />.comments .comments-content .loadmore a {<br />  display: block;<br />  padding: 10px 16px;<br />  text-align: center;<br />}<br />.comments .thread-toggle {<br />  cursor: pointer;<br />  display: inline-block;<br />}<br />.comments .continue {<br />  cursor: pointer;<br />}<br />.comments .continue a {<br />display: inline-block;<br />margin: 0;<br />padding: 1px 6px;<br />border: 1px solid #dddddd;<br />border-top-color: #eeeeee;<br />border-left-color: #eeeeee;<br />color: #333333 !important;<br />text-align: center;<br />text-shadow: 0 -1px 0 white;<br />text-decoration: none;<br />-webkit-border-radius: 2px;<br />-moz-border-radius: 2px;<br />border-radius: 2px;<br />background: #eeeeee;<br />background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );<br />background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );<br />font: 11px/18px sans-serif;<br />padding:2px 8px; margin-right:10px;<br />}<br />.comments .continue a:hover {<br />text-decoration: none; background:#fff; border:1px solid #0099ff;<br />}<br />.comments .comments-content .loadmore {<br />  cursor: pointer;<br />  max-height: 3em;<br />  margin-top: 3em;<br />}<br />.comments .comments-content .loadmore.loaded {<br />  max-height: 0px;<br />  opacity: 0;<br />  overflow: hidden;<br />}<br />.comments .thread-chrome.thread-collapsed {<br />  display: none;<br />}<br />.comments .thread-toggle {<br />  display: inline-block;<br />}<br />.comments .thread-toggle .thread-arrow {<br />  display: inline-block;<br />  height: 6px;<br />  width: 7px;<br />  overflow: visible;<br />  margin: 0.3em;<br />  padding-right: 4px;<br />}<br />.comments .thread-expanded .thread-arrow {<br />  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;<br />}<br />.comments .thread-collapsed .thread-arrow {<br />  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;<br />}<br />.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;<br />border: 1px solid #DDDDDD;}<br />.comments .avatar-image-container img {<br />  width: 36px;<br />}<br />.comments .comment-block {<br />  margin-left: 48px;<br />  position: relative;<br />}<br /><br />/* Responsive styles. */<br />@media screen and (max-device-width: 480px) {<br />  .comments .comments-content .comment-replies {<br />    margin-left: 0;<br />  }<br />} </div></div></div><div style="text-align: left;">Jika sudah selesai Simpan template Anda dan lihat hasilnya.</div><div style="text-align: left;">Sekian artikel kali ini, Semoga Anda berhasil Mengganti Tampilan Thread Comment.</div>

Mengganti Tampilan Thread Comment

Mengganti Tampilan Thread Comment | Tutorial Blog Postingan ini Lanjutan dari Menampilkan Thread Comment pada Custom Template , jika Sobat s...

HomeDesign Blogger Template

Arijal 0 Blogger Templates 04:40

<h1><span style="font-size: large;"><b>HomeDesign Blogger Template | Tutorial Blog</b></span></h1><span style="font-size: large;">Template Features</span><br /><a name="more"></a><table cellpadding="0" cellspacing="0" class="Table-Post2" height="152" id="AutoNumber1"><tbody><tr><td class="Table-Post2" height="25" width="30%">Platform Type</td><td class="Table-Post2" height="25" width="56%">Blogger / Blogspot</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Name</td><td class="Table-Post2" height="25" width="56%"><b>HomeDesign Blogger Template</b></td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Description</span></td><td class="Table-Post2" height="25" width="56%"><strong>HomeDesign</strong> is a free blogger template with 2 columns,  right sidebar, rounded corners, exclusive design for Blogger, slideshow  and social icons.</td></tr><tr><td class="Table-Post2" height="25" width="30%">Template Author</td><td class="Table-Post2" height="25" width="56%">http://www.deluxetemplates.net</td></tr><tr><td class="Table-Post2" height="25" width="30%"><span class="cut">Designer</span></td><td class="Table-Post2" height="25" width="5dd6%">Deluxe Templates</td></tr><tr> <td class="Table-Post2" height="25" width="30%">Instructions URL</td> <td class="Table-Post2" height="25" width="56%"><a href="http://wadahtutorial.blogspot.com/2011/10/install-custom-template-blogger.html">How to install Blogger Template</a></td> </tr></tbody></table><br /><img alt="HomeDesign Blogger Template" border="0" src="http://bt.bloggerpremium.com/wp-content/uploads/2012/02/homedesign-blogger-template.jpg" style="cursor: pointer; height: 250px; width: 300px;" /><br /><table border="0" cellspacing="10" style="width: 400px;"><tbody><tr><td valign="top" width="200"><a href="http://btemplates.com/2012/blogger-template-homedesign/demo/" rel="nofollow" target="_blank"><button>Demo</button></a></td><td valign="top" width="200"><a href="btemplates.com/download/4196/" rel="nofollow" target="_blank"><button>Download</button></a></td></tr></tbody></table>Source : <a href="http://btemplates.com/" rel="nofollow" target="_blank">btemplates.com</a>

HomeDesign Blogger Template

HomeDesign Blogger Template | Tutorial Blog Template Features Platform Type Blogger / Blogspot Template Name HomeDesign Blogger Template Des...

Menampilkan Thread Comment pada Custom Template

Arijal 0 Tips Dan Trik, Tutorial Blogspot 04:20

<h1><b>Menampilkan Thread Comment pada Custom Template | Tutorial Blog</b></h1><div style="text-align: justify;">Thread Comment merupakan fitur baru dari blogger yang telah resmi diluncurkan pada 12 januari yang lalu, fitur ini otomatis berlaku pada blog yang menggunakan tampilan dynamic views, jadi untuk tampilan klasik dan custom template fitur ini tidak otomatis di tampilkan.</div><a name="more"></a><div style="text-align: justify;">Pada postingan kali ini saya akan membuat tutorial tentang cara <a href="http://wadahtutorial.blogspot.com/2012/01/menampilkan-thread-comments-di-blogger.html" target="_blank">Menampilkan Thread Comments</a> pada Custom Template, trik ini terbukti berhasil pada template saya ini, walaupun pada template saya sebelumnya trik ini malah mambuat halaman posting saya hilang, jadi sebaiknya backup dulu template Anda sebelum di edit.</div><div style="text-align: left;">Berikut cara Menampilkan Thread Comment pada Custom Template :</div><ul><li><div style="text-align: left;">Login ke Blogger, Klik <b style="color: red;">Design/Rancangan > Edit HTML</b>.</div><img alt="Menampilkan Thread Comment pada Custom Template" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Dashboard/DesignHtml.gif" /></li><li><div style="text-align: left;">Beri tanda centang pada <b><span style="color: red;">Expand Template Widget</span></b>.</div><img alt="Menampilkan Thread Comment pada Custom Template" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Dashboard/ExpandWidgetTemplates.gif" /><div style="text-align: left;"><b style="color: red;">Tips</b> : Biasakan mendownload template untuk membackup template sebelum di edit.</div></li><li><div style="text-align: left;">Cari kode <span style="color: red;"><b:include data='post' name='comments'/></span>, pada template saya kode tersebut ada 4 dan saya ganti semua dengan kode berikut :</div><div style="border: 1px solid rgb(0, 0, 150); overflow: auto; padding: 5px; text-align: left; width: 450px;">          <b:if cond='data:post.showThreadedComments'><br />            <b:include data='post' name='threaded_comments'/><br />          <b:else/><br />            <b:include data='post' name='comments'/><br />          </b:if></div></li><li><div style="text-align: left;">Terakhir klik <b style="color: red;">Save / Simpan Template</b>.</div><img alt="Menampilkan Thread Comment pada Custom Template" border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/Dashboard/SaveTemplate.gif" /></li></ul>Silakan dicoba Sob, semoga Anda berhasil Menampilkan Thread Comment pada Custom Template.

Menampilkan Thread Comment pada Custom Template

Menampilkan Thread Comment pada Custom Template | Tutorial Blog Thread Comment merupakan fitur baru dari blogger yang telah resmi diluncurka...