Cara Membuat Breadcrumbs di Blogger/Blogspot

Tutorial kali ini Cara membuat BreadCrumbs Di Blogger Atau Blogspot. BreadCrumbs Adalah Salah Satu Cara Membuat Blog anda Menjadi User Friendly. Jika Anda Belum Memiliki nya Sebaiknya bergegaslah Untuk Memasang BreadCrumbs Pada Blog Anda
Berikut Adalah Gambar BreadCrumbs/Navigasi

Ok. Tak Perlu Banyak basa Basi, Langsung Saja Ke Tutorial

Cara Mebuat BreadCrumbs Pada Blogspot Anda

• Login Ke Blogger Anda
• Click Pada Template
• lalu Click Edit HTML

Click pada gambar Untuk Memperbesar

Click Tepat Pada Panah Kecil Berwarna Hitam Seperti gambar Di atas. Scrol Ke bawah Dan Temukan  ]]></b:skin>
Copy Code Di Bawah ini Tepat Di Atas Pada  ]]></b:skin> 

Click Mouse Kiri Anda Lalu Tekan CTRL+F lalu akan Muncul Kotak pencarian Seperti di bawah ini

Masukkan Code Ini <b:includable id='main' var='top'> Di Dalam Kotak Pencarian, lalu Tekan Enter

Jika Sudah ketemu, ganti Code Tersebut Dengan Code Di bawah ini

     <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'/>

Click save pada template Anda, Dan Liat Hasil nya pada Postingan anda, Selamat Mencoba
Jika Anda Kurang Paham, Bisa Bertanya pada Kotak Commentar Di bawah ini

Cara Menggunakan Editor HTML Di Tampilan Baru Blogger

Sekarang Editor HTML Di Blogger Lebih Menarik Dari Sebelumnya Bahkan Lebih Mudah Di Gunakan Dari Pada Editor HTML yang dulu.
Bandingkan Saja Editor HTML Yang Dulu Dan Sekarang Jika Anda Melakukan Pengeditan Pada Template Anda Dan Anda Melakukan Kesalahan Dalam Pengeditan Maka Editor HTML nya Pun Akan Langsung Menunjukkan Di Mana Letak Kesalahan nya, Keren Bukan !

Sebelum Membaca Lebih jauh Tutorial Cara Menggunakan Editor HTML yang Baru Ini, Sebaiknya Anda Baca Dulu Pada Bagian Di bawah ini, Untuk Lebih Memahami

Apa yang kita lihat sekarang adalah semua kode template dimulai dengan Nomor dan garis berwarna warni yang menunjukkan kepada kita potongan yang berbeda beda pada kode: tag, variabel, properti, dll. tergantung pada HTML, CSS, JavaScript dan bahkan bahasa Blogger - termasuk, b: if dan code code lainnya.

Click Pada gambar untuk memperbesar

Gambar Di atas Adalah Tampilan Editor HTML blogger yang Baru.!

Mulai Sekarang Kita akan lebih mudah untuk menemukan bahwa Ada bug kecil yang membuat kita Stress ketika kita menghilangkan code code atau tanpa sengaja Menambahkan Code Lain Di dalam HTML template kita.  
Ini juga berlaku untuk CSS, yang sebagian besar muncul dengan warna biru kegelapan Untuk Lebih Mudah Membedakan yang Mana CSS Dan yang mana HTML

Bantuan lain yang besar adalah nomor yang muncul di depan setiap fragmen code HTML, sehingga kita dapat dengan mudah menentukan dan memperbaiki Jika anda melakukan kesalahan pada Pengeditan template anda, Sebagai Contoh:
 "Error parsing XML, line 103, column 9: The element ... Bla bla bla"

 

Berikut Tutorial Cara Menggunakan Editor HTML Di Tampilan Baru Blogger

 

1. Cara Melakukan Pencarian Code Di Dalam Template 

  
Bila Anda ingin mencari kode dalam editor HTML anda, klik di dalam editor dan tekan CTRL + F pada keyboard Anda, kemudian masukkan apa yang Anda ingin cari di kotak pencarian yang muncul dalam editor.
Untuk Lebih Jelas Liat Gambar Di bawah ini

