Minggu, 03 Oktober 2010

Ads Popup - Iklan Yang Muncul Tiba-tiba (Update!)


Sudah mencoba artikel "Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)"? Nah, artikel ini merupakan update dari artikel sebelumnya yang tentunya dengan tampilan baru dan lebih segar. Walaupun masih menggunakan script yang sama tapi sekarang Blogger TuneUp menggunakan sentuhan yang lebih bagus pada kode CSS versi 3. Penasaran?


Menambahkan Ads Popup - Iklan Yang Muncul Tiba-tiba pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih type "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada bagian konten

<style type="text/css">

#topbar {

 position:absolute;

 z-index: 100;

 padding: 8px;

 background: #eee;

 background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));

 background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));

 border: 1px solid #fff;

 border-radius: 10px;

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 -webkit-box-shadow: #600 0 2px 15px;

 -moz-box-shadow: #600 0 2px 10px;

 margin:0 auto 10px;

 float:left;

 color:rgba(0, 0, 0, 0.75);

 font-size: 12px;

 font-family: Verdana, serif;

 text-shadow:0 1px 0 #FFFFFF;

}

#topbar img {

 border:none;

}

#topbar .tombol {

 margin:0;

 padding-bottom:5px;

 text-align:right;

}

#topbar .tombol button {

 color:#FFFFFF;

 border: solid 1px #494949;

 margin:0;

 padding:2px 15px;

 cursor: pointer;

 text-shadow: 0 1px 1px rgba(0,0,0,.6);

 background: #5f5f5f;

 background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));

 background: -moz-linear-gradient(top, red,  #454545);

}

#topbar .isi_iklan {

 background-color:#FFFFFF;

 margin:0;

 padding:4px;

 width: 468px;

 border: 1px solid #999;

}

</style>

<script src="http://hensblog.googlecode.com/files/js_pop_up.js" type="text/javascript"></script>

<script type="text/javascript">

var persistclose=1

var startX = 20

var startY = 20

var verticalpos="fromtop"

</script>

<div id="topbar">

<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>

<div class="isi_iklan">

<!-- Kode Iklan-->

</div>

<a style="text-decoration: none; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://modification-blog.blogspot.com/2010/09/ads-popup-iklan-yang-muncul-tiba-tiba.html" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blogger</span> <span style="color: #f00;">TuneUp</span></a>

</div>
Langkah 5
Klik tombol simpan dan preview blog anda... (Hmm... Baguskan?)

Membuat Rotasi Banner (Banner Rotator)


Sebelumnya Blogger Tune-Up pernah membahas cara membuat Randoms Ads Banner (menampilkan Banner bergantian secara acak), banner tersebut akan muncul setiap pengunjung berganti halaman. Tapi salah seorang pembaca menginginkan Banner yang bergantian/berotasi tanpa harus berganti halaman. Sekarang Blogger Tune-Up akan memaparkan bagaimana membuat Banner yang muncul secara berotasi (bergantian tanpa bergantian halaman) atau sering di sebut Banner Rotator. Coba lihat contoh Banner Rotator yang telah terpasang dihalaman utama Design Graphics.

Membuat Rotasi Banner - Banner Rotator

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML" dan check "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
.m_banner_hide{
 display:none;

}

.m_banner_show{

 display:block;

}
Langkah 5
Cari kode dibawah ini :
</head>
Langkah 6
Masukan kode dibawah ini tepat diatas kode pada Langkah 5:
<script type="text/javascript" src="http://hensblog.googlecode.com/files/mBanner.js"/>
Langkah 7
Kembali ke "Tata Letak - Elemen Halaman"
Langkah 8
Tambahkan Gadget dengan tipe "HTML/JavaScript", atau baca disini
Langkah 9
Masukan kode dibawah ini :

<script language="javascript">

banner1 = new Banner('banner1');

banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://dedehendriono.blogspot.com");

banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://tutsadobe.blogspot.com");

banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://programgratisan.blogspot.com");

banner1.add("FLASH", "banners/04.swf", 3, 60, 480,"http://bonprog.blogspot.com");

banner1.add("FLASH", "banners/05.swf", 3, 60, 480,"http://el-pro.blogspot.com");

banner1.add("FLASH", "banners/06.swf", 3, 60, 480,"http://modification-blog.blogspot.com");

document.write(banner1);

banner1.start();

</script>
Langkah 10
Simpan Gadget Tersebut dan preview blog

