Blogspot

Menghilangkan Judul Widget Pada Sidebar Blog

Artikel kali ini ini merupakan permintaan dari teman saya. Beberapa waktu yang lalu ia mengajukan pertanyaan tentang cara menghilangkan judul widget pada sidebar. Penggunaan judul pada widget memang perlu dilakukan untuk memperjelas informasi yang disajikan di sedebar blog kita. Namun, terkadang kita juga perlu untuk tidak menampilkan judul widget tersebut. Banyak alasan kenapa kita perlu menyembunyikan judul widget tersebut. Antara lain untuk meringkas tampilan sidebar blog kita. Apalagi jika kita memiliki banyak widget pada sidebar blog otomatis disitu akan ada banyak judul widget yang tentunya menambah semrawut tampilan sidebar blog kita.

Untuk beberapa widget tertentu, kita dapat menyembunyikan judul widget tersebut dengan mudah, misalnya pada widget html, kita hanya perlu mengosongkan tab judul atau "title" dari widget html tersebut. Akan tetapi lain halnya dengan widget seperti Google+ Badge yang secara default menyertakan judul widget. Nah untuk mengatasinya, kita bisa menghilangkan judul widget tersebut secara manual melalui edit html.

1. Masuk ke Beranda Blogger
2. Klik menu Template >> edit HTML
3. Klik Pada tab menu "Jump to widget" yang berada di sebelah kanan menu "save template"
4. Pilih widget yang ingin di hapus judulnya, pada contoh disini saya memilih widget Google+ Badge yaitu "PLusBadge1"

5. Kemudian cari kode berikut

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<data:title/>
</h2>
</b:if>

6. Hapus kode berikut

<h2 class='title'>
 <data:title/>
</h2>

Selain cara tersebut kita juga dapat menghilangkan judul widget dengan menyembunyikannya memakai kode css. Caranya:
1. Cari kode

]]></b:skin>

2. Kemudian tambahkan kode css berikut sebelum kode ]]></b:skin>, berikut kode cssnya

#PlusBadge1 h2 {
display: none;
}

Demikianlah artikel tentang menghilangkan judul widget pada sidebar blog. Semoga artikel kali ini bermanfaat, selamat mempraktikan. Sampai jumpa pada artikel berikutnya sekian dan terimakasih.




Menambah Yahoo Messenger Pada Blogspot

Pada postingan kali ini kita akan memberikan ulasan tentang cara memasang YM (Yahoo Messenger) Status pada Blog. Kalian bebas bisa naruh di blog apa..boleh Blogger, Wordpress atau yang lain.

ane belajar dari : http://www.pandaanku.com/2011/08/cara-memasang-status-ym-pada-blog.html

Untuk cara memasangnya gak beda jauh ketika kita memasang widget HTML baru pada Blog kita.

Nah sebelum itu kalian Pilih dulu icon YM sesuai pilihan kalian. Disini ada masing-masing 2 status pasangan, yakni online status dan offline status. Namun apabila kalian kepingin membuat gambar sendiri untuk dijadikan icon YM, baca tutorialnya cara Membuat Icon Status Yahoo! Messenger Dengan Gambar Sendiri

Untuk icon 0-5

Untuk icon 6-8

Untuk icon 9-16

Untuk icon 16-24

Nah, apabila sudah punya pilihan iconnya, sekarang tinggal buka Blogger atau Wordpress saja. 

Silahkan buka Design terus klik Page Elements -->Add Gadget --->klik opsi HTML /Javascript
Setelah itu copas kode dibawah ini:

<a href="ymsgr:sendIM?Id_yahoo_kamu"> <img src="http://opi.yahoo.com/online?u=Id_yahoo_kamu&amp;m=g&amp;t=0&amp;l=us"/>

</a>



Penting: Dari kode script diatas kalian harus mengganti tulisan Id_yahoo_kamu (ada 2 tulisan) dengan ID akun yahoo kamu sebenarnya dan Tulisan t=0 dengan Kode Status yahoosesuai pilihan diatas


Save dan lihat hasilnya...




Sekali lagi saya ingatkan apabila kamu menginginkan agar icon YM adalah gambar, foto, atau logo kamu sendiri maka baca tutorialnya DISINI atau yang berjudul Membuat Icon Status Yahoo! Messenger Dengan Gambar Sendiri 


