MULTI PASTE

Widget Member yang Aktif Berkomentar

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 6:30 AM with 2 comments

Bismillahirrahmanirrahim

MULTI PASTE - Banyak trik yang dilakukan oleh para master blogger untuk menyihir para pengunjung blog agar selalu datang dan datang lagi serta aktif memberikan komentar terhadap artikel yang dipublikasikan.

Lihat saja screenshot di samping ini. Ini adalah widget daftar member aktif yang terpasang pada blog pada blog ini.

Widget ini di design oleh Taufik Nurrohman dan pertama kali terpasang pada blog DTE :]. Ide membuat widget ini, terbilang brilian, seluruh pengunjung yang pernah memberikan komentar akan ditampilkan dalam widget ini, termasuk count komentar untuk masing-masing visitor akan diperlihatkan saat mose hover yang diarahkan ke gambar profile visitor. Profile image yang ditampilkan sesuai dengan profile yang digunakan saat memberikan komentar. Anda dapat melihat demonya klik tombol demo di bawah ini.

Widget ini dibuat menggunakan javascript dengan memanfaatkan jquery untuk menampilkan profile member serta polesan kode css untuk mempercantik tampilan widget.

Saya coba bertanya ke 'mbah google' untuk mencari tutorial widget ini, eh.. malah diarahkan ke TUTS+ blog milik kang Denddy Gustiana. Cara menggunakan widget ini cukup mudah, Anda hanya perlu membuat sebuah halaman statis dan masukkan kode widget ini ke dalamnya.

Untuk mempublikasikan tutorial widget ini saya sendiri tidak berani, karena belum izin ke Bang Taufik serta tidak etis karena menyangkut licensi dan hak cipta, tapi Anda tidak perlu berkecil hati, karena saya akan menunjukkan link tutorial untuk dapat menggunakan widget ini. Silahkan kunjungi halaman tutorial membuat Daftar Member Aktif yang dibuat oleh Kang Denddy.

Jika Anda sudah berhasil menerapkan widget ini di blog Anda, jangan lupa ucapkan Alhamdulillah dan berterima-kasihlah kepada para master blogger terutama buat Bang Taufik dan Kang Denddy, karena beliu berdua yang telah berjasa mengembangkan widget ini.

Labels: Blogger Gadgets

Menyembunyikan Elemen Komentar Pada Halaman Statis

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 2:58 PM with 8 comments

Bismillahirrahmanirrahim

MULTI PASTE - Halaman Statis biasanya digunakan oleh para blogger untuk menampilkan beberapa widget blogger yang terbilang penting seperti Daftar Isi atau Sitemap, Widget Top Komentator, Hex Color Generator dan sebagainya, yang sebenarnya tidak dibutuhkan adanya elemen komentar.

Seperti halnya halaman posting maka halaman statis secara default juga memiliki elemen komentar, jika Anda termasuk yang memanfaatkan halaman statis untuk menampilkan beberapa widget penting seperti yang saya sebutkan di atas, berikut ini adalah cara menyembunyikan elemen komentar pada halaman statis.

Satu hal yang mesti diingat, jika Anda mengaktifkan halaman exchange atau halaman bertukar link menggunakan halaman statis maka sebaiknya pindahkan halaman exchange Anda ke halaman posting, karena akan tidak relevan jika halaman bertukar link antar sesama bloger tidak memiliki elemen komentar atau halaman lainnya yang memang membutuhkan elemen komentar.

Cara Menyembunyikan Elemen Komentar Pada Halaman Statis

Pada halaman dashboard blogger pilih menu Template, dan jangan lupa untuk melakukan backup Template sebelum melakukan perubahan pada dokumen HTML template.

Klik Template > Edit HTML

Pada halaman editor template cari kode seperti di bawah ini :

<div class='comments' id='comments'>

... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...

</b:includable>

Selanjutnya tambahkan tag kondisional sehingga bentuknya menjadi seperti berikut ini :

<b:if cond='data:blog.pageType != "static_page"'>
<div class='comments' id='comments'>

... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...
... bla ... bla ... bla ...

</b:if>
</b:includable>

Simpan template Anda dan periksa halaman statis Anda, jika elemen komentar berhasil disembunyikan, ucapkan Alhamdulillah, sampai di sini pekerjaan Anda selesai.

Labels: Blogger Tricks

Memperbaiki Comment Message Yang Berada di Bawah Comment Form

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 10:49 AM with 2 comments

Bismillahirrahmanirrahim

MULTI PASTE - Mengganti template blog dengan tujuan untuk penyegaran tampilan, sesekali memang perlu dilakukan.

