Cara Membuat Daftar Isi Blog Vers.2

0 komentar

Pada kesempatan tedahulu saya pernah mengulas bagaimana cara membuat daftar isi pada blog saya posting di sini, namun karena daftar isi tersebut menggunakan javascript, sehingga agak sedikit membebani loading blog sehingga yang saya sendiri tidak memasangnya di blog ini dengan alasan tidak mau blog ini terlalu berat ketika di akses oleh para pengunjung. Untuk mencari alternatif lain, kita bisa menggunakan engine pencari blogger sendiri. Namun untuk melakukan ini, tentu saja harus sedikit memodifikasi kode template. Sudah tidak sabar untuk membuat daftar isi di blog? caranya seperti ini :

Langkah #1
  1. Sign in di blogger dengan ID anda.
  2. Bilsa sudah berada di halaman dashboard, klik Layout.
  3. Klik tab Edit HTML.
  4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).
  5. Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat.
  6. Lihat ke bagian body template, lalu cari kode seperti ini :
  7. <b:include data='post' name='post'/>
  8. Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :
  9. <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"> <data:post.title/> </div> </a> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>
  10. Klik tombol Simpan Template.
  11. Selesai. Langkah pertama sudah selesai.
Langkah #2
  1. Klik tab Elemen Halaman.
  2. Klik tulisan Tambahkan sebuah Elemen Halaman.
  3. Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.
  4. Copy lalu paste kode berikut :
  5. <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar Isi»</a>
  6. Ganti NamaBlogAnda nama blog anda sendiri. 
  7. Contoh : nama blog saya adalah kolom-tutorial. ganti angka 200 dengan nomor yang lainnya (kalau mau). Nomor ini adalah jumlah posting yang ingin di munculkan ketika link daftar isi di klik.
  8. Klik tombol Simpan Perubahan.
  9. Selesai.
Keterangan tambahan :
Jika anda sedikit mengerti tentang CSS, anda bisa memodifikasi bentuk dari daftar isi ini, apakah mau di kasih backround gambar, bentuk huruf yang berbeda atau apa saja dengan mengubah kode yang di sini (ini adalah kode yg ada pada Langkah #1 di atas) yang berwarna Oragen:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/>
</div>
</a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Untuk melihat contoh seperti apa daftar isi ini? silahkan klik → Daftar isi »

Selamat mencoba ya.................
Sumber: O-OM


Cara Membuat Daftar Isi Blog Vers.1

0 komentar

Apakah sobat suka membaca buku? jawaban sobat tentunya akan beragam, ada yang akan menjawab suka dan ada juga yang akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi, dengan adanya daftar isi buku maka akan mempermudah pembaca buku tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca. Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk mempermudah para pembacanya, didalam sebuah blog pun kita bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul artikel yang pernah saya posting di bagian footer halaman ini ataupun ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir artikel akan muncul sederet judul-judul artikel lainnya yang menggoda sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan sangat mempermudah para pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan tetapi cara tersebut saya lakukan secara manual yakni saya mencatat seluruh alamat artikel yang telah saya posting kemudian membuatkan link ke artikel tersebut.

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis, teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :

Langkah pertama :
  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik link Download full template, silahkan save untuk backup data
  5. Copy paste kode CSS berikut di atas kode ]]></b:skin<
  6. #toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;} .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;} .toc-header-col2 { width:75px;} .toc-header-col3 { width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:100%; text-decoration:none;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
  7.  Klik tombol SIMPAN TEMPLATE
Langkah kedua :
  1. Klik menu Elemen Halaman
  2. Klik tulisan Tambah sebuah Elemen Halaman
  3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
  4. Copy paste kode berikut ke dalam elemen yang muncul
  5. Klik tombol Simpan
  6. <div id="toc"></div>
  7. Pindahkan elemen yang baru di buat tepat di atas elemen Post
  8. Klik tombol Simpan yang berada di sebelah atas
  9. Klik tulisan Tambah sebuah Elemen Halaman kembali
  10. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
  11. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen
  12. <div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a>   </div> <script src="http://home.planet.nl/%7Ehansoosting/downloads/blogtoc.js"> </script> <script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=999&amp;callback=loadtoc"></script> 
  13. Ganti tulisan YOURBLOG dengan nama blog sobat
  14. Klik tombol Simpan
  15. Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)
  16. Klik tombol SIMPAN yang berada di sebelah atas
  17. Selesai.

Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :

<div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a>   </div> <script src="http://home.planet.nl/%7Ehansoosting/downloads/blogtoc.js"> </script> <script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=999&amp;callback=loadtoc"></script> 

Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog sobat.


Selamat mencoba ya................


Cara Membuat Related Post Bergambar

0 komentar

Ada yang berbeda dengan tampilan blog referensi registrasi dari minggu yang lalu. Blog ini telah memuat related post atau posting terkait atau juga tulisan yang berhubungan. Yang membuat lebih bersemangat adalah karena tampilannya yang yang cantik dan menarik, yaitu dengan memakai gambar thumbnail.

Postingan ini sekaligus menjawab pertanyaan dari sobat rigih di kolom komentar pada postingan pertamina blog kontes yang menanyakan bagaimana cara membuat related artikel dengan thumbnail seperti yang ada di blog saya

Bagaimana cara membuatnya ?
salah satu kelebihan cara membuat Related Post ini adalah kita tidaklah membutuhkan pengetahuan tentang teknik mengutak-atik kode HTML. Cukup dengan menggunakan jasa linkwithin.com kita sudah bisa menampilkan Posting Terkait Bergambar.


