Cara Mengganti Favicon di Blog

Favicon merupakan singkatan dari favorite icon yang digunakan pada situs web atau blog. Favicon akan muncul pada bagian atas sebuah browser ketika kita membuka situs web. Hal ini berguna untuk mengidentifikasi dengan mudah ketika berpindah dari tab satu ke tab lainnya pada browser. Seperti contoh di bawah ini :

Caranya :

1.  Masuk ke Dashboard Blogger

2.  Klik Tata Letak

3.  Cari Favicon lalu klik Edit

4.  Setelah muncul jendela, klik Pilih File untuk menambahkan icon dari komputer anda.

5.  Klik Simpan.

Catatan : Gunakan gambar bujur sangkar yang kurang dari 100 KB.

Cara Mengganti Warna Text Highlight

Biasanya kalau kita highlight text dalam blog, warna highlight yang keluar adalah biru tapi sebenarnya warna highlight tersebut boleh diganti dengan warna lain, contoh seperti gambar di atas. Ikuti tutorial di bawah :

1) Login akun blogger anda

2) Pilih Dashboard > Template > Edit HTML 

3) Dengan menggunakan ctrl + F, cari kode

body {

4) Copy paste kode di bawah sebelum body {

::-moz-selection {
background: #CC3399;
color: #ffffff;
}

NB : Pada kode yang dihighlightkan hijau di atas, anda boleh ganti dengan kode warna yang anda suka. Lihat di sini.

5) Save dan lihat hasilnya.

Cara Membuat Read More Otomatis dengan Justify di Blog

Silahkan ikuti langkah-langkah berikut ini :

1) Login akun blogger anda

2) Pilih Dashboard > Template > Edit HTML 

3) Dengan menggunakan ctrl + F, cari kode </head>

4) Copy-paste script berikut tepat di bawah </head>

<!-- Auto read more script -http://vivittrianti.blogspot.co.id- 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://vivittrianti.blogspot.co.id- End -->

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

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

<!-- Auto read more -http://vivittrianti.blogspot.co.id- 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 style='text-align:justify;' 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://vivittrianti.blogspot.co.id- End -->

NB :

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 gambar readmore'/>

Ganti url gambar readmore dengan alamat url.

6) Klik preview, jika tidak ada error, save template.

Cara Mengetahui ID Twitter dengan Mudah

1. Silahkan kunjungi Tools pada link berikut ini :

Id Checker

2. Lalu masukkan Username twitter anda, misalnya seperti Twitter saya Twitter.com/vivittrianti, maka yang berwana merah adalah Username twitter anda, lalu masukkan username twitter anda pada kotak yang tersedia tepat di bawah What is the twitter username? Lihat gambar

3. Setelah masukkan Username, lalu klik "Get ID"

4. Maka ID twitter anda akan tampil di bawahnya :

5. Gambar di atas merupakan id twitter saya. Silahkan di coba untuk melihat id twitter anda.

Cara Menambah Gambar Di Bagian Footer Blog + Koleksi Gambar

Preview :

Silahkan ikuti langkah-langkah berikut ini :

1) Login akun blogger anda

2) Pilih Dashboard > Template > Edit HTML 

3) Dengan menggunakan ctrl + F, cari kode

]]></b:skin>

4) Copy dan paste kode di bawah ini tepat di atas kode yang di cari tadi

#footer:before  {

content: url(URL Gambar);

display: block;

text-align: center;

}

NB :

Untuk mengganti posisi gambar di bawah footer, cukup ganti kode awalnya saja, dengan ini : #footer:after
Ganti URL Gambar dengan URL/alamat gambar anda.

5) Klik preview, jika tidak ada error, save template.

Pilih dan copy url yang disediakan bagi setiap icon di bawah ini :

http://dl.glitter-graphics.net/pub/295/295061u826xpu2ds.jpg

http://dl8.glitter-graphics.net/pub/59/59198hrthuy4syh.gif

http://dl2.glitter-graphics.net/pub/367/367462s9ezmd9qex.gif

