Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Kamis, 01 November 2012

Cara Membuat Permalink Blogspot di Bawah Postingan


Hai.. Kamu Klik Posting lagi nih, sudah lama yah saya tidak membahas tentang tutorial blog, yap kali ini saya akan memposting tentang tutorial blog. Kali ini saya akan memposing tentang Cara Membuat Permalink Blogspot, uda pada tau belum apa itu permalink ?
seperti ini nih, seperti yang biasanya kamu lihat pada dibawah postingan Kamu Klik:



Gimana ? Tertarik untuk menambahakannya ke blog kamu ?
Okelah langsung saja ikuti cara-caranya dibawah ini:
  • Log in ke account blogspotmu.
  • Pilih Template (Template  ›  Edit HTML) Lalu centang 'Expand Template Widget'
  • Selanjutnya, cari kode ]]></b:skin> (Gunakan fungsi ctrl + f atau fungsi find untuk mempermudah menemukan kode tersebut). Setelah itu, copy kemudian paste kode berwarna biru di bawah ini di atas kode ]]></b:skin>
.permalinkblogspot
{border: 0px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.permalinkblogspot a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}
  • Lalu, cari kode ini <data:post.body/> (Gunakan bantuan fungsi find ctrl + f). Kalau sudah ketemu, kamu hapus dan ganti kode tersebut dengan kode di bawah ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>

<div class='permalinkblogspot'>
<center>
<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: rgb(221, 242, 252); text-align: left;'><img align='absmiddle' height='30px' src='http://img685.imageshack.us/img685/3018/satpam.gif' width='30px'/><b><medium>Tolong dibaca nih gan !</medium></b><br/><br/><small><div style='text-align:justify;'> Kamu sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan kamu bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.</div></small></div></center></div>
<b:else/>
<p><data:post.body/></p>
</b:if>
  • Lalu Save Template, dan lihat hasilnya.
Namun, jika kapten menggunakan read more maka <data:post.body/> akan ada dua. Maka kamu perlu menambahkan kode permalink di tengah-tengahnya seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<div class='permalinkblogspot'>
<center>
<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: rgb(221, 242, 252); text-align: left;'><img align='absmiddle' height='30px' src='http://img685.imageshack.us/img685/3018/satpam.gif' width='30px'/><b><medium>Tolong dibaca nih gan !</medium></b><br/><br/><small><div style='text-align:justify;'> Kamu sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan kamu bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya.</div></small></div></center></div>

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>
Save template dan lihat hasilnya :)

