Cara Membuat Jumlah Komentar Bersebelahan dengan Readmore

Assalamu'alaikum blogger Indonesia. Bagaimana kabar anda. Saya harap anda baik baik saja. Kali ini saya ingin update artikel nih. Dulu ane sudah kasih tutorial Cara Membuat Iklan Anda Melayang versi 2, nah kali ini saya akan kasih anda tutorial Cara Membuat Jumlah Komentar Berada di Sebelah Readmore ala Ngeblog Suka-Suka.

Nah, langsung saja. Ikuti langkah-langkahnya di bawah ini :

1. Login ke blogger.com dengan akun anda
2. Masuk ke Tab Rancangan / Tata Letak
3. Click Edit Html
4. Jangan lupa, centang Expand Template Widget ( ada di sebelah kanan atas )
5. Setelah itu, click CTRL + F dan masukkan kode ini » <data:post.body/>
6. Setelah itu, masukkan kode di bawah ini setelah kode di atas :
   

   <span class='rmlink'><a class='readmore' expr:href='data:post.url'>Read More</a></span>
   <span class='data-komentar-link' style='Float:right;'>
             <b:if cond='data:post.allowComments'>
               <a class='data-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
   1 <data:commentLabel/>
   <b:else/>
   <data:post.numComments/> <data:commentLabelPlural/>
   </b:if></a>
             </b:if>
   </span>

7. Kalau di blog saya keseluruhan seperti ini :
   

   <div class='post-header-line-1'/>
   <div class='post-body'>
   <style>.fullpost{display:none;}</style>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
   <span class='rmlink'><a class='readmore' expr:href='data:post.url'>Read More</a></span>
   <span class='data-komentar-link' style='Float:right;'>
             <b:if cond='data:post.allowComments'>
               <a class='data-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
   1 <data:commentLabel/>
   <b:else/>
   <data:post.numComments/> <data:commentLabelPlural/>
   </b:if></a>
             </b:if>
   </span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   </b:if>    
   <div style='clear: both;'/>
   </div>

8. Setelah itu click lagi CTRL + F dan masukkan kode » ]]></b:skin>
9. Setelah itu masukkan kode di bawah ini di atas kode barusan :
   

   /* COMMENT ATAS READ MORE DATA
   ============================================================== */
   
   .rmlink a {
   color:#ffffff;
   text-decoration: none;
   float:right;
   font-family:Arial;
   padding:2px 4px 2px 4px;
   font-size: 12px;
   font-weight: bold;
   background: #fff;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   }
   .rmlink a:hover {
   color:#ffffff;
   text-decoration: none;
   background: #198dc9;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   }
   .reetwitt a {
   color:#ffffff;
   text-decoration: none;
   float:right;
   font-family:Arial;
   padding:2px 4px 2px 4px;
   font-size: 12px;
   font-weight: bold;
   background:transparent;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   margin-top:18px;
   margin-right:5px;
   }
   .data-komentar-link a {
   color:#ffffff;
   text-decoration: none;
   float:right;
   font-family:Arial;
   padding:2px 4px 2px 4px;
   font-size: 12px;
   font-weight: bold;
   background: #fff;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   margin-top:18px;
   margin-right:5px;
   }
   .data-komentar-link a:hover {
   text-decoration: none;
   color:#ffffff;
   background: #198dc9;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   }
   .readmore {margin-top:18px;border:none;}

10. Setelah itu click Simpan
11. Selesai deh.

Selamat mencoba. Semoga berhasil :D