Menambahkan Nomor Halaman di Bawah Area Postingan

Ibarat sebuah buku, blog seharusnya juga memiliki sebuah halaman. Dengan menmabahkan atau memberi nomor halaman tentu akan mempermudah kita untuk mencari dan membuka buku itu. Kali ini kita kan belajar cara menambhkan halaman di bawah area postingna, mungkin untuk lebik jelas dan mengerti apa yang dimaksud halaman disini adalah seperti ilustrasi di bawah ini:

Page 1 of 9: 1 2 3 Next Last

Dengan begitu tentu akan mempermudah pembaca atau pengunjung blog kita untuk melihat-lihat isi dari tulisan atau postingan kita. Misalnya kita menampilkan 5 judul postingan dalam halaman yang pertama, 5 postingan dihalaman kedua, dan seterusnya. Langsung saja kita praktekan bersama-sama, karena caranya sangat mudah.

Cara Menambahkan Nomor Halaman di Bawah Area Postingan

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #fff;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #fff;
background-color: #333;
}

.showpageNum a {border: 1px solid #505050;
color: #666;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #fff;
background-color: #333;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #000000;
background-color: #ffffff;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #ffffff;
background-color: #333;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #fffff;
color: #ffffff;
background-color: #333333;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #ffffff;
background-color: #333;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #ffffff;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

5. Simpan Kalau sudah selesai.
6. Pindahkan Gadget HTML tersebut dengan mendragnya ke bawah Posting Blog (Blog Post)

read more “Menambahkan Nomor Halaman di Bawah Area Postingan”

Cara Membuat Judul Blog Berjalan

Membuat tulisan berjalan sudah pernah kita pelajari bersama, yaitu dengan menambahkan sedikit menambahkan kode html, mungkin untuk lebih jelanya kamu dapat baca di sini. Sekarang kita juga akan belajar untuk membuat blog kita lebih menarik lagi dengan hal yang sama, tetapi yang berjalan kali ini dalah judul blog kita.

Mungkin belum tahu yang mana judul blog itu? kalo judul blog saya ini adalah Belajar Ngeblog di BLOG, Oh ya,,,, ada sedikit tips yang berkenaan dengan judul blog kita, yaitu kita dapat mengganti judul blog kita dengan judul postingan kita agar blog kita lebih ramah dengan SEO.

Cara Membuat Judul Blog Berjalan

1. Pilih tata letak kemudian edit html
2. Jangan lupa beri tanda centang pada Expand Template Widget
3. Cari kode berikut <title><data:blog.pageTitle/></title>
4. Jika sudah ketemu, ganti kode tersebut dengan kode berikut ini

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

5. Lihat apakah berhasil dengan (PRATINJAU) jika berhasil SIMPAN

read more “Cara Membuat Judul Blog Berjalan”

Membuat Daftar Isi Blog Kita dengan Mudah

Isi blog kita yang telah kita pelihara dari kecil sampai dewasa ini tentunya sudah sangat banyak postingan, Ada banyak sekali judul postingan yang telah kita terbitkan. Tentu untuk mempermudah para pengunjung untuk melihat apa saja yang ada di blog kita tanpa melihat seluruh isi tulisan blog kita itu tidak mudah, jika orang harus melihat seluruh isi dari postingan blog kita pasti akan jenuh, Oleh sebab itulah perlu bagi kita untuk membuat daftar isi yang menampilkan judul-judul yang dari postingan kita.

Trik atau tutorial yang bagus untuk membuat daftar isi atau sitemap secara otomotis ke dalam halaman postingan. hack yang sangat rapih, bagus dan pintar ini dikembangakan oleh abu farhan. Daftar isi ini dikelompokkan berdasarkan Label

Cara Membuat Daftar Isi Blog Kita dengan Mudah
1.Login Ke blogger
2. Pilih entri Baru
3. Masukan script sebagai isi Postingan

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://belajarngebloging.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

4. Ganti belajarngebloging dengan URL kita sendiri.
5. Beri judul misal "Daftar Isi Blog" kalau sudah terbitkan entri.

read more “Membuat Daftar Isi Blog Kita dengan Mudah”

Mengganti Icon Blogger di Addres Bar

Ketika membuka atau blog kita maka akan muncul di addres bar (tempat unuk menuliskan alamat URL) akan muncul icon atau gambar kecil. Dan jika blog kita ada di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com seperti d ibawah ini.

http://belajarngebloging.blogspot.com/

Untuk kita-kita yang sedikit tak meninginkan icon blogger itu muncul di Addres Bar blog kita, bisa juga kita ganti icon blogger itu dengan yang lainnya. Misalkan denagn foto kita sendiri atau gambar-gambar yang begerak atau berformat gif. Tapi yang paling penting adalah ini sebuah icon jadi usahakan yang berukuran kecil saja, misal 24 x 24 pixel atau 32 x 32 pixel saja supaya loadingnya cepat.

Cara Mengganti Icon Blogger di Addres Bar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head>
6. Taruh script berikut ini tepat diatas kode </head>

<link href='http://img401.imageshack.us/img401/7652/eqizqu6.gif' rel='SHORTCUT ICON'/>

7. Lalu Simpan kalu sudah selesai.

Berikut ini Icon-icon yang bisa kita gunakan:

http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif

read more “Mengganti Icon Blogger di Addres Bar”