Cara memasang Breadcrumb diblog

Seperti apa yang saya ketahui dan sudah saya pasang seperti blog saya ini yang dimaksud dengan Breadcrumb Navigation adalah menu navigasi ataupun sebagi petunjuk arah halaman yang sedang dikunjungi yang berisi berupa link horisontal diatas blog yang sudah diatur sedemikian rupa sesuai dengan label yang dipasang/diatur dipostingan kita sebelumnya, biasanya link ini terpasang berurutan mulai dari menu Home >> Label >> Sub Label>>Judul Halaman Yang Sedang Dibuka, tujuannya untuk mempermudah dan memberikan informasi kepada pengunjung posisi halaman yang sedang dibuka sekarang, disamping itu akan mempermudah juga untuk kembali kehalaman Home/Beranda, adapun cara memasang Breadcrumb diblog sebagai berikut  :

  1. Sign in Ke blogger .
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari Kode ]]></b:skin> (biar lebih gampang gunakan tombol CTRL+F.)
  7. Kemudian copy dan paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>

  8. /* Breadcrumbs
    ----------------------------------------------- */
    .breadcrumbs {
    padding:5px 5px 5px 0px; 
    margin: 0px 0px 15px 0px; 
    font-size:95%; line-height: 1.4em; 
    border-bottom:3px double #e6e4e3;
    }

  9. Kemudian cari kode <b:includable id='main' var='top'> (biar lebih gampang gunakan tombol CTRL+F.)
  10. Jika sudah ketemu, ganti code <b:includable id='main' var='top'> dengan code dibawah ini

  11. <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
    &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/>


  12. Klik Pratinjau untuk melihat kesalahan dan apabila sudah tidak ada masalah klik Simpan

  13. Demikianlah postingan saya kali ini tentang cara memasang breadcrumb diblog, semoga bermanfaat.

Cara membuat kotak komentar diblog

Pada halaman terakhir blog sering kita jumpai box/kotak yang berisikan tulisan “Tulis komentar disini”, yang artinya setiap pengunjung bisa memberikan komentar atas kunjungannya di blog tersebut, kolom komentar biasanya sudah disediakan pada masing-masing tempelate, namun oleh kalangan blogger sering didesign ataupun diganti tampilannya sedemikian rupa sehingga tampilan blog lebih menarik, adapun cara menganti box/kotak komentar sebagai berikut:


  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> atau (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)
  7. Copy dan paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>
  8. Klik Pratinjau utnuk melihat apabila ada kesalahan dan selanjutnya klik Simpan

  9.  /* CSS Komentar */
    #form-wrapper {margin-top:20px;}
    #comments{overflow:hidden;}
    .comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
    #comments h4{display:block;padding:5px;line-height:30px}
    #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
    #comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
    #comments h4,.comments .user a{font-size:14px}
    #comments h4{font-weight:normal;color:#fff}
    #comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
    border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
    h4#comment-post-message {display:none}
    #comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
    .comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
    .comments .comments-content .comment:first-child {padding-top: 0px;}
    .comments .thread-toggle { display: none;}
    .comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
    .comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
    .comment-thread{color:rgb(230, 230, 230); font-size:13px;}
    .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: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
    .comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
    .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
    .comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
    .comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
    .comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
    .comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
    .comments .comments-content .comment-thread {margin: 20px 0px;}
    .comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
    .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 rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
    .comments .comment-thread.inline-thread .comment{width:auto}
    .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, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
    font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
    text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
    .comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
    .comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
    .comments .comments-content .loadmore {margin-top:0px;}
    .comment .continue{display:none}
    #comment-editor{width:103%!important;}
    .comment-form{width:100%;max-width:100%;margin-top:20px;}

    Demikian postingan saya kali ini mudah – mudahan bisa bermanfaat