Sahabat Blogger

Memasang Hide Show Navigation

Selasa, 09 Februari 2010

Hide/Show Navigation Elemen digunakan untuk menggantikan drop-down menu ataupun archieve drop-down menu. Saya menggunakannya dalam blogroll agar ia tampil lebih pendek dan kemas serta memudahkan pengunjung melayari blog.

1. Dalam halaman TEMPLATE tekan tulisan Edit Html.

kemudian simpan code di bawah sebelum tag ]]></b:skin>.

.commenthidden {display:none}
.commentshown {display:inline}

2. Simpan Code di bawah sebelum code atau tag </head>

<script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>

3. Dan code di bawah merupakan kod yang akan kita simpan samada di Sidebar, postingan atau di mana saja selama kod ini mahu di gunakan.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title
</a><br /> <div class="commenthidden" id="UniqueName">..isi..</div>

UniqueName : Anda boleh rename kan kepada UniqueName1, UniqueName2, UniqueName3 atau sebagainya untuk membeza UniqueName antara satu sama lain.Title : Merupakan judul(boleh diletakkan tulisan ataupun imej) yang apabila di tekan akan menampakkan atau meyembunyikan sebuah elemen.Isi : Merupakan Elemen yang di sembunyikan. biasa berupa postingan, linklist dll.

Penggunaan Dalam Postingan
Untuk megunakan hack ini ke dalam postingan. Pertama dalam Editor blog kita harus menulis dalam bentuk Html jadi tekan Edit html.

kemudian contoh penulisan kodenya seperti ini.

<a aiotitle="click to expand" href="javascript:togglecomments('CONTOHPERTAMA')">
Postingan...+/-</a><br /> <div class="commenthidden" id="CONTOHPERTAMA">Untuk menggunakan kod ini ke dalam postingan. Pertama dalam Editor blog kita harus menulis dalam bentuk Html jadi tekan Edit html.</div>

Penggunaan Dalam Widget LinkList atau Blogroll

Untuk di gunakan ke dalam elemen widget LinkList atau blogroll. Pertama cari dulu kod html LinkList kita. Caranya dalam halaman TEMPLATE buka EDIT HTML kemudian tandai Expand Template Widget.

Setelah itu cari kod html LinkList. Misalkan kodnya seperti di bawah. Dan lihat tulisan berwarna merupakan kode Hide/Show Elemen, yang saya tambahkan dan tempatkan di antara kode html LinkList.

<b:widget id='LinkList1' locked='false' title='Photoshop' type='LinkList'> <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'>
<a aiotitle='click to expand' href='javascript:togglecomments("Basic")'>
Blogroll...(+/-)
</a><br/> <div class='commenthidden' id='Basic'>
<ul>
<b:loop values='data:links' var='link'>
<li><aexpr:href='data:link.target'><data:link.name/>
</a></li>
</b:loop>
</ul></div>
<b:include name='quickedit'/>
</div>
</b:includable> </b:widget>

Basic : merupakan uniqname

Blogroll...(+/-) : merupakan title atau semacam tombol

Sumber : teranung.blogspot

Cara pasang Auto Read More terbaru

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.
Penting! Yang sudah memasang Read More
versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus
kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi
tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah 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><span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span></b:if><b:if cond='data:blog.pageType =="item"'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)

Membuat Meta Keyword Yang Dinamis

Jumat, 05 Februari 2010

Dari sobat : Azis Lamayuda | www.z33s.co.cc

Setiap orang yang jadi seorang Blogger pasti selalu berharap dan ingin sekali jika Web atau Blognya berada di jajaran depan mesin pencari seperti Mbah Google, Yahoo, dan Yang lainnya. Namun itu semua tak lupu dari beberapa usaha yang harus dilewati dengan penuh kesabaran. mungkin salah satu usaha yang bisa ditempuh itu salah satunya yang akan saya posting disini yaitu Membuat meta keyword yang dinamis dengan cara mengotak-atik HTML Template Blog/web kita.

Meta Keyword Dinamis atau sering disebut juga Dynamic Meta Keyword adalah salah satu teknik SEO dimana meta keyword yang digunakan dapat berubah-ubah sesuai dengan artikel.
Penggunaan Meta Keyword Dinamis juga untuk menghindari duplikat meta content. Umumnya kan yang digunain tuh meta keyword statis atau manual dimana keywordnya dimasukin sendiri satu persatu, selain itu juga untuk setiap halaman selalu sama. Sebelumnya juga Kita telah membahas mengenai optimasi meta keyword dan deskripsinya. Langsung saja, cara ini saya dapat dari Eblogtemplate yang telah mempopulerkannya. untuk melihat secara langsung klik disini.
Biasanya didalam barisan HTML meta tag nya seperti ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title></b:if>

