Cara Membuat Navigasi Halaman Bernomor (II) | Numbered Page Navigation for Blogger

Cara Membuat Navigasi Halaman Bernomor (II) | Numbered Page Navigation for Blogger - Adanya widget numbering page navigation atau navigasi halaman bernomor memang membuat blog lebih user friendly. Selain itu, berpotensi meningkatkan page view.

Langsung ke tutorialnya saja,

1. Masuk ‘Layout’-->‘Edit HTML’

2. Cari kode ]]></b:skin>

3. Tambahkan kode berikut ini di atasnya:

.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. Cari kode </body>

5. Tambahkan kode berikut ini di atasnya:

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

6. Simpan. Selesai

Selamat mencoba..

Border dan background pada blogger

Border dan background pada blogger yang artinya  batas tepi dan latar belakang template blog. Dengan border dan background, maka blog akan semakin bagus dan tampak cantik, apalagi dipadukan dengan kombinasi warna yang sesuai. Dengan border, tulisan akan menjadi lebih menonjol. Border dan background berguna untuk memisahkan bagian-bagian dari blog. Juga dapat menunjukkan bagian yang penting seperti posting blog dan fitur-fitur yang ditambahkan pada bagian sidebar.

Jenis-Jenis dan Pengaturan Border

Cara termudah untuk menambahkan border pada setiap elemen di blog adalah menambahkan kode <b:skin> pada bagian template blog. Misalnya pada bagian #main-wrapper ,seperti ini

#main-wrapper
border: 3px solid #000000;
[kode lainnya di sini]

Kode border: 3px solid #000000; mengartikan adanya penambahan garis tepi batas dengan tebal garis 3 pixel berwarna hitam solid, hasilnya seperti ini,

tulisan Anda di sini

Atau bisa dimodifikasi warnanya, contohnya seperti ini,

tulisan Anda di sini

Selain itu, Anda dapat juga memodifikasi model garisnya, seperti dotted, dashed, double dan outset. Misalnya 
efek Dotted

Dotted border: 3px dotted #000;

efek Dashed

Dashed border: 5px dashed green;

efek Double border-style

Double border-style: double; border-color: blue;

efek Outset border-style

Outset border-style: outset; border-color: #404040;

Nah, seperti itulah kira-kita teknik dasar pembuatan border . . . Jika Anda ingin belajar lebih jauh tentang border style, bisa baca " Jenis-Jenis Pengaturan Background"



Selamat Mencoba !

Melacak Jejak Pengunjung Blog Dengan Google Analytics

Nih Bagi Kamu yang Pengen banget lihat statistik blog Kamu, pakai aja Google Analytics

Google Analytics berbeda dengan Hit Counter. Hit Counter biasanya hanya menghitung jumlah pengunjung yang datang untuk menjenguk (emangnya sakit). Sedangkan Google Analytics, beliau tidak hanya menghitung jumlah para pengunjung tapi juga data-data yang lainnya, misalnya tentang:

• Berapa pengunjung yang datang tiap harinya


• Berapa lama mereka nognkrong di blog kamu


• Browser apa yang mereka gunakan


• Dengan cara apa mereka datang, misalnya naik angkot ato jalan kaki (maksudnya lewat search engine, lewat situs orang lain atao langsung datang mak pedunduk).


• Dari negara mana mereka datang


• Dari kota mana


• umurnya berapa


• Anaknya siapa


• Udah punya pacar apa belum


• Ortunya galak ga, dll

NB: Tiga poin terakhir bo'ong.

Nah, pengen gak tuh? kalo pengen daftar disinihttp://google.com/analytics
Tapi syarat daftarnya sangat berat, yaitu kamu harus punya account di google. Nah berat banget kan? (berat bagi yang gak bisa baca ngetik). Kalo udah daftar nanti kamu tinggal ngisi form yang disodorkan, tapi sante aja cara ngisinya gampang kok gak kayak di SPMB, diantaranya yaitu ngisi alamt webblog kamu, trus jangan lupa nge-set "Time Zone" tapi harus beli coin dulu (emangnya time zone yang ada di mall2). Trus setelah itu kamu nanti akan dikasih kode/script sama Pak Dhe Google (jangan lupa bilang terima kasih). Selesai??? belooommmmm... masih ada lagi..
Nha setelah itu kopi kode/script tersebut, trus login ke blogger KlikTemplat -->> Edit HTML. Paste kode/script yang udah dikopi kedalam tag HTML yaitu sebelum tag </body> jangan lupa disimpan. Selesai??? Belooommm...
Kembali lagi ke google.com/analytics, kamu harus mengklikCheck Status dulu (Dicek apakah kamu masih single atau doble). Kalo udah berhasil maka akan ada tandanya, kalo belum ya dicoba lagi.
Datanya baru akan muncul satu hari kemudian, jadi ini bukan seperti hit conter yang datanya akan langsung berubah tiap detik tapi data-data google.com/analytics ini akan muncul tiap ganti hari. OK Selamt mencobaaaaa....

