Recent post
Archive for Januari 2012
Pada template bawaan blogspot setiap label di klik maka jumlah artikel akan tampil semua, jika jumlah nya banyak maka halaman blog kita menjadi panjang ke bawah. Ini tentunya sangat tidak menarik untuk blog kita, apalagi loading page nya menjadi sangat lambat.
Pada artikel ini akan menjelaskan bagaimana Cara mengatur jumlah artikel yang tampil pada saat klik label.
Masuk blogger > rancangan > edit html > centang expand template widget
cari kode expr:href='data:label.url Kemudian tambahkan kode ini + "?max-results=5" setelah kode expr:href='data:label.url, nanti jadi nya seperti di bawah ini
CATATAN :
terdapat banyak kode expr:href='data:label.url yang berada di template kita, jadi tambahkan kode + "?max-results=5" pada semua kode expr:href='data:label.urlyang ada di template.Setelah semua selesai di tambahkan, simpan template.
Kemudian cara ini untuk yang memakai navigasi nomor halaman, (baca : Cara membuat navigasi nomer halaman).
Cara nya masih sama dengan yang di atas yang berbeda adalah kode yang harus di tambah. Kode yang harus di tambahkan adalah kode berikut ini + "?&max-results=5" nanti jadi nya akan seperti ini :
Masih sama seperti di atas kode tersebut harus di tambahkan pada semua kodeexpr:href='data:label.url yang terdapat di template.
Jika semua sudah benar simpan template.
Perhatikan results=5, angka 5 adalah jumlah artikel yang akan tampil saat label di klik, jadi bisa sobat ganti sesuai dengan keinginan sobat.
Pada artikel ini akan menjelaskan bagaimana Cara mengatur jumlah artikel yang tampil pada saat klik label.
Masuk blogger > rancangan > edit html > centang expand template widget
cari kode expr:href='data:label.url Kemudian tambahkan kode ini + "?max-results=5" setelah kode expr:href='data:label.url, nanti jadi nya seperti di bawah ini
expr:href='data:label.url + "?max-results=5"
CATATAN :
terdapat banyak kode expr:href='data:label.url yang berada di template kita, jadi tambahkan kode + "?max-results=5" pada semua kode expr:href='data:label.urlyang ada di template.Setelah semua selesai di tambahkan, simpan template.
Kemudian cara ini untuk yang memakai navigasi nomor halaman, (baca : Cara membuat navigasi nomer halaman).
Cara nya masih sama dengan yang di atas yang berbeda adalah kode yang harus di tambah. Kode yang harus di tambahkan adalah kode berikut ini + "?&max-results=5" nanti jadi nya akan seperti ini :
expr:href='data:label.url + "?&max-results=5"
Masih sama seperti di atas kode tersebut harus di tambahkan pada semua kodeexpr:href='data:label.url yang terdapat di template.
Jika semua sudah benar simpan template.
Perhatikan results=5, angka 5 adalah jumlah artikel yang akan tampil saat label di klik, jadi bisa sobat ganti sesuai dengan keinginan sobat.
Kali ini saya akan membahas bagaimana cara membuat navigasi nomor halaman pada blogspot. Navigasi nomor halaman yang saya maksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'.
Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :
- Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
- Mempercantik tampilan
Nah, berikut cara membuat navigasi nomor halaman pada blogspot :
1. Sobat login ke blog sobat >> Rancangan >> Edit HTML >> beri tanda centang pada expan widget template
2. Cari tag ]]></b:skin>
3. Copy lalu paste kode CSS berikut diatas ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
4. Selanjutnya sobat cari lagi tag </body>
5. Copy kode berikut lalu paste diatas tag </body> tersebut
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
6. Save template sobat dan lihat hasilnya..
Langkah-langkah Cara Membuat 3 Kolom Widget diBawah Header :
1. login blog
2. rancangan >> edit HTML (centang Expand Template Widget)
3. cari kode ]]></b:skin>
4. lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>
Silahkan sobat modifikasi kode HTML diatas agar sesuai dengan template blog sobat.
5. cari kode seperti dibawah ini, jika tidak ada cari kode yang hampir sama seperti kode dibwah ini.
pada tulisan yang berwarna merah tergantung pada nama blog sobat.
6. lalu tambahkan kode dibawah ini dibawah kode diatas
<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div>
1. login blog
2. rancangan >> edit HTML (centang Expand Template Widget)
3. cari kode ]]></b:skin>
4. lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>
/* Top Header
---------------------------- */
#topheader {
width:930px;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding:0 0 10px;
}
#topheader a:visited {
color:gray;
text-decoration:none;
}
#topheader h2 {
font-size:11px;
font-weight:700;
line-height:1.4em;
text-transform:uppercase;
border-bottom:1px dotted silver;
margin:0 0 10px;
padding:20px 0 2px;
}
#topheader ul {
color:#333;
margin:0;
padding:0;
}
#topheader ul li {
list-style-type:none;
background:fff;
border-bottom:1px dotted #ccc;
padding-left:17px;
margin-top:2px;
}
#left-topheader {
width:360px;
float:left;
padding-left:15px;
}
#center-topheader {
width:230px;
float:left;
padding:0 20px;
}
#right-topheader {
width:260px;
float:right;
padding-right:15px;
}
Silahkan sobat modifikasi kode HTML diatas agar sesuai dengan template blog sobat.
5. cari kode seperti dibawah ini, jika tidak ada cari kode yang hampir sama seperti kode dibwah ini.
<b:section class='blogname' id='top' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Baso Selalu (Header)' type='Header'/>
</b:section>
pada tulisan yang berwarna merah tergantung pada nama blog sobat.
6. lalu tambahkan kode dibawah ini dibawah kode diatas
<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div>
Contoh Gambar
Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )
Pasang Kodenya Di Bawah ini di atas kode </head> :
<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>
Pasang Kodenya Di Bawah ini di atas kode </head> :
<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>
Dan kalau sobat mau tampilan gambar yang lain silahkan ikuti langkah langkah berikut ini:
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik Edit HTML.
- Klik Expand widget template.
- Cari kode <b:skin><![CDATA[
- Kalau sudah ketemu copy kode dibawah ini diatas kode <b:skin><![CDATA[
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
7.Lalu cari lagi kode ]]></b:skin> Dan letakkan kode berikut tepat di atasnya.
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltdg9-PxGlVGtgm28fibTcz_GhTGkTqn5mRw0gaTuDCThZ3z8cPc3CO49-8HdGsCRWuOEhb92JK5oWTWzdX6Iwac7KIFOBKpC2iVRk5ov_UcQeVaMPw13R3NfrALrPEMSG8UhyphenhyphenyrNf95W/) no-repeat right top;
text-indent: -9999px;
}
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltdg9-PxGlVGtgm28fibTcz_GhTGkTqn5mRw0gaTuDCThZ3z8cPc3CO49-8HdGsCRWuOEhb92JK5oWTWzdX6Iwac7KIFOBKpC2iVRk5ov_UcQeVaMPw13R3NfrALrPEMSG8UhyphenhyphenyrNf95W/) no-repeat right top;
text-indent: -9999px;
}
8. Lalu cari lagi kode <body> Dan letakkan kode berikut tepat di dibawahnya. <div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger'target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVkvxGZ5pHQ8QtIIWZsGEb1KctQweIpO6Ec4g74Z6pjLHFSRRNmkZYWxMZzHwETMd93Tje-tnfR89i2s9c0u1g7P3WjaGr0Akb6U7R0dYnay2oqL1q7rlBVvhMVBGmmDduyPAsqq_24YX/'/>
<span class='msg_block'/>
</a>
</div>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVkvxGZ5pHQ8QtIIWZsGEb1KctQweIpO6Ec4g74Z6pjLHFSRRNmkZYWxMZzHwETMd93Tje-tnfR89i2s9c0u1g7P3WjaGr0Akb6U7R0dYnay2oqL1q7rlBVvhMVBGmmDduyPAsqq_24YX/'/>
<span class='msg_block'/>
</a>
</div>
9. Anda bisa mengganti warna merah dengan Link yang anda inginkan. Saran saya Link RSS atau link berlangganan.
10 Simpan template.
1.Selesai
Untuk mengganti gambar dinding, sobat bisa mengganti URL berikut :
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltdg9-PxGlVGtgm28fibTcz_GhTGkTqn5mRw0gaTuDCThZ3z8cPc3CO49-8HdGsCRWuOEhb92JK5oWTWzdX6Iwac7KIFOBKpC2iVRk5ov_UcQeVaMPw13R3NfrALrPEMSG8UhyphenhyphenyrNf95W/) no-repeat right top;
text-indent: -9999px;
}