Gimana ? Mudah kan ? hehe..
Postingannya sampai disini saja, nantikan postingan Kamu Klik selanjutnya. salam :D
    Unknown Blogger
    Minggu, 26 Februari 2012

    Pesan Selamat Datang diblog Kamu

    Pernah gak mengunjungi blog, lalu muncul pesan seperti menyambutmu. Yap, pesan selamat datang.. Ucapan selamat datang karna kamu sudah mengunjungi blog tersebut..


    Kamu Klik kali ini bakal ngasih tau, gimana sih biar ada pesan selamat datang kaya begitu ? Caranya mudah koq, kamu tinggal memsang scriptnya saja dibagian edit HTML.

    Untuk cara-caranya, silakan ikuti langkah-langkahnya dibawah ini:
    • Login Ke Blogger.
    • Klik Tata Letak.
    • Klik Edit HTML.
    • Kemudian Cari Kode <head> (Untuk mempermudah pencarian, gunakan CTRL + F) lalu Copy dan paste kode berikut di atasnya.

      <SCRIPT language='JavaScript'>alert("Selamat Datang");</SCRIPT>
    • Tulisan Selamat Datang yang berwarna merah bisa kamu ganti atau divariasi sesuai keinginan kamu, misal: Selamat Datang diblog saya, semoga kamu betah :)
    • Kalo sudah, tinggal Simpan Template :)
    Silakan mencoba, dan semoga pengunjung semakin betah diblog kamu :)
    Unknown Blogger

    Pasang Widget Berlangganan Artikel Keren

    Kemarin-kemarin Kamu Klik posting tentang Pasang Widget Keren Stay Connect (Social Bookmark dan Berlangganan). Widget Stay Connect merupakan widget berlangganan artikel, akan tetapi digabung dengan button sosial bookmark. Naah.. widget yang satu ini juga sama, yakni widget berlangganan artikel. Tapi tampilannya cukup cantik, gak monoton seperti widget berlangganan artikel bawaan blogger. Mau tau seperti apa widgetnya ? Seperti ini nih:



    Cantik kan ? hehe..

    Untuk caranya, silakan disimak cara memasang widget berlanggan artikel keren pada blog:
    • Login ke Blogger
    • Klik Tambahkan Gadget "Add a Gadget/Tambah Gadget"
       
    • Pilih yang HTML/JavaScript Tambah
    • Paste kode dibawah ini

      <style>    .knetwork-email{
          background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
          width:300px;
          padding:10px 0 0 55px;
          float:left;
          font-size:1.4em;
          font-weight:bold;
          margin:0 0 10px 0;
          color:#686B6C;
          }
          .knetwork-emailsubmit{
          background:#9B9895;
          cursor:pointer;
          color:#fff;
          border:none;
          padding:3px;
          text-shadow:0 -1px 1px rgba(0,0,0,0.25);
          -moz-border-radius:6px;
          -webkit-border-radius:6px;
          border-radius:6px;
          font:12px sans-serif;
          }
          .knetwork-emailsubmit:hover{
          background:#E98313;
          }
          .textarea{
          padding:2px;
          margin:6px 2px 6px 2px;
          background:#f9f9f9;
          border:1px solid #ccc;
          resize:none;
          box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
          -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
          -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
          width:170px;
          color:#666;}
          </style>
          <div class="knetwork-email">
          Subscribe via Email
          <form action="http://feedburner.google.com/fb/a/mailverify?uri=kamu-klik" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kamu-klik', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
          <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
          <input type="hidden" value="Kamu Klik™" name="uri"/><input type="hidden" name="loc" value="en_US"/>
          <input class="knetwork-emailsubmit" value="Submit" type="submit" />
          </form>
          </div>
    • Lalu Simpan, dan lihat hasilnya :)

    KETERANGAN
    1. Sekarang ganti http://feedburner.google.com/fb/a/mailverify?uri=kamu-klik dengan Feedburner Feed kamu Link Email. kamu bisa mendapatkannya dengan mengunjungi account feedburner kemudian arahkan ke Publikasikan dan kemudian ke Email Subscriptions.
    2. Ganti Kamu Klik™ dengan judul feed kamu. Ini muncul di akhir link feed kamu. http://feedburner.google.com/fb/a/mailverify?uri=kamu-klik 
    Selamat mencoba :)
    Unknown Blogger

    Cara Membuat Link Menjadi Huruf Miring Ketika Disorot Mouse

    Postingan kali ini sih sepele aja, mungkin banyak yang uda tau, tapi postingan tentang tutorial blog ini dikhususkan buat yang belum tau aja. Cara Membuat Link menjadi Huruf Miring Ketika disorot Mouse - yap, itu yang bakal Kamu Klik bahas pada postingan kali ini.


    Salah satu cara untuk mempercantik blog kita, dengan memvariasi bentuk link ketika disorot mouse. Naah.. lalu bagaimana cara link blog kita menjadi huruf miring ketika disorot mouse ? Untuk itu silakan ikuti cara-caranya dibawah.

    Berikut cara agar link blog kita menjadi huruf miring ketika disorot mouse:
    • Masuk ke akun Blogger Anda.
    • Klik Rancangan > Edit HTML.
    • Klik Download Template Lengkap untuk membuat back-up template. Hal ini berguna kalau kita ingin mengembalikan template seperti semula jika ada kesalahan dalam pengeditan.
    • Cari kode yang mirip dengan kode di bawah ini yaitu kode yang mengandung a:hover.

      a:hover {
      color:#5588AA;
      text-decoration:underline;
      }
    • Tambahkan kode font-style:italic; sehingga hasilnya menjadi seperti di bawah ini.

      a:hover {
      color:#5588AA;
      text-decoration:underline;
      font-style:italic;
      }
    • Klik tombol SIMPAN TEMPLATE.
    • Selesai dan lihat link text yang ada di blog kamu.
    Mudah kan ? silakan mencoba :D
      Unknown Blogger
      Minggu, 19 Februari 2012

      Cara Membuat Navigasi Nomer Halaman Blog

      Navigasi Nomor Halaman pada Blog, yap.. itu yang akan Kamu Klik share pada postingan kali ini.
      Navigasi Nomor Halaman pada Blog atau yang biasa yang disebut Page Number adalah urutan nomor-nomor halaman pada blog kita. Tampilan Page number yang bakal Kamu Klik share seperti ini sob:

      Gimana tampilannya ? Tentunya navigasi halaman bernomer atau page number ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada.
      Buat kamu yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. wkwk..
      Bagaimana cara membuat navigasi nomer halaman blog di blogger?
      Yuk langsung saja ikuti tutorialnya dibawah ini:
      • Login ke blog kamu  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan kalo terjadi error gitu, tapi yaa gak bakal koq.
      • Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>

        .showpageArea a {
        text-decoration:underline;
        }
        .showpageNum a {
        text-decoration:none;
        border: 1px solid #cccccc;
        margin:0 3px;
        padding:3px;
        }
        .showpageNum a:hover {
        border: 1px solid #cccccc;
        background-color:#cccccc;
        }
        .showpagePoint {
        color:#333;
        text-decoration:none;
        border: 1px solid #cccccc;
        background: #cccccc;
        margin:0 3px;
        padding:3px;
        }
        .showpageOf {
        text-decoration:none;
        padding:3px;
        margin: 0 3px 0 0;
        }
        .showpage a {
        text-decoration:none;
        border: 1px solid #cccccc;
        padding:3px;
        }
        .showpage a:hover {
        text-decoration:none;
        }
        .showpageNum a:link,.showpage a:link {
        text-decoration:none;
        color:#333333;
        }

      • Langkah selanjutnya kamu cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

        <!--Page Navigasi-->
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <script type='text/javascript'>
        var pageCount=6;
        var displayPageNum=5;
        var upPageWord =&#39;Previous&#39;;
        var downPageWord =&#39;Next&#39;;
        </script>
        <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
        </b:if>
        </b:if>
        <!--Page Navigasi -->


        Keterangan: Kamu bebas mengubah tulisan yang saya kasih warna merah, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya Previous untuk kembali kehalaman sebelumnya.
      • Simpan template dan lihat hasilnya :).
      Gampang banget kan ? Naah sekian tutor blog cara membuat Navigasi Nomor Halaman pada Blog ini.. sapai jumpa di tutor blog berikutnya :) salam..
      Unknown Blogger

      Membuat Fitur Reply Thread Comment Keren

      Setelah kamu membaca postingan Kamu Klik sebelumnya, yakni Cara Mudah Mengaktifkan Fitur Thread Comments Blogspot semoga saja kamu sudah berhasil mengaktifkan fitur thread comment diblog kamu. Akan tetapi tampilannya masih sangat sederhana dan simple. Naah.. Untuk mempercantik atau memperindah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Agar hasilnya jadi seperti gambar dibawah ini:


      Lalu bagaimana caranya biar tampilan Thread Comment'y gak monoton, agar tampilannya berubah seperti gambar diatas ? Keren bukan ? yuk, Silakan ikuti langkah-langkah dibawah ini:
      • Pertama login ke blog kamu > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
      • Cari kode CSS Comment yang lama, kalau CSS punya Kamu Klik sih seperti dibawah ini.

        #comments h4 {
        color:#666666;
        font-weight:normal;
        letter-spacing:0.2em;
        line-height:1.4em;
        margin:1em 0;
        font-size:14px;
        text-transform:none;
        }
        #comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
        #blog-pager-newer-link {
        float:left;
        }


        Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu

      • Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah diatas kode ]]></b:skin> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.)

        #comments h4{font-size:24px; font-weight:normal; margin:20px 0}
        .cm_wrap {clear:both; margin-bottom:10px; float:right; width:100%;}
        .cm_head{margin:0; width:70px; float:left}
        .cm_avatar{margin:0; vertical-align:middle; border: 1px solid #DDD; padding:3px; background:white; 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,#eee),color-stop(1,#ccc)); ; background:-moz-linear-gradient(center top,#eee 20%,#ccc 100%); }
        .cm_entry{padding:16px; background:#F7F7F7; border:1px solid #E4E4E4; overflow:hidden}
        .cm_arrow{display:block; width:9px; height:18px; background:url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat; position:absolute; margin-left:-25px}
        .cm_info{margin-bottom:5px}
        .cm_name{font-weight:bold; font-size:12px; float:left}
        .cm_date{font-size:10px; float:right; font-style:italic; color:#CCC}
        .cm_entry p{margin:0; font-size:13px; color:#666}
        .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}


      • Setelah itu kamu cari kode </body>, setelah itu pastekan kode dibawah diatas kode </body>

        <script type="text/javascript" src="http://najib.googlecode.com/files/threaded%20comment.js"></script>

      • Kemudian kamu cari kode <b:includable id='comments' var='post'> , Hapus kode antara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> (kode yang berwarna biru yang harus didelete)

        Contoh :

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

        ------------ sebagian kode yang harus didelete -------------------

        <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>
        </b:includable>

      • Lalu Paste kode berikut ini diantara kode  <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah.

        <div class='comments' id='comments'>      <a name='comments'/>
              <b:if cond='data:post.allowComments'>
                    <h4>
                         <b:if cond='data:post.numComments &gt; 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>
               
                    <div class='cm_pagenavi' id='cm_page'></div>
               
                    <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'/>
                                        <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='&quot;https://www.blogger.com/comment.g?blogID=ID BLOG KAMU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>Reply</a>
                                            </div>
                                        </div>


                                        <div class='cm_entry'>
                                            <span class='cm_arrow'></span>
                                            <div class='cm_info'>
                                                <div class='cm_name'>
                                                    <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>
                                                </div>
                                                <div class='cm_date'>
                                                    <data:comment.timestamp/>
                                                    <b:include data='comment' name='commentDeleteIcon'/>
                                                </div>
                                                <div class='clear'/>                                
                                            </div>
                                       
                                            <p><data:comment.body/></p>
                                        </div>
                                    </div>
                                </div>
                            </b:if>          
                 </b:loop>
                    </div>


                    <div class='cm_pagenavi' id='cm_page_copy'></div>
               
                <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>
      • Sehingga hasilnya Jadi seperti ini :

        <b:includable id='comments' var='post'>     <div class='comments' id='comments'>
              <a name='comments'/>
              <b:if cond='data:post.allowComments'>
                    <h4>
                         <b:if cond='data:post.numComments &gt; 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>
              
                    <div class='cm_pagenavi' id='cm_page'></div>
              
                    <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'/>
                                        <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='&quot;https://www.blogger.com/comment.g?blogID=ID BLOG KAMU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>Reply</a>
                                            </div>
                                        </div>


                                        <div class='cm_entry'>
                                            <span class='cm_arrow'></span>
                                            <div class='cm_info'>
                                                <div class='cm_name'>
                                                    <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>
                                                </div>
                                                <div class='cm_date'>
                                                    <data:comment.timestamp/>
                                                    <b:include data='comment' name='commentDeleteIcon'/>
                                                </div>
                                                <div class='clear'/>                               
                                            </div>
                                      
                                            <p><data:comment.body/></p>
                                        </div>
                                    </div>
                                </div>
                            </b:if>         
                 </b:loop>
                    </div>


                    <div class='cm_pagenavi' id='cm_page_copy'></div>
              
                <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>
            </b:includable>

        Keterangan:
        - Ganti Tulisan ID BLOG KAMU dengan ID blog kamu, misal:  3867899460670236687 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.


      • Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^
      Hmm.. mungkin agak rumit yaa pemirsa.. tapi yaa itulah yang saya ketahui. Selamat mencoba dan semoga berhasil yah kawan :D
      Unknown Blogger

      Cara Mudah Mengaktifkan Fitur Thread Comments Blogspot

      Pada postingan kali ini Kamu Klik akan membahas tentang thread comments atau komentar dengan reply sudah mulai dikenalkan di blogspot. Selain membahasnya Kamu Klik juga bakal ngasih tau cara mengaktifkannya, buat yang make custom template kadang gak ada thread comments ini.


      Apa itu thread comment ? Thread comments adalah fitur terbaru dari blogger/blogspot. Fungsingya adalah membuat komentar pada postingan berulir dan lebih menarik di bandingkan fitur komentar sebelumnya.
      System Thread Comments ini belum diterapkan bebas di Custom Template, dan saat ini otomatis berlaku bagi tampilan dynamic views kamu. Template bawaan dari Blogger support thread comments ini. Tapi sebenarnya meski kamu menggunakan template custom, maka thread comment ini sudah aktif, tapi cuman pada tampilan hape/mobile. Coba Anda masukkan ?m=1 pada belakang URL postingan Anda. Halaman blog Anda akan ditampilkan secara sederhana gaya mobile dan thread comments ini bisa digunakan. Lalu bagaimana cara mengaktifkannya agar thread comments ini bekerja pada custom template blog kamu ? Silakan ikuti langkah-langkahnya dibawah ini:
      • Agar reply/thread comments bekerja kamu cuman perlu ubah feed kamu menjadi penuh. Untuk mengaturnya silahkan pergi ke Settings - Other, pada Allow Blog Feed pilih Full

      • Pada pilihan tampilan komentar, pilih Embed. Untuk mengaturnya silahkan pergi ke bagian Settings - Posts And Comments, pada Comment Location pilih Embedded.


      • Jangan lupa simpan, lalu lihat hasilnya.
      Bagimana mudah kan ? Eiiits.. jangan kemana-mana dulu.. Ada lagi cara yang kedua, yakni pada Edit HTML. Akan tetapi kalau thread comments sudah aktif hanya dengan cara diatas, kamu tidak perlu pake cara yang kedua ini.
      Okelah langsung saja saya kasih tau cara yang kedua ini, yakni dengan cara mengaktifkannya pada Edit HTML. Berikut Cara-caranya:
      • Pertama tentu anda harus mengaktifkan pengaturan komentar anda, ke halaman setting > Comments. Pilih show dan Embedded below post untuk Comment Form Placement
      • Kedua jangan lupa backup templates untuk menjaga hal yang tidak di inginkan.
      • Buka halaman Design > Edit HTML > centang expand widgets templates
      • Cari kode <b:include data='post' name='comments'/>. Kira kira kodenya seperti di bawah ini.

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
        </b:if>

         
      • Jika sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini.

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
        <b:else/>
        <b:include data='post' name='comments'/>
        </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
        <b:else/>
        <b:include data='post' name='comments'/>
        </b:if>
        </b:if>

         
      • Lalu kamu Simpan template dan lihat hasilnya.
      Naah.. sudah selesai.. cukup sekian yaa.. oh iya, nantikan postingan Kamu Klik selanjutnya mengenai Fitur Thread Comments ini yaa :D
      Unknown Blogger
      Sabtu, 18 Februari 2012

      Cara Memasang Widget Floating Share Melayang (Twitter, Facebook, dan Google +1)

      Pada kesempatan yang baik ini saya bakal ngebahas apa itu widget floating share melayang.. wuidiih.. emang bisa melayang bro ? yaa bisa laah.. selain ngebahas tentang widget floating share melayang, Kamu Klik juga bakal ngasih kode-kodenya dan cara-cara pemasangannya..
      Apa sih floating itu ? Floating adalah sebuah menu yang posisinya absolute dan selalu tampil di tengah-tengah atau melayang, Floating ini juga terkadang mengikuti scroll dari browser. Ya sesuai dengan variasinya lah :D hehe..
      Jadi yang bakal kita jadiin floating adalah Widget Share (Twitter, Facebook, dan Google +1).
      Nanti di blogmu bakal nampak seperti gambar dibawah:


      Lalu bagaimana cara pemasangannya ?
      Okelah, langsung disimak aja pemasangannya. Silakan ikuti langkah-langkahnya sebagai berikut:
      • Seperti biasa kamu harus Login ke dashboard blogger kamu.
      • Pilih Rancangan > Elemen Laman > Add gadget/Tambah Gadget > Pilih yang HTML/JavaScript.
      • Copy script dibawah ini, Lalu pastekan pada gadget

        <style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px;  }  #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; }  .fb_share_count_top {width:52px !important;}  .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}  .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style>     <div id="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0">   <tr> <td style="padding:5px 0px 0px 0;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER KAMU" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> </tr>  <tr> <td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;">  <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>  <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#000;" href="http://kamu-klik.blogspot.com/2012/02/widget-floating-share-melayang.html"><blink>Get This</blink></a></p></td></tr></table></div></div>

        Keterangan:
        • Untuk teks yang berwarna merah, silakan ubah/ganti sesuai keinginan kamu.
          -70px : Ini adalah ukuran, dimana biasanya menyesuaikan lebar konten. jadi kamu bisa mengubahnya apabila widget floating share melayang ini malah menutupi postingan. misalnya dari yang -70px menjadi -110px. pokoknya agar posisi widget ini pas.
          NAMA TWITTER KAMU : Ubah pake nama twitter kamu atau twitter blog kamu ^^
      • Setelah dipaste, lalu kamu save/simpan tanpa judul.
      • Dan lihat hasilnya..
      Bagaimana ? cukup mudah bukan ? hehe..
      Semoga postingan ini bermanfaat, dan widgetnya bisa mempercantik blog kamu :) salam..