1 Cara membuat Auto Read More

Meskipun blogger sekarang sudah support Read More otomatis, tetapi masih banyak orang yang gemar menggunakan Custom auto readmore. Mengapa demikian? karena blogger auto readmore masih harus menyisipkan kode di akhir postingan. Jadi agak masih repot.

Readmore atau juga bisa di sebut Jumplink berfungsi untuk memperingan Loading blog serta memperindah tampilan blog di Homepage. Cara memasangnya tidak terlalu sulit. Ikuti langkah - langkah di bawah ini:

1. Login pada Blogger
2. Masuk ke halaman Template
3. Selanjutnya Edit HTML lalu Lanjutkan
4. Expand Template Widget (Jangan lupa, karena bila ini tidak dilakukan. Kamu akan pusing 7 keliling mencari kode)
5. Jika sudah, cari kode </head> (cari menggunakan Ctrl + F) pasang kode di bawah ini di atas 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)

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

6. Kemudian, cari kode  <p><data:post.body/></p> / <data:post.body/> (dua - duanya sama - saja)
7. Ganti kode tersebut dengan kode 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:left'><a expr:href='data:post.url' style='float:right;'><b>Read More..</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8. Simpan Template

Keterangan:

• Kode yang berwarna Merah bisa sobat ganti dengan gambar. yaitu dengan menambahkan kode <img border='0' src='URL Gambar Kamu'/></a>
• Jika sobat ingin membuat Read More dengan Judul, Misal: Readmore - Cara membuat Auto Read More. Ganti kode yang berwarna  Merah dengan kode <b>READ MORE - <data:post.title/></b>

Selamat Mencoba!!!

Read More

11 Cara membuat Menubar pada blog

Hallo sobat, kita ketemu lagi. Kali ini saya akan sharing tutorial tentang Cara membuat Menubar di blog. Sobat tau menubar kan? benar.. Menubar adalah navigasi menu yang dibuat untuk memudahkan pengunjung blog mengunjungi suatu halaman blog. Biasanya menubar ini terletak di bawah header. Cara memasangnya tidak terlalu sulit kok sobat. Ikuti langkah - langkah di bawah ini:

1. Login pada blogger
2. Masuk ke halaman Template 
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> , jika sudah ketemu pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
margin-top:5px;
float:center;
background:#de360f;
height:35px;
border:1px solid #de360f;
}
#menubar-left{
float:left;
width:900px;
padding-top:1px;
}
#menubar ul{
position:relative;
overflow:hidden;
padding:0;
margin:0;
font-weight:none;
font-size:12px;
}
#menubar li{
cursor:pointer;
float:left;
margin:0 padding:0;
height:32px;
}
#menubar ul li{
float:left;
list-style:none
}
#menubar ul li a{
border-right:1px solid #F0512D;
float:left;
padding: 9px 12px;
text-decoration:none;
color: #ffffff;
font-weight:bold;
font-size:14px;
font-family: Calibri;
}
#menubar ul li a:hover{
background:transparent;
color: #ffa500;
}
#menubar ul li a.current, #menubar ul li a.current:visited, #menubar ul li a.current:hover{
color:#ffa500;
}

5. Setelah Itu Cari kode <div id='header-wrapper'> atau lebih lengkapnya seperti ini:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy (Header)' type='Header'/>
</b:section>
</div>

6. Pasang kode di bawah ini di bawahkode yang mirip dengan kode Pada no 5

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a href='http://anjeunn.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='Lihat Seluruh Postingan Disini'>Daftar Isi</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='budayakan bertukar link'>Tukar Link</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='Kumpulan tool - tool untuk blog'>Blog Tools</a></li>
<li><a href='http://anjeunn.blogspot.com/p/guest-book.html' title='Sapa pengunjung lainnya :D'>Guest Book</a></li>
</ul>
</div>
</div>

7. Simpan Template

Keterangan:
- Kode yang berwarna Biru adalah kode ukuran menubar. Sehingga bisa sobat ganti sesuai keinginan
- Kode yang berwarna Merah HARUS sobat ganti dengan URL yang di inginkan, misal: Url ke suatu postingan / Kategori
- Kode Yang berwarna Ungu adalah Nama dari URL yang di inginkan
- Untuk title='bla..bla..bla' adalah deskripsi dari URL yang di inginkan
- Menubar bisa sobat ganti dengan mengcopy kode <li>hingga..</li> dan pastekan di bawahnya

Semoga dengan artikel ini sobat mengerti untuk memasang Menubar. Selamat Mencoba!!!

Read More

0 Cara menghilangkan Navbar blogger

Pada postingan sebelumnya kita telah membahas tentang Membuat navbar auto hide. Kali ini bahasan kita hampir sama yaitu tentang Menghilangkan Navbar blogger. Selain membuat navbar autohide navbar blogger juga bisa dihilangkan, sobat hanya tinggal menyelipkan kode ke template sobat.

 Tapi, saya tidak bertanggung jawab oke! atas kejadian sesuatu di blog sobat suatu hari. Alias resiko di tanggung masing - masing. Langsung aja deh kita ke tekapee,,,

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> , jika sudah ketemu sisipkan kode di bawah ini, di atasnya

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

5. Simpan Template

Simple kan? semoga artikel ini bermanfaat bagi kita semua. Amin.. Selamat Mencoba ;)

Read More

0 Cara membuat Navbar blogger auto hide

Pada kesempatan ini saya akan sharing tutorial tentang Cara membuat Navbar blogger auto hide. Sobat pasti tau kan Navbar blogger itu seperti apa? yups, navbar blogger adalah menu navigasi yang nangkring di atas Header blog.

Navbar memang tidak mengganggu tampilan layout, tapi kalo Navbarnya bisa auto hide kan akan lebih menarik lagi, Cara membuatnyapun mudah. hanya tinggal memasang sedikit kode css pada template sobat. Langsung deh, ke TeKaPe..

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit Html lalu Lanjutkan
4. Cari kode ]]></b:skin>
5. Sisipkan kode di bawah ini di atasnya

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

6. Simpan Template

Bagaimana? navbarnya sudah autohide kan? yasudah deh, sampai disini dulu oke, Sampai Jumpa :)

Read More