Satu pengalaman menarik yang akan saya bagikan kepada Anda saat mengganti template blog ini, adalah Comment Message yang berada di bawah Comment Form, seperti screen shoot di samping ini.

Saya menggunakan template Johny Ribet dari Creating Website yang didesign oleh Helmi Arifin para blogger menyebut beliau dengan sebutan MasKolis. Template kreasi MasKolis memang terkenal keren banyak digunakan para blogger dalam dan luar negeri, namun khusus template Johny Ribet, ada sedikit yang mengganjal bagi saya, yaitu elemen komentar pada halaman posting, dimana Comment Message jatuh dan berada di bawah Comment Form.

Sebenarnya ini bukan masalah besar, hanya sedikit menggangu keserasian tata letak, disamping itu Comment Message, biasanya digunakan oleh para blogger untuk menempelkan catatan tentang aturan dan tata cara berkomentar, maka akan terlihat rancu jika posisi ini terbalik di mana Comment Message berada di bawah Comment Form.

Untuk memperbaiki dan menata ulang elemen komentar agar bisa kembali ke jalan yang lurus, maka berikut ini adalah cara memperbaiki posisi Comment Message yang berada di bawah Comment Form

Pada halaman dashboard blogger pilih Template dan sebelum melakukan perubahan pada dokumen HTML Template, backup template Anda terlebih dahulu.

Pilih Template > Edit HTML

Selanjutnya cari kode seperti di bawah ini

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
    </script>
</div>
</b:includable>

Jika sudah ketemu silahkan hapus kode di atas mulai dari kode <b:includable id='threaded-comment-form' var='post'> sampai dengan kode penutup </b:includable> dan ganti dengan kode berikut ini

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
    <b:else/>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
    </script>
</div>
</b:includable>

Selanjutnya cari lagi kode seperti di bawah ini

document.getElementById(domId).insertBefore(replybox, null);

Jika sudah ketemu ganti dengan kode berikut ini

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Simpan template Anda, selanjutnya silahkan perikasa elemen komentar pada salah satu postingan yang sudah pernah dipublish

Sampai di sini pekerjaan Anda selesai, dan jika berhasil jangan lupa ucapkan Alhamdulillah.

Labels: Blogger Tricks

Menggunakan Widget Popular Series

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 10:19 AM with 10 comments

Bismillahirrahmanirrahim

MULTI PASTE - Berikut ini adalah salah satu widget blogger hasil kawin silang antara widget menu accordion dengan widget menampilkan judul posting berdasarkan label.

Widget Popular Series ini akan menampilkan daftar label beserta daftar judul posting terbaru di bawahnya.

Script accordion, saya ambil dari Glossy Accordion Menu design by Dynamic Drive, kemudian saya gabungkan dengan script untuk menampilkan judul posting berdasarkan label. Ada sedikit modifikasi pada kode CSS dari script Glossy Accordion Menu untuk menyesuaikan dengan tampilan footer blog yang berlatar belakang gelap seperti yang dapat Anda lihat pada blog ini.

Cara penerapan Widget Popular Series ini cukup mudah, Anda perlu menambahkan gadget type HTML/Javascript pada Layout blog dan masukkan script Widget Popular Series ke dalamnya. Berikut ini step by step cara menggunakan Widget Popular Series

Pada halaman dashboard blogger pilih menu Layout kemudian tambahkan gadget type HTML/Javascript pada bagian footer dan masukkan script di bawah ini ke dalamnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript" src="http://click-bingo-project.googlecode.com/files/accordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
   headerclass: "submenuheader", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: true, //persist state of opened contents within browser session?
   toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["suffix", "<img src='http://2.bp.blogspot.com/-w2rXmKKoIWw/TyAHgaAoNyI/AAAAAAAAEvo/EQb_qVUputU/s1600/arrow_right.gif' class='statusicon' />", "<img src='http://3.bp.blogspot.com/-DAMBJVFbFmM/TyAHg2YnFAI/AAAAAAAAEvs/n6uvhcqO7V8/s1600/arrow_down.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
       //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
       //do nothing
   }
})
</script>
<style type="text/css">
.glossymenu{
margin: 0 auto;
padding: 0;
width: 300px;
border: none;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: transparent;
font: 12px "Arial", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #f6f6f6;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left:0px;
text-decoration: none;
border-bottom:1px dotted #747676
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: #f6f6f6;
}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background: #222;
}
.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: transparent;
}
.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0 auto;
padding-left: 10px;
}
.glossymenu div.submenu ul li{
border:none;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Arial", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px auto;
}
.glossymenu div.submenu ul li a:hover{
background: #f6f6f6;
colorz: white;
}
</style>
<div class="glossymenu">
<a class="menuitem submenuheader" href="Masukkan URL Label Anda" rel="nofollow">LABEL ANDA</a>
<div class="submenu">
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://www.multipaste.web.id/feeds/posts/summary/-/LABEL ANDA?max-results=4&alt=json-in-script&callback=recentpostslist"></script>
</div>

