Cara Menambah Efek Gelembung Di Blog

Menambah Efek Gelembung Di Blog – Blog adalah tempat untuk berekspresi dan bereksplorasi tentang segala kreatifitas yang kita miliki. Karena itu, tidak jarang banyak di antara kita yang bersemangat untuk merombak tampilan blog agar selaras dengan style yang kita miliki.

Bagi penggemar hal yang lucu-lucu, mungkin tidak ada salahnya jika kita mencoba menambahkan efek gelembung di dalam blog kita. Dengan adanya penambahan efek gelembung tersebut akan membuat blog tampak lebih atraktif dan lebih bervariasi. Keuntungannya adalah blog tampak lebih tampil beda dengan hiasan tersebut. Akan tetapi, hal itu juga bisa saja menjadi kelemahan ketika blog kita dikunjungi oleh pembaca yang memang memiliki kebiasaan konsentrasi dalam membaca karena dengan adanya penambahan efek gelembung tersebut akan menyulitkan setiap fokus pengunjung yang ingin membaca tulisan dalam blog kita. Selain efek gelembung, kita juga dapat menambahkan efek salju di blog milik kita.

Cara menambahkan efek gelembung di blog juga sangat mudah. Kita hanya perlu meletakan script untuk menampilkan efek gelembung di blog kita. Adapun cara untuk menambahkan efek gelembung di dalam blog kita antara lain sebagai berikut:

Masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik contreng pada expand template widget.

Cari kode berikut.

</body>

Masukan kode berikut di atasnya.

<script src="http://panduanbelajarblog.googlecode.com/files/efek-gelembung.js"></script>

Klik simpan template dan selesai.

Keterangan:

1. Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian kode yang ingin kita temukan di dalam template blog.
2. Download template blog kita terlebih dahulu sebagai antisipasi jika kita mengalami kegagalan dalam proses editing.

Kita harus bijak dalam menggunakan pernak-pernik blog berupa efek gelembung ini. Salah satu pertimbangan dalam menambahkannya di blog kita adalah seperti apa tema blog dan karakteristik pengunjung blog kita itu sendiri. Jika blog kita bertema berita dan itu berarti pengunjung kita sangat membutuhkan fokus agar bisa berkonsentrasi dalam membaca setiap tulisan dalam postingan blog kita maka penambahan efek gelembung ini sangat tidak disarankan agar tidak mengganggu.

Akan tetapi, jika blog kita bertema pribadi dan pengunjung kita merasa nyaman dengan adanya penambahan efek gelembung tersebut maka penambahan efek di blog ini bisa untuk dilakukan. Efek gelembung yang ditambahkan tidak akan membuat loading blog menjadi berat secara signifikan. Sehingga, jangan mencemaskan kembali mengenai kecepatan blog ketika kita menggunakan efek gelembung ini di dalam blog kita masing-masing.

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Kanata Blogger Template
Description	Kanata is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style.
Template Author	http://btemplates.com/author/deluxe-templates/
Designer	9th Sphere
Instructions URL	How to install Blogger Template

Source : btemplates.com

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Red Light Blogger Template
Description	Red Light is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements.
Template Author	http://btemplates.com/author/falcon-hive/
Designer	TemplateLite
Instructions URL	How to install Blogger Template

Source : btemplates.com

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

• Login ke blogger Anda, klik menu Design > Edit HTML.
• Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
• Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
  <script>
  var last_expanded = &#39;&#39;;
  function showHide(id)
  {
  var obj = document.getElementById(id);
  var status = obj.className;
  if (status == &#39;hide&#39;) {
  if (last_expanded != &#39;&#39;) {
  var last_obj = document.getElementById(last_expanded);
  last_obj.className = &#39;hide&#39;;
  }
  obj.className = &#39;show&#39;;
  last_expanded = id;
  } else {
  obj.className = &#39;hide&#39;;
  }
  }
  </script>
• Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
  .dropdown-b {
  background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom: 10px;
  margin-top: 4px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .dropdown-bg {
  background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:13px;
  padding-bottom: 10px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .hide{
  display: none;
  }
  .show{
  display: block;
  }
  a{cursor: hand}
• Lalu klik Save Template.
• Kemudian klik menu Design > Page Element > Add a Gadget.
• Pilih HTML/Javascript, lalu masukkan kode berikut ini :
  <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
  <div id="dropdown-b-1" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
  <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
  <div id="dropdown-b-2" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
  <div id="dropdown-b-3" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
  <div id="dropdown-b-4" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
   <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
• Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Photoplus Blogger Template
Description	Photoplus is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography.
Template Author	http://btemplates.com/author/dante-araujo/
Designer	Dante Araujo
Instructions URL	How to install Blogger Template

Source : btemplates.com

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

Dalam membuat Anchor text sebaiknya mengandung kata kunci yang di targetkan, menarik, dan mengandung arti yang mudah di mengerti.

Berikut beberapa contoh penulisan kode html untuk membuat anchor text :

• Membuat Anchor Text sesuai judul Blog.
  <a href="http://wadahtutorial.blogspot.com/">Tutorial Blog</a>
• Membuat Anchor Text untuk salah satu artikel.
  <a href="http://wadahtutorial.blogspot.com/2011/12/widget-recent-comment-valid-xhtml.html">Widget Recent Comment Valid XHTML</a>
• Membuat Anchor Text pada image.
  <a href="http://wadahtutorial.blogspot.com/"><img alt="Tutorial Blog" border="0" src="Url Image" />Tutorial Blog</a>

Beberapa hal yang perlu diperhatikan dalam penggunaan anchor text :

• Kerapatan keyword dalam sebuah postingan. Beberapa forum SEO menyarankan kerapatan anchor teks yang baik minimal 300 karakter terdapat 1 anchor text.
• 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.
• 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.
• 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.
• 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).
• 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.
• Terus membuat keyword baru pada postingan baru, karena search engine senang jika mendeteksi update pada blog/website.
• Anchor text Anda perlukan untuk membangun backlink, bisa dengan melakukan link antar halaman dalam sebuah blog, atau link dari blog lain ke blog anda.
• Hindari penggunaan anchor teks yang kurang tepat, misal : d@wnload (kombinasi simbol dan alfabet), dan kata tidak baku lainnya.
• 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.

Semoga artikel ini bermanfaat buat kita dalam optimasi blog.

Web Blog Blogger Template

Web Blog Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Web Blog Blogger Template
Description	Web Blog is a free blogger template with 2 columns, right sidebar, slideshow and abstract.
Template Author	http://btemplates.com/author/alexiel/
Designer	Template Mo
Instructions URL	How to install Blogger Template

Source : btemplates.com

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 fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer.

Berikut cara Menampilkan Tag Clouds di Blogger :

• Login ke akun anda klik Dasbor > Design > Page Elements > Add a Gadget.
• Kemudian pilih Label. Pada display ganti dari Daftar menjadi Cloud.
  
• Lalu klik Save.

Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut :

• Klik Design > Edit HTML, beri centang pada Expand Template Widget.
• Copy kode dibawah ini, letakkan tepat di atas kode ]]></b:skin>
  /* Label Cloud Styles */
  #labelCloud {text-align:center;font-family:arial,sans-serif;}
  #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
  #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
  #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
  #labelCloud a{text-decoration:none}
  #labelCloud a:hover{text-decoration:underline}
  #labelCloud li a{}
  #labelCloud .label-cloud {}
  #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
  #labelCloud .label-cloud li:before{content:"" !important}
• Copy kode dibawah ini, letakkan tepat di bawah kode ]]></b:skin>
  
  <script type='text/javascript'>
  // Label Cloud User Variables
  var cloudMin = 1;
  var maxFontSize = 20;
  var maxColor = [0,0,255];
  var minFontSize = 10;
  var minColor = [0,0,0];
  var lcShowCount = false;
  </script>
• Simpan template Anda dan lihat hasilnya!.

Sekian tutorial tentang Menampilkan Tag Clouds di Blogger.

