Bebas: Edit Template

Tampilkan postingan dengan label Edit Template. Tampilkan semua postingan

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Diposting oleh Unknown Label: Blogging, Edit Template

Kebutuhan kolom atau lapak widget dalam menunjang tampilan Blog setiap Blogger berbeda-beda. Ada yang butuh dengan kolom widget di bawah header, ada juga yang tidak memerlukanya. Ada yang yang memerlukan kolom widget di bagian bawah Blog, ada juga yang tidak memerlukanya. Perbedaan kebutuhan kolom widget juga terdapat pada jumlahnya. Ada yang butuh 1 kolom, 2 kolom, atau pun 3 kolom. Memang hal seperti ini mudah diatasi jika menggunakan widget bawaan blogspot, karena kita dapat menambah atau menambah jumlah kolom widget yang diperlukan.
Tapi bagaimana dengan kolom widget pada template yang bukan bawaan blogspot? Bagaimana jika pada widget tersebut tidak menyediakan kolom atau jumlah kolom widget yang sobat butuhkan. Sebenarnya pasti ada cara untuk menambah kolom widget tersebut, tentunya dengan sedikit Edit HTML. Para Blogger yang membahas Tutorial Blogging pun sudah banyak yang mengulasnya.

Contohnya saya pada kesempatan kali ini akan membahas kolom widget yang berada di bawah posting Blog. Biasanya kolom widget pada posisi ini hanya tersedia 1 kolom saja, bagaimana dengan milik sobat? Tidak jarang para Blogger yang membutuhkan 2 kolom widget pada posisi ini. Maka dari itu saya akan memberi salah satu cara Membuat 2 Kolom Widget di Bawah Posting Blog. Berikut langkah-langkahnya:

1. Login ke akun Blogger sobat.
2. Pada halaman dashboard, sobat masuk ke halaman Template dan klik Edit HTML.
3. Cari kode seperti berikut, fokuskan untuk mencari kode #main-wrapper, atau #main-wpr. Perlu diketahui kode elemen pada setiap template berbeda-beda.

/* -- Main -- */
a img{border-width:0}
.post-body img{border:0px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:650px;margin:0;padding:0}
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 630px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px}
.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
/* -- End Main -- */

4. Letakan kode berikut tepat di bawah kode di atas yang berwarna merah.

#main {width:650px;float:center;}
#main-left{border:1px solid #000000;padding:10px;width: 300px;float:left;}
#main-right{border:1px solid #000000;padding:10px;width: 300px;float:right;}

Hasilnya kira-kira akan menjadi seperti ini.

#main-wrapper{float:left;width:650px;margin:0;padding:0}
#main {width650px;float:center;}
#main-left{border:1px solid #000000;padding:10px;width: 300px;float:left;}
#main-right{border:1px solid #000000;padding:10px;width: 300px;float:right;}

Sobat ubah kode 650px dengan ukuran lebar Main bar Blog sobat.
Dan ubah kode 300px pada #main-left dengan ukuran lebar kolom widget kiri yang sobat inginkan, kode 300px pada #main-right dengan ukuran lebar kolom widget kanan yang sobat inginkan.
Sobat juga bisa mengubah kode 1px dengan lebar border yang sobat inginkan, dan kode #000000 dengan warna border yang sobat inginkan.

5. Kemudian cari kode seperti berikut, fokuskan mencari kode <div id='main-wrapper'> atau <div id='main-wpr'>. Perlu diketahui bahwa kode elemen setiap Template berbeda-beda.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

6. Tambahkan kode berwarna biru berikut pada kode di atas tadi sehingga hasilnya menjadi seperti berikut.

<div id='main-wrapper'>
<div id='main'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main-left' id='main-left' style='width: 300px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 300px; float: right;'>
</b:section>
</div>
</div>

Ubah ukuran width sesuai dengan lebar kolom widget kanan/kiri yang sebelumnya telah sobat tentukan.

7. Klik Simpan Template, dan silakan lihat hasilnya.

Jika berhasil, maka akan muncul 2 Kolom Widget di Bawah Posting Blog.

0 komentar »

Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu

Diposting oleh Unknown Label: Blogging, Edit Template

Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu ini memiliki alasan tertentu. Seperti ketika sebuah widget sekiranya tidak perlu ditampilkan di halaman konten, agar pengunjung fokus dalam membaca artikel blog sobat. Atau karena memang widget perlu ditampilkan pada halaman tertentu untuk kebutuhan pengunjung blog, dan dihilangkan karena pada halama lain terlalu banyak memuat widget. Atau apalah alasanya masih banyak lagi.
Tidak seperti artikel kemarin yang bisa dibilang memiliki fungsi menampilkan kolom widget atau sederetan widget hanya tampil pada halaman tertentu. Untuk yang akan saya bahas kali ini hanya melibatkan satu buah widget saja.
OK, kita mulai pada langkah-langkahnya.
1. Login ke akun Blogger sobat.
2. Pastikan sobat telah memasang widget yang akan sobat tampilkan pada halaman tertentu saja.
3. Ketahuilah widget id-nya, dengan cara masuk Tata Letak>> Sentuhkan cursor di tulisan Edit pada widget terkait>> perhatikan tulisan di sudut kiri bawah layar monitor, terdapat nama widget id.

Disini saya mencontohkan pada widget terjemahan. Perhatikan gambar diatas, telah diketahui nama widget id-nya adalah Translate1.
4. Setelah widget id diketahui, selanjutnya sobat masuk ke bagian Template>> Edit HTML.
5. Template perlu di-expand. Karena telah tidak ada opsi "expand template widget", maka beginilah cara meng-expand-nya. Cari widget-id terkait dengan tombol ctrl+F, lalu perhatikan terdapat kode <widget>...</widget>. Klik pada bagian "titik-titik" diantar kode tersebut. Lalu akan terdapat kode <b:includable>...</b:includable>, klik juga pada bagian "titik-titik" diantar kode tersebut.

6. Pilihlah letak halaman yang sobat inginkan, simak kode-kode berikut.

Menampilkan widget hanya pada HomePage.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
................................................................................................................................................</b:if>

Menampilkan widget di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
................................................................................................................................................</b:if>

Menampilkan widget hanya pada halaman Archive.

<b:if cond='data:blog.pageType == "archive"'>
................................................................................................................................................</b:if>

Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != "archive"'>
................................................................................................................................................</b:if>

Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == "item"'>
................................................................................................................................................</b:if>

Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != "item"'>
................................................................................................................................................</b:if>

Menampilkan widget hanya di halaman tertentu.

<b:if cond='data:blog.pageType == "urlhalamantertentu"'>
................................................................................................................................................</b:if>

kode berwarna biru ubah dengan url halaman

Menampilkan widget di semua halaman kecuali halaman tertentu.

<b:if cond='data:blog.pageType != "urlhalamantertentu"'>
................................................................................................................................................</b:if>

kode berwarna biru ubah dengan url halaman

7. Terapkan salah satu kode diatas sesuai dengan letak halaman yang sobat inginkan.
Saya akan mencontohkan penerapan kode yang pertama, pada widget terjemahan yang sebelumnya telah diketahui widget id-nya dan di-expand template widget-nya.
Letakan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah kode <b:includable id='main'>, dan kode </b:if> di atas kode </b:includable>. Sehingga kurang lebih hasilnya akan seperti berikut.

          <b:widget id='Translate1' locked='false' title='Translate' type='Translate'>
            <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div id='google_translate_element'/>
<script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: '<data:pageLanguage/>',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
      }, 'google_translate_element');
    }
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
<b:include name='quickedit'/>
</b:if>
</b:includable>
          </b:widget>

8. Jika telah selesai menerapkan kode-kodenya, silakan klik Simpan Template.

Maka hasilnya akan seperti berikut.
Pada HomePage widget terjemahan ditampilkan.

Sedangakan pada halaman lain widget terjemahan tidak ditampilkan.

0 komentar »

Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu

Diposting oleh Unknown Label: Blogging, Edit Template

Rasanya saya sudah jarang membuat posting baru pada blog tercinta ini. Hari ini saya mengunjungi Blog teman dan melihat kolom widget yang berubah tampilan ketika beralih dari satu halaman ke halaman lain. Saya pun tertarik untuk mengetahui cara membuatnya, coba diterapkan pada Blog saya, dan membuat posting tentang hal tersebut.
Ternyata agak sulit dalam membuat perubahan kolom widget yang memuat sederetan widget ini, tidak semudah pada satu buah widget. Namun akhirnya akan mengerti dan mudah menerapkanya jika sobat teliti dalam menyimak tutorialnya. Perubahan widget yang saya maksud ini sering disebut tampilan template dinamis, bisa dikatakan perubahan tampilan dan jumlah kolom widget. Namun pengertian tadi tentunya sebagian sobat Blogger masih belum memahaminya dengan jelas.
OK, saya contohkan sebuah kasus.
Mungkin sobat pernah melihat sebuah Blog, pada homepage blog tersebut menampilkan 3 kolom widget yaitu kolom posts, sidebar kanan, dan sidebar kiri. Namun ketika sobat beralih pada salah satu halaman posting, sidebar kiri menghilang. Sehingga hanya terdapat kolom posts dan sidebar kanan. Bagusnya lagi kolom posts bertambah lebar hingga tidak ada ruang kosong di sebelah kiri.