contoh nya >>



<a href="ymsgr:sendIM?setya_wa2n"> <img src="http://opi.yahoo.com/online?u=setya_wa2n&amp;m=g&amp;t=14&amp;l=us"/>

</a>



Mengganti icon/gambar pada Address Bar Blogspot


Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon kecil pada address bar (kotak untuk mengetikkan alamat web) . jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

lalu dibarengi dengan alamat blognya.

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat).

kalau belum bisa membuat gambarnya ikuti langkah-langkah berikut ini :

1. Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon

2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs

• http://www.favicongenerator.com atau
• http://www.favicon.co.uk
  Anda dapat memilih ukuran favicon (16x16, 32x32, 48x48, 64x64) atau
• http://favicon-generator.org
  atau
• http://www.favicon.cc
  Anda dapat membuat favicon sendiri sesuai kreasi Anda

3. Klik pada tombol Browse...

4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon

5. Klik pada tombol Generate Favicon.

6. Setelah proses selesai, klik pada Click Here to Download your favicon.

7. Save ke komputer anda.

Setelah itu .....
masuk ke "Tata Letak --> Edit HTML" trus tempatkan script berikut sebelum kode

</head>

<link href='http://img98.imageshack.us/img98/9617/image3cr0.gif' rel='SHORTCUT ICON'/>

atau bisa juga seperti kode dibawah ini :

<link rel="shortcut icon" href="http://img98.imageshack.us/img98/9617/image3cr0.gif"/>

Ganti huruf yang berwarna Hijau dengan lokasi gambar dimana kamu menyimpan gambar tersebut yang kita upload di tempat hosting gambar.
contohnya kamu mengupload gambar kamu di photobucket dan juga di imageshack sebagai contoh kamu meng-upload di Album Picasa caranya seperti di bawah ini :

1. Login ke picasa dengan account google di http://picasaweb.google.com
2. Tekan tombol I accept.
3. Jika anda memiliki software picasa yang sudah terinstall pada PC, anda dapat meng-uploadnya dengan mudah. Tekan tombol launch picasa dan software pun akan berjalan. Namun pada kesempatan kali ini, kita gunakan cara tradisional yaitu meng-upload gambar melalui browser.
4. Setelah anda menekan tombol I accept, silahkan dilanjutkan dengan klik tombol upload.
5. Isikan form title, date, dan seterusnya. jika selesai tekan tombol continue.
6. Tekan tombol browse dan arahkan pada file yang akan anda upload
7. Tekan tombol start upload untuk menguploadnya ke dalam server picasa
8. Setelah selesai, anda akan menjumpai tampilan thumbnail gambar tersebut. Klik gambar tersebut untuk melihatnya secara full
9. Klik kanan gambar tersebut dan pilih properties.
10. Anda akan mendapatkan URL gambar yang kurang lebih seperti ini http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (hanya contoh alamat gambar).
11. Kembali lah pada situs blogger.com dan masuklah pada tab layout * Edit HTML
12. Link gambar yang bertuliskan http://img98.imageshack.us/img98/9617/image3cr0.gif anda ganti dengan link yang baru yaitu http://lh6.ggpht. com/_4r8ISY........................oTZz4tK4/gambar-header.gif (contoh alamat gambar).
13. Lakukan hal yang sama untuk gambar2 yang lain

atau kalau kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif

Cara Membuat Readmore Otomatis Ringan di Blog

Cara Membuat Readmore Otomatis Ringan di Blog. Sebenarnya banyak cara pemasangan readmore otomatis pada blog, ada yang hanya menggunakan kata-kata, gambar, dll. Tetapi kali ini saya akan share tentang Cara Membuat Readmore Otomatis yang hanya menggunakan kata-kata agar tidak mengurangi loading blog kita.

Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan

Cara Membuat Readmore Otomatis

1. Login blogger
2. Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head>, Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Keterangan kode berwarna merah:

• summary_noimg =  banyaknya huruf jika tidak ada gambar
• summary_img = banyaknya huruf jika ada gambar
• img_thumb_height = Ukuran tinggi gambar
• img_thumb_width = Ukuran lebar gambar

5.Selanjutnya cari kode <data:post.body/> dan Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

6. Tulisan Readmore bisa anda ganti sesuai dengan keinginan anda.
7. Simpan template dan Lihat hasilnya.