Cara Mengetahui Malware Pada Blog

Mengetahui Malware Pada Blog – Blog yang disusupi malware sangat berbahaya bagi pembaca yang mengunjunginya. Karena dengan malware yang berada di blog tersebut, bisa saja malware yang berada dalam sebuah blog yang kita kunjungi berbalik menyerang komputer yang sedang kita gunakan untuk mengakses sebuah blog yang terkena malware. Akibatnya, komputer kita menjadi bermasalah dan tidak mampu lagi melakukan fungsi kerja secara maksimal.

Malware merupakan sebuah program jahat yang digunakan untuk mendeteksi kelemahan sebuah software atau sistem operasi tertentu. Ketika sebuah blog terkena malware maka sebenarnya blog tersebut sedang diteliti di mana celah kelemahannya. Selain itu, malware juga melakukan aktivitas tertentu yang berbahaya lainnya seperti mengirimkan pesan informasi tertentu mengenai blog kita tanpa sepengetahuan kita sebagai admin.

Sumber penyebab munculnya malware pada blog kita sebagian besar berasal dari penggunaan script yang bermasalah. Pada kondisi tertentu, script tersebut sudah mengandung malware sebelumnya. Sehingga, ketika kita memasang script tersebut di blog kita untuk menampilkan widget tertentu maka secara otomatis malware dalam script tersebut akan menyebar ke dalam blog kita.

Jika blog kita sudah terkena malware maka Google akan memberikan peringat kepada para pengunjung kita jika blog kita tersebut terjangkit malware dan direkomendasikan berbahaya untuk dikunjungi. Adapun gambar peringatan tersebut adalah seperti berikut ini.

Dengan adanya peringatan berbahaya ini tentu akan merusak kredibilitas blog kita yang selama ini baik di hadapan para pembaca setia kita. Situs kita akan kehilangan kepercayaan dan kehilangan pembacanya.

Untuk itu, ada baiknya kita melakukan upaya pencegahan malware mulai dari langkah pemeriksaan apakah blog kita sudah terkena malware atau belum. Langkah untuk mengetahui malware pada blog kita antara lain sebagai berikut:

Pertama kunjungi Google Webmasters Tools.

Setelah masuk, ada tampilan blog yang kita miliki dengan akun tersebut. Klik URL blog yang kita miliki tersebut.

Setelah masuk dasbor, perhatikan bagian diagnostik.

Klik malware/program jahat.

Jika blog kita masih bersih dari malware maka akan muncul pernyataan dari Google seperti Google belum mendeteksi malware apa pun pada situs ini atau Google has not detected any malware on this site. Akan tetapi, jika blog kita sudah disusupi oleh malware maka Google akan memberikan peringatan kepada kita jika blog kita tersebut sudah tersusupi oleh malware.

Malware memang berbahaya dan meresahkan bagi pengunjung blog kita. Salah satu bentuk ketidaknyamanan pengunjung adalah mereka mulai menjadi ragu dengan kredibilitas blog kita yang disusupi malware tersebut. Oleh karena itu, tindakan pencegahan berupa pengecekan berkala cukup penting dilakukan akan blog kita terjamin keamanannya dari segala ancaman buruk yang mungkin belum pernah kita duga dan antisipasi sebelumnya.

Masunurin Blogger Template

Masunurin Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Masunurin Blogger Template
Description	Masunurin is a free premium blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, space for ads and neutral colors.
Template Author	http://btemplates.com/author/themecraft/
Designer	Padd IT Solutions
Instructions URL	How to install Blogger Template

Source : btemplates.com

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

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.

Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO pada Image :

• 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"
• Gunakan nama file dan alt tag yang singkat tapi deskriptif, hindari penulisan alt tag yang panjang, karena terkadang mungkin bisa dianggap spam
• Pasokan alt tag bisa menggunakan gambar sebagai link, hal ini bekerja sebagai anchor text
• Format gambar dengan jenis file - JPEG, GIF, PNG, dan BMP
• Simpan semua gambar dalam direktori yang sama.