Keterangan :
  • Jika ingin menambahkan lokasi banner baru silahkan tambahkan sendiri dengan mengubah nama banner; misal contoh diatas banner1 maka ubahlah semua menjadi banner2 dan seterusnya
  • Secara berurutan perhatikan kode dalam tanda kurung setelah kode banner1.add ;
  • Ada 2 pilihan tipe file banner yaitu IMAGE dan FLASH sesuaikan dengan format banner, jika itu berformat JPG, JPEG, GIF, PNG maka gunakan tipe file format IMAGE, jika itu berformat SWF maka gunakan tipe file format FLASH
  • Tentukan link tempat dimana banner tersebut disimpan.
  • Tentukan durasi lamanya waktu banner muncul, dalam contoh di set 3 detik.
  • Tentukan ukuran tinggi banner, dalam contoh memiliki ukuran tinggi 60 pixel. Ini disesuaikan dengan ukuran banner.
  • Tentukan ukuran lebar banner, dalam contoh memiliki ukuran lebar 480 pixel. Ini disesuaikan dengan ukuran banner.
  • Tentukan link yang akan dituju ketika pengunjung meng-klik salah satu banner yang muncul.
Selamat mencoba... Happy blogging :) Jika mengalami kesulitan tinggalkan pesan dikomentar...

Sabtu, 02 Oktober 2010

Tingkatkan Trafik



Artikel Suami sengaja sayah sedotin untuk menjelaskan cara meningkatkan trafik blog Sohib Artikel Baru mendaftarkan blog ke berbagai sobat Direktori blog.Mendaftarkan blog ke blog Teman Direktori Suami berguna untuk Menambah apalagi kalo trafik dan trafiknya sedikit blognya Masih Baru. (Sebagai kata pembuka Bahasa Indonesia selanjutnya sesuai aslinya wekekeke ...)