</div>

Ganti kode yang ditulis dengan warna merah sesuai dengan url label dan nama label milik Anda. Untuk membuat beberapa Daftar Popular Kategori, copy kode yang berwarna biru dan tempelkan di bawahnya sebelum baris kode paling akhir (</div>), lakukan beberapa kali sesuai kebutuhan.

Perhatikan kode yang dibold pada baris pertama, jika sudah terpasang pada template Anda, tidak perlu diambil karena akan meperlambat loading blog.

Simpan gadget dengan menekan tombol Save

Sekarang ucapkan Alhamdulillah karena pekerjaan menambahkan Widget Popular Series pada bagian footer blog Anda telah selesai.

Labels: Blogger Gadgets

Memperbaiki Duplicate Title Tags pada Google Webmaster Tools

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 7:26 PM with 4 comments

Bismillahirrahmanirrahim

MULTI PASTE - Seperti halnya duplicate meta description, maka duplicate title tags pun akan mempengaruhi relevansi pada hasil pencarian di search engine, bahkan halaman Anda bisa dianggap sebagai duplicate content. Tentu ini akan sangat merugikan dari sisi SEO, dan akan berdampak pada rating hasil pencarian oleh search engine sesuai kata kunci yang dimasukaan oleh pengguna.

Duplicate title tags ini dapat Anda lihat melalui Google Webmaster Tools. Silahkan login ke Google Webmaster Tools, masukkan user ID serta password Anda. Kemudian pada halaman dashboard pilih menu Optimization yang berada pada sidebar sebelah kiri dan klik link HTML Improvements. Pada halaman ini akan terdapat parameter yang menunjukan adanya indikasi duplicate title tags yang ditemukan oleh crawler search engine saat merayapi situs atau blog Anda.

Jika link duplicate title tags ini dibuka maka akan terlihat postingan mana saja yang terindikasi sebagai duplicate title tags. Anda dapat melihat dua URL terbentuk untuk setiap postingan jika icon panah warna hitam disebelah kiri postingan ini di expand. Ada satu bentuk URL yang saya sendiri belum mengetahui asal-usulnya, URL ini sama seperti URL postingan pada umumnya namun ada penambahan karakter unik ?m=0 seperti gambar di bawah ini.

Cara Memperbaiki Duplicate Title Tags

Ada beberapa tutorial hasil browsing yang saya temukan untuk memperbaiki duplicate title tags ini di antaranya :

1. Menambahkan rel='canonical'

Jika menggunakan cara ini maka Anda harus menambahkan elemen rel='canonical' pada URL halaman Anda yang terindikasi sebagai duplicate title tags, seperti di bawah ini, pada bagian head postingan dalam mode HTML.

Tentu saja hal ini akan sangat merepotkan jika postingan yang terdeksi sebagai title tags banyak, seperti yang saya alami terdapat 88 duplicate title tags, kemudian harus menambahkannya satu persatu pada setiap halaman tersebut, sungguh ini suatu pekerjaan yang membosankan.

2. Mengatur URL Parameters

Solusi kedua adalah mengatur URL Parameters di Google Webmaster Tools. Pada halaman dashboard, pilih menu Configuration, di bawah menu ini terdapat menu URL Parameters, pilih menu ini dan lihat apakah ada parameter m di dalamnya. Pada bagian parameter m ini klik link Edit di sebelah kanan dan atur setingan menjadi No: Doesn't affect page content (ex: track usage) seperti gambar di bawah ini. Jika Anda tidak menemukan parameter m ini, maka Anda dapat menambahkannya melalui tombol Add parameter.

3. Menambahkan parameter pada robots.txt

Jika kedua cara di atas belum dapat mengatasi duplicate title tags, maka Anda dapat menambahkan baris perintah pada pengaturan parameter robots.txt yang tidak mengizinkan robot mesin pencari untuk mengcrawl url unik yang berakhiran ?m=0, bentuk baris perintah yang ditambahkan pada pengaturan parameter robots.txt adalah seperti di bawah ini

Disallow: /?m=0
Disallow: /?m=1
Disallow: /*/*/*.html?m=0
Disallow: /*/*/*.html?m=1

Atau anda dapat melihat parameter robots.txt yang terpasang pada blog ini, karena saya telah menggabungkan cara kedua dan cara ketiga untuk mengatasi duplicate title tags pada Google Webmaster Tools dan Alhamdulillah berhasil.