Contoh penggunaan Alt tag pada Image / gambar

<a href="URL image"><img style="border-width: 0px; margin: 0px; title="title image" alt="alt tag image" src="URl image" align="right" border="0" width="180" height="120"></a>

Semoga artikel ini berguna bagi kita dalam meningkatkan Optimasi SEO.

MusicBlog Blogger Template

MusicBlog Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	MusicBlog Blogger Template
Description	MusicBlog is a free blogger template with 2 columns, right sidebar, exclusive design for Blogger, slideshow, social icons and vectorial elements. Excellent layout for blogs about girls or music.
Template Author	http://btemplates.com/author/deluxe-templates/
Designer	Deluxe Templates
Instructions URL	How to install Blogger Template

Source : btemplates.com

Recent Comments Blogger dengan Avatar

Membuat Recent Comments Blogger dengan Avatar | Tutorial Blog

Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya aja yang berbeda. Jadi untuk tutorial yang lebih jelas silakan baca Widget Recent Comment Valid XHTML. Untuk postingan ini saya buat singkat saja.

Berikut caranya :

• Buat widget HTML/JavaScript.
• Beri judul Recent Comments atau apalah terserah Anda.
• Lalu masukkan kode berikut :

  <style type="text/css">
  ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
  .tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
  .tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
  .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
  .tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
  </style>
  <script type="text/javascript">
  //<![CDATA[
      // Recent Comments Settings
      var
  numComments  = 5,
  showAvatar  = true,
  avatarSize  = 30,
  characters  = 60,
  defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
  hideCredits = true;
  //]]>
  </script>
  <script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
  <script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

  Keterangan :
  numComments : 5, jumlah komentar yang ditampilkan
  

  avatarSize : 30, ukuran avatar dalam pixel

  characters : 60, jumlah karakter yang ditampilkan

  wadahtutorial.blogspot.com ganti dengan URL blog Anda.

  max-results=5, jumlah komentar yang ditampilkan, ganti sesuai keinginan Anda.
• Terakhir klik Save. Selesai...

Selamat mencoba Membuat Recent Comments Blogger dengan Avatar.

Outubro Blogger Template

Outubro Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Outubro Blogger Template
Description	Outubro is a free blogger template with 2 columns, right sidebar, neutral colors and posts thumbnails.
Template Author	http://btemplates.com/author/templates-novo-blogger/
Designer	Templates Novo Blogger
Instructions URL	How to install Blogger Template

Source : btemplates.com

Menampilkan Smiley Pada Postingan Blogger

Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog

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.

Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti ,,, , , , dan lain lain.

Caranya gampang Sob, silakan ikuti tutorial berikut :

• Login ke blogger trus pilih Layout > Edit HTML.
• Beri tanda centang pada Expand Widget Templates.
• Cari kode ini ]]></b:skin> .
• Masukkan script berikut ini dibawah kode ]]></b:skin>
  <script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/>
• Terakhir klik Save Template. Selesai...

Berikut beberapa kode yang dapat Anda gunakan :

