Membuat Label Cloud Blog Menjadi warna warni

Label adalah untuk mengkategorikan dan penanda tulisan yang diposting di blog. Blogger.com sendiri sudah menyediakan gadget (widget) untuk menampilkan label dalam bentuk cloud yaitu ukuran font berbeda-beda. Label yang sudah kita buat, sesuai dengan isi postingan bisa menjadi menu di blog kita. Menu adalah sebuah navigasi untuk mempermudah penelusuran postingan.

Masih ingat dulu, blogger belum memberikan fitur Label Cloud, masih berberuk daftar atau list. Sehingga untuk menampilkan label menjadi bentuk Cloud yang biasanya sering ditemui di blog yang berplatform wordpress harus mengedit template. Bahkan untuk membuat label menjadi lebih menarik ada yang menampilkannya menjadi bentuk animasi flash atau blogumulus.

Nah sekarang, kita akan belajar untuk membuat label cloud yang warna-warni. Label akan ditampilkan dalam ukuran font yang berbeda tiap labelnya juga dengan warna yang berbeda-beda. Dengan warni-warni tentu akan membuat blog lebih berwarna dan menarik, selain itu menampilkan label membuat pengunjung lebih mudah menelusuri setiap halaman di blog kita.

Cara Membuat Label Cloud Blog Menjadi Warna-Warni
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin>

* Label Could Warna-Warni - http://sutul-404.blogspot.com */
.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}

5. Kode merah adalah kode warna, Simpan Template jika sudah selesai

Di atas langkah awal, masih ada langkah selanjutnya untuk menampilkan label cloud yang warna-warni. Langsung saja kita ikuti langkah selanjutnya;

1. Pilih Tata Letak, kemudian Tambah Gadget
2. Lalu pilih Label dan pilih tampilkan Cloud
3. Klik Simpan jika sudah selesai.

Jika sudah selesai semua, coba lihat hasil dari membuat Label Cloud menjadi warna-warni.
Source : kurniasepta.blog

Membuat ReadMore di Blog

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://bloganda.blogspot.com- Start -->

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar

summary_noimg = 430; 

summary_img = 340; 

img_thumb_height = 150;

img_thumb_width = 150;

</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>

<!-- Auto read more script -http://bloganda.blogspot.com- End -->

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkanimg_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://bloganda.blogspot.com- Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<a class='more' expr:href='data:post.url'>Read More >></a>

</b:if>

</b:if>

<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

Kostumisasi:

Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar. 

readmore bisa rata kiri kanan (justified)? 

Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:

<div expr:id='&quot;summary&quot; + data:post.id'>

Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'

Jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang script ini.

Cara pasang lagu di blog [ part III ]

• Kunjungi situs penyedia layanan tersebut, klik disini !
• Selanjutnya click “Sign Up”
• Isi data dengan benar sesuai dengan ketentuan dan syarat yang berlaku
• Kemudian click “Create Playlist” pada menu bar

• Step pertama yaitu “ADD MUSIC”
• Cari jenis music yang di inginkan pada kotak search yang di sediakan
• Tambahkan lagu-lagu yang telah di pilih ke playlist dengan meng-click tombol + (plus)
• Step kedua yaitu “CUSTOMIZE”
• Pada bagian Skin, pilih jenis tema yang di sukai dan pasti nya unik-unik kan?
• Pada bagian Color and style, ubah sesuai dengan keinginan aja
• Pada bagian Setting, biarkan secara default seperti itu
• Step ketiga yaitu “SAVE PLAYLIST”
• Isi nama playlist di kotak Playlist Title, isi juga kotak Playlist Description & Tags
• Pilih Genre yang sesuai dengan music yang di pilih di step pertama tadi
• Kemudian click “SAVE (GET CODE)”
• Pilih jenis Blog yang kamu gunakan, misal Blogger.com
• Kemudian copy coding yang di berikan

• Step 1: Pada Dashboard, click “LAYOUT”
  
• Step 2: Click “ADD GADGET”
  
• Step 3: Add Html/Javascript widget
• 
• Step 4: Paste coding yang tadi di copy di kotak konten, kemudian click “SAVE CHANGES”

• Selesai deh..
  
                                                    
•                                       =-=-=--=SelamatMencoba=-=-=-=

Cara pasang lagu di blog [ part II ]

nih biar simple .. caranya bgini

1. Silakan kunjung ke situs musicdumper.com

2. Tuliskan judul lagu yang anda inginkan di kotak search.

3. Pilih dan klik salah satu judul lagu yang di inginkan.

4. Tunggu beberapa saat muncul musiknya play.

5. Lihat di kotak Embed Options, copy code html tersebut ke blog kamu.


Cara copy code html ke blogspot kamu :

1. Login ke blogger.com

2. Klik Rancangan.

3. Klik tambah gadget.

4. Pilih dan klik html/javascript.

5. Masukkan judul dan kode scriptnya di kotak html/javascript.

6. Setelah selesai dan klik Simpan. Lihat hasilnya.

                                                  -------------=Selamat Mencoba=-----------------

Cara pasang lagu di blog [ part I ]

Nah kalau kamu memang ingin memasukkan sebuah lagu kedalam blog kamu silahkan ikuti tutorial berikut ini :

1.seperti biasanya sign in duluh kedalam account blogger kamu

2.kemudian copy dan paste kode dibawah ini kedalam page element baru blog anda. Caranya : Di [Dashboard] klik tab [Tata Letak] kemudian tambah sebuah page element baru dengan mengklik tombol[Add a Gadget]>>>[html/java script]

<div align='center' style='font:bold 11px Verdana; width:310px'><a style='background-color:#eeeeee;display:block;width:310px;border:solid 2px black; padding:5px' href="http://www.codelagu.com/index.php?search=Nidji+-+Laskar+Pelangi&source=all" target='_blank' title='Nidji - Laskar Pelangi.mp3'>Nidji - Laskar Pelangi.mp3<br/><img border='0' src='http://img232.imageshack.us/img232/1337/iconmusicxc5.gif' width='310' height='51'><br/><embed name='RAOCXplayer' src='http://kodelagu.net/Playing/Nidji - Laskar Pelangi.Codes' type='application/x-mplayer2' width='310' height='45' autoplay='true' ShowStatusBar='0' ShowControls='1' EnableContextMenu='0' DisplaySize='1' loop='false' pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/' autostart='1' ></embed></a><div align='center'><a href='http://www.musik-live.net' target='_blank' title='Free Mp3 at www.musik-live.net'>Free Mp3 Codes Indo at www.musik-live.net</a></div></div>

Catatan :
“Kode yang tertera diatas adalah kode untuk lagu Laskar Pelangi Dari Nidji. lagu ini akan diputar secara otomatis ketika halaman blog anda dibuka.kalau anda mau anda juga dapat menggantinya dengan kode lagu lain, kodenya bisa anda dapatkan dari beberapa situs penyedianya secara gratis,diantara dari situs penyedia kode lagu tersebut adalah : http://www.musik-live.net/.”

3.setelah kode lagu tersebut di paste kedalam page elemen baru kamu tadi tekan tombol [save]

4.Selamat mencoba…!!!