Baca Posting dalam Bahasa Indonesia klik di sini
The coding is very simple, i think everyone can apply this code to their blog without any problem. I have tried this trick once and succeed.
So, do you want to have this on your blog? Let’s follow the steps.
Step 1:
Put this jQuery script code above this code <b:skin><![CDATA[
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
Step 2:
Then put this CSS code above this code ]]></b:skin>
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}
Step 3:
Then put this code under <body> tag
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/yourfeedname>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Don’t forget to change the code “yourfeedname” in red color with your feed name. Save your work and that’s it. You can see the result on your blog. Remember, you can change the image and link to meet your requirement. Good luck!
Source : O-Om.com
This blog is sponsored by:
1. Luncurkan browser internet anda. Lalu ketikkan alamat ini www.flickr.com.
2. Bila anda sudah memiliki Yahoo! Id, seperti supermario@yahoo.co.id. Gunakan id tersebut untuk sign-in pada flickr.com. Bila anda belum mempunyai Yahoo! Id, klik pada Sign Up.
3. Bila anda pengguna flickr baru, akan tampil jendela Make a new Flickr account. Masukkan nama yang ingin anda pakai pada flickr. Setelah itu tekan tombol CREATE A NEW ACCOUNT.
4. Lalu klik tombol Upload your first photo now (bagi pengguna baru) atau Upload Photos & Video.
5. Lalu pada jendela Upload to Flickr, klik Choose photos and videos. Misalkan anda sudah mempersiapkan image/gambar yang akan anda upload, yaitu file header.jpg. Browse komputer anda dan pilih file header.jpg yang akan di-upload.
6. Lalu pada jendela yang baru muncul, klik Upload Photos and Videos.
7. Tunggu sampai proses upload selesai. Bila telah selesai akan tampil jendela seperti di bawah ini. Lalu klik add a description.
8. Langsung saja anda klik pada gambar header. Anda bisa menambahkan deskripsi dan tag yang berhubungan dengan gambar header tersebut. Isi pada Title dengan judul gambar, misalkan header. Lalu pada Description, isikan dengan uraian singkat tentang gambar tersebut. Pada Tags, isikan tag yang sesuai dan berhubungan dengan gambar tersebut. Setelah itu klik Save.
9. Di atas gambar header terdapat beberapa menu. Klik menu All Sizes.
10. Lalu akan muncul jendela yang menampilkan kode html dan url dari gambar header.jpg yang sudah tersimpan di flickr.
11. Kode tersebutlah yang harus anda copy (ctrl+C) untuk dipergunakan sebagai, misalkan, header blog anda, dan keperluan lainnya.
Sesuai namanya, IP tracker atau pelacak alamat IP, tool ini berfungsi untuk melacak alamat IP (Internet Protocol) pengunjung blog anda. Pelacak alamat IP ini juga bisa melacak browser serta operating system yang dipakai oleh pengunjung.
Alamat IP adalah alamat komputer anda dalam jaringan LAN (Local Area Network) maupun WAN (Wide Area Network). Yang dimaksud dengan LAN adalah jaringan komputer yang mencakup wilayah kecil, seperti di kampus, rumah. Sedangkan WAN adalah jaringan komputer yang mencakup area yang lebih besar, seperti jaringan komputer antar wilayah, kota, atau bahkan negara.
Salah satu penyedia tool pelacak IP adalah www.ipnow.org, gratis lho. Tampilannya di blog seperti gambar di bawah ini:
1. Kunjungi situs www.ipnow.org.
2. Pada halaman muka, lihat pada bagian Custom Images. Terdapat beberapa pilihan bentuk tampilan yang bisa disesuaikan dengan blog anda.
3. Silakan anda pilih yang sesuai dengan selera anda. Sebagai contoh saya memilih Custom Graphical Info Image.
4. Lalu akan tampil halaman untuk mengatur warna latar belakang (background color) dan warna font (text color). Setelah itu klik pada tombol Create My Image.
5. Tampil halaman baru yang berisi kode. Blok kode pada kotak Linked Image dan salin (Ctrl+C) kode tersebut, untuk nanti anda tempel pada blog anda.
Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : IP Anda.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
Salah satu gadget yang penting buat anda yang super sibuk sampai-sampai tidak ingat tanggal dan hari apa sekarang adalah kalender. Selain mempercantik tampilan blog anda, tentunya juga bisa jadi pengingat hari-hari penting bagi anda.
Ada banyak situs penyedia gadget kalender ini. Gratis. Salah satu di antaranya beralamat di http://www.free-blog-content.com. Situs ini menyediakan berbagai kalender dengan berbagai bentuk gaya yang berbeda. Anda dapat memperoleh kodenya secara mudah, karena tidak harus mendaftar. Berikut langkah-langkahnya:
1. Masuklah ke http://www.free-blog-content.com.
2. Lihat halaman bagian bawah. Anda akan menemukan menu yang berisi berbagai pilihan tipe kalender. Klik salah satu dari beberapa pilihan jenis kalender tersebut. Misalkan anda memilih Car Calendars.
3. Seperti pada menu sebelumnya, pilihan dalam Car Calendars juga bermacam-macam. Pilih salah satu yang anda sukai.
4. Tepat di bagian bawah kalender yang anda pilih terdapat kode dari kalender tersebut. Blok kode tersebut dan salin (Ctrl+C).
Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : My Calendar.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
NB : Selain kalender, biasanya blogger juga memasang jam di blognya. Cara memasang jam pada blog bisa anda lihat di sini.
Di internet banyak sekali situs yang menyediakan aplikasi jam untuk dipasang pada blog. Salah satu di antaranya adalah dari www.clocklink.com. Berikut akan saya uraikan caranya.
1. Kunjungi www.clocklink.com.
2. Pada halaman muka situs clocklink.com, cari kotak dialog berjudul Special Instruction for Blog Users, kemudian klik menu Want a clock on your website?
3. Akan tampil halaman yang memperlihatkan berbagai bentuk jam (newest, analog, animation, wallpaper, dan lain-lain). Klik pada salah satu bentuk untuk melihat format dari masing-masing jam.
4. Bila sudah menentukan pilihan, klik tombol View HTML tag yang berada di bawahnya.
5. Setelah itu anda klik tombol Accept sebagai tanda anda setuju.
6. Lalu anda masuk ke halaman pengaturan (warna, zona waktu, dan ukuran).
7. Setelah selesai dengan pengaturan, pilih semua kode yang muncul pada kotak di bawah pengaturan. Salin kode tersebut dengan menekan tombol Ctrl+C.
Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
Beberapa waktu yang lalu, salah satu rekan saya yang menggunakan template bikinan saya, meminta saya agar dibuatkan automatic read more pada template yang dia gunakan. Untuk memuaskan ‘pelanggan’, maka saya pun mencari ‘ilmu’ ke blog tetangga, dan ternyata ‘tetangga’ saya Ade’s Trick membagi ilmunya buat saya. Nah, sekarang saya ingin berbagi dengan anda semua. Semoga bermanfaat.
Pada artikel sebelumnya saya sudah pernah membahas fungsi Read More versi manual, untuk mengingat kembali silakan baca artikel di sini atau di sini. Fungsi Read More kali ini memang agak berbeda dengan Read More yang pernah dibahas sebelumnya. Bila versi terdahulu kita harus mengatur tulisan yang akan di tampilkan dengan yang di minimalisasi tulisan menggunakan cara manual dengan melakukan pemangilan fungsi :
....<span class="fullpost">.............</span>
dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan yang ada di template posting. Untuk versi Auto Read More kali ini akan lebih mudah, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode di atas.
Yang hebatnya lagi, fungsi Auto Read More ini mampu menampilkan image pertama dalam posting dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakkan berada di tengah atau di akhir postingan. Mungkin lebih tepat disebut fitur image thumbnail.
Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang akan ditampilkan. Disini ada 2 opsi untuk jumlah karakter yang akan ditampilkan, yaitu:
1. Jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2. Jumlah karakter tanpa image.
Penting! Yang sudah memasang Read More versi lama kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna putih di bawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
Kode Read More Versi manual tampilannya seperti di bawah ini :
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More.. »»</a>
</b:if>
jika sudah ikuti langkah-langkah selanjutnya.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakkan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste saja kode dibawah ini:
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span> </b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
*) Tulisan yang berwarna biru muda menandakan Read More + judul posting. Jika tidak menghendaki adanya judul, hapus saja kode berwarna biru muda tersebut.
*) Tulisan left berwarna ungu menandakan posisi tulisan Read More pada posting.
*) Bila tulisan left diganti dengan right, maka posisi tulisan Read More berada di sebelah kanan.
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Semoga Berhasil.
Sumber : Ade’s Trick.
Saya akan tunjukkan bagaimana cara memasangnya di blog anda. Format dasarnya adalah:
<a href="ymsgr:sendim?idyahoo">
<img border=0 src="http://opi.yahoo.com/online?u=idyahoo&m=g&t=1" /> </a>
Keterangan dari kode tersebut:
· Silakan anda ganti idyahoo dengan id Yahoo! Messenger anda, misalkan id anda adalah juni2508, sehingga kode di atas menjadi :
<a href="ymsgr:sendim?juni2508">
<img border=0 src="http://opi.yahoo.com/online?u=juni2508&m=g&t=1" /> </a>
· t=1, kode ini digunakan untuk memilih ikon/gambar yang akan anda pasang di blog. Angka 1 mewakili tipe dari ikon/gambar. Selengkapnya anda bisa lihat pada tabel di bawah.
Sekarang mari pasang kode tersebut di blog, ikuti langkah-langkah berikut ini:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : Status YM.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda siapkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
| Style Id | Online | Offline |
| t = 0 | | |
| t = 1 | | |
| t = 2 | | |
| t = 3 | | |
| t = 4 | | |
| t = 5 | | |
| t = 6 | | |
| t = 7 | | |
| t = 8 | | |
| t = 9 | | |
| t = 10 | | |
| t = 11 | | |
| t = 12 | | |
| t = 13 | | |
| t = 14 | | |
| t = 15 | | |
| t = 16 | | |
Tabel Tipe Ikon