Blog direktori ini memiliki PageRanks tinggi dari blog Anda (karena blog Anda yang baru dengan Zero pagerank). Jadi, jika seseorang mencari kata kunci tertentu, ada kemungkinan lebih banyak untuk direktori blog untuk muncul dalam hasil dari Anda.Jadi, dengan menambahkan blog Anda ke direktori ini, para pengunjung memasuki direktori ini berisi artikel Anda (bila mereka mengklik artikel, mereka masuk ke situs Anda) dan juga posting blog Anda akan diindeks sedikit lebih cepat. Jadi, mengirimkan blog Anda ke direktori ini Anda akan mendapatkan lebih banyak lalu lintas. 
(Jika blog Anda yang baru, kemudian menempatkan tombol pengunjung tracker di blog Anda, sothat Anda akan melihat berapa banyak pengunjung yang datang dari direktori ini, dari search engine, geolocation pengunjung, dll).
Berikut adalah beberapa pengunjung website tracker populer:
1. Histats (histats.com) 
2. Sitemeter (sitemeter.com) 
3. Statcounter (Statcounter.com) 
Jadi, biarkan saya datang ke topik utama ... 
Sebelum mengirimkan blog Anda ke direktori ini blog, saran pribadi saya adalah untuk membuat alamat email baru untuk tujuan ini begitu, email pribadi Anda tidak dapat dibanjiri dengan email dari administrator blog direktori, dll) Menciptakan sebuah email gratis lol ... . Creat satu.
Banyak dari direktori ini meminta Anda untuk mendaftar sebelum mengirimkan blog. 
Ada begitu banyak ratusan direktori blog, di sini adalah daftar direktori-direktori populer sangat baik yang akan mengirimkan lalu lintas maksimum.
DAFTAR blog direktori POPULER:
Technorati : Technorati adalah blog terbesar (weblog) direktori saat ini melacak lebih dari 112,8 juta blog. Gabung technorati dan memverifikasi penulis Anda, maka Anda akan diberikan dengan statistik rinci tentang blog Anda, berapa banyak blog yang link ke blog Anda, (mereka sebut 'otoritas' itu). Ini adalah salah satu direktori blog terbaik dan akan mengirimkan ton triffic jika blog Anda secara teratur diperbarui.
http://technorati.com/
Topblogarea : Ini adalah direktori blog besar yang tingkat dan peringkat interms blog blog Anda pengunjung Unik mendapatkan. Mereka mulai menghitung dari Nol setiap minggu, sehingga bahkan blog baru disampaikan dapat memiliki kesempatan untuk peringkat lebih tinggi dalam daftar.
http://topblogarea.com/
Topblogging.com : Ini adalah satu lagi sumber weblog yang juga peringkat blog menurut unik hits mereka dapatkan. sumber daya Nice blog, membawa Anda banyak lalu lintas ke blog Anda.
Blogtoplist : Sama di sini, mereka peringkat menurut unik hits Anda dapatkan. Tapi, ada sedikit perubahan, mereka akan memberikan Anda untuk menempatkan tombol suara dalam blog Anda. Jika ada suara pengunjung situs Anda dari blog Anda, yaitu sebesar 100 hits unik, tapi hanya ada satu kesempatan per pengunjung (satu alamat IP) sehari.
Fuelmyblog : Ini adalah sumber daya weblog dingin yang berbeda dari yang kita diskusikan sejauh ini. Anda dapat memilih ke blog lain dan lain-lain suara untuk Anda. Mereka akan menjaga enam blog atas (suara terbanyak) di homepage. Anda dapat bergabung dengan forum, baca konten lain blog, bergabung dalam compitetions dan memenangkan hadiah, dll
MyBloggingarea : Ini adalah weblog direktori yang sangat baik peringkat blog menurut pengunjung unik yang mereka dapatkan, membawa saya banyak lalu lintas sehingga ke blog selebriti saya dari semua blog direktori lainnya. Saya sarankan ini.
BlogCatalog : Ini adalah sumber lain blogging yang baik, Anda bisa mempromosikan blog Anda di sini secara GRATIS, menemukan blog lain yang berhubungan dengan Anda, dll Mereka memiliki rumus khusus untuk peringkat blog, semakin banyak pengunjung, hits, komentar, lingkungan Anda mendapatkan lebih banyak peringkat Anda akan menjadi. Satu lagi dianjurkan. Anda dapat bergabung dengan forum, papan diskusi, kelompok, dll dengan blogger lain dan berbagi pemikiran.
BloggingFusion : Ini adalah yang baru dan bukan satu yang sangat besar (sekitar 950 blog) saat ini. Tapi, itu adalah satu yang baik dan melakukan cukup baik. Anda dapat meningkatkan eksposur blog Anda, bernilai link ke sana.
Bloghop : Anda dapat menemukan blog yang terkait dengan topik blog Anda di sini.Memiliki tombol pelacakan bagus dan saat ini memiliki lebih dari 29.000 blog.
Blogarama : Cool direktori weblog saat ini memiliki lebih dari 69.000 blog. Ini akan daftar blog dari segi nilai blog Anda miliki. Skor tersebut tergantung pada banyak hal seperti lalu lintas masuk, lalu lintas keluar, rating pengguna, dll dan jika Anda mengirim lebih banyak lalu lintas ke mereka, mereka akan daftar blog Anda di top 100 blog.
Topbloglists : blog direktori lain yang akan peringkat blog Anda sesuai dengan unik hits blog anda akan mendapatkan.
Myblogdirectory : Ini daftar blog tidak interms dari setiap pengunjung, dll Semua blog yang terdaftar secara acak begitu, setiap blog mendapatkan eksposur yang sama.Jika Anda mengirim lebih banyak lalu lintas dari blog Anda kepada mereka, blog Anda akan dipilih sebagai BLOG YANG HARI yang akan ditempatkan di homepage dan blog Anda akan menerima seluruh lalu lintas situs mereka mendapat pada hari itu.
Direktori Dari Indonesia: Bloggerian Top Hits misih ... dan buanyak lageee
Silahkan coba di submit-submit bermanfuaat Mudah-mudahan dulu ... : D
Sumber: bloggertricks.com

Cara Cepat Terindex Search Engine


Ini saya buatin artikel buat teman-teman yang belum tahu cara blog-nya bisa cepat terindex di Search Engine. Teman-teman pasti udah pada tahu Google, Yahoo danMSN kan? Nah 3 search engine ini nyang harus teman-teman fokuskan. Google adalah yang terbesar jadi yang harus dioptimalkan kemudian Yahoo disusul MSN. Cara daftarnya… untuk :
, klik aja gambar melet berikut klik ajah
Isi kotaknya -> klik Tambahkan URL -> Google-nya dah rampung… :D
, klik aja gambar ngopi dulu aaahhh… berikut 
1. Submit URL
2. Submit Feed
, klik ajah gambar he he he berikut ini 
Isi kotaknya…
Setelah blog teman-teman terdaftar di Search Engine kemudian langkah selanjutnya berdoa  minta cepat terindex di seret enjin yah… wekekeke… :D
Yeah…, mudah-mudahan bermanfuaat yah… pis…

