tutorial blogger,download template blog gratis,kumpulan template,cara membuat blog,seo,template: Blogger

Showing posts with label Blogger. Show all posts

Cara Membuat Search box keren

1. Pertama login ke akun Blogger

2. Lalu buka tab Tata Letak

3. Klik Tambahkan Widget/Add Widget

4. Pilih HTML/Javascript

5. Lalu masukkan kode dibawah ini di textbox

<style>
#abt-search-btn {
background: none repeat scroll 0 0 #1ca4ff;

border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-btn:hover {background: grey;}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 180px;
}
</style>
<a><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder=" Type Here ..."/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
</a>

6. Nanti hasilnya akan menjadi seperti ini

Cara Mudah Mengetahui Jumlah Pengunjung Pada Blog

Pengunjung / Visitor.

Belajar Ngeblog _--_ Halo sobat semua, apa kabarnya nih, jumpa lagi di blog nya blogger pemula. Dalam pertemuan kita kali ini saya akan membagikan satu tutorial blogging yaitu Cara Mudah Mengetahui Jumlah Pengunjung Pada Blog. Buat sobat yang sempat membuka halaman ini dan membaca artikel tutorial blogging ini berarti anda sedang mencari tau atau dengan bahasa kerennya adalah newbie atau blog pemula, sangat lah tepat di blog ini untuk sobat sebab semua tentang info seputar blog tutorial di sinilah tempatnya di http://newblogclub.blogspot.com. Sebelum kita masuk pada penjelasan dari tema kita kali ini, saya akan bercerita sedikit tentang pengalaman saya dalam dunia blogging. Terus terang saya katakan bahwa saya juga termasuk blogger pemula atau newbie. Seorang blogger pemula atau newbie sudah pasti mereka pernah merasakan yang namanya penasaran. Mengapa saya katakan demikian sebab itulah yang saya rasakan pada blog yang saya buat ini. Yang membuat timbulnya rasa penasaran ini adalah kita selalu ingin mengetahui seberapa banyak pengunjung yang datang ke blog kita untuk mencari informasi dari pada kebutuhan pengunjung tersebut. Berbicara tentang banyaknya pengunjung itu tergantung kepada anda sampai di mana kreatif anda dalam membuat blog dengan super SEO Friendly. Karena dengan blog yangSeo Friendly yakin lah traffic blog anda akan terus meningkat.

Bagaimana sobat, anda mau tau jumlah pengunjung yang datang ke blog anda...simak tutorialnya.

Langsung ke alamat situsnya di http://www.histats.com
Lakukan pendaftaran atau registrasi.
Isi data yang di perlukan untuk melakukan registrasi.
Dalam hal ini yang di butuhkan adalah nama anda dan email yang digunakan padablog anda.
Masukkan kata sandi atau password pada kotak registrasi sesuka anda. Untuk memudahkan mengingat kata sandi atau password sebaiknya anda memakaipassword email anda.
Pilih negara dan zona waktu kota anda.
Pilih kategori dan sub kategori blog anda.
Klik kotak kecil untuk tanda centang pada persyaratan dan ketentuan.
Ketik kode chaptca pada kotak yang tersedia.
Klik tombol oke.
Selanjutnya cek email yang anda gunakan pada registrasi histats.
Buka email dari Histats dan klik link konfirmasi registrasi.
Link konfirmasi akan di arahkan pada halaman homepaga histats.
Daftarkan URL blog anda.
Klik Counter Code untuk mendapatkan kode javascript counter.
Pilih salah satu stylish counter yang anda inginkan.
Klik untuk mencentang semua kotak kecil di atasnya.
Scrool ke bawah dan copy kode javascriptnya dalam posisi standard html.
Langsung ke Dashboard blog anda dan pilih menu Layout.
Tambah widget text javascrip.
Pastekan kodenya pada area text html, untuk judul widget boleh di kosongkan.
Klik Save / simpan.
Selesai.

Setelah anda melakukan langkah di atas, sekarang anda sudah dapat mengetahuijumlah pengunjung pada blog anda. Bukan hanya itu, pengunjung yang sedang online pada blog anda juga akan terlihat pada counter histats tersebut. Mudah bukan..

Semoga dengan penjelasan di atas tentang Cara Mudah Mengetahui Jumlah Pengunjung Pada Blog dapat anda lakukan sendiri dengan mudah tanpa ada kendala dengan harapan hanya satu yaitu semoga menjadi blogger profesional di masa akan datang. Salam sukses.

Cara Membuat Gambar Header Blog