Lalu modifikasi atau ganti saja menjadi seperti ini:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName' name='Keywords'/></b:if>

Dengan begitu, maka jika postingan anda dibuka maka title di browser akan menampilkan judul postingan anda, meta deskripsi blog anda juga menampilkan judul postingan anda, dan meta keywordnya adalah judul postingan anda.
Jadi meta keyword dinamis seperti diatas hanya bisa menampilkan keyword berupa judul postingan anda saja. Sebenarnya bisa juga menggunakan label/kategori postingan anda sebagai keyword, tapi kurang etis jika untuk satu postingan anda harus memberi 10 label/kategori.

Jika sudah selesai cari kode <Head>, Lalu sisipkan kode berikut di atasnya:

<b:if cond='data:blog.pageType == "item"'>
<b:section id='meta1' showaddelement='no'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'/>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<meta name="keywords" content="<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>" />
</b:if>
</b:loop>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>
</b:section>
</b:if>

Agar Title SEO Friendly kata O-Om

Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar dengan Title kode yang sudah dimodifikasi.
Cari kode title dibawah ini:
<title><data:blog.pageTitle/></title>
Kemudian ganti semua kode diatas dengan kode dibawah

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Memasang Meta tag pada bagian header kode template.

Kalau anda ingin memasang meta tag seperti Kang rohman pakai, kodenya adalah seperti ini :


<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,follow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'> 
<meta content='noindex,follow' name='robots'/>  
</b:if> 
</b:if> 
    <title><data:blog.pageTitle/></title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='rohman' name='Author'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Panduan praktis membuat blog di blogspot serta download software secara gratis' name='description'/>
<meta content='blog tutorial, Blog tutorial blogging, blog tutorial blogger, tutorial blog blogger, bikin blog, cara bikin blog, download, software gratis, gratis, google adsense, bisnis internet, tutorial, template' name='keywords'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>

Untuk author serta meta keyword tentu saja harus di sesuaikan dengan milik anda sendiri. Khusus untuk para master, mohon di koreksi apabila ada kesalahan pemasangan kode (maklum pemula, pasang kode tidak tahu bener atau nggaknya).
Jangan lupa di Save, terus lihat dan rasakan hasilnya. selain itu , ada tips yang harus di perhatikan dalam hal membuat meta tag deskripsi atau keyword yaitu di antaranya :

Pastikan jumlah karakter keyword tidak melebihi 500 karakter.

Sebaiknya keyword yang di pasang di blog anda harus selalu berhubungan dengan apa yang anda tulis

Jangan membuat keyword yang melenceng dari jalur postingan yaitu keyword itu tidak nyambung dengan isi potingannya.

Selanjutnya ada cara yang terbukti sangat efektif meningkatkan SEO yang bisa di lakukan dengan meng-submit web/blog secara otomatis, selengkapnya daftar 159 SEO gratis dapat anda lihat disini

Mungkin itu saja yang bisa saya berikan dan kalau ada yang menambahkann saya tunggu. Terima kasih dan semoga bermanfaat.

Mengukur Berat Loading Blog

Mengukur Berat Dan Loading Blog dari saungweb.blogspot.com

Keasyikan mempercantik tampilan blog dengan memasang segala pernak pernik accessories seperti widget , banner dsb, hingga membuat penampilan blog kita semakin cantik dan elegan, tapi itu harus dibayar mahal dengan loading yang lama karena blog kita menjadi berat alias gendut bin gembrot, apalagi kalau koneksi internetnya lambat..itulah yang saya alami hingga lupa Mengukur Berat Dan Loading Blog ini.

Dulu pernah diingatkan tentang seberapa berat blog ini hingga dilakukan operasi besar ganti template, akhirnya tampil lebih pede dengan Wajah Baru Dengan Free Template , dan berhasil menurunkan berat blog ini dari 210 menjadi 133 KB . walaupun ini masih gendut karena katanya batas normalnya itu 100 KB.

Waktu berjalan , keasyikan lagi hingga lupa untuk diet , bengkak lagi menjadi 178 KB.., akhirnya diet lagi tapi sampai sekarang baru turun hingga 155 KB.. masih berat ..bingung juga apalagi yg mesti dibuang ya.. padahal saya telah membuang :

Banner iklan 3 buah

Banner SEO 2 buah walau gak banyak ngaruh

Label Link , adense

Tampilan posting di halaman utama dari 5 jadi 4 artikel

Kode ShinyStat .

