Kamis, 28 Februari 2013

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.

Rabu, 27 Februari 2013

Cara Mengetahui ID Twitter dengan Mudah



1. Silahkan kunjungi Tools pada link berikut ini :




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.

Sabtu, 23 Februari 2013

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;

Senin, 18 Februari 2013

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.

Minggu, 17 Februari 2013

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.



Sabtu, 16 Februari 2013

Scroll Box untuk Blog Archives




Silahkan ikuti langkah-langkah berikut ini :
1) Login akun blogger anda
2) Pilih Dashboard > Template > Edit HTML 
3) Dengan menggunakan ctrl + F, cari kode

<div id='ArchiveList'>

4) Anda akan ketemu kode ini <div class='widget-content'> sebelum kode <div id='ArchiveList'> tadi.
5) Ganti kode <div class='widget-content'> yang anda temukan di langkah 4 dengan kode di bawah :

<div class='widget-content' style='overflow:auto; height:200px'>

Contoh
Sebelum :

<div class='widget-content'>
<div id='ArchiveList'>

Setelah digantikan kode scroll box :

<div class='widget-content' style='overflow:auto; height:200px'>
<div id='ArchiveList'>

6) Save & lihat hasilnya.
NB :
Silahkan ganti 200px dengan tinggi yang anda mau.