OK, sangat berguna ya jika ada sederetan widget yang tidak perlu ditampilkan ketika pengunjung membaca artikel di Blog sobat. Sebenarnya mudah untuk menerapkan hal ini, sobat hanya perlu menambahkan kode yang tidak terlalu banyak pada template blog yang bisa dikatakan berfungsi sebagai sebuah perintah.

Langsung saja kita menuju ke langkah-langkah penerapnya:
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Template dan klik Edit Template.
3. Dengan tombol ctrl+F, cari kode ]]></b:skin> dan perhatikan kode-kode diatasnya yang cukup banyak. Default-nya (sebelum sobat menambah kode CC tambahan) tepat diatas kode ]]></b:skin> terdapat kode-kode CSS kolom widget, kurang lebih seperti berikut.

/* -- Main -- */
#main-wrapper{float:left;width:650px;margin:0;padding:0}
/* -- End Main -- */

/* -- Sidebar -- */
#sidebar-kiri {float:left;width:230px;display:inline;margin:0;}
#sidebar-wrapper{float:right;width:320px;display:inline;margin:0;}
/* -- End Sidebar -- */

Sobat harus memahami elemen-elemen kolom widget seperti yang saya beri tanda berwarna merah diatas, dan mengetahui elemen-elemen kolom widget pada template Blog sobat. Karena kode-kode elemen pada setiap template biasanya memiliki penulisan yang berbeda-beda.

Sekarang kita belajar membuat sebuah kode untuk perintah membuat kolom widget berbeda.

Perintah letak perubahan.

Perintah untuk merubah halaman homepage saja.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Perintah untuk merubah semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Perintah untuk merubah halaman posting saja

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

Perintah untuk merubah semua halaman kecuali halaman posting.

<b:if cond='data:blog.pageType != "item"'>

Perintah untuk merubah sebuah halaman tertentu saja

<b:if cond='data:blog.pageType == "url-halaman"'>

Perintah untuk merubah semua halaman kecuali sebuah halaman tertentu.

<b:if cond='data:blog.pageType != "url-halaman"'>

#Pilihlah perintah mana yang sobat perlukan.

Selanjtnya sobat membuat kode dengan urutan: keterangan penambahan CSS, perintah letak perubahan, elemen yang akan diedit dan kode perubahan tampilan, akhiri dengan </b:if> dan </style>.
Untuk elemen yang akan diedit dan kode perubahan tampilan khususnya jika sobat akan merubah tampilan kolom posts, agar lebih kompleks copy paste dahulu dari kode tampilan elemen asalnya. Karena kolom tidak hanya memuat posting saja, juga memuat comments dan lain-lain. Jika ini tidak dilakukan, maka kemungkinan sobat hanya merubah tampilan posting sedangkan tampilan comments tidak, sehingga hasilnya akan berantakan.

Perhatikan contoh pembuatan kode-nya.

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
a img{border-width:0}
.post-body img{border:1px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:420px;margin:0;padding:0}
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 400px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px;border: 1px solid #ccc;}
.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
</b:if>
<b:if cond='data:blog.pageType == "item"'>
#Sidebar-kiri { display:none;}
</b:if>
</style>

Keterangan:
warna biru, keterangan penambahan CSS
warna hitam, perintah letak perubahan
warna merah, elemen yang akan diedit dan kode perubahan tampilan

Kode diatas jika diartikan sederhananya seperti ini.