Lupa lagi.. pokokny dll.

Sekarang saya pasang tool untuk mengukur berat blog ini, agar selalu ingat utk diet.. ya hitung2 di Posyandu aja pan tiap bulan Balita itu mesti timbang badan biar sehat ..hehee

Ada beberapa tools online service yang menyediakan jasa untuk test kecepatan atau Mengukur Berat Dan Loading Blog atau website, namun ingat hal ini tidak termasuk : koneksi internet yang memang lambat , komputer kita yang memang lemot n jadul dan kesalahan alam lainnya , tool tersebut diantaranya :

Pakai Iwebtool speed test : Tinggal masukan URL Blog , klik Submit nanti akan tahu seberapa berat Size-nya (KB) dan berapa lama loadingnya (seconds).

Tool Pingdom : Yang ini hasilnya agak komplit dan rinci sebab menampilkan grafik tentang lamanya loading dari semua objek link yang ada dalam blog kita,

Tool Stopwatch : Namanya juga stopwatch jadi kita akan tahu berapa detik loading blog kita

Pakai WebSiteOptimization.com. Yang ini hasilnya akan lebih komplit lagi, kita dapat mengetahui seberapa cepat waktu loading sebuah website apabila diakses menggunakan 6 kecepatan koneksi internet. Hasil tes juga disertai dengan analisis website yang dapat dipakai sebagai acuan untuk optimasi website lebih lanjut.

Dari tools diatas , disini saya hanya akan pasang yang no. 1 saja, sedangkan untuk yg lainnya akan saya posting kemudian ( jika sempat). Namun agar blog/website kita tidak berat dan loadnya cepat ada beberapa tips yg mesti diperhatikan diantaranya :

Hapus Widgert/ script yang tidak penting2 amat , hal ini berdasarkan kepada :
• Apakah widget ini sangat anda butuhkan ?
• Apakah widget ini mempunyai nilai / kegunaan bagi pembaca (jika widget ini tidak ada apakah pembaca akan kesulitan mencari sebuah artikel)?
• Apakah pembaca anda akan mengeluh jika anda menghapus widget dari tampilan blog anda?

Kurangi jumlah atau perkecil gambar yang anda gunakan .

Sederhanakan CSS anda ..dengan cara mengkompresnya… Caranya .. tunggu dalam postingan selanjutnya

Untuk mengukur berat dan loading blog atau web anda, silahkan masukan URL nya disini ( maksimal 10), silahkan timbang blog anda disini.

Mempercepat Login Blog 1

Mempercepat Loading Blog Dengan Css Compress dari www.z33s.co.cc

Seberapa berat login blog anda...? itu mungkin yang patut kita tanyakan pada blog kita. OK kali ini saya akan membantu mempercepat login di blog supaya lebih cepat waktu loadingnya. Kita akan mempercepat dengan mengotak atik yang namanya CSS.
CSS...? apa CSS itu?
CSS itu kependekan dari Cascading Style Sheet yaitu sebuah bahasa program atau dokumen yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web atau blog. Salah satu cara mengoptimalkannya adalah dengan mengompresnya agar ukurannya menjadi lebih kecil , sehingga tidak terlalu membebani loading blog, dengan demikian diharapkan loading blog menjadi lebih cepat lagi karena 'sizenya' telah berkurang setelah di compress.

Langsung aja, berikut tahap-tahapnya:

1. Login ke Blogger lalu pilih Lay Out dan klik Edit HMTL

2. Jangan lupa backup template dulu dengan Download Full Template , siapa tahu nanti malah berantakan.