Jumat, 01 Oktober 2010

MEMBUAT MENU DI BLOGGER


Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas

Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.

langsung aja... caranya coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya.

#menuq{ font-family: Verdana; padding:10px;}
.menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;}
.menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;}
.menul .widget { border-bottom-width: 0;}


Selanjutnya carilah kode di bawah ini

<div id='header-wrapper'>
<b:section .......dst>
</b:section>
</div>


lalu copy kode di bawah ini tepat di bawah kode di atas..

<div id='menuq'><br /><b:section class='menuq' id='menul' preferred='yes'/>
</div>


apabila telah selesai kemudian simpan dan lihat di menu settingkemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilihHTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.

<div id="menuq">
<a href="http://dikdasbonjer.blogspot.com/">Home</a>
<a href="http://dikdasbonjer.blogspot.com/">My Profile</a>
<a href="http://dikdasbonjer.blogspot.com/">My Facebook</a>
</div>

Ganti link sesuai dengan link anda... beres.

Membuat menu Vertical dan Horizontal pada Blog



A. Menu Horizontal


Ada yang ingin membuat menu horizontal untuk blognya? ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti ini :







Contohnya bisa dilihat disini . Untuk membuatnya ikuti cara berikut ini:

pertama-tama siapkan dulu gambarnya, contohnya seperti ini :



 dan 



kalo nggak punya gimana? kalo nggak punya pake gambar yang ini juga boleh.




blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif
whiteleft.gifwhiteright.gif






Ok, bahan-bahannya sudah ada, mari kita mulai meraciknya:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.

2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruhdiatasnya



/*credits : http://trik-tips.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background: url("http://
kendhin.890m.com/menu/blackright.gif") no-repeat right top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}




Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;



background: url("http://
kendhin.890m.com/menu/redleft.gif") no-repeat left top;



background: url("http://
kendhin.890m.com/menu/redright.gif") no-repeat right top;



3. Copy script berikut ini



<div id="tabshori">

<ul>

<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>

</ul>

</div >




4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox). 

Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.

5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini

cari kode berikut ini :



<div id="content-wrapper">




caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotakfind, nha langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya



6. Simpan hasil pengeditan.

7. Lihat hasilnya.

8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.

9. Kalo masih belum berhasil juga coba cara ini:

- Cari kode berikut ini :



<b:section class='header' id='header'

maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true'

title='your blog title (Header)' type='Header'/>

</b:section>




terus ganti text yang berwarna hijau sehingga menjadi seperti ini:



<b:section class='header' id='header'

maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false'

title='your blog title (Header)' type='Header'/>

</b:section>




terus di Save



Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilihHTML/JavaScript paste script link tadi di dalam kotak content terus simpan, coba drag kebawah dikit, terus simpan dan lihat hasilnya.



hasilnya pasti akan berbeda-beda di setiap template.

kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....


A. Menu Vertical

Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya :


1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kede berikut sebelum kode </head>

<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>



3. Setelah itu masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Taruh di dalam Barisan kode CSS.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{ 
position: absolute;
width: 190px; 
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px; 
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }


Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');


Pilihan Warna menu vertikal :


blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif


4. Kemudian di save.

5. Lalu ke menu "Page Elements"

6. Pilih "Add Page Elements -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>


Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tinggal buat lagi kode seperti yg berkedip2 dibawahnya.

Selamat mencoba 

Cara pasang Pagenavigation number

Akhir akhir ini k'ian merasa suntuk abis, didera masalah kerjaan yang banyak. mana mau tetap eksis di dunia Blogging, jadinya k'ian harus pintar pintar membagi waktu untuk tetap menulis. nah untuk postingan kali ini k'ian mau share tentang " numbered navigation page" / "penomoran halaman ". kita mulai saja ya..

Langkah pertama yang harus kamu lakukan adalah:
  • Masuk ke account blog kamu, pilih Layouts,
  • selanjutnya pilih "elemen halaman", kemudian klik "Add Gadget"
  • Pilih "HTML/Javascript", kemudian pastekan kode berikut didalamnya

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
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=10;
var displayPageNum=5;
var firstPageWord = 'Home';
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 += ' <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;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' for '+(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>
nb: lakukan sedikit inovasi atau modifikasi terhadap kode CSS nya, sesuai dengan keinginan kamu.