Tino Cafe

Cara Membuat Navigasi Breadcrumbs Terindeks Pada Blog

Sebelum saya menjelaskan bagaimana cara membuat navigasi breadcrumbs ini, saya akan memberikan sedikit penjelasan, apa sih breadcrumbs itu?

Breadcrumbs adalah petunjuk/navigasi pada blog anda, jika anda memasang-nya anda akan mengetahui dimana sekarang anda berada, susunan-nya sebagai berikut.

Home » Label » Judul artikel

Jika anda masih bingung susunan-nya silahkan lihat pada blog ini, tepat-nya diatas judul artikel.

Sudah mengerti, apa masih bingung? Hehehe... Jika sudah mengerti berikut ini saya berikan tutorial bagaimana cara memasang-nya.

Cara memasang breadcrumbs ini sangatlah mudah seperti memasang auto read more pada blog.

1. Login di Blogger > Pilih Template

2. Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)

3. Kemudian cari kode ]]></b:skin>

4. Jika sudah ketemu, Copy kode di bawah ini dan paste “tepat di atas” kode ]]></b:skin>

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

5. Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian

6. Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>

7. Terakhir simpan template anda.

Catatan :

Karena breadcrumbs ini juga terindeks di search engine, maka untuk pemasangan-nya jika anda sebelumnya telah memasang breadcrumbs yang tidak terindeks. Hapuslah kode itu dan ganti dengan kode itu.
Selesai, semoga artikel diatas bermanfaat untuk sobat blogger.

Posted by Noval Bintang, 6 Komentar

Cara Membuat Auto Read More Dengan Thumbnail

Apakah auto read more itu? Jika menggunakan istilah auto read more mungkin masih banyak yang belum tahu, terutama bagi yang baru memulai kegiatan blogging.

Sebenarnya fungsi auto read more itu sama dengan fitur jump break yang telah disediakan oleh pengembang blogger.

Pada fitur insert jump break untuk menampilkan potongan atas artikel pada beranda blog kita harus mengatur-nya secara manual. Ini mungkin terlihat menyusakan terlebih lagi bagi blogger yang hanya punya sedikit waktu untuk online.

Nah, Jika Anda menggunakan script auto read more, anda tidak perlu bersusah-susah mengatur potongan artikel yang akan ditampilkan pada beranda blog. Karena script auto read more ini akan berkerja otomatis memotong bagian atas artikel Anda sesuai dengan banyak karakter yang Anda atur.

Satu lagi kelebihan auto read more ini, yaitu akan menampilkan gambar/ thumbnail artikel yang ada dalam artikel Anda. Walaupun gambar itu diakhir artikel Anda, dan tentu saja ukuran gambar/thumbnail-nya bisa Anda sesuaikan dengan keinginan Anda.

Bagaimana? Tertarik menggunakan script auto read more ini.. Jika iya, silahkan lanjutkan membaca artikel ini.

Cara membuat auto read more ini sangatlah mudah, Anda hanya perlu memasang beberapa script yang tantu saja mudah untuk dilakukan. Oke, langsung saja berikut ini tutorial-nya :

1. Untuk membuat auto read more pertama Login ke akun Blogger Anda.
2. Pilih opsi Template > Pilih edit HTML.
3. Cari kode </head> menggunakan CTRL+F untuk mempermudah.
4. Jika sudah ketemu, letakkan kode di bawah ini tepat diatas kode </head>.

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

5. Masih di Edit HTML, cari kode <data:post.body/>, jika ada 2 pilihlah kode yang ke-dua. Jika anda bingung carilah kode <data:post.body/> yang terdapat diatas kode <div class='jump-link'>

6. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>

7. Klik 'save template' dan selesai.

Untuk mengatur banyak karakter atau ukuran thumbnail yang akan ditampilkan, berikut ini saya berikan sedikit penjelasan-nya :

Untuk mengatur auto readmore ini Inti script diatas terletak pada kode dibawah ini..

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</script>

summary_noimg = 300; = digunakan untuk mengatur jumlah karakter read more artikel tanpa gambar, Silahkan rubah angka 300 sesuai keinginan Anda.
summary_img = 255; = digunakan untuk mengatur jumlah karakter read more artikel dengan gambar, Silahkan rubah angka 255 sesuai keinginan Anda.
img_thumb_height = 100; = digunakan untuk mengatur tinggi gambar artikel yang ingin ditampilkan pada read more, sesuaikan tinggi gambar dengan mengubah angka 100 sesuai keinginan Anda.
img_thumb_width = 125; = digunakan untuk mengatur lebar gambar artikel yang ingin ditampilkan pada read more, sesuaikan dengan keinginan Anda.
var thumbnail_mode = "yes"; : digunakan untuk mengatur apakah auto read more anda menggunakan gambar/thumbnail atau tidak menggunakan. Jika Anda tidak ingin menggunakan gambar maka gantilah “yes” dengan “no”, dan sebalik-nya.

Tips dari penulis :

Saran saya, jika Anda menggunakan script ini aturlah banyak-nya karakter atau ukuran thumbnail dengan sebijaksana mungkin. Karena jika anda mengatur ukuran thumbnail terlalu besar, itu bisa membuat loading blog anda lambat!

Baik, sekian dulu artikel agak panjang ini.. hehehe semoga bermanfaat untuk Anda.

Posted by Noval Bintang, 6 Komentar

Cara Menampilkan Menu RUN di Windows 7

Cara Menampilkan Menu RUN di Windows 7 - Salah satu perbedaan windows 7 dan windows xp adalah tidak adanya menu run pada windows 7 yang biasanya dapat kamu temui pada start menu windows xp.

Pada dasarnya menu run itu sudah bisa diwakilkan dengan adanya kotak search program and files yanga ada ketika kamu meng-klik logo windows di pojok kiri bawah. Tapi jika kamu pengen mengakses menu run ini seperti windows xp. akan saya berikan tutorial-nya.

Sebelum ke tutorial menampilakan menu run di windows 7 seperti windows xp, saya ingin memberi tahu kalu di windows 7 kamu cukup menegetik "RUN" (tanpa tanda petik) di kotak search program anda files untuk menampilkan menu RUN atau kalau kamu mau yang lebih cepat cukup dengan klik tomobol kombinasi WIN + R. Tapi kalau kamu tetep mau menampilkan menu run itu tetap/permanen berikut ini saya berikan cara menyeting-nya :

Cara Menampilkan Menu RUN di Windows 7

Menampilkan Menu RUN di Windows 7

1. Klik kanan pada tombol Start Menu, klik Properties

2. Pada tab Start Menu klik Customize

3. Cari menu Run Command, kemudian aktifkan dengan cara mencentang (check) pada kotak pilihan

4. Klik OK kemudian klik OK lagi untuk menyimpan pengaturan.

Nah, sekarang menu RUN sudah muncul permanen pada komuter kamu..

Sekian artikel tentang Cara Menampilkan Menu RUN di Windows 7, kalau ada pertanyaan/kurang jelas langsung tulis di kotak komentar ya..

Posted by Noval Bintang, 6 Komentar