Thursday, November 15, 2012

Cara Membuat Daftar Isi Blog Perbulan

Daftar Isi Blog Perbulan
Setelah sebelumnya kita pernah membahas cara membuat daftar isi blog, nah untuk saat ini kita akan membuat daftar isi sesuai bulan postingan di blog. Untuk itu langsung aja copy script dibawah ini dan paste di postingan blog Anda, jika sudah pernah menggunakan daftar isi yang sebelumnya tinggal di ganti aja dengan script dibawah ini .

Tanpa scroll :
<script type="text/javascript" src="http://bloguniq.googlecode.com/files/daftarisibulan.js"></script> <script src="http://bloguniq.blogspot.com/feeds/posts/default?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

atau dengan scroll :
<div style='margin:0; padding:10px;height:500px;overflow:auto;border:1px solid #ccc;'> <script type="text/javascript" src="http://bloguniq.googlecode.com/files/daftarisibulan.js"></script> <script src="http://bloguniq.blogspot.com/feeds/posts/default?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"> </script> </div>

Ket : ganti http://bloguniq.blogspot.com dengan url blog Anda

Sunday, September 23, 2012

Cara Membuat Iklan di Samping Postingan

Berikut ini adalah cara membuat iklan (ads) disamping kiri atau kanan postingan di blog Anda dengan contoh ads ukuran 300 x 250 :
  • Pertama login dulu di account blogger.com Anda.
  • Setelah itu klik More Option, kemudian pilih Template -> Edit HTML -> Proceed dan jangan lupa angan lupa centang kotak kecil Expand Template Widget supaya semua kode template Anda keluar/ tampil.
  • Setelah itu carilah kode <data:post.body/> dengan cara tekan CTRL + F (find) supaya lebih mudah ditemukan.
  • Setelah ketemu kode tersebut paste kode dibawah ini tepat diatas kode tadi.
Iklan sebelah kiri :  <div class='post-body entry-content'>
<div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>
KODE IKLAN ANDA DISINI</div>

Iklan sebelah kanan :  <div class='post-body entry-content'>
<div style='float:right;width:300px;height:250px;padding:0 0px 0px 0;'>
KODE IKLAN ANDA DISINI</div>
  •  Jika kode HTML yang akan dimasukkan belum di Parser, silahkan Parser dengan cara Klik disini 
  • Langkah terakhir adalah simpan template dan silahkan sobat lihat hasilnya
Preview:
Selamat Mencoba

Wednesday, July 11, 2012

Cara Membuat Navigation Breadcrumb Terindex di Google

Breadcrumb merupakan salah satu bentuk navigation yang biasanya digunakan untuk memberitahukan pembaca dimana posisi dia berada sekarang (kategori/label). Dengan adanya breadcrumb maka akan memudahkan pembaca untuk berpindah ke bagian-bagian lain yang sejenis di kategori / lebal blog anda dan juga membuat template blog SEO friendly dan mempercantik desain blog. Saat ini, navigation breadcrume tidak lagi sebagai pemberitahuan bagi pembaca blog, tapi sudah menjadi suatu keharusan karena dapat menutupi salah satu kekurangan blogger, yaitu alamat url posting yang muncul terbatas dan kadang terlihat tidak enak dilihat mata. Sehingga blog kita di search engine akan terlihat lebih rapi, contohnya seperti dibawahi ini
Contoh Navigation Breadcrumb yang terindex di Google.com
Ingin blog Anda seperti diatas ???, yuk kita ikuti langkah-langkah cara membuat label navigation breadcrume di blog biar terindex di Google.com

Langkah-langkah pemasangannya adalah sebagai berikut:
  • Silahkan login ke blogger
  • Klik Design.
  • Klik tab edit HTML dan ceklist Expand Template Widget
  • Kemudian cari kode ]]></b:skin>
  • Setelah jumpa copy paste script dibawah ini di atas kode ]]></b:skin> tadi.
.breadcrumbs{
margin-left:10px;
padding: 5px 0;
border-bottom: 1px dotted;
line-height:1.4em;
}

  • Kemudian, cari kode berikut ini <b:includable id='main' var='top'> , jika sudah ketemu timpa kode tersebut dengan kode dibawah 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'/>

  • Kemudian simpan. Untuk mengecek apakah navigation breadcrumb blog anda sudah terindex oleh google, cek menggunakan Rich Snippets Testing Tool

Selamat mencoba dan semoga bermamfaat.

Monday, December 19, 2011

Cara Membuat Daftar Isi Blog

Daftar isi buat blogger sangat diperlukan, gunanya untuk membuat pengunjung tahu isi keseluruhan dari blog kita. Selain itu, membuat daftar isi juga bisa meningkatkan traffik, karena dengan mengklik daftar isi, maka semua isi link judul blog akan dicari oleh google. Hal ini akan membuat index menjadi lebih kuat dari sebelumnya.

Cara membuat daftar isi di blogspot, seperti umumnya di blogspot bisa dilakukan dengan beberapa hal:
  1. Membuat daftar isi dengan feed burner. Anda mungkin sudah terbiasa dengan hal ini.
  2. Membuat daftar isi dengan Widget Blogspot.
  3. Membuat daftar isi dengan cara menghosting javascript ke sites.google.com.

Membuat daftar isi blog dengan feed burner javascript sangat mudah, tetapi kelemahannya adalah, kode ini tidak bisa mebuat klasifikasi blog berdasarkan label yang kita buat pada halaman blog. Jadi artinya, tampilan yang kita perloleh adalah sebuat daftar isi blog yang diurutkan berdasarkan blog terbaru hingga yang terlama. Kita tidak bisa memodifikasi lebih jauh, kecuali merias tampilannya saja.

Membuat daftar isi dengan Widget Blogspot adalah cara yang paling ringkas. Namun kelemahannya, script ini hanya bisa menampilkan maksimal lima judul isi blog dari yang paling baru. Itulah kenapa disebut : recent posts.

Cara ketiga adalah membuat daftar isi blog dengan mengunggah file javascript ke http://code.google.com/ (jangan unggah javascript ke https://sites.google.com karena browser akan gagal loading saat menuju link javascript) dan lalu menghubungkannya dengan halaman blog kita.

Jika ingin menampilkan isi blog kedalam satu halaman penuh, maka cara yang ketiga yang paling baik. Jika ingin yang seperti ini dengan cara instan, maka silahkan buat entri baru postingan baru, lalu paste semua kode di bawah ini:

<style>
a, a:visited, a:link {color:#000;}
a:hover {color:#333;}
</style>
<script style="text/javascript" src="http://bloguniq.googlecode.com/files/daftarisi.js"></script>
<script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Silahkan ganti namablog dengan nama blog yang Anda punya
 

Total Tayangan Laman