Cara Membuat Pernak-pernik Di Pojok Halaman Blog

Pasang sesuatu di bagian pojok dari blog Kamu, mau? misalnya pasang animasi, atau iklan, dll, Caranya gampang  . . . makanya ikutin terus . . ..ke TKP yuk

1. Masuk ke blogger, buka Layout => Edit HTML
2. Cari kode ini ]]></b:skin> (Gunakan Ctrl + F), kalau sudah, letakkan kode berikut ini di bawah kode ]]></b:skin>

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Yang merah adalah letak animasimu . . . .Top = atas, bottom = bawah, left =kiri, dan right = kanan
4. Langkah selanjutnya yaitu letekkan kode berikut ini sebelum kode </body>

<div id="trik_pojok">
<a href="Link Kamu">
<img src="Animasi/ iklan Kamu" border="0" /></a>
</div>

Link Kamu  ganti dengan link kamu.Animasi/ iklan Kamu ganti dengan Url gambar kamu.

5. Jika kamu ingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan kode widget-widget tersebut.
6. Simpan

Cara Membuat Recent Post

Selain Menampilkan Recent Comment , kadang kita juga perlu menampilkan Recent Post, bagaimana caranya, ikutin aja terus . . .

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget => HTML/Javascript" 
3. Masukkan kode berikut

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.

Cara Membuat komentar Terbaru (Recent Comment)

Menampilkan recent comments atau komentar terbaru fungsinya adalah supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar. Recent Comments ini bisa kita pasang di halaman utama blog kita.
Beginilah cara membuat Recent Comments (Komentar Terbaru):

1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :

<script style="text/javascript" src="http://kendhin.890m.com/comments.js"></script><script style="text/javascript">var a_rc=4;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://Url Blog Kamu/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>

Note  :   Angka 4 (merah) adalah jumlah recent comment yang ingin ditampilkan, sedangkan yang biru ganti dengan Url blogmu
3. Cara pasangnya, buka layout => Page element => Add a Gadget => masukkan kode di atas tadi.


Note : Recent comment juga lebih efektif jika dimasukkan ke salah satu dari Menu Tab View, sperti di blog ini .( Baca cara membuat Menu Tab View di sini )

Membuar Border Style dengan CSS

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

Berikut ini contoh macam style border yang paling diminati :

Border-style: dotted

Scriptnya :

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px"> Tulisan Sobat di sini </div>

 Preview:

Tulisan Sobat di sini

Border-style: solid

Scriptnya :

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px"> Tulisan Sobat di sini </div>

 
Preview  :

Tulisan Sobat di sini

Border-style: dashed

Scriptnya :

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px"> Tulisan Sobat di sini </div>

Preview :

Tulisan Sobat di sini

 

Border-style: groove

Scriptnya :

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 preview  :

Text Sobat Di Sini

Border-style: double

Scriptnya :

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 

 preview  :

Text Sobat Di Sini

Border-style: inset

Scriptnya :

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 Preview  :

Text Sobat Di Sini

Border-style: outset

Scriptnya :

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 

 Preview  :

Text Sobat Di Sini

 

Border-style: ridge

Script  :

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

 Preview  :

Text Sobat Di Sini

Border Mix 

Scriptnya :

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px"> Text Sobat Di Sini </div>

Preview  :

Text Sobat Di Sini

Note   :

• border:5px adalah tebal dari border.


• #08088A adalah kode untuk warna biru


• width:500px adalah lebar dari kotak.


• padding:20px adalah jarak antara tulisan dengan border.


• background:#FFF adalah warna latar.

-Selamat Mencoba -