Kunjungi situs http://cooltext.com/
Selanjutnya pilih salah satu gambar huruf yang kalian suka.
Dan atur warna dan juga bentuk hurufnya.
Setelah selesai, lihat bagian bawah, klik Creat Logo.
Terakhir Download.
Sekarang, memasang gambar tersebut di blog kita.
Login ke blog, dan Klik pengaturan Tata Letak.
Pada bagian layout Header Blog, Klik Edit. Dan Upload gambar tadi.
Selanjutnya atur penempatan gambar. Pilih dibalik judul dan keterangan.
Terakhir Save pengaturan gambar. Dan lihat, gambar berada di belakang judul dan deskripsi.

Cara Membuat Daftar Isi Blog dengan Menu Keren

Silahkan ikuti langkah-langkah di bawah ini jika jika anda tertarik ingin memasang script ini di blog saudara:

Login dengan akun blog saudara
Masuk ke Dasboard blog yang ingin anda edit
Pilih menu Laman --> Buat Laman Baru --> Laman Kosong
Klik tombol HTML pada entri Laman (Ada di bagian bawah kolom judul laman)
Masukan script di bawah ini :

<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#8A94F0;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
color:#000;
}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 12px Tahoma,Sans-Serif;
color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width:20%;
float:left;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Tahoma,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#000;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
background-color:#C4C9F8;
color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#181D67;
color:white;
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;
/* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:80%;
float:right;
background-color:white;
border-left:5px solid #181D67;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#051466;
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:normal;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px 10px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px 4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#999;
color:none;
outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
    border:2px solid #333;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
}
#tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
}
#tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
}
#tabbed-toc .toc-content {
    border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
    display:none;
}
}
</style>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<a href="http://ngeblog07.blogspot.com" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="ARSIP">arsip</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://ngeblog07.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>

Berikan judul laman sesuai keinginan anda, seperti Daftar Isi Blog, Daftar Post , dan lain-lain.
Berikan juga Deskripsi Penelusuran jika perlu (Baca: Membuat Deskripsi Berbeda Tiap Artikel)
Jika semua dirasa sudah siap, silahkan klik PUBLIKASIKAN.

Catatan : Silahkan anda ganti url berwarna merah tebal dengan alamat url blog anda.

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>

Masukkan tulisanmu di sini

</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:

Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Cara Mecegah Copy Paste Pada Blog

Login terlebih dahulu ke Blogger.com
Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

5.Jika sudah, Simpan Template blog Sobat.

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob,

maklumlah pemula,, heheheheee,,,,

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,,

]

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,,

] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger sobat.
2. Lalu masuk ke design Template, klik Edit HTML
3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode </body>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

Kode warna hijau: ganti dengan URL Feeds sobat
Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.

2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

Cara Membuat Komentar Blogspot Dan Facebook Berdampingan

1. Login ke account blogger sobat

2. Backup template blog sobat terlebih dahulu,, untuk jaga-jaga kalau ada yang error.
( Cadangkan/pulihkan >> Unduh Template Lengkap )

3. Klik Template >> klik Edit HTML

4. Jika sudah, cari kode ]]></b:skin> ( Gunakan CTRL+F untuk mempermudah pencarian )

5. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;border:3px solid red;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

6. Kemudian sobat cari kode </head>

7. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>

Perhatikan tulisan yang berwarna biru di atas, ganti dengan ID facebook sobat, misalkan https://www.facebook.com/nama url facebook sobat maka ID Anda berada pada tulisan yang berwana biru.

8. Kemudian cari kode <div class='comments' id='comments'>

Keterangan : Pada umumnya kode tersebut ada 2, copy dan pastekan kode dibawah ini diatas <div class='comments' id='comments'> Pertama dan Kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Dan perhatikan pula kode <div class='comments comments-page' id='blogger-comments-page'>, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

Contoh :

<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> Hapus salah satu.

9. Kemudian klik save, dan lihat hasilnya.

Cara Membuat Space Iklan di Blogspot

Mau space iklan seperti ini

Langsung aja ini tutorialnya :

1. Masuk ke akun sobat blogger..

2. Pilih Tata letak >> tambahkan gadget

3. Pilih Html/Javascript

4. Setelah itu copy dan paste kode berikut ini :

Keterangan :

Kode yang berwarna biru adallah ( URL GAMBAR IKLAN ) kalau sobat mempunyai gambar iklan taruh aja linknya disitu.

5. Simpan dan reload blog sobat.

Cara Membuat Popular Post Animasi Berjalan Kebawah

kalau sobat blogger suka, ikuti saja langkah-langkah dibawah ini :

1. Yang tepenting Masuk dulu ke blogger sobat.
2. Pada tampilan Dashboard pilih Tata Letak >> Tambahkan Gadget >> pilih Entri Populer.

3. Seting entri populer yang sobat inginkan.
4. Kemudian pilih Tambahkan Gadget lagi >> pilih Html/Javascript.

5.Copy code dibawah ini dan Pastekan di Gadget Html/Javascript.

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:340px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:340px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

6. kemudian pilih simpan dan lihat hasilnya.

Cara menampilkan judul post saja di homepage blogger

Login ke Blogger.com
Pilih menu template
Klik Edit HTML
Cari kode </head>
Letak kode berikut di atas </head>

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#33AAFF;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#33AAFF;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color: #333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>

6.Terakhir, simpan template kalian.

Cara Membuat Tombol Next Page Angka Pada Blog

Pada postingan kali ini saya akan membagikan artikel tentang cara membuat tombol next page angka pada blog, cara ini diperuntukan bagi yang templatenya masih menggunakan olderspost dan newestpost...

langsung saja ini caranya :

Ikuti Langkah-Langkah Berikut :

1. Pertama Masuk dulu ke akun blogger sobat.

2. Lalu pilih Dashboard >> Template >> Edit HTML

3. Sebelum mengedit template, backup dulu template sobat untuk jaga-jaga kalau ada yang eror. Pilih Cadangkan/Pulihkan >> Unduh template lengkap.

4. Silahkan sobat cari kode ]]></b:skin>, biar cepat gunakan CTRL+f.

5. Copy kode dibawah ini kemudian paste di atas kode ]]></b:skin>.

.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

6. Kemudian cari kode </body> kalau ini pastinya dibawah sendiri..hehehehev Copy kode dibawah ini dan paste kan diatas kode </body>.

7. Dan terakhir Save Template sobat blogger.

Cara Membuat Navigasi Breadcrumb

Langkah 1
Login ke akun Blogger milik anda > Tata Letak >Edit HTML. Klik Download Full Template untuk membackup template blog Anda.
Catatan: Biasakan membackup template blog Anda sebelum mengedit HTML
Langkah 2
Beri tanda centang pada Expand Widget Templates. Copy kode CSS di bawah ini lalu paste tepat di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

Ganti kata yang berwarna merah dengan kode warna sesuai keinginan Anda
Ganti kata yang berwarna biru dengan ukuran font sesuai keinginan Anda
Langkah 3
Cari kode <div class='post hentry uncustomized-post-template'>
Copy kode di bawah ini lalu paste tepat di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>

Ganti kata yang berwarna merah sesuai dengan keinginan Anda
Langkah 4
Klik tombol Simpan. Setelah tersimpan, buka salah satu halaman artikel pada blog Anda.
Navigasi Breradcrumb telah terpasang tepat di atas judul artikel blog Anda.

Membuat Artikel Terkait di bawah posting blogspot yang keren

Bagi yang menggunakan draft.blogger.com,
Klik template> Edit Template HTML > Ceklis Expand Widget Template
Langsung aja copy script ini
dibawah kode <div class='post-body entry-content'><data:post.body/> (cari dengan ctrl +F)

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Artikel Terkait : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

lalu copy ini
diatas ]]></b:skin>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL295eWdOz-obYNetgm5eQllEIJ2cOxM3xgqztlZUKFuoVADtUptv-E336MqGS8AOt6OCdr37HyH6ouUJNm5HTZxSjqVSo4cwFOjjVXO3xImlfQy2ynSNov43iUCf58jKDaeOhI8sxM1E/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

kode yang berupa angka dan kode hexadecimal warna diatas bisa dubah-ubah sesuai keinginan
dan terakhir copy script ini dibawah ]]></b:skin>

<script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

Baca Selengkapnya di: Membuat Artikel Terkait di bawah posting blogspot yang keren

Cara Membuat Related Posts Bergambar + Ringkasan Di Blogger

Panduan Cara Bikin Artikel Terkait Bergambar Serta Ringkasan Untuk Blogger

Seperti tutorial lainnya, langkah pertama yang harus dilakukan adalah login dahulu ke blogger, kemudian ikuti langkah-langkah cara membuat related post di blogger berikut.

1. Klik menu seperti ini

2. Klik menu / tulisan Template

3. Klik menu Edit HTML

4. Klik tulisan / menu Lanjutkan

5. Beri centang pada Expand Template Widget

6. Cari kode berikut :

</head>

7. Pasang kode berikut ini tepat di atas kode </head> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum li:hover {
background-color: #E6E6E6;
}
#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\'  I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

Catatan :

var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik

8. Cari kode

<div class='post-footer-line post-footer-line-3'/>

atau kode

<data:post.body/>

Kemudian pasang script yang akan menampilkan artikel terkait pada blog blogger kamu berikut ini di bawah kode <div class='post-footer-line post-footer-line-3'/> atau <data:post.body/> tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>

Catatan :

Silakan ganti tulisan Related Posts dengan tulisan yang kamu mau.

9. Selesai dan silakan simpan pengaturan template kamu. - See more at: http://blog.ahmadrifai.net/2012/04/cara-membuat-related-posts-bergambar.html#sthash.MZNQdTum.dpuf