Opsi tambahannya adalah kalian bisa men-checklist tulisan My blog has light text on a dark background jika blog anda menggunakan template yang berbackground hitam dan tulisan artikelnya putih. Dan biarkan kosong/unchecklist jika background blog kita berwarna terang.



Pada linkwithin.com kita hanya diperintahkan untuk mengisi email, bloglink atau nama blog kita, memilih plattform blog dan menentukan jumlah posting terkait yang akan kita tampilkan di setiap akhir postingan.

Untuk plattform blog, tersedia 3 pilihan yaitu : Blogger, Wordpress dan Typepad. Tapi jangan khawatir, buat blogger yaang berplaform lain seperti joomla, multiply atau yang lain. Karena linkwithin.com anda juga bisa mendapatkan widgetnya walaupun harus sedikit bersusah payah dengan mengutak-atik kode HTML.

Khusus buat yang berplatform blogger, jika data yang diperlukan sudah terisi dengan benar. Klik tombol Get Widget lalu klik Add Widget. Maka widget dari linkwithin.com akan masuk ke bagian sidebar blog (sebaiknya anda harus login dulu ke blogger.com).

ini gambar salah satu tampilan related postnya:



Untuk tampilan yang lebih baik, drag lah widget yang diberikan kebagian bawah postingan (bukan di bagian footer lho). Maka tampilan postingan terkait akan muncul tepat dibawah postingan.

Bagaimana ? Mudah bukan ? Selamat mencoba ya..................


Cara Menampilkan Posting Yang Berkalitan (Related Posts) Vers. 2

0 komentar

sebelumnya kita sudah membahas Cara Menampilkan Posting Yang Berkalitan (Related Posts) Vers. 1, nah sekarang kita membahas versi ke 2 nya. disini saya mau menjelaskan Related Posts ini caranya sama kok tapi beda penempatannya di . tanpa berpikir panjang yuk lihat cara membuatnya.

Langkah I:
Masuk pada Template -> Edit HTML -> kemudian centang atau cecklist pada tulisan "Expand Widgets Template" copy seluruh code script dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Langkah II:
setelah anda mengcopy seluruh code script di atas, kemudian cari dan temukan code script seperti di bawah ini dengan menkan ctrl+F dan tulis disitu di bawah in:
<data:post.body/>

Langkah III:
jika sudah ketemu code script diatas, pastekan code script yang anda copy pertama kali tadi  tepat di bawah code :
<data:post.body/>

mudah kan..?, dan ingat bahwa setiap anda meposting harus di kasih labels atau catagory, biar related postnya mau muncul...

Selamat mencoba ya.......


Cara Menampilkan Posting Yang Berkalitan (Related Posts) Vers. 1

0 komentar

Banyak cara untuk memberikan variasi dalam halalam utama blog kita, terutama dihalaman postingan. Misalnya dengan memberikan Related Posts atau biasa disebut "link yang bekaitan", "artikel pada kategori yang sama", "artikel yang bertautan", "postingan terkait" atau apa aja namanya, dimana memberikan kemudahan kepada pengunjung untuk mencari artikel atau postingan yang berkaitan dengan artikel atau postingan yang ada. Biasanya Related Posts dipasang ditampilkan dibawah postingan tunggal tepatnya di bawah kolom komentar. Kelebihan dan keuntungan dengan pemasangan post yang berkaitan tentu saja akan mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label.

Tanpa banyak basa-basi mari kita bahas masalah tersebut secara jelas sehingga akan mempermudah kawan-kawan blogger untuk mekukan hal tersebut. Bagaimana? Langsung aja ke proses pemasangan yang sangat gampang.

Langkah I:

Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head> atau lebih mudahnya cari kode </head> saja, kemudian letakan kodenya diatas kode </head> -> jangan lupa disimpan.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
 var entry = json.feed.entry[i];
 relatedTitles[relatedTitlesNum] = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
  }
 }
 }
}
function removeRelatedDuplicates() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
}
function contains(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}
function printRelatedLabels() {
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;
 document.write('<ul>');
 while (i < relatedTitles.length && i < 20) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>
');
  if (r < relatedTitles.length - 1) {
   r++;
  } else {
   r = 0;
  }
  i++;
 }
 document.write('</ul>
');
}
//]]>
</script>

Langkah II:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini.
     <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>

Jika sudah ketemu, masukan kode berwarna Biru dibawah diantara kode diatas.

     <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
          </b:loop>
        </b:if>

Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan

Langkah III:

Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori yang sama" -> kemudian jangan lupa disimpan.
<script type="text/javascript">
 removeRelatedDuplicates();
 printRelatedLabels();
</script>

Langkah IV:

Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan Artikel pada kategori yang sama, jika sudah ditemukan masukan ke dua kode berwarna Biru dibawah.

Catatan: dibawah ini ada kode HTML13 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
<b:widget id='HTML13' locked='false' title='Artikel pada kategori yang sama' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Peringatan: Template baru Anda tidak berisi widget berikut:
• HTML15
Ingin mempertahankan widget ini di blog Anda atau menghapusnya?
Penghapusan widget tidak dapat diurungkan.

Selamat mencoba ya...................
Sumber: o-om


Related Posts Plugin for WordPress, Blogger...

Software

ENTER-TAB2-CONTENT-HERE

News

ENTER-TAB3-CONTENT-HERE
 

Free Unlimited Information Copyright © 2010 Premium Wordpress Themes | Website Templates | Blogger Template is Designed by Lasantha.