Buku Tamu atau Guest Book merupakan content sebuah web yang cukup diperlukan. Berbagai bentuk dan tampilan banyak disajikan dalam berbagai macam blog, salah satunya seperti yang terdapat dalam blog sahabat saya yang disembunyikan. Seperti apa tampilan buku tamu tersebut ? silahkan sobat lihat dalam blog sahabat saya http://wikilead.blogspot.com. </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"></div> <script type="text/javascript" src="http://kanzenkfilehost.googlecode.com/files/guestbook-open-close.js"></script> </div></div>
Untuk membuat Buku Tamu Buka Tutup seperti dalam blog sahabat saya (tersembunyi), berikut adalah langkah-langkahnya:
METODE PERTAMA :<!-- Mulai GuestBook Buka/Tutup -->
<style type="text/css">
#gb{
position:fixed;
top:10px; /*jarak dari atas*/
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:none;
}
.gbcontent{
float:left;
border:2px solid #000000; /*warna bingkai*/
background:#FFFFFF; /*warna latar*/
padding:5px 10px 0px 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);}
}
METODE KEDUA :
Setelah itu buatlah sebuah link untuk menampilkan Buku Tamu Buka Tutup, seperti berikut :
<a href="javascript:showHideGB()"><img src="http://i655.photobucket.com/albums/uu275/kanzenk/wikilead/wikiguest.gif/> / BUKU TAMU</a>
Ubah tulisan yang berwarna BIRU dengan alamat URL Gambar sobat, untuk link kedalam Buku Tamu atau dapat sobat masukan berupa TEXT (warna MERAH)dalam menu.
Begitu mudahnya pembuatan Buku Tamu/GuestBook Buka Tutup ini kan sobat. Selamat mencoba.
Promote Your Web Here
10 January 2011
Membuat Buku Tamu Buka Tutup
21 March 2010
Trik Google Adsense di Blog Bahasa Indonesia
Masih banyak yang sangsi untuk dapat memasang Google Adsense pada blog berbahasa indonesia termasuk saya sendiri. Entah kenapa Google masih enggan untuk support kedalam blog berbahasa indonesia, padahal sudah banyak para Publisher yang memasang iklannya di Google Adsense melalui Google Adword.
Saya juga masih mencoba-coba untuk mencari triknya tanpa melanggar TOS dari Google Adsense sendiri, namun hingga sekarang masih belum yakin meskipun saya sudah mencoba untuk meletakkan pada blog saya kanzenk.web.id. Apakah yang telah saya lakukan itu melanggar TOS ataupun tidak saya masih belum tau.
Saya pun mencoba Scriptnya dipasang disini, mohon maaf ini hanya untuk mencoba apakah modifikasi script ini berjalan atau tidak.
MOHON COMMENTAR UNTUK GOOGLE ADSENSE INI
12 March 2010
Kanzenk.web.id
Horeee,,,Alhamdulillah,, akhirnya Kanzenk punya rumah baru lagi. Yah, dengan senang hati Kanzenk setelah sekian lama nge-blog seperti orang goblog akhirnya memiliki sebuah Blog lagi, tapi kali ini dengan Domain dan Hosting sendiri. Kepada sobat blogger yang disini jangan lupa untuk berkunjung juga ke blog Kanzenk yang baru yah, juga dukung terus Kanzenk untuk tetap bisa eksis menulis disini maupun di blog yang baru. Buat sobat semua, Follow dan comment juga di blog Kanzenk yang baru dengan alamat http://kanzenk.web.id
Terimakasih Kanzenk ucapkan.
06 March 2010
Membuat "Reply Comment" Pada Blogspot
Kemungkinan hal ini yang paling banyak blogger tunggu yaitu dengan "Hack" sebuah perintah untuk "membalas" komentar-komentar seperti halnya yang ada pada Wordpress. Sekarang, Sobat tidak harus menunggu rilis resmi dari Tim Blogger. Mungkin sebelumnya sobat banyak mengenal komentar disertai "reply" secara instant seperti Disqus maupun Intensedebate. Hal ini sekarang dapat sobat lakukan dengan menginstalnya kedalam template sobat. Cukup lumayan bagus, namun masih ada sedikit kekurangan dalam tampilan "Balasannya" yaitu "Balasan" tidak tepat berada dalam satu menu dengan komentar yang dibalas (Balasan akan ditaruh dibawah komentar paling akhir. Namun apa salahnya jika sobat ingin mencobanya.
Cara Menginstal kedalam Template :
<b:include data='comment' name='commentDeleteIcon'/> </span>
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR BLOG ID HERE&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img alt='Reply To This Comment' src='YOUR REPLY BUTTON IMAGE URL HERE'/></a></span>
Semoga bermanfaat, dan jangan lupa komentar ya sob.
Thanks To :
14 January 2010
Recent Post Dengan Thumbnails
Posting Kali ini adalah bagaimana cara mudah membuat Recent Post dengan gambar Thumbnail disampingnya Pada blogger sobat. Bagaimana sich cara mudah membikinnya ??
Fitur Widget ini adalah :
1. Recent Post dengan Thumbnail.
2. Penghitung Jumlah Commentar pada masing-masing post.
Cara memasang widget Recent Post dengan Thumbnail :
1. Masuk kedalam blogger area sobat.
2. Pilih Tata Letak/Layout --> Add a Gadget --> HTML/JavaScript.
3. Copy Code berikut :
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://kanzenk.blogspot.com/";
</script>
<script src="http://kanzenkfilehost.googlecode.com/files/thumb.js" type="text/javascript"></script>
Perhatian :
Edit kode diatas sesuai dengan tampilan blog sobat seperti,
boxwidth <-- Lebar widget
cellspacing <-- spasi antar post
borderColor <-- warna border widget
thumbwidth & thumbheight <-- lebar dan tinggi Gambar Thumbnail.
fntsize <-- ukuran Font Title widget
acolor <-- Warna Font Title widget
aBold <-- Tebal atau tidak Title Widget (true/false)
numposts <-- Jumlah Post
home_page = http://kanzenk.blogspot.com/ <-- Ganti dengan nama Blog sobat
Java Script buat Recent Post dengan Thumbnail = http://kanzenkfilehost.googlecode.com/files/thumb.js <-- saya rekomendasikan untuk disimpan dalam hosting penyimpanan sobat sendiri.
4. Save setelah semua editing selesai.
5. Lihat hasil pemasangan widget.
Selamat mencoba....
15 December 2009
Membuat Spoiler
Spoiler termasuk sebuah trik agar blog sobat tidak terlalu berat, yaitu bagi sobat yang merasa banyak postingan gambar yang memungkinkan proses loading blog sobat menjadi lambat. Hal itu dapat diatasi dengan menggunakan Spoiler. Mungkin sudah banyak yang ngebahas tentang spoiler ini, namun saya berniat untuk mengingatkan dan juga memberitahukan bagi sobat blogger yang belum mengetahui. Biar ingatan kita lebih fresh seperti apa bentuk spoiler itu lihat contoh dibawah.
Lantas Bagaimana cara membuat spoiler tersebut ?, disini saya akan menggunakan 2 metode memasang spoiler yaitu metode penerapan langsung pada saat posting blog dan motode penanaman kode HTML pada template sobat
- Cara yang pertama (langsung penulisan pada blogger sobat). Cara ini sangatlah mudah, sehingga sobat tidak perlu merubah kode HTML pada template sobat, namun sobat harus bener-bener kode spoiler ini. Jika ingin mencoba silahkan Copy dan Paste code dibawah kedalam postingan sobat (pilihan mode HTML). Pada kode diatas sobat dapat modifikasi sendiri dari ukuran kotak spoiler,warna background,border, dan tentu isinya serta tombol Lihat dan Tutup spoiler (bisa dengan gambar).
- Cara kedua dengan merubah kode HTML Template Sobat.
- Copy kode dibawah dan taruh diatas kode ]]></b:skin>
.commenthidden {display:none;}- Masukan kode berikutnya diantara ]]></b:skin> dan </head> atau taruh saja diatas </head> , dan kodenya adalah :
.commentshown {display:inline;}
- Save template sobat. Kemudian gimana cara penggunaan di postingan ??
- Saat membuat postingan sobat jangan lupa untuk memberikan kode dibawah :
<a aiotitle="click to expand" href="javascript:togglecomments('Nama_Spoiler')"><img class="spoiler" src="http://i655.photobucket.com/albums/uu275/kanzenk/showhide.png" /></a><div class="commenthidden" id="Nama_Spoiler">Gambar/Tulisan di taroh di sini</div>
Sudah cukup jelas sobat ?? kalau cara yang kedua ini nihh, untuk menampilkan beberapa spoiler sobat harus mengedit Nama_Spoiler yang berbeda agar tidak bentrok dalam penampilan gambar/text yg akan sobat tampilkan.
Nah ini contoh spoiler dengan model yang kedua :
Sobat, jika sobat bingung menggunakan cara yang kedua sobat gunakan cara yang pertama. Bagaimana sobat ? mau mencobanya ? Oke deh, selamat mencoba.
27 November 2009
HOSTING FILE JAVA SCRIPT dengan GooGLe Code
Hosting file java script adalah sebuah hoting untukpenyimpanan file java script sobat. Sebelumnya saya menyimpan file-file java script tersebut dalam link www.geocities.com, namun sekarang ini GooGle telah membuat file hosting sendiri untuk menyimpannya yaitu pada http://code.google.com untuk menyimpan file java script sobat dalam sebuah project website/blog.
Langkah menyipan file dalam google code project hosting sebagai berikut :
1. Login ke Google Code dengan account google sobat.
Kemudian akan terbuka :
Untuk mudahnya silahkan sobat masuk melalui http://code.google.com/hosting/
2. Klik pada "Create a New Project" seperti yang sobat lihat di gambar berikut.
3. Maka halaman web sobat akan terbuka,untuk melanjutkan klik Create Project seperti gambar berikut.
4. Klik Tab Download kemudian New Download seperti pada gambar.
5. Masukan File Java script (js) sobat kedalam kolom isian seperti gambar dibawah. Kemudian Klik Submit File
6. Proses Upload file Js sobat telah selesai. Jika sobat akan menggunakan "Link" file Js sobat silahkan sobat "Klik Kanan" pada mouse sobat dan "Copy Link Address" seperti gambar.
sebagai contoh link file java script (Js) yang akan sobat masukan kedalam blog / website sobat.
<script src='http://fileaku.googlecode.com/files/ssm.js' type='text/javascript'/>
Demikian proses penyimpanan file Java Script sobat. Semoga tulisan ini dapat membantu sobat sekalian.
Penghormatan terdalam atas ide penulisan posting ini ditujukan kepada Kang Ocim. Terimakasih atas inspirasi hosting file java script melalui Google Code.
05 June 2009
Membuat Judul Blog Bergerak (Kumpulan)
Waduh pusing mau diawali dari mana yah, sebenernya ini ada request dari sobat Iqbal waktu chat di Blog Kang Rohman beberapa waktu lalu. Maaf brot saya baru posting, karena ada kesibukan tersendiri. Sebenernya hal seperti ini sudah banyak dibahas di beberapa blog sobat saya yang lain seperti sobat eRGe dan sobat YoYok, maaf bro tanpa mengurangi rasa hormat saya bikin kumpulan Kode "JUDUL BLOG BERGERAK"
Sobat jangan bosan yah jika postingan ini panjang, dan kemungkinan sudah banyak yang bahas. Maaf saya hanya blogger pemula yang suka mencoba.
Baiklah sobat ga usah panjang lebar ngomongnya nanti malah bikin panjang postingan. Ada 3 "JUDUL BLOG BERGERAK" yang akan saya bahas :
PERTAMA
Judul Blog bergerak mendatar biasa seperti halnya penggunaan Marquee, Inilah Kodenya :
<script language='JavaScript'>
var txt="||---BELAJAR DALAM BLOG---||";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
Caranya :
- Masuk ke blogger sobat --> Tata Letak --> Edit HTML --> Expand Widget Template --> taruh kode tersebut diatas persis dibawah <head>
- Ganti Kode warna merah dengan Kalimat "JUDUL BLOG" sobat dan text warna Hijau dengan kecepatan gerakan text, semakin kecil nilainya semakin cepat gerakannya. Contoh lihat disini.
KEDUA
Judul Text bergantian namanya seperti punya saya dan punya sobat YoYok inilah kodenya:
<script language="JavaScript">
Cara Pemasangan :
<!--
/*****JUDUL BERJALAN By. Kanzenk*****/
function tb5_makeArray(n){
this.length = n;
return this.length;
}
tb5_messages = new tb5_makeArray(6);
tb5_messages[0] = "Assalamualaikum...";
tb5_messages[1] = "Selamat Datang SOBAT";
tb5_messages[2] = "Di KANZENK BLOG";
tb5_messages[3] = "Jangan Lupa KOMENTAR";
tb5_messages[4] = "Terima Kasih Atas Kunjungannya";
tb5_messages[5] = "Wassalamualaikum";
tb5_rptType = 'infinite';
tb5_rptNbr = 10;
tb5_speed = 50;
tb5_delay = 2000;
var tb5_counter=1;
var tb5_currMsg=0;
var tb5_stsmsg="";
function tb5_shuffle(arr){
var k;
for (i=0; i<arr.length; i++){
k = Math.round(Math.random() * (arr.length - i - 1)) + i;
temp = arr[i];arr[i]=arr[k];arr[k]=temp;
}
return arr;
}
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
function tb5_init(n){
var k;
if (n == tb5_arr.length){
if (tb5_currMsg == tb5_messages.length-1){
if ((tb5_rptType == 'finite') && (tb5_counter==tb5_rptNbr)){
clearTimeout(tb5_timerID);
return;
}
tb5_counter++;
tb5_currMsg=0;
}
else{
tb5_currMsg++;
}
n=0;
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
tb5_sp=tb5_delay;
}
else{
tb5_sp=tb5_speed;
k = tb5_arr[n];
tb5_sts[k] = tb5_messages[tb5_currMsg].charAt(k);
tb5_stsmsg = "";
for (var i=0; i<tb5_sts.length; i++)
tb5_stsmsg += tb5_sts[i];
document.title = tb5_stsmsg;
n++;
}
tb5_timerID = setTimeout("tb5_init("+n+")", tb5_sp);
}
function tb5_randomizetitle(){
tb5_init(0);
}
tb5_randomizetitle();
//-->
</script>
- Silahkan sobat masukan dalam widget, caranya seperti menambahkan widget HTML/Java Script. Untuk text berwarna Merah adalah Jumlah Pesan yang akan ditampilkan dalam judul, sedang text yang berwarna hijau adalah Tulisan "JUDUL BLOG" sobat.
KETIGA
Judul Text bergerak disebelah samping kanan dan kiri "JUDUL UTAMA" seperti Judul milik sobat eRGe. Cara Menaruh silahkan taruh di widget seperti yang Kedua, dan inilah kodenya :
<script language="JavaScript">
Ubahlah Kode yang berwarna merah dengan "JUDUL BLOG SOBAT".
<!--
//
//Scrolling Status Bar
putmsg="==welcome==";
letchar2="+==o0o==+";
letchar1="+==o0o==+";ultimo1=letchar1.length-1;
ultimo2=letchar2.length-1;
ultimo2=letchar2.length-1;
tiempo=setTimeout("stat_scroll()",.1);
function stat_scroll()
{
aux1=letchar1.charAt(ultimo1-1);
letchar1=aux1+letchar1.substring(0,ultimo1-1);
aux2=letchar2.charAt(0);
letchar2=letchar2.substring(1,ultimo2+1)+aux2;
window.status="(" + letchar2 + putmsg + letchar1 + ")";
tiempo=setTimeout("stat_scroll()",.1);
return true;
}
// -->
</script>
<script language="JavaScript">
<!--
//
putmsg="[KANZENK BLOG]";
letchar2="+==o0o==+";
letchar1="+==o0o==+";
ultimo2=letchar2.length-4;
ultimo2=letchar2.length-4;
tiempo=setTimeout("tit_scroll()",.1);
function tit_scroll()
{
aux1=letchar1.charAt(ultimo1-1);
letchar1=aux1+letchar1.substring(0,ultimo1-1);
aux2=letchar2.charAt(0);
letchar2=letchar2.substring(1,ultimo2+1)+aux2;
document.title="" + letchar2 + putmsg + letchar1 + "";
tiempo=setTimeout("tit_scroll()",.1);
return true;
}
// -->
</script>
Aduh, ternyata cape juga yah nulis segini panjangnya..semoga ini dapat bermanfaat buat sobat semua.
02 June 2009
Emoticon di Postingan, Mudah Kok
Sobat blogger, sudah lama saya tidak posting di blog kesayangan saya ini :). Kali ini saya bawakan oleh-oleh setelah bergelut di Kembarannya Facebook kemarin dan membuat CSS Layout buat FaceBook. Rasa kangen ini menyelimuti hatiku :(.
Wah sobat, saya ingin kasih tau kalo blog sobat juga bisa menggunakan Emoticon di postingan sobat seperti Posting saya ini :) :$. Bagaimana cara mudahnya membuat Emoticon di Postingan sobat. Berikut Panduan mudah membuat Emoticon di Postingan :
1. Masuk ke Blogger sobat -> "Tata Letak" -> "Edit HTML" -> Tandai "Expand Widget Templates -> Jangan lupa BackUp Template sobat dahulu dengan klik tulisan "Download Full Template
2. Cari Kode ]]></b:skin> yang letaknya sekitar 1/3 halaman, atau pencarian dengan cara Tekan tombol pada Keybiard : Ctrl+F masukan kodenya kemudian tekan enter.
3. Sudah ketemu belom sob :t Jika sudah, Copy dan Paste Kode dibawah persis dibawah kode ]]></b:skin>
<script src='http://www.geocities.com/ciao.indo/emoticon.js' type='text/javascript'/>
4. Simpan Template sobat.
Contoh Penulisan dalam Postingan :
Semoga dapat bermanfaat buat sobat semua, sebenernya masih banyak Emoticon yang lain tapi saya cape uploadnya :(. Lain kali saya tambahin Emoticonnya biar rame yah..hehe...
31 May 2009
Membuat Flashing Link (Template Standar)
Flashing link adalah salah satu bentuk link dengan background yang berkedip ataupun dengan link itu sendiri yang berkedip. Ini mungkin dapat membantu mengalihkan perhatian pada pembaca blog sobat. Dengan adanya link yang berkedip diantara postingan sobat :).
Sebagai contoh sobat dapat melihat dibawah :
1. contoh 1
2. contoh 2
Maaf Contoh ini tidak dapat tampil di blog saya karena tidak menggunakan Template Standar.
Cara pembuatan Flash Link :
1. Download Flash Link.js DISINI
2. Setelah di download silahkan sobat Upload kedalam file penyimpanan sobat, sebagai contoh sobat taruh di www.geocities.com
3. Masuk kedalam Blogger sobat --> "Tata Letak" --> "Edit HTML" --> tandai "Expand Widget Template
4. Masukan Kode dibawah tepat dibawah <head>
<script type="text/javascript" src="http://www.geocities.com/ciao.indo/flashinglinks.js">
Ganti Kode yang berwarna Hijau dengan URL penyimpanan File flashlink.js sobat
</script>
5. Simpan template Sobat
Cara Penulisan diposting/widget :
<a href="Link URL" rel="flashfg[colorvalue]">Contoh 1</a>
- Pada kode diatas warna Merah adalah URL link sobat
<a href="Link URL" rel="flashbg[colorvalue]">Contoh 2</a>
- Jangan lupa selalu Tambahkan Kode yang berwarna Kuning dalam penulisan dalam kode warna Kuning tersebut Kode color value dapat sobat ganti warna apa yang akan ditampilkan.
- Contoh Kode yang sudah jadi menjadi seperti ini : <a href="URL Link Sobat" rel="flashfg[blue]">Contoh Saja</a>
Demikian cara pembuatan dan penempatan Flash Link, Semoga dapat bermanfaat buat sobat semua.
Artikel asli : www.dynamicdrive.com
19 May 2009
Membuat Tabview Widget
Tabview merupakan sebuah widget yang perlu digunakan untuk menyimpan beberapa konten dalam satu tempat, yang akan ditampilkan bilamana tab konten tersebut di klik olehnya.
Dalam pembuatan widget seperti ini banyak digunakan beberapa kode diantaranya berektensi Java Script.
Cara membuat TabView :
1. Masuk kedalam blogger sobat
2. Arahkan ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> Beri tanda pada kotak disamping tulisan "Expand Widget Templates"
3. Jangan lupa untuk BackUp template sobat sebelumnya dengan menekan tulisan "Download Full Templates"
4. Cari Kode ]]></b:skin> kemudian Copy dan Pastekan Kode Berikut tepat diatas Kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #7A7A7A; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Californian FB", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #58FA58; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #000000; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #000000; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
5. Setelah itu Copy dan Paste Kode Berikut tepat dibawah kode ]]></b:skin>
<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>
6. Simpan Template Sobat.
Cara memasang Tabview Pada Widget/Sidebar
1. Tuju Halaman TATA LETAK/LAYOUT" ==> "PAGE ELEMENT" ==> "TAMBAH WIDGET"
2. Pilih HTML/Java Script"
3. Masukan Kode berikut ini :
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Tab.1</a>
<a>Tab.2</a>
<a>Tab.3</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Isi Konten Tab.1</div>
</div>
<div class="Page">
<div class="Pad">
Isi Konten Tab.2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi Konten Tab.3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Pada kode yang merupakan Jumlah Tab yang mau sobat masukan, terserah sobat mau membuat berapa Tab. Tinggal sobat menambahkan Kode yang sama seperti kode yang .
- Pada Kode yang berwarna Kuning merupakan Tinggi Kotak Widget TabView yang akan sobat buat.
- Pada Text berwarna Merah merupakan Isi Konten yang akan di tampilkan pada masing-masing TabView.
Demikian cara membuat Widget TabView,Semoga dapat difahami. Selamat mencoba.
18 May 2009
Membuat Text dan Gambar "CRAWLER"
Text atau Gambar "CRAWLER" merupakan sebuah text / gambar yang dapat bergeser kedepan (ke kiri) maupun berbalik kembali ke belakang (ke kanan) apabila posisi "mouse" digeserkan ke arah yang berlawanan.
Isi dari kontent "CRAWLER" merupakan halaman pengkodean HTML biasa. Yang menggunakan beragam konten "Marquee", "CRAWLER" merupakan konten lebih mudah dengan menggunakan event tanpa "Onload". "CRAWLER" sangat mudah dan dapat dipadukan dengan berbagai macam script. Silahkan lihat Contoh dibawah
Cara membuat Text / Gambar "CRAWLER" :
1. Download Crawler.js, setelah di download kemudian upload file Crawler.js tersebut kedalam direktori penyimpanan file sobat (ex : www.geocities.com).
2. Masuk ke blogger sobat kemudian ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> tandai kotak kecil pada tulisan "Expand Template Widget". Jangan lupa untuk selalu Backup template sobat dengan klik tulisan yang berbunyi "Download Full Templates"
3. Cari Kode <head> kemudian tempatkan kode dibawah tepat dibawah kode <head>.
<script type="text/javascript" src="http://www.geocities.com/ciao.indo/crawler.js">ganti kode yang berwarna Biru dengan Alamat direktori penyimpanan file Crawler.js sobat.
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
4. "simpan Template" sobat.
Cara menuliskan kode Sript pada Halaman Blog Sobat :
Pada contoh diatas saya menggunakan cara (text crawler) sebagai berikut :
<div class="marquee" id="mycrawler">
Membuat text crawler, perlu kehati-hatian yang sangat harap perhatikan semua perintah dalam membuatnya,jangan sampai anda melewatkan salah satu cara dan aturan dalam membuatnya.
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'blue',
'border': '1px solid #2EFE2E'
},
inc: 6, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>
Penjelasan :
- Pada text warna Biru merupakan Text yang akan ditampilkan.
- Pada Text :
'padding': '5px', = Tinggi Kotak
'width': '450px', = Lebar/Panjang kotak
'background': 'blue', = warna Background Kotak
'border': '1px solid #2EFE2E' = Warna Border Kotak
- Pada Text warna Pink merupakan kecepatan gerakan text.
- Pada Text "mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)" merupakan penggunaan Mouse untuk jeda, default untuk "pause" yaitu false. Penggunaan False disini agar Marquee tidak sangat berpengaruh.
Pada contoh diatas saya menggunakan cara (Image/Gambar crawler) sebagai berikut :
<div class="marquee" id="mycrawler2">
<img src="http://i40.tinypic.com/9tlic8.jpg" /> <img src="http://i43.tinypic.com/1zbqs5t.jpg" /> <img src="http://i44.tinypic.com/2419ul3.jpg" /> <img src="http://i43.tinypic.com/296nh3r.jpg" /> <img src="http://i40.tinypic.com/mk7ki.jpg" />
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true
});
</script>
Penjelasan :
- Text warna Merah merupakan dimana sobat menaruh gambar yang akan ditampilkan sobat (URL gambar)
- Penjelasan Lain sama
- pada Text :
** moveatleast: 2, = merupakan Kecepatan minimum untuk Kursor drives (default tidak bergerak onmouseout)
** neutral: 150, = Ini adalah ukuran area di bagian tengah tenda besar di mana hovering akan menghentikannya. (default ke 16)
** savedirection: true = merupakan pengatur arah jika mouse di pindahkan, Gambar/text akan berjalan mundur (defaulnya menggunakan "false")
Semoga dapat bermanfaat broo....selamat mencoba
Bahan referensi dari : www.dynamicdrive.com
15 May 2009
Membuat Ukuran Text Lebih Bersahabat
Sobat, kadang sebuah ukuran text dalam blog sobat tidak sesuai dengan kriteria ukuran yang ada. Kadang ukuran text tersebut terlalu kecil atau bahkan membengkak tidak sesuai dengan blog sobat yaitu karena perbedaan konfigurasi OS ataupun browser sobat. Hal ini dapat diatasi dengan menggunakan sebuah trik CSS yang saya ambil dari salah satu blog tips blog yang sebenarnya dari sumber aslinya Dynamicdrive
Script ini sesuai bagi pengguna web dengan menggunakan CSS, dan akan dapat berguna buat browser sejenis Internet Explorer V.5 keatas, Net Scape V 6 Keatas, Opera Versi 7 keatas. Sebagai contoh silahkan klik tombol berikut ini :
+ Perbesar Text | + Perkecil Text
Bagaimana Cara Pembuatannya :
1. Download Text sizer.js disini
2. Upload hasil download sobat tadi kedalam direktori penyimpanan sobat seperti www.geocities.com atau lainnya.
3. Setelah Upload selesai silahkan sobat copy kode berikut :
<script type="text/javascript" src="http://yourfilelink.com/textsizer.js"></script>
Ganti URL berwarna Merah dengan alamat URL penyimpanan file "textsizer.js" sobat.
4. Masuk kedalam Blogger sobat dengan ID dan Password sobat. Kemudian "LAYOUT/TATA LETAK" ==> "EDIT HTML" ==> Jangan lupa tandai "expand widget templates" dan backup dengan klik "Download full templates"
5. Taruh Kode diatas tadi (setelah diedit URL dengan URL sobat) dan taruh persis dibawah <head>
6. Untuk memanggil/menggunakannya taruh kode berikut kedalam posting/halaman web sobat :
<a href="javascript:ts('body',1)">+ Perbesar Text</a> | <a
href="javascript:ts('body',-1)">+ Perkecil Text</a>
Selamat mencoba dan semoga bermanfaat.
14 May 2009
Cara Menulis Kode HTML di Posting
Tulisan kali ini saya terinspirasi dari komentar aaLiL di dalam tulisan saya sebelumnya "Membuat Text Area", dalam komentar tersebut aaLiL bertanya bagaimana menulis kode HTML di postingan. Apakah itu sebuah pertanyaan iseng atau memang belum tahu caranya, secara aaLiL adalah seorang blogger senior yang telah lama berkecimpung di dunia blog dan beliau juga seorang "Pakar SEO"
Baiklah sobat, ini mungkin sambil mereview ulang buat yang belum atau yang sudah mengetahui cara menuliskan kode HTML dalam postingan. Saya juga masih belajar dan saya hanya menggunakan jasa sebuah web untuk merubah kode HTML tersebut.
"Cara yang paling mudah merubah kode HTML yaitu :"
1. silahkan sobat kunjungi website berikut
maka akan terbuka seperti ini
2. Tuliskan kode HTML yang akan sobat rubah pada kolom kemudian klik Tombol yang bertuliskan ENCODE
3. Silahkan sobat copy dan pastekan ke dalam postingan.
Selamat mencoba dan semoga bermanfaat
12 May 2009
Membuat Text Area
Text area merupakan tempat penyimpanan text ataupun kode-kode HTML,biasanya digunakan untuk menyimpan kode HTML untuk tukeran Banner atau Link. Penggunaan Text area agar memudahkan untuk di copy kede yang terdapat didalamnya.
Saya akan bahas beberapa jenis text area. Mungkin sobat kadang tidak merasakan bahwa text area juga memiliki beberapa jenis, diantaranya text area model biasa dan model "read only". Adapun dalam penerapan untuk banner text area lebih baiknya menggunakan text area jenis "Read Only", Inilah pembahasannya
Pembuatan text area biasa yaitu dengan menggunakan kode seperti berikut :
<p align="center"><textarea name="code" rows="5" cols="15"> Silahkan Tuliskan Kode/Tulisan Sobat di sini, Maka tulisan sobat akan tampil dalam text area </textarea></p>
Dari kode diatas maka akan terbentuklah seperti ini :
Dalam kode diatas sobat akan melihat kode rows="5" cols="15"> ubahlah angka tersebut untuk menentukan ukuran text area.
Menggunakan Text Area Read Only :
Text Area Model "read only" baiknya digunakan untuk menyimpan kode banner, karena dengan text area model ini kode-kode sobat akan aman dan tidak akan terhapus. Silahkan sobat bandingkan dengan text area model yang biasa. Kode Text area model Read Only sebagaimana berikut :
<p align="center"><textarea rows="3" cols="32" name="Famous Quotes" readonly="readonly"><a href="http://kanzenk.blogspot.com" target="_blank"><img border="0" alt="Belajar Dalam Blog" src="http://i655.photobucket.com/albums/uu275/kanzenk/z1ao.jpg"/></a></textarea></p>
Dari kode diatas akan menjadi :
Untuk memeriksa silahkan sobat letakkan kursor kemudian tekan "delete/back space" maka tulisan di dalam text area tidak akan terhapus.
Semoga dapat bermanfaat bagi sobat semua.
11 May 2009
Membuat Widget di Sidebar Buka/Tutup
Kebanyakan widget di sidebar kadang menjengkelkan, karena blog kita akan kelihatan panjang widget daripada postingan. Sobat dari hasil saya berjalan-jalan alias dalam bahasa jawanya tuh BLOG WALKING hehehe..., saya menemukan sebuah blog yang membahas tentang hal ini. Terimakasih buat sobat saya Easyblogtrick, dengan bahasannya saya dapat mempraktekkan dan menuliskan kembali.
Sobat dapat melihat contoh yang telah saya pergunakan pada widget daftar isi, labels, dan pengunjung. Bagaimana cara pembuatannya, ternyata setelah saya praktekkan sangatlah mudah.
Berikut ini tahapan membuat widget seakan dapat dibuka maupun ditutup :
1. Masuk kedalam Blog area sobat dengan menggunakan ID dan password sobat.
2. Klik Tab "LAYOUT/TATA LETAK" =>> "EDIT HTML"
3. Beri tanda pada kotak disamping tulisan "EXPAND WIDGET TEMPLATES", ingat lebih baik sobat selalu backup template sobat sebelum merubah sesuatu pada template sobat dengan menekan tulisan "Download Full Templates.
4. Cari kode widget yang akan sobat buka/tutup, disini misal saya gunakan daftar isi, cara pencariaan yang mudah dengan menekan tombol Ctrl+F kemudian ketik apa yang sobat cari. Disini kode standar untuk daftar isi seperti berikut.
<b:widget id='HTML5' locked='false' title='DAFTAR ISI' type='HTML'>
Perhatikan kode yang berwarna biru yang merupakan kode awal dari widget daftar isi dan kode yang berwarna merah yang merupakan akhir kode widget
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
5. Ganti kode yang berwarna kuning dan berkedip dengan kode seperti ini :
<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:right;margin-right:0px;">[+/-]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
Ganti kode/tulisan berwarna biru dengan kreasi sobat (bisa dengan kata Buka, Open, dsb)
6. Copy kode berikut
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
Kemudian letakkan kode tersebut diatas kode
</b:includable>
7. Langkah pembuatan telah selesai, kemudian simpan/save Template sobat.
Selamat berkreasi, dan semoga berhasil.
09 May 2009
Membuat Daftar Isi Blog
Daftar isi merupakan sebuah index pencarian tercepat sebuah blog atau website, yang merupakan daftar dari isi postingan yang ada dalam website / blog. Sebagai contoh yan saya pergunakan pada center side menu saya yang berjudul , untuk melihatnya klik tanda +/- maka widget akan terbuka.
Pembuatan Menu DAFTAR ISI sebenarnya tidak begitu sulit jika sobat sudah pernah membuat sebuah Widget "RECENT POST/POST TERAKHIR", Kenapa saya bilang begitu?
Baiklah sobat, sebenarnya menu "DAFTAR ISI" sama dengan menu pada "RECENT POST/POST TERAKHIR" yang sudah saya bahas, hanya terdapat perubahan Jumlah tampilan, berita, dan tanggal post di hilangkan.Bagaimana cara meletakan Kode pada sidebar sobat dengan perubahan kode tersebut ??
Saya akan tuliskan perbedaan antara Kode pada widget RECENT POST/POSTINGAN TERAKHIR dan Kode pada DAFTAR ISI
Kode Pada Recent Post/Postingan Terakhir
<script style="text/javascript" src="http://sites.google.com/site/zenk82/Home/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://kanzenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
Kode Pada Daftar Isi
<script style="text/javascript" src="http://sites.google.com/site/zenk82/Home/recentpost.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://kanzenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
Lihat perbedaan Kode yang ditandai warna Merah
CARA MEMBUAT DAFTAR ISI
1. Ikuti Langkah pada Tata Cara Membuat "RECENT POST/POST TERAKHIR"
2. Masuk ke Blog Area Sobat =>> Layout/Tata letak =>> Tambah Gadget =>> HTML/Java Script
3. Paste Kode Daftar Isi diatas kemudian Paste, Untuk perhatian pada Kode :
- "http://sites.google.com/site/zenk82/Home/recentpost.txt" diganti dengan alamat URL direktori penyimpanan File sobat pada Kode Kesatu dalam Ulasan "RECENT POST/POST TERAKHIR".
- "http://kanzenk.blogspot.com" diganti dengan URL Blog sobat.
4. Klik Tombol "Simpan"
Jika sobat merasa bingung dan merasa lama silahkan sobat klik tombol dibawah untuk menginstal langsung kedalam blog sobat.
selamat berkarya dan bila ada masalah dalam kode tersebut silahkan post di komentar.
05 May 2009
Membuat Read More / Baca Selanjutnya
Sobat, apabila sobat menulis sebuah artikel ataupun posting di blog merasa terlalu panjang, sehingga tempilan pada blog sobat sedikit kurang indah yang dikarenakan panjangnya artikel / posting sobat. Hal ini dapat sobat antisipasi dengan cara membuat penggalan artikel dengan cara menambahkan Read More/baca selanjutnya. Bagaimana cara melakukan hal ini.
Melalui posting ini saya akan mencoba berbagi bagaimana membuat penggalan artikel (Read more/baca selanjutnya), Kode yang saya dapat saya pelajari dari blog master saya Kang Rohman.
Cara membuat Read More / Baca Selanjutnya :
1. Silahkan sobat masuk kedalam member area blog sobat dengan menggunakan ID dan Pasword sobat.
2. Klik "Tata Letak", kemudian "Edit HTML"
3. Untuk berjaga-jaga bila ada sesuatu yang tidak diinginkan ada baiknya sobat download Template sobat terlebih dahulu dengan menekan tulisan "Download Template Lengkap", kemudian Save/simpan
4. Setelah template sobat di download kembali ke Halaman tadi Sobat akan melihat Opsi "Expand Template Widget" Tandai kotak tersebut dengan mencentang/klik.
5. Sobat harap bersabar untuk prosesnya, selanjutnya silahkan sobat caro Kode berikut :
<data:post.body/>
Atau
<p><data:post.body/></p>
Untuk memudahkan pencarian silahkan sobat klik pada kode HTML kemudian tekan Ctrl+F dan paste kode yang dicari (kode diatas).
6. Setelah menemukan kode tersebut Hapus kode tersebut dan ganti dengan Kode dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...»»</strong></a></p>
</b:if>
7. "Simpan Template"
8. Langkah selanjutnya silahkan sobat ke Tab "PENGATURAN / SETTING"
9. Klik "Format", Kemudian cari Tulisan "Template Posting", Biasanya letaknya berada dibawah. Setelah itu sobat Paste Kode berikut ini :
<span class="fullpost">
</span>
10. Kemudian Simpan / save
Cara Posting :
1. Mohon untuk diperhatikan dalam tata cara posting ini, terkadang sobat masih banyak yang kurang memperhatikannya. sebagai langkah awal silahkan sobat tekan menu Posting
2. Dalam Halaman Posting sobat akan melihat 2 Opsi penulisan Yaitu opsi penulisan dengan model Edit HTML dan Compose, Pilihlah model penulisan . Maka akan terlihatlah Kode
<span class="fullpost">
</span>
3. Tuliskan Posting/artikel yang akan sobat perlihatkan sebelum Kode
<span class="fullpost">
4. Tulis Posting/artikel yang akan sobat sembunyikan (akan nampak jika sudah di klik readmore/baca selanjutnya) sebelum kode
</span>
Atau diantara
<span class="fullpost">
DISINI
</span>
5. Klik Tombol Mempublikasikan
Silahkan sobat lihat hasilnya. SELAMAT MENCOBA
04 May 2009
Bikin Recent Post
Recent Post atau Posting terbaru merupakan salah satu informasi secara singkat Judul dari posting yang baru saja dibuat oleh penulis. Biasanya tampilan ini berurutan sesuai dengan apa yang telah di postkan penulis lebih awal ke yang paling baru. Cara membuatnya ada 2 code yang harus sobat ikuti. Dari kode-kode tersebut diantaranya ada kode yang harus sobat simpan dalam direktori penyimpanan file sobat. Jika sobat tidak memiliki/penuh direktori penyimpanan file tersebut sobat dapat menggunakan jasa penyimpanan gratis.
Beberapa direktori penyimpanan Gratis antara lain www.geocities.com (login dengan account yahoo sobat), www.tripod.com, www.sites.google.com dan lainnya.
Kode yang pertama :// ----------------------------------------
// SHOW RECENT POST
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 2.1
// Date: 2007-02-02
// Author: Hans Oosting
// URL: beautifulbeta.blogspot.com
// ----------------------------------------
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Baca)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style="font-size:80%;"></span>');
if (!standardstyling) document.write('</div>');
document.write('<span style="font-size:80%;">Widget by <a href="http://hackosphere.blogspot.com">Hackosphere</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
if (!standardstyling) document.write('</div>');
}
Caranya :
1. setelah sobat copy kode tersebut silahkan sobat masukan kedalam notepad, kemudian simpan dengan ekstensi file text, misal recentpost.txt.
2. Upload file txt tersebut kedalam direktori file sobat seperti contoh diatas.
3. Setelah file tersimpan pada direktori sobat, sobat bersabar sebentar yah ada kode kedua yaitu :<script style="text/javascript" src="http://sites.google.com/site/zenk82/Home/recentpost.txt"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://kanzenk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
4. Ganti text yang berwarna MERAH dengan URL file yang ada pada direktori sobat, ganti text yang berwarna BIRU dengan angka yang lain (ini menunjukan jumlah posting baru yang akan ditampilkan), dan ganti text berwarna HIJAU dengan alamat URL blog sobat.
5. Silahkan sobat masuk kedalam Blog area sobat, kemudian pilih "LAYOUT", "TAMBAH GADGET", "HTML/JAVA SCRIPT".
6. Copy kode kedua setelah dirubah sesuai petunjuk, kemudian pastekan kedalam GADGET, kemudian SIMPAN.
Jika sobat merasa bingung dan merasa lama silahkan sobat klik tombol dibawah untuk menginstal langsung kedalam blog sobat.
selamat berkarya dan bila ada masalah dalam kode tersebut silahkan post di komentar.
Hanya Sekedar Test