Toba Song

Embed Musik Web

10.18 |

Cara Membuat Cube Photo

13.04 |

Tips Memasang Readmore Blogger

11.37 | Tips dan Trik

Tips Memasang Readmore Blog - Blogger template umumnya tidak semua disertai ‘read more’, tergantung penyesuaian gaya dari sang desainernya. Tanpa ‘read more’ sering ditemui pada template default yang telah disediakan oleh Blogger. Permasalahannya ketika berada di halaman utama muncul tulisan artikel secara vertikal memanjang sehingga cukup memberatkan loading blog.

Membuat read more pada blog solusi jitu meringankan proses, blog tertata rapi dan terlihat modis. Menu entri Blogger sebenarnya telah menyediakan aplikasi read more yang dapat dilakukan secara manual, yaitu menambahkan kode  dibagian editor HTML.

Ada cara otomatis ‘gak ribet’ membuat read more di blog. Demi memudahkan sobat dalam ‘ngeblog’, langsung saja ikuti langkah-langkah cara memasang read more otomatis pada blog di bawah ini:
1. Silahkan login ke akun Blogger,
2. Setelah berada di halaman Dashboard, beralih ke Template,
3. Klik tombol Edit HTML,
4. Sembarang klik di kotak editor, tekan Ctrl + F cari kode </head>,
5. Copykan kode berikut di atasnya,

<SCRIPT type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 400;

summary_img = 440;

img_thumb_height =170;

img_thumb_width = 200;

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

    Sobat dapat mengatur panjang dan lebar readmore dengan mengubah angka berwarna biru,
    berikut keterangannya:
- summary_noimg = 440: tinggi potongan artikel tanpa gambar.
    - summary_img = 350: tinggi potongan artikel dengan gambar.
    - img_thumb_height = 170: ukuran tinggi thumbnail.
    - img_thumb_width = 200: ukuran lebar thumbnail.

6. Langkah selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> dengan kode script
    di bawah 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:right;padding-top:20px;'><a expr:href='data:post.url'>»»  Read more...</a></span> </b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

    Untuk mengubah kata ‘read more’, silahkan ganti tulisan yang berwarna merah.

7. Selesai, klik Simpan Template. Jika langkah-langkah di atas sudah benar, sobat sudah bisa
    melihat hasilnya.

Demikian tutorial cara membuat read more pada blog, blogger otomatis. Jika ada kendala mengenai ukuran read more, lakukan setelan sampai ukurannya terlihat bagus. Terima kasih..!!

Pagging Halaman Blogger

12.45 | Tips dan Trik

Membuat halaman Paging seperti :Page 4 of 5 Previous 1 2 345 Next. Pertama pilih template kemudian klik Edit HTML cari kode ]]></b:skin>
Selanjutnya tempatkan kode di bawah ini persis di atas kode ]]></b:skin>

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Cari kode </body> Kemudian letakkan script dibawah ini di atas kode </body> tersebut

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://borisbaginda.googlecode.com/files/paging.js'
type='text/javascript'/>

Jangan lupa SIMPAN templatenya. Silahkan mencoba!!

12.28 | Mp3

Download MP3 Batak Gratis Trio Satahi

Embed Musik Web

Cara Membuat Cube Photo

Tips Memasang Readmore Blogger

Pagging Halaman Blogger

Download MP3 Batak Gratis Trio Satahi

Globe

Cube Photos

Kategori

Komentar FB

Terjemahan

Sound Equalizer

Pencarian

Artikel Terbaru

Mengenai Saya

Jam

Music Web