Untuk Melakukan Pencarian Tekan ENTER jika Anda Sudah Memasukkan Kata Kunci Di Dalam Kotak Pencarian tersebut. 
Maka Anda Akan Di bawa Ke Element Code HTML yang anda Cari

2. Cara Mudah Mencari Code Widget 

Click Pada Lompat Ke Widget, Lalu Pilih Widget yang Ingin Anda Cari, Liat Gambar Di Atas


3. Mencari Code CSS 

CSS Code Pada Editor HTML yang baru ini Sangat jauh Berbeda Dari Sebelum nya, Code CSS Sekarang Di Lipat / Di Sematkan / Di perpendek
Untuk Lebih Jelas nya Bisa Anda Liat Pada Gambar Di bawah Ini

Jika Anda Click Tombol Hitam Kecil Di Sebelah Nomor Nomor, Maka Akan Muncul Code CSS yang Anda Cari


4. Featur Baru Editor HTML lain nya

Featur Featur baru lain nya adalah 
Jika Dulu Preview Template yang sudah anda edit membuka Halaman baru, Maka sekarang Anda bisa Preview Template di hamalan yang sama tanpa perlu meninggalkan halaman.!
dan Anda dapat dengan mudah kembali ke Editor HTML template Anda dengan mengklik tombol Edit Template.!

Ok, Cukup Sampia Di Sini Saja Cara Menggunakan Featur Terbaru Di Blogger Editor HTML
Jika Anda Kurang Paham Dalam Penjelasan Di Atas, Silahkan Bertanya Di Kotak Commentar

Cara Membuat Lightbox images Di blogger

Apa Itu Lightbox images , Lightbox itu Sejenis Pop Up, tapi Bukan Pop Up, Saudara nya Pop Up kali ya, Kira" Sih gitu. Saya juga Kaga tau, Heeheheh
yang pastinya  Lightbox Images itu Jika Di Click pada Images, Image Akan Tampil Tanpa Harus Membuka Link Pada Gambar Tersebut

Susah eey Jelasin nya, Untuk Lebih Jelas nya Click Aja Pada Images Yang Saya Sediakan Di Bawah Ini

Nah, udah pada paham kan apa itu Lightbox images.

Lightbox images Ini Sangat Cocok untuk Blog Galery, tapi blog Biasa kaya blog Saya Ini Juga Kaga Masalah.!

Terus Bagai mana Cara  Membuat nya ?? 

Cukup Mudah Ko Cara Membuat Lightbox images ini

1. Login Ke blogger Anda, Click Pada Template lalu Click Edit HTML

lalu Letakan CSS Code Di Bawah Ini Di Atas Code ]]></b:skin>

/* Blogger Lightbox Lightbox
----------------------------------------------- */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(url backgroud lightbox ada) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(url tombol close anda) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Save template Anda, Da Liat hasil nya.

Selamat Mencoba !

Cara Membuat Recent Comment Dengan Avatar

Artikel Pertama nih, hehehehe. Pada Arikel Tutorial Pertama ini Saya Akan Share Cara Membuat Recent Comment Dengan Avatar,
Berhubung Ini artikel Pertama blog Nya Masih Baru, jadi Commnet Di Blog Ini Masih Belum Ada Jadi Saya ga bisa Membarikan DEMO gambar

Ok langsung Saja Cara Mebuat Recent Comment Dengan Avatar

1. Login Ke Blogger Anda, Pergi Ke tata Letak

 2. Tambahkan HTML/JavaScript

3. Pastekan Code Di Bawah Ini Di Dalam Widget HTML/JavaScript Tersebut

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}

.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}

.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tutuorialngeblog.googlecode.com/files/recentCommnetAvatar.js"></script>
<script type="text/javascript" src="http://namabloganda.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

 Note:
ganti namabloganda dengan URL blog anda,
Ganti "5" Warna merah, dengan jumlah komentar yang ingin ditampilkan
Untuk mengubah ukuran avatar, ganti angka "60" warna hijau sesuai keinginan anda sendiri

4. Save Dan Lihat Hasilnya