Story , Expression, Etc ......... :D :D :D: Februari 2012

Rabu, 29 Februari 2012

Mengenal Fungsi Label Di Blogger & Cara Penggunaannya

Kabanyakan blogger pemula tidak menggunakan label pada artikel yang di tulisnya, mungkin ini di sebabkan karena mereka tidak tau apa sih fungsinya label tersebut.

Selain belum tau fungsi label, sebagian dari mereka tidak menyadari keberadaan label tersebut, jadi wajar lah kalau artikelnya ga ada labelnya.

Apa sih label itu, apa fungsinya, dan bagaimana cara menggunakannya?...

Menurut saya label yang ada di blogger tersebut sama halnya dengan kategori sebuah tulisan atau artikel yang kita tulis tersebut, atau bisa juga di sebut topik pembahasan.

Fungsi Label yang ada di blogger adalah agar kita bisa mengelompokkan artikel berdasarkan label/kategori yang sama, dan mempermudah pengunjung blog untuk melihat artikel lainnya berdasarkan Label/Kategory.

Selain itu label juga berfungsi untuk menampikan Related Post atau Artikel Terkait lainnya berdasarkan label artikel.

Tentu teman pernah atau bahkan sering melihat kalimat Related Post, Artikel Terkait, Baca Juga Ini, dan sejenisnya kemudian di bawahnya ada daftar artikel lainnya di setia akhir tulisan/artikel blog lain.

Related Post atau Artikel Terkait tersebut tidak akan terlihat jika artikel kita tidak ada label/kategorinya, walaupun sudah di pasangi script related post (Untuk Cara Membuat Reladet Post akan saya bahas lain waktu).

Untuk Menggunakan fitur label yang sudah di sediakan blogger itu sangat mudah.

Anda tinggal isi atau tulis label/kategori pada setiap artikel yang anda buat pada bagian labels, letaknya di sebelah kanan bawah.

Kalau masih bingung di mana menulis labelnya silahkan lihat gambar di bawah ini.

Pada kolom isian labels silahkan tulis label yang anda inginkan, misalnya: blog tutorial, musik, hiburan, dsb.

Anda bisa menulis lebih dari satu label di sana, tapi jangan lupa pisahkan label 1, 2, dst dengan koma (,) misalnya : musik, lirik lagu.

Udah dulu ya

Cara Mudah + Cepat Mencari Kode Html di Blogger

Hari ini saya akan menuliskan Bagaimana cara mudah dan cepat untuk mencari sebuah kode html di bagian Edit Html (dashboard Blogger) ketika kita hendak mengdit template blogger kita atau ingin menambahkan script/kode di template tersebut.

artikel ini saya tulis karena ada salah satu pengunjung blog ini yang bertanaya:

gimana caranya agar kita mencari dengan cepat sbuah code di Edit HTML

Nah itu lah pertanyaan yang membuat saya merasa bahwa cara mudah dan cepat untuk mencari kode html ini perlu saya tulis.

Mencari sebuah kode html di di template blogger memang agak susah kalau kita tidak tahu cara mudahnya, kita harus merelakan sebagian waktu kita untuk memelototi kode-kode html blogger yang lumayan banyak tersebut.

Namun tahukah teman bahwa ternyata ada cara yang sangat mudah dan cepat untuk mencari sebuah kode html yang kita ingin cari itu. Misalnya kita ingin mencari kode <body> maka kita bisa dengan cepat dan mudah menemukan kode <body> hanya dengan beberapa kali klik saja.

Ok langsung saja.

Cara Mudah dan Cepat Mencari Kode Html di Blogger
Tekan tombol Ctrl + F secara bersamaan, maka di bagian bawah layar komputer anda akan keluar seperti ini.

(Gambar ini di ambil menggunakan Mozilla Firefox) jika anda menggunakan browse lain mungkin ada perbedaan.

jika sudah keluar maka silakan tulis kode yang ingin di temukan tersebut di kolom pencariannya.

Cara Mudah + Cepat Mencari Kode Html di Blogger

Nah itulah cara mudah untuk menemukan sebuah kode html di blogger, selamat mencoba, semoga berhasil dan bermanfaat.

6 Macam Style Navigasi Halaman Untuk Blogger

Kali ini saya akan menuliskan tutorial untuk blogger tentang cara membuat navigasi halaman di blogger (navigasi 1 > 2 > 3 > ... Next).

Sebenarnya dulu saya sudah pernah menuliskan caranya yaitu : Cara Membuat Navigasi Halaman Di Blogger (1>2>3>dst...)

