Archive for February 2012

Cara Menambah Efek Gelembung Di Blog

6:12 AM Add Comment
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.

Menu Dropdown dengan Background

12:18 PM Add Comment
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.

Optimasi SEO Menggunakan Anchor Text

12:38 PM Add Comment
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.

Menampilkan Tag Clouds di Blogger

12:11 PM Add Comment
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.
    Menampilkan Tag Clouds di Blogger
  • 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

6:07 AM Add Comment
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.

Optimasi SEO pada Image

12:08 PM Add Comment
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.

Recent Comments Blogger dengan Avatar

12:20 PM Add Comment
Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya saja yang berbeda. 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://kampungblogger.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
    kampungblogger.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.

Menampilkan Smiley Pada Postingan Blogger

7:00 PM Add Comment
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 Menampilkan Smiley Pada Postingan,Menampilkan Smiley Pada Postingan,Menampilkan Smiley Pada Postingan, Smiley, Smiley, Smiley, Smiley 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 :
:DMenampilkan Smiley Pada Postingan:PMenampilkan Smiley Pada Postingan
:)Menampilkan Smiley Pada Postingan;)Menampilkan Smiley Pada Postingan
:-S Menampilkan Smiley Pada Postingan:-B Menampilkan Smiley Pada Postingan
:-h Menampilkan Smiley Pada Postingan:-a Menampilkan Smiley Pada Postingan
:xMenampilkan Smiley Pada Postingan:(Menampilkan Smiley Pada Postingan
:-t Menampilkan Smiley Pada Postingan:-bdMenampilkan Smiley Pada Postingan
:-c Menampilkan Smiley Pada Postingan:-*Menampilkan Smiley Pada Postingan
8-7Menampilkan Smiley Pada Postingan8-|Menampilkan Smiley Pada Postingan
7:PMenampilkan Smiley Pada Postingan=D7Menampilkan Smiley Pada Postingan
8-}Menampilkan Smiley Pada PostinganX(Menampilkan Smiley Pada Postingan
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

12:26 PM Add Comment
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.

Membuat Template Blog Secara Online

6:03 PM Add Comment
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.

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.
  • Profilebrand : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll )
  • Pimp my Profile : Untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya.
  • DoTemplate : 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.
  • CSSEZ : 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.
  • Drupal Theme Generator : 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.
  • Eris Template Generator : 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.
  • Firdamatic : 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.
  • www.maketemplate.com : 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.
  • PsycHo : 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.
  • Templatr : 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.
  • Weebly : 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.
  • WordPress Theme Generator : 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.
Selamat mencoba dan semoga sukses Membuat Template Blog Secara Online.

8 Tanda Blogger Yang Baik

6:02 PM Add Comment
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.

Tombol To Page Down WordPress

10:04 PM Add Comment
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.
    Tombol To Page Down WordPress
  • Drag Text ke Sidebar.
    Tombol To Page Down WordPress
  • 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.
    Tombol To Page Down WordPress
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

Membuat Tombol di Blog

12:31 PM Add Comment
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

9:06 PM Add Comment
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 ?

8:58 AM Add Comment
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

12:16 PM Add Comment
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.

Mengganti Tampilan Thread Comment

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.
Subscribe to: Comments (Atom)