Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Cara Mudah Membuat Fitur Threaded Comment Beraliran DoFollow di Blog

Diposting oleh Unknown di 14.15 . Sabtu, 12 April 2014
0 komentar
Label: , , , , , , , , ,
Selamat malam para blogger,,alhamdulillah bisa posting lagi niih..
Kali ini saya mau share masiih tentang tutorial  blog yaitu tentang Cara Mudah Membuat Fitur Threaded Comment Beraliran DoFollow di Blog.  Sebelumnya saya pernah share tentang Cara Membuat Fitur Reply Komentar (Threaded Comment) di Blog yang belum sempat baca di baca dulu yah ^_^

Dalam dunia blogwalking, pasti sobat semua telah tahu bahwa blog dofollow menempati posisi paling atas itu karena backlink yang diperoleh dari blog ini lumayan berkualitas dibanding blog nofollow,dan coba sobat perhatikan pada blog2 dofollow,..begitu banyak kunjungan dan komentar pada blog dofollow yang di karenakan aliran ini sangat disukai oleh mereka pencari backlink,termasuk aku ini hehehe

Sobat Blogger sekalian

Satu yang menjadi kelemahan blog dengan aliran dofollow ini adalah tidak tersedianya fitur repley comment,dimana fitur ini memudahkan kita untuk merepley setiap komen yang masuk,karena bukankah kita ingin bersikap friendly pada visitor kita,..merepley komen visitor kita adalah salah satu cara bagaimana bersikap friendly