<style type='text/css'> --- Saya menambahkan perintah baru
<b:if cond='data:blog.url == data:blog.homepageUrl'> --- Pada halaman homepage
a img{border-width:0}
.post-body img{border:1px solid #ccc;margin:5px}
#main-wrapper a:hover{color:#c13a10;text-decoration:underline}
a:link,a:visited,#main .post-body a:link,#main .post-body a:visited{color:#346ba4;text-decoration:none}
a:hover,#main .post-body a:hover{color:#999;}
#main-wrapper a:link,#main-wrapper a:visited{text-decoration:none}
#main-wrapper{float:left;width:420px;margin:0;padding:0} --- Lebar konten menjadi 420px
.post h3 a:hover{color:#A91B33;text-decoration:none}
.post-body{line-height:1.6em;margin:0;text-align: justify;}
.post img{padding:5px}
.post h2, .post h2 a {color: #444;font-family: Arial;font-weight: 400;margin: 0 0 5px;padding: 10px 0 0;}
.post blockquote{border-left:3px solid #DDD;margin:5px 0 5px 10px;padding:0 10px;color:#888;text-align:left;}
.post blockquote p{margin:0;padding:0 0 15px}
.post,.comments{background:#FFF top no-repeat;float:left;border-bottom:1px solid #DDD;width: 400px;margin:0 0 10px;padding-left:10px;padding-right:10px;padding-bottom:10px;border: 1px solid #ccc;} --- Lebar comments menjadi 400px
.post h3,.post h3 a {color:#444;font-size:17px;font-family:Georgia, Tiles New Roman;font-weight:400;margin:0 0 5px;padding:10px 0 0}
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> --- pada semua halaman kecuali homepage
#sidebar-kiri {display:none;} --- sidebari-kiri jangan ditampilkan
</b:if>
</style> --- selesai

OK, silakan sobat memulai pembuatan kode perintah perubahan tampilan kolom widget sesuai dengan yang sobat butuhkan, tentunya dengan cara yang telah saya jelaskan diatas.
Untuk kode perubahan tampilan, saya hanya bisa mencontohkan sedikit saja. Sobat bisa membuat perubahan tampilan yang lebih bagus lagi. Selain menghilangkan dan merubah ukuran widget, juga bisa merubah warna-warna, jenis font, gaya border dan lain-lain. Silakan sobat cari tau lagi lebih banyak tentang kode tersebut.

4. Selanjutnya, letakan kode yang baru sobat buat tepat di bawah kode ]]></b:skin>.
5. Jika kode telah dibuat dan diletakan pada template sobat, silakan klik Simpan Template.

Selesai, pembahasan saya kali ini mungkin agak berbelit-belit. Saya hanya berdoa semoga sobat mengerti dan sukses diterapkan pada Blog sobat.

Contoh/screenshot hasil dari Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu dengan cara diatas.

Homepage, terdapat tiga kolom widget termasuk sidebar kiri.

Namun pada halaman posting, sidebar kiri menghilang dan kolom posts bertambah lebar.

0 komentar »

Cara Membuat Kolom Widget di Bawah Header Blog

Diposting oleh Unknown Label: Blogging, Edit Template

Template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat hanya tersedia satu kolom sedangkan sobat membutuhkan yang tiga kolom? Tenang, bisa sobat buat dengan cara ini.

Kolom widget di bawah header ini bisa dibuat dengan mudah. Jumlahnya bisa 1, 2, atau 3 pilih sesuai keinginan sobat, atau mau pasang ketiga-tiganya juga tidak apa-apa. Untuk ukuran juga bisa diatur dengan mudah jika sobat ingin mengganti ukuran yang saya tetapkan.
Oke, tak usah panjang lebar. Mari sobat simak langkah-langkahnya.

Cara Membuat Kolom Widget di Bawah Header pada Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Cari kode ]]></b:skin>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode ]]></b:skin>.

#underheader { clear:both; } .underheader-widget {
padding:0px 10px 10px 10px; }

5. Kemudian cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <div id='main-wrapper'>. Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda dengan kode elemen yang saya contohkan.
6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'>.

Satu Kolom Widget.

Dua Kolom Widget.

Tiga Kolom Widget.

#Keterangan, untuk ukuran sobat bisa ubah pada nilai "width".

7. Klik simpan, selesai dan sobat lihat hasilnya.
Contoh hasil pemasangan dua kolom widget.

0 komentar »

Cara Membuat Kolom Widget di Bawah Blog

Diposting oleh Unknown Label: Blogging, Edit Template

Cara Membuat Kolom Widget Baru di Bawah Blog

Ada kalanya sobat Blogger membutuhkan kolom widget baru untuk Blog sobat yang posisi, ukuran dan jumlahnya sesuai dengan keinginan sobat.
Kali ini saya dapat masalah, yaitu kolom widget pada blog saya tersedia sebanyak 3 kolom. Sedangkan saya membutuhkan kolom baru yang menyediakan 2 kolom untuk widget.
Setelah saya cari cara untuk menambahkan kolom widget akhirnya cara tersebut ditemukan.
Berikut Cara Membuat Kolom Widget Baru di Bawah Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Klik Edit HTML.
4. Centang "Expand Template Widget".
5. Cari kode ]]></b:skin>.
6. Masukan kode berikut di atas kode ]]></b:skin>.

#footer-column-container {clear:both;
}
.footer-column {padding: 10px;
}

7. Cari kode <div id='footer'> atau kode <div id='footer-wrapper'> atau kode <div id='credits'>.
8. Letakan kode berikut dibawah kode <div id='footer'> atau <div id='footer-wrapper'>. Untuk alternatif, letakan kode berikut diatas/dibawah kode <div id='credits'>. (dengan cara ini, kolom widget akan terdapat dibawah footer).