:D		:P
:)		;)
:-S		:-B
:-h		:-a
:x		:(
:-t		:-bd
:-c		:-*
8-7		8-|
7:P		=D7
8-}		X(

Sebenarnya masih ada beberapa kode lagi, berhubung saya sudah lupa jadi segitu dulu, jika ada yang mau menambahkan silakan tulis di kolom komentar.

Selamat mencoba dan semoga berhasil...

Tips Dalam Mengganti Template

Tips Dalam Mengganti Template | Tutorial Blog

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.

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.

Berikut Tipsnya :

• Pastikan Sobat back up template anda terlebih dahulu. Caranya masuk ke dasboard > Design / Rancangan > Edit html, lalu klik Download Full Template / download template lengkap.
• 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.
• Simpan ke Notepad semua kode widget yang Anda gunakan.
• 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.
• 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.
• 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.

Sekian tips dari saya, semoga bermanfaat buat Sobat yang ingin mengganti template.

8 Tanda Blogger Yang Baik

Tanda Blogger Yang Baik – Blogger juga manusia biasa. Oleh karena itu, sesuai dengan kodaratnya sebagai manusia seorang blogger juga tidak luput dari kesalahan dan kebaikan. Sebagai manusia biasa yang aktif menjalani aktifitas blogging, apa saja tanda-tanda seorang blogger yang baik dalam aktifitas bloggingnya?

Menarik sebuah kesimpulan terhadap seorang blogger untuk menilai apakah dia termasuk blogger yang baik atau tidak termasuk kategori subjektif. Mengapa? Karena kita lebih mudah dan lebih terbiasa untuk langsung memberikan penilaian berdasarkan kesan pertama atau feeling yang kita rasakan terhadap blogger tersebut tanpa peduli dengan rekam jejek perilakunya dalam dunia blogging secara keseluruhan. Meskipun demikian, kita masih bisa untuk menyimpulkan tentang seperti apa sih kriteria atau tanda blogger yang baik itu?

1. Tidak sombong.

Apapun reputasi yang disandang oleh seorang blogger entah seorang blogger senior yang sudah banyak berprestasi, menguasai banyak teknik blogging, atau seorang blogger pemula tetap saja di antara mereka tidak boleh menampakan sikap sombong. Kita sebagai blogger tidak boleh bersikap sombong! Mengapa? Karena kita harus menghargai dan melengkapi demi kebaikan dan kemajuan bersama.

2. Senang menjalin pertemanan.

Salah satu manfaat bagi kita dalam menjalankan aktifitas blogging adalah mendapatkan banyak teman. Ketika kita diajak berteman oleh blogger lain dalam bentuk ajakan saling follow, jangan pernah ragu untuk melakukan follow balik. Selain mendapatkan teman baru, kita juga terlepas dari kesan blogger sombong ketika kita tidak berkenan untuk menanggapi ajakan saling follow dari blogger lain tersebut.

3. Tidak melakukan SPAM.

Blogger yang baik biasanya tidak pernah melakukan spam dalam bentuk berkomentar pada blog orang lain yang berisi promosi dengan menautkan link ke alamat blog miliknya. Selain menandakan sebagai blogger yang tidak sopan, kegiatan asal komentar sembarangan juga akan memperburuk citra blogger tersebut di mata blogger lainnya.

4. Menerbitkan konten yang valid.

Kita dapat menerbitkan konten semau kita. Tapi, kita juga harus ingat dengan konsekuensi yang harus kita hadapi atas penerbitan konten tersebut karena konten yang sudah kita terbitkan itu akan dibaca oleh banyak pengunjung blog kita. Oleh karena itu, sebelum kita menerbitkan sebuah konten postingan di blog kita ada baiknya jika kita meneliti dan menguji kebenarannya agar tidak menimbulkan pertentangan di kemudian hari.

5. Tidak melakukan pembajakan.

Pembajakan adalah perbuatan tercela bagi kita. Tidak hanya sebagai blogger, sebagai pribadi yang hidup bermasyarakatpun kita mengenal pembajakan sebagai sebuah tindakan yang buruk. Pembajakan sama halnya dengan mencuri.

Pembajakan dalam dunia blogging bisa kita lihat dalam bentuk asal copas artikel blog milik orang lain. selain merugikan diri sendiri, aksi pembajakan juga dapat merugikan orang lain dengan mematikan kreatifitasnya. Sehingga, blogger yang baik tidak akan pernah melakukan perbuatan serendah ini.

6. Membantu kesulitan blogger lainnya.

Sebagai seorang blogger yang berhasil dalam artian memiliki banyak pengetahuan blogging, kita tentu ingin mengajak teman-teman blogger kita meraih keberhasilan seperti yang kita miliki. Rasa kebersamaan ini muncul ketika kita berkenan untuk membantu dengan ikhlas permasalahan yang dihadapi teman blogger kita hingga tuntas. Apa manfaatnya? Selain teman kita bertambah banyak, sikap yang gemar membantu ini juga akan meningkatkan citra kita sebagai seorang blogger yang diteladani dan diingat banyak orang.

7. Dekat dengan pembaca.

Kedekatan dengan pembaca juga merupakan salah satu indikasi jika kita memiliki sifat sebagai blogger yang baik. Karena dengan kedekatan tersebut kita akan lebih mengetahui tentang apa yang dibutuhkan oleh pembaca kita. Selain itu, dengan adanya interaksi yang intens akan membuat kegiatan blogging merasa lebih menyenangkan.

8. Banyak belajar.

Setiap kita melakukan kesalahan, di situlah ada kesempatan bagi kita untuk berkembang menjadi lebih baik dengan cara melakukan perbaikan. Kita harus selalu mengevaluasi setiap tindakan yang kita lakukan. Jangan pernah berhenti untuk belajar dan berusaha mencapai kesempurnaan.

Ada banyak indikator untuk menyimpulkan seorang blogger adalah seorang blogger yang baik. Akan tetapi, seorang blogger yang paling baik adalah blogger yang dapat memberikan kontribusi lebih bagi kemajuan di sekitarnya. Mari berlomba-lomba dalam kebaikan. Semakin banyak kita berusaha menjadi baik, semakin dekatlah kita pada kebaikan.

FreeDream Blogger Template

FreeDream Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	FreeDream Blogger Template
Description	FreeDream is a free blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, minimalist, simple look, geometric motifs and vectorial elements.
Template Author	http://btemplates.com/designer/dreamweaver-gratuit/
Designer	Dreamweaver Gratuit
Instructions URL	How to install Blogger Template

Source : btemplates.com

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 di WordPress.com, pada postingan tersebut ada pertanyaan dari sobat ibnzuhri 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.

Berikut tutorialnya :

• Login ke Wordpess Anda, Klik Appearance > Widgets.
  
• Drag Text ke Sidebar.
  
• Lalu letakkan kode berikut pada area Text.
  <div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='to page down'><img src='URL Icon' /></a></div>
  Ganti URL Icon dengan URL Image, Contoh :
  <div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='to page down'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png' /></a></div>
  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 style="display:scroll;position:fixed;top:300px;left:10px;"><div><a href='#' title='to page up'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png' /></a></div><div><a href='#footer' title='to page down'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png' /></a></div></div>
• Terakhir klik Save.
  

Catatan : Karena setiap template berbeda, ada kemungkinan kode diatas tidak bekerja, namun pada blog wordpress.com saya cara ini sudah berhasil.

Semoga tutorial ini bisa membantu Sobat dalam membuat Tombol To Page Down di WordPress.com

SimpleVideoblog Template

SimpleVideoblog Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	SimpleVideoblog Template
Description	SimpleVideoblog is a free blogger template with 2 columns, right sidebar, gallery-styled, perfect for photologs, minimalist, space for ads, footer columns and posts thumbnails.
Template Author	http://btemplates.com/author/free-blogger-template/
Designer	FBTemplate
Instructions URL	How to install Blogger Template

Source : btemplates.com

HostingPro Blogger Template

HostingPro Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	HostingPro Blogger Template
Description	HostingPro 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.
Template Author	http://btemplates.com/author/pbtemplates/
Designer	PBTemplates
Instructions URL	How to install Blogger Template

Source : btemplates.com

Membuat Tombol di Blog

Membuat Tombol di Blog | Tutorial Blog

Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini.

• Membuat tombol untuk Blogspot :
• Login ke blogger Sobat.
• Untuk membuat tombol di postingan klik Posting > New Post, lalu pilih tab Edit Html.
• Jika Anda ingin menampilkannya di widget klik Design > Page Element > Add a Gadget > HTML/Javascripts.
• Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini)