Pada tutorial kali ini saya akan menuliskan panduan membuat blogger pagenavi yang berbeda dengan script terdahulu, selain itu di sini saya juga menyertakan 6 macam style (css) yang nantinya bisa kamu pilih sesuai selera.

Ok mari kita mulai ....

Ups ... Hampir lupa, sebaiknya backup dulu template yang kamu gunakan, agar jika terjadi hal-hal yang tidak diinginkan atau ada eror kamu bisa mengembalikannya seperti semula.

Cara Pasang Navigasi Halaman

Login ke blogger
Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
Beri centang pada bagian Expand Template Widget

Cari kode berikut

</body>

Jika kamu merasa susah mencari kode tersebut silakan baca dulu Cara Mudah + Cepat Mencari Kode Html di Blogger
Jika kode tersebut sudah dapat silakan pasang kode berikut di atas kode</body> tadi

<code>&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;</code>

Catatan :

var postperpage=10; = jumlah poting perpage (perhalaman)
var numshowpage=4; = jumlah nomor navigasi yang ditampilkan

Jangan disimpan dulu ya, karena masih ada kode yang haru kamu pasang lagi.
Sekarang cari kode

'data:label.url'

Kemudian ganti kode tersebut dengan kode ini

'data:label.url + &quot;?&amp;max-results=10&quot;'

Lajut ...

6 Macam Style Navigasi Halaman Untuk Blogger

Sekarang cari kode ]]></b:skin>
Jika sudah dapat silakan pasang kode css berikut tepat di atasnya, kemudian simpan pengaturan template kamu. Silakan pilih salah satu dari 6 Style berikut (Ingat, salah satu saja, urutan gambar di atas sudah saya sesuaikan dengan urutan style):

Style 1

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
   
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
   
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x;
  }
   
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x;
  }
.showpageOf{
  margin:0 8px 0 0;
  }
.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

Style 2

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
   
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
   
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #919106;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -50px repeat-x;
  }
   
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -25px repeat-x;
  }
.showpageOf{
  margin:0 8px 0 0;
  }
.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #919106;
  background: #666 url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

Style 3

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
   
.showpageArea a {
  color: #fff;
  }
   
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #363636 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -25px repeat-x;
  }
   
.showpageNum a:hover {
  background: #044697 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -50px repeat-x;
  }
.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #e30000 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
.showpageOf{
  margin:0 8px 0 0;
  }

Style 4

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
   
.showpageArea a {
  color: #fff;
  }
   
.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 -25px repeat-x;
  }
   
.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 -50px repeat-x;
  }
.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
.showpageOf{
  margin:0 8px 0 0;
  }

Style 5

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
   
.showpageArea a {
  color: #fff;
  }
   
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -50px repeat-x;
  }
   
.showpageNum a:hover {
  background: #666 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -25px repeat-x;
  }
.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
.showpageOf{
  margin:0 8px 0 0;
  }

Style 6

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #fff;
  font-size:11px; 
  margin:10px;
  padding:8px 20px;
  background: #333;
  }
   
.showpageArea a {
  color: #fff;
  }
   
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #666;
  }
   
.showpageNum a:hover {
  background: #888;
  }
.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #da6100;
  text-decoration: none;
  }
.showpageOf{
  margin:0 8px 0 0;
  }

Nah itulah tutorial membuat navigasi halaman di blogger.

Sumber 6 Macam Style Navigasi Halaman Untuk Blogger :

http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/
http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/

Selamat mencoba dan semoga berhasil

User Online Widget Untuk Blog/Situs

Kali ini saya akan menuliskan cara pasang widget user online di blogger, widget ini berfungsi untuk melacak ada berapa orang yang sedang online dalam waktu yang sama.

User Online Widget
By whos.amung.us

Sebenarnya script widget user online ini tidak hanya bisa di pasang di blogger saja, tapi di sini saya hanya akan menuliskan cara pasang widget user online di blogger saja.

Next ...

Panduan Cara Pasang User Online Widget Di Blogger

Kunjungi Situs penyedia script user online widget dulu, yaitu whos.amung.us atau Kilk Di Sini untuk mengunjunginya. Kemudian kopi script yang sudah disediakan di sana
Login ke dahsboard blogger
Klik Rancanga/Design
Klik Add Gadget, pilih gadget Java Script/HTML.
Paste script user online widget tadi di sini
Selesai...

Nah itulah cara pasang widget user online di blogger, untuk cara pasang widget user online di wordpress atau di situs versi html saya rasa tidak perlu dituliskan di sini, karena saya yakin yang menggunakan wordpress atau situs versi html lebih mengetahui caranya.

