Story , Expression, Etc ......... :D :D :D

Rabu, 29 Februari 2012

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.