20120903

Mengganti Icon Blog

Buat yang pengen icon Blognya berubah jadi gambar "pribadi" caranya kurang lebih seperti ini :

1. Buat URL gambar yang akan digunakan. Misalnya dengan upload gambar di photobucket.com ; sign in ke photobucket.com, kalau yang belum punya akun di photobucket.com bisa sign in lewat Facebook atau Twiter. Kemudian upload gambar yang akan digunakan, setelah di upload gambar tersebut akan memiliki URL.

2. Setelah mendapat URL gambar, masuk ke blog

3. Pilih Desain, kemudian Template dan pilih edit HTML

4.Pilih lanjutkan pada jendela seperti gambar dibawah ini
 
 5. Centang Expand Template Widget



6.Cari kode </head> , untuk mempermudah gunakan ctrl f.


7.Letakkan kode berikut sebelum kode diatas :
<link href='Masukan kode URL photo disini' rel='SHORTCUT ICON'/>

8. Kemudian Simpan template
Baca Selengkapnya →Mengganti Icon Blog

Membuat "Baca Selengkapnya"

Berikut ini cara membuat "Baca Selengkapnya" di blog (versi baru) biar tampilan blog gak terlalu panjang:

Seperti ini....


1. Masuk ke akun blog

2.Klik Desain (pojok kanan atas blog)
 
3. Pilih Template dan pilih edit HTML
4. Setelah memilih edit HTML  akan muncul jendela baru, pilih Lanjutkan
5. Centang Expand Template Widget
6. Cari kode </head> , untuk mempermudah gunakan find dengan menekan ctrl+f.

7. Copy kan kode berikut diatas kode </head> :
<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>
8. Cari kode <data:post.body/> dan anti dengan 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'><b>Baca Selengkapnya</b> &#8594;<data:post.title/></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9. Pilih Simpan template 

10. Tulisan berwarna biru bisa diganti sesuai selera
Float untuk tata letak
"Baca selengkapnya" untuk tulisan yang akan ditampilkan
summary_noimg = 250 untuk berapa banyak karakter postingan tanpa gambar
summary_img = 250
untuk berapa banyak karakter postingan dengan gambarimg_thumb_height = 120 untuk thumbnail dalam piksel (tinggi)
img_thumb_width = 120
untuk thumbnail dalam piksel (lebar)


SUMBER : lanoblog.blogspot.com

 
Baca Selengkapnya →Membuat "Baca Selengkapnya"