Untuk 1 kolom Widget

Untuk 2 kolom widget

Untuk 3 Kolom Widget

9. Klik simpan dan selesai, sobat lihat hasilnya.
Contoh hasil pembuatan 2 kolom Widget.

Sekarang sobat dapat menambahkan widget pada kolom yang baru dibuat.

0 komentar »

Cara Membuat Threaded Comment pada Blog

Diposting oleh Unknown Label: Blogging, Edit Template

Ada kalanya sobat ingin berkomentar pada komentar lain di Blog. Namun sulit untuk menandakan bahwa sobat melakukan komentar pada komentar lain. Nah, dengan Threaded Comment ini sobat bisa mengatasi masalah tersebut. Pada sebagian Template Blogspot Threaded Comment ini sudah tersedia. Namun ada juga template yang belum menyediakan Threaded Comment ini.

Threaded Comment di Blog menandakan bahwa komentar yang mengomentari komentar lain. Posisinya berada tepat di bawah komentar yang dikomentari. Bagi si pemilik blog Bagaimana membuat dan menyediakan Threaded Comment di Blog-nya?
Berikut cara membuat/menyediakan Threaded Comment di Blog.

Tanpa Edit HTML

Download/Backup dahulu seluruh element template sobat untuk antisipasi kegagalan.
1. Login ke akun Blogger sobat.
2. Masuk ke menu Template.
3. Pilih edit HTML.
4. Klik "Kembalikan Ttemplate Widget ke Default".

5. Klik Simpan Template.
Selesai, sekarang Threaded Comment telah tersedia di Blog sobat.

Peringatan
Cara ini akan memnghapus beberapa HTML dari Template yang digunakan. Jadi, amankan dulu HTML dengan cara Cadangkan HTML dan unduh HTML, atau pilih dahulu pratinjau sebelum menyimpan template untuk menghindari hal yang tidak diinginkan.

Dengan edit HTML.

Download/Backup dahulu seluruh element template sobat untuk antisipasi kegagalan.
1. Masuk ke Akun Blogger sobat.
2. Masuk menu Template.
3. Pilih Edit HTML.
4. Cari kode <b:include data='post' name='comments'/> dengan menggunakan tombol ctrl+F.
5. Hapus dan ganti kode tersebut 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>

6. Kllik Simpan Template.
Selesai, Threaded Comment telah tersedia pada Blog sobat.

catatan
Sobat akan menemukan beberapa kode <b:include data='post' name='comments'/>, hapus dan ganti semua kode tersebut.

Jika sobat ingin memakai threaded comment yang agak berbeda seperti ini, berikut caranya:

Download/Backup dahulu seluruh element template sobat untuk antisipasi kegagalan.

1. Login ke akun Blogger sobat.
2. Masuk pada menu template.
3. Klik Edit Template.
4. Cari kode ]]></b:skin> dan letakan kode berikut tepat diatas kode ]]></b:skin>.

/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !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: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHuPGYrDMSvgNfUlcJHigdQsoLljipa_n4h39AR9-uM-a3ZnEN70bfE4ccM5wRTzUCXiBFDJ6MYkfS05DXMiJW3Pu8nwWi-pRFA8nhLr8NTaerke9u7uWBjEddbin8gBGJ2S0rKPCDGUc/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}

.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

5. Cari kode </body> dan letakan kode berikut diatas kode </body>.

6. Cari kode berikut dan ganti kode yang agak panjang diantara 2 kode berikut.

<b:includable id='comments' var='post'>

Kode yang harus di ganti

</b:includable>

7. Ganti dengan kode berikut.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>

        <div id='cm_reply_css'/>

        <div class='cm_pagenavi' id='cm_page'/>

        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>

                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>


<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

</b:if>
</div>

8. Ubah tulisan __BlogID__ dengan Blog ID sobat. Untuk mengrtahui Blog id, perhatikan gambar berikut.

9. Terakhir, klik simpan template.

Alhamdulillah, pembahasan telah selesai. Semoga bermanfaat Sob.

0 komentar »

Bebas

Cara Membuat 2 Kolom Widget di Bawah Posting Blog

Membuat Widget Blog Hanya Tampil Pada Halaman Tertentu

Membuat Tampilan Kolom Widget Blog Berbeda pada Halaman Tertentu

Cara Membuat Kolom Widget di Bawah Header Blog

Cara Membuat Kolom Widget di Bawah Blog

Cara Membuat Threaded Comment pada Blog

Categories

Archives

Live Traffic Feed