• Untuk Wordpress.com :
• Login ke dasboard Anda.
• Untuk menampilkan di postingan klik Posts > Add New, lalu pilih tab Html.
• Untuk menampilkan di widget klik Appearance > Widgets, lalu letakkan Text pada sidebar.
• Selanjutnya letakkan kode untuk menampilkan tombol.

Untuk kodenya dapat Sobat lihat dibawah ini :

• kodenya seperti ini :
  <button>Tombol</button>
• Posisi tombol ditengah :
  berikut kodenya :
  <div style="text-align: center;"><button>Tombol</button></div>
• Untuk tombol yang berisi Link berikut kodenya :
  <a href="http://alamatblog.com/"><button>LINK</button></a>
• Untuk membuat tombol berisi link yang akan dibuka ditab baru, cukup tambahkan target="_blank"
  <a href="http://alamatblog.com/" target="_blank"><button>LINK</button></a>

Gimana Sob, mudah kan ?!?

Sepertinya cukup sekian dulu tutorial tentang Membuat Tombol di Blog.

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, berikut kodenya :

• Kode :

  <div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Tulis Text Disini</div> </div> </div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Tulis Text Disini</span></div> </div>
  Hasilnya
  Tulis Text Disini
• Kode :

  <div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <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>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Tulis Text Disini</center></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="border-style:inset;border-width:5pt;border-color:black" align="center">Tulis Text Disini</div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Tulis Text Disini</div></div>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <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>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <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>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <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>
  Hasilnya :
  Tulis Text Disini