http://dl7.glitter-graphics.net/pub/68/68547cwg98wmzcn.gif

http://dl6.glitter-graphics.net/pub/447/447826eewa4rjleq.gif

http://dl5.glitter-graphics.net/pub/1457/1457745k8p286od3g.gif

http://dl7.glitter-graphics.net/pub/467/467987f431u9v1sr.gif

http://dl5.glitter-graphics.net/pub/757/757785dzp8ki88r3.gif

http://dl6.glitter-graphics.net/pub/193/193336sz96uxx0py.gif

http://dl10.glitter-graphics.net/pub/1139/1139540gpr9bczcla.gif

http://dl5.glitter-graphics.net/pub/926/926675yxcjarg6tk.gif

http://dl2.glitter-graphics.net/pub/710/710042lhrfqn16lk.gif

http://dl.glitter-graphics.net/pub/738/738151yrhw8jw1in.gif

http://dl9.glitter-graphics.net/pub/2505/2505069thk2825xcf.gif

http://dl10.glitter-graphics.net/pub/2505/2505070rrejbnxzx4.gif

http://dl5.glitter-graphics.net/pub/2182/2182255yzr0viw3zb.gif

http://dl4.glitter-graphics.net/pub/1264/1264444er9u1ed4nw.gif

http://dl4.glitter-graphics.net/pub/3138/3138984iq35zfim9d.gif

http://dl6.glitter-graphics.net/pub/752/752006k4b8r6tmh1.gif

Bentuk Border

Border ini boleh diletakkan pada title post, title sidebar, comment box dan lain-lain. Di bawah disediakan bentuk border beserta dengan kodenya. Kamu hanya copy kode-kode border di bawah ini dan simpan di tempat yang kamu inginkan.

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

-moz-border-radius: 35px;

border-radius: 35px;

Button Follow dan Dashboard

Preview :

Button ini akan muncul pada sisi kanan blog anda. Caranya, ikuti tutorial di bawah :

1) Sign in akun blogger

2) Pilih Dashboard  > Tata Letak  > Tambah Gadget  > HTML / Javascript

3) Copy dan paste kode berikut ini

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

NB :

Pada ID BLOG ANDA, masukkan ID blog anda. Bagaimana caranya dapatkan blog ID itu? lihat gambar di bawah :

4) Setelah masukkan blog ID pada kode tadi, klik Save dan lihat hasilnya.

Button Back To Top

Blogger biasanya menggunakan button "back to top" untuk memudahkan pengunjung ke bagian atas blog tanpa perlu scroll. Button ini sesuai diletakkan pada blog yang biasanya mempunyai postingan yang panjang ditambah pula dengan komentar yang banyak.

Silahkan ikuti langkah-langkah berikut ini :

1) Sign in akun blogger

2) Pilih Dashboard  > Tata Letak  > Tambah Gadget  > HTML / Javascript

3) Copy dan paste kode berikut ini

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

 

NB :

Pada url gambar button dalam kode di atas, gantikan dengan url button pilihan anda. Di bawah ada disediakan berbagai jenis button "back to top" untuk anda pilih.

Contoh:

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="http://img205.imageshack.us/img205/7824/74211510.gif"></a>

URL Button :

http://img205.imageshack.us/img205/7824/74211510.gif

http://img196.imageshack.us/img196/6670/49238758.png

http://img266.imageshack.us/img266/3325/81258407.png

http://img13.imageshack.us/img13/5533/20610818.png

http://img543.imageshack.us/img543/5941/62667078.png

http://img267.imageshack.us/img267/7242/36935517.png

http://img857.imageshack.us/img857/4428/12543870.png

http://img31.imageshack.us/img31/9105/57461251.png

http://img811.imageshack.us/img811/5130/38543106.png

http://img26.imageshack.us/img26/2135/83340054.png

http://img859.imageshack.us/img859/7859/17455371.png

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/12.gif

4) Save & lihat hasilnya.