Ok sob kita lansung saja tutorialnya,....
  • sobat harus sudah memastikan kalau blog sobat telah dofollow kalau belum silahkan sobat berkunjung juga dihalaman aku yang berjudul Cara Merubah Blog Nofollow Menjadi Blog Dofollow
  • silahkan sobat masuk di halaman edit template pada blog sobat yang akan diaktifkan fitur repleynya
  • seperti biasa klik dulu klik dulu Expand Template Widget, terus sobat copas semua kode template sobat untuk berjaga jaga kalau gagal,....(tapi aku telah mencobanya dan insya Allah pasti berhasil sob),..
  • sobat cari kode ]]></b:skin>
  • sobat copy dan paste kode dibwah ini sebelum kode ]]></b:skin> tadi,..kode seperti ini...
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhue-o_GhlRt-byOwgXe8ZuEDFveXQvVAR3Ce7UaIeHekODF2_y0LsZRwwLT2Tn1OrhAExy3kbbQFAaIwgZlRLNAEHyohfijlLBPUpZs2mR51MSB1uGh4UpixwhwZJZcb9i6RJj2lHNBgM/s1600/author_comment.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;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden}
.cm_entry_a {padding: 16px;background: #FCFCFC;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/AVvXsEilU55PkTZLdD4nMsF0i9vN_9e-foUGn6-V6ZQd8gSvP6qjiKj54tosrqSXdSgZfGI2B19RMuFwJjAL4jSA5nG1HYQhiHJa0jILPW8_Tiu9klT5s0oolihmx6OgZtkKCmPJYg9WbVJm3HA/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: 13px;color: #666666 !important;text-decoration:none;font-weight: bold;float: left}
.cm_name_a {font-size: 13px;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-size: 10px;color: #2D5E7B;text-decoration:none;float: right;
padding-top:5px}
.cm_entry p {padding: 5px;line-height:1.4em;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}
.owner-Body p{margin-bottom: 5px;border: thin solid #E6E6E6;background:#EFF5FB;padding: 5px}


  • setelah itu sobat letakan kode dibawah ini sebelum kode </body> 
<script src=http://miscah.googlecode.com/files/comment-replay.js type=text/javascript/>
  • setelah itu sobat cari lagi kode <b:includable id=comments var=post> kemudian sobat scrool sampai ditemukannya kode penutupnya yaitu kode </b:includable>setelah ditemukan sobat ganti semua kode diantara kode tersebut  dengan kode dibawah 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 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/>
    <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=34718503359036900342&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=600,height=500&quot;); return false;>Reply</a>
    </div>
    </div>

    <div class=cm_entry>
    <span class=cm_arrow/>
    <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>                            
    <b:if cond=data:comment.author == data:post.author>
    <div class=owner-Body>
    <p><data:comment.body/></p>
    </div>
    <b:else/>
    <div class=comment-body>
    <b:if cond=data:comment.isDeleted>
    <span class=deleted-comment><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </div>
    </b:if>

    </div>
    </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>
    </b:includable>
  • di kode tersebut diatas terdapat angka dengan berwarna merah,silahkan sobat ganti dengan blogid sobat
  • setelah sobat simpan perubahan yang sudah dilakukan,...tapi belum selesai sob,...langkah selanjutnya silahkan sobat melakukan pencarian kode rel=nofollow lagi,dan kode ini terdapat pada paket kode threaded comment yang barusan sobat copas tadi,kode tersebut sobat ganti dengan rel=dofollow
  • setelah semuanya selesai silahkan simpan sekali lagi perubahan yang sobat sudah lakukan dan silahkan lihat hasilnya
Nampak blog sobat yang beraliran dofollow tapi tetap memiliki fitur repley atau threaded comment,untuk contoh dari hasil pekerjaan tersebut diatas silahkan sobat berkunjung di halaman Test Repley Comment Blog Dofollow,karena siapa tau saja sobat masih ragu.

Demikianlah Cara Mudah Membuat Fitur Threaded Comment Beraliran DoFollow di Blog. semoga juga bisa memberi manfaat untuk sobat blogger sekalian.
Happy Blogging ^_^

source: http://fathur-1433.blogspot.com/2012/10/cara-mengaktifkan-threaded-comment-pada.html 

Read More..

Petak Umpet Isi Posting Blog di Blogspot

Diposting oleh Unknown di 16.00 . Rabu, 13 November 2013
0 komentar
Label: , , , , , ,
Jelas, saya bukan orang pertama yang menulis ini. Toh saya juga mendapatkannya dari banyak tempat yang tentu sudah kita kenal sebelumnya. Siapa tidak kenal o-om, kang rohman, mas anang, abah iwan, mas fatih dan tentu banyak lagi yang lain yang bisa-bisa penuh blog saya dengan nama guru-guru kita ini. Saran saya sebelum tulisan ini dibaca.. coba tengok dulu tulisan mereka. Saya jamin, tanpa harus kembali kesini, pasti kawan-kawan sudah berhasil. Itu sebabnya judul postingan ini saya buat "renyah" saja, supaya mereka yang terburu-buru butuh tulisan tentang ini, tidak tersangkut disini, dan malah tambah pusing membaca tulisan saya yang "puputeran" alias "mubeng-mubeng".

Sebenarnya istilah yang akan lebih familiar adalah "Cara Membuat Read more di Blogspot/Blogger". Bahasa yang salah tapi apa mau dikata, itu sudah jadi kaprah. Jadi saya juga ikut menerima. Sebenarnya kata "read more" digunakan oleh Wordpress untuk dijadikan hyperlink menuju tulisan secara utuh. Karena pada dasarnya Wordpress membagi tulisan menjadi dua bagian. Anggap "Awal saja" dan "Semuanya". Sayangnya, Blogspot tidak menyediakannya. Jadilah, guru2 kita ini berfikir keras untuk "mengakali" supaya blog kita di blogspot, bisa melakukan hal yang sama dengan wordpress.

Walhasil, muncullah jenis-jenis "readmore" yang bisa kita gunakan. Ada yang sama sekali mirip (dengan wordpress), tapi ada juga yang memanfaatkan model lain. Salah satunya yang sedang saya pergunakan. Yang ditulis di hackosphere.blogspot.com

Saya pilih jenis ini, karena pembaca akan langsung melihat keseluruhan isi posting, tanpa lagi harus me-load halaman baru. Pun, kelemahannya juga ada, yaitu.. tulisan ini tidak benar-benar dibagi dua, tapi hanya disembunyikan sementara, sampai ada yang membukanya. Dan cara ini hanya untuk yang menggunakan templates versi baru. (untuk semuasayangeko, mungkin cara ini tidak terlalu efektif untuk menyembunyikan tulisan dari saya :) )

Jika ingin jenis lain (misalnya yang serupa dengan wordpress) saya anjurkan untuk merujuk ke tulisan kang rohman.

Kita langsung saja...