• Kode :

  <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>
  Hasilnya :
  Tulis Text Disini

Sepertinya segitu dulu Sob, kalau ada yang mau menambahkan silakan tulis di komentar.

Silakan dicoba dan semoga berhasil...

Kapan Waktu Terbaik Untuk Blogging ?

Waktu Untuk Blogging – Pada dasarnya kita dapat melaksanakan aktifitas blogging sepanjang hari selama kita mampu untuk mengatur dan memilih waktu terbaik. Tidak ada batasan dan tidak ada acuan pasti kapan waktu terbaik bagi kita untuk melaksanakan blogging. Mengapa? Karena pada dasarnya kita sendirilah yang tahu kapan waktu terbaik bagi kita untuk menjalankannya.

Jika melihat statistik kunjungan blog, kebanyakan pembaca blog kita berkunjung pada waktu malam hari. Hal ini bisa diambil kesimpulan jika pada waktu itulah pengunjung banyak beraktifitas blogging termasuk mengurusi blog miliki mereka masing-masing. Lalu, apa kaitannya dengan kita? Ketika banyak pembaca setia kita sedang berkunjung ke blog kita dalam waktu yang bersamaan, kita dapat memanfaatkan waktu tersebut untuk melakukan aktifitas blogging dalam bentuk posting di blog agar di waktu yang sama postingan yang baru saja kita terbitkan tersebut mendapatkan reaksi yang cepat dari para pembaca kita.

Secara umum, beberapa waktu terbaik untuk melakukan aktifitas blogging antara lain sebagai berikut:

1. Malam hari.

Malam hari merupakan waktu terbaik bagi kita untuk melakukan blogging. Seperti yang sudah dijelaskan di atas jika malam hari merupakan waktu di mana banyak orang sedang online, sehingga ketika kita menerbitkan postingan blog maka peluang bagi postingan tersebut untuk dibaca langsung oleh pembaca setia kita akan semakin besar.

2. Fajar.

Saat fajar atau sekitar pukul 05.00 merupakan waktu yang paling baik untuk menulis. Hal ini dikarenakan pikiran kita masih jernih dan lingkungan di sekitar kita pun masih hening dan tidak banyak gangguan. Sehingga, kita akan lebih mudah mendapatkan inspirasi untuk menulis postingan di blog yang kita miliki. Keuntungan lain ketika kita melakukan blogging di fajar hari adalah tersedianya waktu luang yang cukup untuk merumuskan tulisan hingga mengolah dan menghasilkan sebuah tulisan yang bagus.

3. Sore hari.

Sore hari juga merupakan waktu yang pas untuk melakukan aktifitas blogging. Alasannya, saat itu kita memiliki waktu yang cukup untuk menjalankan aktifitas blogging seperti menulis postingan blog hingga blogwalking. Waktu sore hari juga bisa disebut sebagai waktu di mana banyak orang yang sedang melakukan online, sehingga ketika artikel blog kita diterbitkan di waktu sore hari maka diharapkan artikel di blog kita tersebut akan mendapatkan kunjungan yang banyak dari para pembaca setia kita.