Jika Anda punya pengalaman lain, saya mengajak Anda untuk berbagi informasi pada bagian komentar blog ini, agar pengetahuan kita menjadi bertambah, sukses untuk Anda dan happy bloging.

Labels: SEO Blogger

Menambahkan Icon Like pada Komentar Blogspot

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 3:42 PM with 8 comments

Bismillahirrahmanirrahim

MULTI PASTE - Ini adalah salah satu fitur yang cukup menarik untuk ditambahkan pada komentar blogspot yaitu icon like, seperti yang dapat Anda lihat terpasang pada elemen komentar blog ini.

Icon like ini akan menjadikan elemen komentar blogspot menjadi lebih interaktif, pengguna akan dapat saling mendukung terhadap komentar yang diberikan pada sebuah artikel melaui fitur yang satu ini. Secara otomatis count like akan tampil saat mouse pengguna di geser ke arah icon like.

Fitur icon like ini akan kelihatan lebih serasi jika dikombinasikan dengan widget komentar blogspot ala blogger vietnam yang telah di beri aksesoris nomor urut komentar. Ada sedikit penambahan javascript dalam penggunaan widget ini tetapi tidak akan banyak mempengaruhi kecepatan loading blog.

Tidak ada persyaratan khusus dalam penggunaan widget ini kecuali Anda telah mengaktifkan thread comment atau komentar bertingkat. Ikuti langkah implementasi berikut ini untuk menambahkan icon like pada elemen komentar blogspot.

Pada halaman dashboard blogger pilih Template dan sebelum melakukan perubahan, backup template Anda terlebih dahulu

Pilih menu Template > Edit HTML

Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://lh5.googleusercontent.com/-sn9Xay9WiTo/UXo2C6dqStI/AAAAAAAADvk/JPxSUEG7GV0/s10/like.png) no-repeat}

Selanjutnya cari kode seperti ini :