Cara Bikin Tulisan Kelap Kelip

Pernahkah teman melihat tulisan kelap kelip (kedap-kedip) di blog atau situs milik orang lain?

Jika sudah pernah melihatnya atau bahkan sering, mungkin terlintas di fikiran teman bagai mana seh cara membuat tulisan kelap kelip seperti di blog orang tersebut.

Nah kali ini saya ingin nulisin cara bikin tulisan kelap-kelip di blog baik untuk blog blogger, wordpress, situs, dsb. Bagi teman-teman yang belum tahu apa yang saya maksud dengan tulisan kelap-kelip, silakan lihat contoh berikut:

TULISAN KELAP KELIP

Nah seperti itulah yang saya maksud dengan tulisan kelap-kelip (kedap-kedip)

Cara membuat tulisan kelap-kelip di blog mudah kok, cukup tambahkan sedikit kode di awal dan di akhir tulisan yang ingin di bikin kelap kelip.

Berikut kode yang harus di sisipkan (saya akan tuliskan kode lengkap + tulisan yang bisa teman rubah nanti)

Kode tulisan kelap-kelip

<blink>TULISAN KELAP KELIP</blink>

Itulah kode yang akan membuat tulisan di blog kita kelap kelip.

Silakan ganti TULISAN KELAP KELIP dengan tulisan yang ingin teman bikin menjadi kelap-kelip.

Oh ia ...

Kode tersebut harus di tulis di bagian HTML (Klik tulisan HTML, letaknya di sebelah tulisan Compose)

Pasang Buku Tamu Tersembunyi Di Blogger

Kali ini saya akan menuliskan bagaimana cara pasang buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.

Ok ga perlu panjang lebar, langsung saja ke topik utama kita.

Panduan Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger

Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka.

Kemudian ambil script yang sudah di sediakan (kopi kodenya).

Sekarang mari kita ke blogger. Jika belum login silakan login dulu. Jika sudah login silakan klik Rancangan/Design/Tata Letak dan Klik Tambah Gadget/Add Gadget. Jika masih bingung bagaimana cara pasang di blogger silakan baca : Panduan Cara Menghias Blog Blogger

Pilih html/javascript dan silakan paste kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxotkp5yQfEskbjA7uhDrEWKB_rqgz5Hyh08zhFsjuOi7y3lGZNl063xaLXpNsRf6PLfPGs7NvyPlEvd9g9Fx6NO96VpvnDyEWYZXgqFDQqxIk3HZL7JAAkxP_mIuDuPTRizlWdsg-nQ8/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://blog.ahmadrifai.net/2011/06/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai silakan di Simpan dan Selesai

Pasang Popular Posts Di Blogger

Setiap blog pasti memiliki artikel yang paling populer (popular posts), biasanya popular post tersebut di munculkan berdasarkan komentar (posting yang banyak di komentari) atau karena paling sering di baca orang.

Baru-baru ini blogger meluncurkan widget/gatget baru yaitu gadget untuk menampilkan popular posts di blog kita, jadi tidak perlu repot-repot pasang kode html lagi.

Sebenarnya Cara Pasang Popular Posts Di Blogger ini sudah sering di bahas di blog-blog yang memuat tutorial blogger, namun karena dulu gadget popular post di blogger belum ada akhirnya mereka menuliskan panduan cara menampilkan popular post di blogger menggunakan script dan kode html.
Ok, kembali ke LapTop

Cara Mudah Pasang Popular Posts Di Blogger

Seperti bisa, langkah pertama yang harus anda lakukan adalah login ke Dashboard Blogger kemudian pergi ke Design/Rancangan. baca : Panduan Cara Menghias Blog Blogger

Setelah berada di halaman Tata Letak/Rancangan blog blogger silahkan klik Add a Gadget.

Pilih Gadget Popular Post.

Silahkan setting sesuai keinginan, mau menampilkan popular post yang bergambar atau tidak.

Nah itulah Cara Mudah Untuk Menampilkan Popular Posts Di Blogger.
Selamat mencoba

Membuat Recent Posts & Recent Comments Di Blogger

Hari ini saya sengaja mengangkat artikel tentang Cara Membuat Recent Posts dan Cara Membuat Recent Comments Di Blogger. Pada artikel terdahulu saya mengangkat artikel tentang Cara Menampilkan Popular Postd Di Blogger.

Ada beberapa cara untuk menampilkan recent post dan recent comments di blogger, namun kali ini saya akan menuliskan cara termudah untuk menampilkan recent post dan recent comments di blog blogger.