3. Cari kode CSS nya , biasanya terletak antara kode :<b:skin><![CDATA[/* dan ]]></b:skin>

4. Kalau CSS nya sudah ketemu tinggal di blok , lalu ambil atau Cut ( klik kanan Mouse anda lalu Cut ) dan simpan dulu di Notepad , akan lebih baik lagi bila notepadnya di save sebagai backup , siapa tahu nanti diperlukan lagi.

5. Jika sudah baru kita masuk ke CSSdrive.com untuk mengkompresnya, disitu akan ada kotak bertuliskan Insert CSS Code

6. Copy CSS yang tadi disimpan di Notepad tersebut kemudian pastekan ke kotak Insert CSS Code.

7. Nanti ada beberapa pilihan seperti di bawah ini : (Untuk pemula sebaiknya pilih Light dan Don strip any comments saja dulu , supaya masih tetap terbaca jika nanti kita mau utak-atik-utek CSS lagi).

Compression mode: (?)

Light
Normal
Super Compact

Comments handling: (?)
Don't strip any comments
Strip ALL comments
Strip comments at least chars long (NOT counting line breaks within comment)

8. Klik Compress it yang ada dibawah kotak tersebut
9. Tunggu sebentar sampai proses compress selesai , kalau dah selesai dibawahnya suka ada keterangan seperti ini :

Compression results

Original size: 14487 bytes

Compressed size: 12357 bytes

Savings: 2130 bytes (15%)

10. Copy hasil compress tersebut dan pastekan ke tempatnya semula yaitu antara : <b:skin><![CDATA[/* dan ]]></b:skin>
11. Jika semua sudah selesai jangan lupa Save Templates
12. Selesai , selamat mencoba untuk Compress CSS Sebagai Upaya Optimasi Blog
13. Jika mau tahu Seberapa Berat Blog Sobat, Klik aja disini

Mempercepat Login Blog 2

Cara mempercepat login blog dengan HTML Compress ( Mengcompress HTML menjadi lebih ringan )dari sobat www.z33s.co.cc

Blog atau web adalah sarana yang tepat untuk mengutarakan buah pikiran kita yang selalu tersirat setiap detik. Namun sungguh sangat disayangkan kalau kita selalu harus bersikap sabar menunggu loading blog/web kita yang sangat lama.
untuk itu saya akan berikan salah satu dari sekian banyak situs yang datap melakukan compress terhadap blog kita sehingga menjadi lebih ringan. mungkin kalo sebelumnya saya telah menjelaskan cara melakukan compress pada CSS.

berikut caranya:
1. silahkan kunjungi situs www.textfixer.com/,
2. scroll kursor kalian ke bagian bawah halaman web,
3. disana kalian akan melihat sebuah kotak kosong yang siap untuk disisipkan semua kode HTML kita.
4. Copy dan paste kode HTML blog kita dengan cara login ke blogger kamu, Masuk Tata Letak/Layout, setelah itu klik EDIT HTML.
5. setelah kode HTML di paste di kotak. kalian Klik " COMPRESS HTML"
6. Hasil Compress akan mucul di kotak baru bagian bawah. Copy dan paste kembali ke blog kalian.
7. selamat mencoba dan semoga berhasil.

Selain itu kalian juga dapa mendownload HTML Compression Tool dan HTML Compress yang dapat membantu anda juga.

NB: Jangan lupa untuk mem-Backup template terlebih dahulu.

Memposting Kode HTML Pada Artikel 2

Dicopas dari : hermanblogtips.blogspot.com

Untuk memposting kode HTML pada artikel, Anda harus menggunakan sebuah software untuk mengkonversi/mengubah kode HTML menjadi kode yang dapat dibaca pada artikel.

Jika tidak, setiap kali kita memposting. Kode HTML-nya tidak akan muncul pada artikel. Misalnya kode < harus diganti dengan < dan kode < harus diganti dengan &lt;

Berikut adalah cara untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel:

1. Buka http://centricle.com/tools/html-entities/

2. Masukkan kode HTML yang mau ditampilkan pada artikel dalam kotak Centricle. Misalnya kode <div id='outer-wrapper'>.

3. Klik Encode. Kemudian akan muncul kode baru seperti pada gambar dibawah ini.

4. Gunakan kode baru tersebut untuk diposting pada artikel

Semoga bermanfaat..!!

Update - Pilihan selain http://centricle.com/tools/html-entities juga masih ada satu tempat lagi yaitu : http://www.blogcrowds.com/resources/parse_html.php

Teks Berjalan di Menu Bar

Thanks For : hermanblogtips.blogspot.com

Selain membuat teks berjalan di blog. Kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger
2. Pada menu Layout -> Edit HTML
3. Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Simple Preview ";
msg = " | pernak-pernik blog -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Ganti teks berwarna merah dengan teks yang ingin anda tampilkan.
Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4. Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar seperti yang anda lihat di blog ini.

Memasang Label Cloud Pada Blogger

Postingan ini dapat dari hermanblogtips.blogspot.com

Label cloud ini dikembangkan oleh phydeaux3. Sesuai dengan namanya, widget ini berhubungan dengan label sehingga bagi anda yang tidak memasang widget label pada blog anda. Cara ini tidak bisa digunakan.

Untuk label standar blogger, biasanya jumlah postingan yang termasuk dalam kategori tersebut akan tertera dalam bentuk angka yang terletak disampingnya. Tetapi beda dengan label cloud, yang menggambarkan jumlah postingan dalam bentuk ukuran font labelnya. Jadi semakin banyak postingan yang termasuk dalam kategori tersebut semakin besar pula ukuran fontnya. Sehingga terlihat lebih menarik dan tidak monoton. Selain itu, cara ini juga cocok untuk ukuran sidebar yang lebar karena susunannya mengurut ke samping.

Nah bagi anda yang ingin memasang label cloud ini, berikut adalah langkah-langkahnya:

1. Seperti biasa login ke Blogger. Pada menu Layout -> Edit HTML
2. Backup template anda
3. Beri tanda centang pada "Expand Widget Templates"
4. Letakkan kode dibawah ini diatas kode ]]></b:skin>

/* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}

5. Setelah itu, letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>

6. Lalu cari kode dibawah ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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

7. Ganti kode diatas dengan kode dibawah ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

8. Kalau sudah, klik Save Template. Selesai

Jika sobat ingin memodifikasi ukuran dan warna font labelnya. Silahkan arahkan perhatian anda pada kode seperti ini

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>

Ganti tulisan yang berwarna merah sesuai keinginan. Selamat mencoba..!

Cara Membuat Daftar Isi secara Manual

Kamis, 04 Februari 2010

Cara ini di ambil dari : www.karsono.co.cc

PENTING

Sebelum memulai tips ini sebaiknya melakukan backup terlebih dahulu. Caranya setelah Login, pilih Tata Letak, Edit HTML, Download Template Lengkap dan simpan ditempat sesuai keinginan anda. Setelah itu cntang Expand Template Widget, tunggu beberapa saat, dan mulai.

Untuk membuat daftar isi di blog ada dua cara, yaitu secara manual dan otomatis, untuk setiap pilihan cara sudah pasti ada keuntungan dan kerugian, untuk cara manual mungkin lebih ribet, dikarenakan harus selalu update link post, setiap ada penambahan post baru, sedangkan untuk cara otomatis memang tidak terlalu ribet, tetapi hal tersebut bisa berpengaruh terhadap crawl web kita, tetapi menurut google gak ngaruh si, crawl tersebut cuman informasi aja sebelum membuat daftar isi alangkah lebih baik jika kita melakukan back up terhadap file kita.

1. Membuat Daftar Isi secara Manual
Pembuatan Daftar Isi secara Manual sistemnya hampir sama dengan cara pembuatan Scroll Box, yang ditambahkan link dari postingan didalamnya, yang pertama harus dilakukan adalah membuat kode CSS-nya.

#daftar-isi-manual{ background:#C0C0C0; overflow: scroll; height:150px; font:10pt/15pt Arial, serif; color: blue }

Sedikit penjelasan untuk kode diatas, tinggi scroll box adalah 150px, dengan ukuran font adalah Arial 10 dan berwarna biru, langkah selanjutnya adalah masuk ke blogger --> Edit HTML, lalu copy kode css diatas tepat diatasnya kode ]]></b:skin>, lalu simpan, dan masuk ke Page Element, dan klik Add Gadget, pilih HTML/Script, dan masukkan kode dibawah ini:

Ganti link yang berwarna merah sesuai dengan link anda, sedangkan yang berwarana biru merupakan kalimat yang akan muncul sebagai link dan apabila ada penambahan postingan baru, berarti anda harus selalu melakukan update penambahan link baru pada kode diatas... hmm repot ya...hasil dari kode diatas adalah seperti dibawah ini

Selanjutnya masuk ke cara pembuatan daftar isi secara otomatis
2. Membuat Daftar Isi secara Otomatis

Untuk membuat daftar isi secara otomatis, masuk ke Edit HTML, dan jangan lupa centang Expand Widget Template, Seperti halnya pembuatan daftar isi blog secara manual, buatlah kode css seperti dibawah, dan letakkan di atas kode ]]></b:skin>,

#daftar-isi-otomatis{ border:2px outset blue; padding:5px 0 5px; background:#EAE9E9 }

Langkah selanjutnya cari kode di bawah ini:

<b:include data='post' name='post'/>

Untuk di template minima kode diatas ada dua, carilah kode yang pertama, bila sudah ketemu, ganti kode di atas dengan kode di bawah ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div id='daftar-isi-otomatis'>
<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>

Lalu simpan, kemudian Masuk ke Page Element, dan klik Add Gadget, posisinya terserah mau di bagian menu atau di sidebar, contohnya bisa dilihat pada menu daftar isi blog ini

<a href="http://Alamatbloganda.blogspot.com/search?max-results=100">Daftar isi</a>

Pilih HTML/Script, dan masukkan kode diatas kedalamnya, tetapi sebelumnya ganti dulu alamat link-nya sesuai dengan alamat blog anda, simpan... dan lihat hasilnya.