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

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.

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

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.

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.

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.