Ok tidak perlu basa-basi.

Cara Mudah Membuat Recent Posts & Recent Comments Di Blogger

Pertama saya akan menuliskan Cara Membuat Recent Posts Di Blogger.

Agar bisa menampilkan recent posts (artikel terbaru) di blogger maka langkah pertama yang harus di lakukan adalah Log In dulu ke Dashboard blogger, kemudian pergi ke Design/Rancangan/Tata Letak.

Klik Add a Gadget, kemudian klik tulisan Featured (lataknya di sebelah kiri atas)

Cara Membuat Recent Posts & Recent Comments Di Blogger

Cari Gadget Recent Posts, di sana ada 2 Gadget recent posts yang bisa kita gunakan, kalau teman ingin menampilkan deretan recent posts yang ada gambarnya maka silahkan pilih Gadget recent posts with thumbnails (Gadget yang ini letaknya di bawah).

Klik Gambar Tambah (+) atau nama Gadget tersebut dan silahkan setting Gadget tersebut sesuai keinginan.
Cara Mudah Recent Comments Di Blogger

Cara menampilkan recent comments di blogger hampir sama dengan cara menampilkan recent posts, namun perbedaanya adalah Gadget nya saja, setelah Gadget Recent Post With Thumbnails tadi selesai di pasang, silahkan klik Add a Gadget lagi dan klik tulisan Featured (sama dengan cara di atas) kemudian cari Gadget Recent Comments.

Klik Gadget tersebut kemudian simpan.

Selamat mencoba Membuat Recent Posts & Recent Comments dan semoga berhasil.

Cara Membuat Navigasi Halaman Di Blogger

Hari ini saya akan menuliskan Cara Membuat Navigasi Halaman Di Blogger.
Hmm lama juga ya saya ga nulis tutorial untuk blogger ...

Ok .... Langsung saja ke topik kali ini yaitu

Cara Membuat Navigasi Halaman Di Blog Blogger

Seperti panduan untuk blogger yang lainnya, langkah pertama yang harus di lakukan adalah login dulu ke blogger.
Setelah berada di dashboard blogger silakan pergi ke Rancangan/Tata Letak => terus ke bagian Edit Html.
Cari Kode

]]></b:skin>

Kemudian letakkan kode ini diatasnya

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Setelah kode di atas sudah di letakkan di tempat yang benar, sesuai dengan instruksi di atas maka langkah selanjutnya cari kode

</body>

Kemudian letakkan kode ini di atas kode </body> tadi

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>

Jika semua sudah di letakkan di tempat yang benar silakan simpan dengan cara mengklik tombol simpan atau save.
Nah itulah cara untuk menambahkan navigasi halaman di blogger, jika navigasi halamannya tidak muncul silakan di cek lagi apakah penempatannya sudah benar.

Selamat Mencoba dan semoga berhasil

Update

Silakan baca tutorial yang baru di 6 Macam Style Navigasi Halaman Untuk Blogger

Cara Bikin Tulisan Berjalan Di Address Bar

Bagaimana Cara Bikin Tulisan Berjalan Di Address Bar ketika orang membuka blog kita?

Pada artikel yang telah lalu saya sudah menuliskan panduan Cara Membuat Tulisan Berjalan atau Cara Membuat efek Marquee, namun artikel tersebut hanya membahas cara membuat tulisan berjalan di postingan blog atau sidebar blog saja.

Nah kali ini saya ingin menuliskan tutorial bagaimana cara bikin tulisan berjalan pada adress bar (itu lho,,, tulisan berjalannya terlihat di atas kotak untuk menuliskan alamat website maksudnya)

Membuat Tulisan Berjalan Di Address Bar

Untuk membuat tulisan berjalan di address bar langkah pertama yang harus anda lakukan adalah Login ke Blogger
Setelah itu klik menu Layout atau Tata letak
Kemudian klik menu Edit HTML
Silahkan temukan kode ini </head>
Setelah itu kode nya sudah di temukan silakan taroh kode di bawahnya.

<script type='text/javascript'>
//<![CDATA[
msg = " --- SILAHKAN DIGANTI ";
msg = " | SILAHKAN DIGANTI | SILAHKAN DIGANTI | SILAHKAN DIGANTI | SILAHKAN DIGANTI --- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>

Silahkan ganti tulisan berwarna biru dengan tulisan yang anda inginkan, nanti tulisan itulah yang akan terlihat berjalan di address bar.
Sebelum pengaturannya di simpan, sebaiknya di preview dulu.