Cara Membuat Kotak Centang Di Blog

   Kotak centang ini berfungsi untuk mempermudah anda dalam membuat tutorial, tapi tutorial ini lebih spesipik artinya tidak umum lebih kepada perorangan, dan tidak dipakai oleh banyak orang, daripada penasaran lihat dulu demonya dibawah ini:

Tutorial apa yang anda suka di blog ini?

Template Blogger Gratis
Tutorial Blog
Gaya Hidup
Informasi
Komputer
Lainnya

Kode dasarnya seperti ini (anda simpan kode dibawah ini didalam HTML postingan) :

<input type="checkbox">

Untuk mengembangkannya seperti pada demo di atas gunakan kode ini:

Tutorial apa yang anda suka di blog ini?<br />
<br />
<input type="checkbox" />Template Blogger Gratis<br />
<input type="checkbox" />Tutorial Blog<br />
<input type="checkbox" />Gaya Hidup<br />
<input type="checkbox" />Informasi<br />
<input type="checkbox" />Komputer<br />
<input type="checkbox" />Lainnya<br />

Thread Comment Sederhana Keren !!

  Oke sobat mummyz kali ini saya mau memberikan Thread Comment Sederhana ..
Sederhana bukan berarti jelek .. Thread Comment ini pas banget buat kalian yang suka dengan yang simple-simple .. untuk anda yang ingin melihat DEMO nya kalian bisa lihat gambar di bawah ini ..

Gimana simple kan ?? jika kalian ingin menerapkan nya pada blog sobat ,kalian bisa ikuti tutorial di bawah ini .

1. Masuk ke Blogger
2. Klik Template > Edit HTML .
3. Cari kode ]]</b:skin> gunakan CTRL+F untuk memudahkan pencarian kode!
4. Jika sudah ketemu letakan kode di bawah ini tepat di atas kode ]]</b:skin>

/*-- Mummz Threaded Comments  --*/ 
.comments {      clear: both;      margin-top: 10px;      margin-bottom: 0px;      line-height: 1em;    }    .comments .comments-content {    font-size: 12px;    margin-bottom: 16px;    font-weight: normal;    text-align:left;    line-height: 1.4em;    }    .comments .comment .comment-actions 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;    padding:2px 8px; margin-right:10px;    }    .comments .comment .comment-actions a:hover {    text-decoration: none; background:#fff; border:1px solid #5AB1E2;    }    .comments .comments-content .comment-thread ol {      list-style-type: none;      padding: 0;      text-align: none;    }    .comments .comments-content .inline-thread {      padding: 0.5em 1em;    }    .comments .comments-content .comment-thread {      margin: 8px 0px;    }    .comments .comments-content .comment-thread:empty {      display: none;    }    .comments .comments-content .comment-replies {      margin-top: 1em;      margin-left: 40px;   font-size:12px; background:#EBF5FE;    }    .comments .comments-content .comment {      margin-bottom:16px;      padding-bottom:8px;
    }    .comments .comments-content .comment:first-child {      padding-top:16px;    }    .comments .comments-content .comment:last-child {      border-bottom:0;      padding-bottom:0;    }    .comments .comments-content .comment-body {      position:relative;    }    .comments .comments-content .user {      font-style:normal;      font-weight:bold;    }    .comments .comments-content .user a {    color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;    }    .comments .comments-content .icon.blog-author {      width: 18px;      height: 18px;      display: inline-block;      margin: 0 0 -4px 6px;    }    .comments .comments-content .datetime {    color: #999999;    float: right;    font-size: 11px;    text-decoration: none;    }    .comments .comments-content,    .comments .comments-content .comment-content {      margin:0 0 8px;    }
    .comment-header {background-color: #F4F4F4;        border: thin solid #E6E6E6;        margin-bottom: 5px;        padding: 5px;    }    .comments .comments-content .comment-content {      text-align:none;    }    .comments .comments-content .owner-actions {      position:absolute;      right:0;      top:0;    }    .comments .comments-replybox {      border: none;      height: 250px;      width: 100%;    }    .comments .comment-replybox-single {      margin-top: 5px;      margin-left: 48px;    }    .comments .comment-replybox-thread {      margin-top: 5px;    }    .comments .comments-content .loadmore a {      display: block;      padding: 10px 16px;      text-align: center;    }    .comments .thread-toggle {      cursor: pointer;      display: inline-block;    }    .comments .continue {      cursor: pointer;    }    .comments .continue 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;    padding:2px 8px; margin-right:10px;    }    .comments .comments-content .loadmore {      cursor: pointer;      max-height: 3em;      margin-top: 3em;    }    .comments .comments-content .loadmore.loaded {      max-height: 0px;      opacity: 0;      overflow: hidden;    }    .comments .thread-chrome.thread-collapsed {      display: none;    }    .comments .thread-toggle {      display: inline-block;    }    .comments .thread-toggle .thread-arrow {      display: inline-block;      height: 6px;      width: 7px;      overflow: visible;      margin: 0.3em;      padding-right: 4px;    }    .comments .thread-expanded .thread-arrow {      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;    }    .comments .thread-collapsed .thread-arrow {      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;    }    .comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;    border: 1px solid #DDDDDD;}    .comments .avatar-image-container img {      width: 36px;    }    .comments .comment-block {      margin-left: 48px;      position: relative;    }
    /* Responsive styles. */    @media screen and (max-device-width: 480px) {      .comments .comments-content .comment-replies {        margin-left: 0;      }    }
    /*------------- Mummyz Threaded Comments  -------------*/

      5.Simpan Template ..

Dan coba lihat hasil nya .. :D
Semoga artikel kali ini bermanfaat untuk kalian semua .. Ingat jika kalian ingin menyebar luaskan artikel ini sertakan sumber !

Membuat Pesan Formulir Komentar Keren Dengan Css

 

Hai, sob !!

How are you ??

Setelah saya memposting info tentang Cara Membuat Blog Menjadi Dofollow , kali ini saya akan mempostkan info tentang Cara Membuat Pesan Formulir Komentar Keren Dengan Css.

Ok Berikut Langkah-Langkahnya :

1. Buka Dasbor Blog Kalian.
2. Klik Template -> Edit HTML -> Centang "Expand Template Widget".
3. Cari Kode ]]></b:skin> . Kemudian Pastekan Kode ini diatas kode tadi.

#threaded-comment-form p {
position: relative;
background: #0060FF;
border: 5px solid #FFF;
padding: 10px;
font-size: 13px;
line-height: 1.6em;
color: #FFF;
margin-top: 30px;
}
#threaded-comment-form p::after, #threaded-comment-form p::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#threaded-comment-form p::before {
border-top-color: #38F;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#threaded-comment-form p::after {
border-top-color: #0060FF;
border-width: 9px;
left: 10%;
margin-left: -30px
}

Sisanya Kalian EDIT Sendiri Yaa !

     4.  Setelah Itu Cari Kode Yang Seperti Ini

<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='500' id='comment-editor' name='comment-editor' src='' width='100%'/>

 Perhatian ! : Kode Yang Warna Hijau Itu Biasanya ada 2-3 . Tapi Cukup cari Kode yang Berada dibawah <b:else/>

    5. Setelah Ketemua Kalian Ganti Dengan Kode dibawah Ini

 <b:else/>
<div id='threaded-comment-form'>
      <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='500' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

   6. Terakhir ! SIMPAN TEMPLATE / SAVE TEMPLATE