Langkah Pertama :
  1. Sign in ke blogger (tentu dengan id kita sendiri :) )
  2. Klik Layout
  3. Klik Edit HTML
  4. Ada baiknya (atau malah harus) backup terlebih dahulu dengan men-download template kita, dengan meng-klik Download Full Template jangan lupa beri tanda centang Expand Widget Templates. Simpan baik-baik (Yakinlah.. itu berguna)
  5. Copy-paste kode berikut , tepat sebelum/diatas kode </head> :
    ”<!-- script readmore -->
    <script src=http://eosscript.googlepages.com/Readmore.js type=text/javascript></script>
    <!-- script readmore ends -->

  6. Berikutnya, coba cari kode berikut (warna biru adalah kode asli templates kita):
    ”<b:includable id=post var=post>
    <div class=post uncustomized-post-template expr:id="post-" + data:post.id>
    <a expr:name=data:post.id/>
    <b:if cond=data:post.title>
    <h3 class=post-title>
    <b:if cond=data:post.url>
    <a expr:href=data:post.url><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </h3>
    </b:if>

    <div class=post-header-line-1/>

    <div class=post-body>

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

    <p><data:post.body/></p>

    <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <span id=showlink>
    <p><a href=javascript:void(0); expr:onclick="javascript:showFull("post-" + data:post.id + "");">[+/-] Selengkapnya...</a></p>
    </span>
    <span id=hidelink style=display:none>
    <p><a href=javascript:void(0); expr:onclick="javascript:hideFull("post-" + data:post.id + "");">[+/-] Ringkasan Saja...</a></p>
    </span>
    <script type=text/javascript>
    checkFull("post-" + "<data:post.id/>");
    </script>
    </b:if>

    <div style=clear: both;/> <!-- clear for photos floats -->
    </div>
    (perhatikan) setiap templates, bisa jadi berbeda-beda. Jadi tolong konsentrasi pada warna MERAHnya saja. Misalnya jika kode "post uncustomized-post-template" tidak muncul, itu tidak masalah. Yang penting adalah tambahkan saja kode warna MERAH terhadap kode asli templates anda yang berwarna hitam. Jadi tidak perlu bingung. Patokannya kode HTML yang sedang kita edit ini ada dibawah hirarki
    ”<b:includable id=post var=post>
  7. Kemudian SAVE TEMPLATE
Selesai..?? Belum. Sekarang kita lanjut ke Langkah Kedua :
  1. Klik menu Pengaturan atau Setting (tergantung bahasa yang digunakan)
  2. Klik menu Format/Formatting
  3. Copy-Paste kode berikut pada kolom isian Template posting/Post Template
    ”<span id="fullpost">


    </span>
  4. Klik Simpan Setting/Save Setting
Terakhir adalah Langkah Ketiga yaitu cara posting.
Jadi setiap kali akan menulis, pilih menulis di Edit HTML bukan di Compose, maka akan muncul kode :
”<span id="fullpost">


</span>

Tulisan yang ingin dimunculkan sejak awal/ringkasan, ditulis sebelum/diatas kode <span id="fullpost">. Sisa tulisan keseluruhan.. ketik setelah kode <span id="fullpost">dan sebelum </span>.

Lalu bagaimana jika postingan kita pendek saja? Ya, kita hapus saja kode :
”<span id="fullpost">


</span>

Maka tulisan akan muncul tanpa disertai kode [+/-] Selengkapnya… dan [+/-] Ringkasan Saja…. Kata-kata "selengkapnya" dan "ringkasan saja", bisa kita ganti dengan kata yang lain, dengan meng-edit kode pada Langkah Pertama Poin Ke-6. Cari saja saja kata "Selengkapnya..." dan ganti dengan yang kata lain yang kita suka. Begitu pula untuk kata "Ringkasan Saja...".


#PS:
  • Panjang sekali rupanya... tapi, begitulah sebuah proses belajar. Selamat mencoba (bagi yang belum mencoba)
  • Kejadian lucu dengan om I Ketut Riasmaja mengingatkan saya untuk harus mengoreksi script diatas, tapi sekarang semoga tidak lagi terjadi masalah. Dan supaya tidak kebakaran jenggot. Ingat, Backup itu penting.



Hak cipta gambar "abbey peeking" ada pada kmwithmissbeth.wordpress.com
Read More..