(function() {
var items = <data:post.commentJso/>;

Ganti dengan kode di bawah ini. Catatan, jika Anda sudah pernah melakukan langkah ini karena sudah pernah meenambahkan nomor urut pada komentar blogspot, maka abaikan langkah ini dan lanjutkan ke langkah berikutnya.

var items_copy=[];
(function() {
var items = <data:post.commentJso/>;
items_copy=items;

Berikut cari lagi kode : <data:post.commentHtml/> dan tepat dibawahnya tempatkan script berikut ini

<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>

Simpan perubahan dokumen HTML template Anda dengan menekan tombol Save template

Sekarang ucapkan Alhamdulillah, karena pekerjaan menambahkan icon like pada komentar blogspot telah selesai, dan sekarang silahkan periksa tampilan elemen komentar blog Anda

Labels: Blogger Gadgets, Blogger Tricks

Menambahkan Nomor Urut Pada Komentar Blogspot

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 11:04 AM with 5 comments

Bismillahirrahmanirrahim

MULTI PASTE - Berikut ini adalah cara menambahkan nomor urut pada komentar yang diberikan oleh pengunjung pada setiap postingan. Tampilan nomor urut ini bisa Anda lihat pada bagian komentar blog ini atau cobalah berikan satu komentar pada postingan ini, maka otomatis komentar Anda akan diberi nomor urut.

Nomor urut komentar ini, akan lebih serasi jika dipadu dengan tampilan komentar blogspot ala blogger vietnam, tetapi dapat pula diterapkan pada tema komentar lain yang sudah sering digunakan di blogspot, bentuk dan penempatan tinggal menyesuaikan melalui kode CSS. Jika ingin lebih rame lagi, tambahkan icon like pasti akan kelihatan lebih menyolok.

Berikut ini adalah cara menerapkan dan menambahkan nomor urut komentar pada elemen komentar blogspot.

Pada halaman dashboard blogger pilih Template sebelum melakukan perubahan backup template Anda terlebih dahulu.

Pilih menu Template > Edit HTML

Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#BD5D48;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Untuk menyesuaikan dengan tampilan blog Anda ganti kode warna ini : #BD5D48 dengan kode warna Anda

Selanjutnya cari kode seperti di bawah ini

(function() {
var items = <data:post.commentJso/>;

Ganti dengan kode berikut ini

var items_copy=[];
(function() {
var items = <data:post.commentJso/>;
items_copy=items;

Berikut cari lagi kode : <data:post.commentHtml/> dan tepat dibawahnya tempatkan script berikut ini

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Simpan perubahan dokumen HTML template Anda dengan menekan tombol Save template

Sekarang ucapkan Alhamdulillah, karena pekerjaan menambahkan nomor urut pada komentar blogspot telah selesai, dan sekarang silahkan periksa blog Anda.

Labels: Blogger Gadgets, Blogger Tricks

Komentar Blogspot Ala Blogger Vietnam

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 7:17 AM with 7 comments

Bismillahirrahmanirrahim

MULTI PASTE - Seperti yang dapat Anda lihat pada bagian komentar blog ini, elemen komentar blogspot ini saya ambil dari tutorial yang dirilis oleh Duy Pham seorang blogger vietnam. Tutorial dan cara implementasinya saya posting lagi di blog ini dalam versi Bahasa Indonesia.

Ada beberapa fitur yang menarik dari elemen komentar blogspot yang satu ini, seperti label Author untuk membedakan komentar penulis dengan komentar pengunjung, nomor urut komentar serta tombol like ala facebook.

Tutorial ini akan saya publikasikan dalam tiga postingan yang terpisah, diantaranya kode CSS untuk elemen komentar yang disertai label Author pada komentar penulis, menambahkan nomor urut komentar serta menambahkan tombol like pada elemen komentar.

Syarat utama agar implementasi ini berhasil adalah bahwa Anda telah mengaktifkan Thread Comments atau Komentar Bertingkat. Untuk postingan pertama ini, mari kita mulai menanamkan kode CSS ke dalam dokumen HTML template untuk mendapatkan tampilan komentar blogspot ala bloger vietnam.

Pada halaman dashboard blogger pilih Template sebelum melakukan perubahan backup template Anda terlebih dahulu.

Pilih menu Template > Edit HTML

Perhatikan baris kode seperti ini <b:skin>...</b:skin> perluas kode ini dan cari kode ]]></b:skin>

Tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#BD5D48}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #BD5D48;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#BD5D48}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comments-content .comment-content {text-align:justify;font-size:12px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://lh5.googleusercontent.com/-v9ykkH6XScM/UXR6ao0ZCxI/AAAAAAAADto/xiz6pRWhOsQ/s36/author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Untuk menyesuaikan dengan tampilan blog Anda edit kode warna berikut ini #BD5D48 serta label Author (https://lh5.googleusercontent.com/-v9ykkH6XScM/UXR6ao0ZCxI/AAAAAAAADto/xiz6pRWhOsQ/s36/author.png) dapat Anda buat dengan ukuran 32px X 32px

Simpan perubahan dengan menekan tombol Save Template

Sekarang perikasa blog Anda dan lihat perubahan pada bagian komentar jika berhasil ucapkan Alhamdulillah.

Labels: Blogger Gadgets, Blogger Tricks

Menggunakan Microsoft Translator Widget

Written by : Hairul Rantesigi

Posted on : MULTI PASTE, Updated at: 2:49 PM with No comments

Bismillahirrahmanirrahim

MULTI PASTE - Berikut ini adalah widget translator dari Microsoft, untuk menerjemahkan halaman web ke dalam berbagai bahasa secara real-time. Pengguna dapat melihat halaman Anda dalam bahasa mereka sendiri, tanpa harus pergi secara terpisah ke sebuah situs web penterjemah. Melalui widget ini, pengguna dapat berbagi halaman Anda dengan teman-teman mereka dalam berbagai bahasa.

Widget ini bisa dijadikan salah satu alternatif selain goggle translate atau widget translate dari Gtranslate. Selain tampilannya yang uniq, script Microsof Translator Widget ini lebih ringan, dapat dicustomize menyesuaikan dengan layout blog Anda, baik tampilan warna maupun ukuran. Anda dapat melihat penampakkan widget ini pada side bar blog ini.

Untuk instalasi widget cukup mudah, Anda hanya perlu menambahkan sebuah gadget HTM/javascript dan masukkan script Microsoft Translator Widget yang telah di generated sebelumnya ke dalam content widget, agar lebih terinci berikut cara menambahkan widget ini secara berurutan.

Kunjungi halaman Microsoft Translator Widget

Masukkan URL Address atau alamat situs Anda pada bagian Site Info

Pilih bahasa default yang digunakan oleh blog atau situs Anda

Lakukan pengaturan pada bagian Option, pilih warna yang dinginkan, lebar widget serta opsi translator, sesuaikan dengan layout blog atau situs Anda.

Beri tanda check pada kotak I agree to the Microsoft Translator Terms of Use. Kemudian klik tombol Generate Code.

Login ke blogger dengan ID Anda, pergi ke Layout/Tata Letak dan tambahkan sebuah gadget type HTML/Javascript, kemudian masukkan kode Microsof Translator Widget hasil generate ke dalamnya.