Selain dari manfaat waktu luang yang cukup, kegiatan blogging terutama menuliskan postingan blog di sore hari juga bermanfaat ketika kita ingin menuliskan pengalaman yang kita alami selama sehari yang sudah kita lewati tersebut. Kita tentu dapat mengingat lebih detail tentang apa yang sudah kita alami dan apa yang kita tuliskan. Misalnya, pada jam 10.00 kita mengalami momen menarik berupa pengalaman menanam pohon di pekarangan rumah. Ketika kita menulis sebuah postingan blog berdasarkan pengalaman tersebut di sore hari kita akan lebih mudah mengingat detail pengalaman tersebut seperti di mana lokasinya, siapa saja yang bersama kita, apa jenis pohonnya, hingga bagaimana proses penanaman tersebut dilakukan.

Kita sebagai seorang blogger tentu memiliki waktu terbaik bagi kita dalam menjalankan aktifitas blogging. Selain bermanfaat bagi kita, aktifitas blogging kita yang sudah diketahui oleh pambaca kita juga akan bermanfaat bagi mereka. Misalnya, pembaca kita akan tahu kapan waktu bagi kita untuk melakukan aktifitas blogging berupa menerbitkan postingan blog berdasarkan kebiasaan kita. Entah itu pagi, siang, sore, atau malam hari.

Kita juga jangan sampai terpaku oleh jadwal waktu terbaik yang kita miliki. Karena kita dapat melakukan aktifitas blogging kapanpun selama kita mau dan mampu. Jangan jadikan blogging sebagai beban, tetapi jadikanlah blogging sebagai aktifitas yang bermanfaat dan menyenangkan.

Mengganti Tampilan Thread Comment

Mengganti Tampilan Thread Comment | Tutorial Blog

Postingan ini Lanjutan dari Menampilkan Thread Comment pada Custom Template, jika Sobat sudah berhasil Menampilkan Thread Comments biasanya tampilannya polos tanpa variasi. Pada postingan kali ini kita akan meng-edit css Thread Comment agar tampilannya seperti gambar berikut.

Caranya cukup mudah Sob, Sobat cukup menghapus kode css komentar di template Anda, lalu ganti dengan kode berikut :

Kode :

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #dddddd;
border-top-color: #eeeeee;
border-left-color: #eeeeee;
color: #333333 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #eeeeee;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );
background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #0099ff;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#bbddff;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#225577; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #eeeeee;
    border: thin solid #dddddd;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #dddddd;
border-top-color: #eeeeee;
border-left-color: #eeeeee;
color: #333333 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #eeeeee;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );
background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .continue a:hover {
text-decoration: none; background:#fff; border:1px solid #0099ff;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.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;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

Jika sudah selesai Simpan template Anda dan lihat hasilnya.

Sekian artikel kali ini, Semoga Anda berhasil Mengganti Tampilan Thread Comment.

HomeDesign Blogger Template

HomeDesign Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	HomeDesign Blogger Template
Description	HomeDesign is a free blogger template with 2 columns, right sidebar, rounded corners, exclusive design for Blogger, slideshow and social icons.
Template Author	http://www.deluxetemplates.net
Designer	Deluxe Templates
Instructions URL	How to install Blogger Template

Source : btemplates.com

Menampilkan Thread Comment pada Custom Template

Menampilkan Thread Comment pada Custom Template | Tutorial Blog

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.

Pada postingan kali ini saya akan membuat tutorial tentang cara Menampilkan Thread Comments 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.

Berikut cara Menampilkan Thread Comment pada Custom Template :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode <b:include data='post' name='comments'/>, pada template saya kode tersebut ada 4 dan saya ganti semua dengan kode berikut :
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
• Terakhir klik Save / Simpan Template.
  

Silakan dicoba Sob, semoga Anda berhasil Menampilkan Thread Comment pada Custom Template.