Para pengguna Yahoo messenger pasti sudah pada tahu kan smile icon, itu lho yang seperti ini :) :D :( :o :-x. bagi pengguna wordpress juga sudah otomatis ada layanan seperti ini, bagaimana jika di blogger, sepertinya belum ada yah? nah mau tau caranya agar icon-icon smile itu bisa ada di blog kamu-kamu.
Ini scriptnya <script src='http://www.yourjavascript.com/0051201241/addSmiley.js
' type='text/javascript'/>
nb: bila file nya hilang silahkan download disini. Kemudian save menjadi addSmiley.js lalu upload ke serverhosting anda.
cara pasangnya :
1. masuk ke Edit Html , jgn lupa centang Expand Widget Templates lalu cari kode berikut
]]></b:skin>
2. Jika sudah ketemu paste di bawah code ini
]]></b:skin>
script dibawah ini.
<script src='http://www.yourjavascript.com/0051201241/addSmiley.js
' type='text/javascript'/>
nb: bila file nya hilang silahkan download disini. Kemudian save menjadi addSmiley.js lalu upload ke serverhosting anda.
Seperti ini:
Setelah selesai jangan lupa di save. Dan proses telah selesai, icon-icon lucu ini akan muncul secara otomatis bila kita menuliskan standar code yang benar.
Contoh standar kode smile yang bisa digunakan :
:) or :-)
:D or :-D
:$ or :-$
:( or :-(
:p or :-p
;) or ;-)
:k or :-k
:@ or :-@
:# or :-#
:x or :-x
:o or :-o
Selasa, 27 Desember 2011
Cara Mengganti Icon Cursor Blog
Kalau biasanya cursor blog hanyalah anak panah biasa yang sama dengan blog - blog lain, kini cursor blog bisa diganti sesuai selera. mau diganti cursor dengan icon senjata Naruto juga bisa (kan sama - sama lancipnya) atau mau diganti dengan bambu runcing juga bisa.
Tapi disini saya cuma ingin kasih caranya saja, untuk mencari icon cursor sesuai selera silahkan cari sendiri (saya kasih linknya kamu pilih sendiri) ....
Pengguna Blogger.com
Login ke account blogger kamu.
Pilih Design >>> Edit HTML
Cari kode ]]></b:skin> (tekan Ctrl + F untuk mencari)
Copy dan paste kode di bawah ini tepat diatas kode yang kamu cari tadi.
/* CURSOR GENERATOR */
body { cursor:url("http://www.myspacecursor.net/cursor/smiley6.cur"),default;}
Simpan
Silahkan dilihat apakah cursor blog kamu udah berubah.
Untuk Pengguna Wordpress (hostitng sendiri)
Login di Dashboard WordPress
Buka Apperance >> Editor
Pilih Header.php
Copy dan paste kode di bawah ini tepat di atas tag </head>
<style type="text/css">body {cursor: url(http://www.myspacecursor.net/cursor/smiley6.cur);}</style>
NB : Untuk icon cursor yang lain bisa kamu temukan http://www.myspacecursor.net/ atau di Cursor-4u
Pilih sesuai selera atau sesuai tema blog kamu. Example url cursor keren:
http://www.myspacecursor.net/cursor/cursor_35_87.cur
http://www.myspacecursor.net/pencil/pencil.cur
http://www.myspacecursor.net/cursor/LEDBlue.cur
Tapi disini saya cuma ingin kasih caranya saja, untuk mencari icon cursor sesuai selera silahkan cari sendiri (saya kasih linknya kamu pilih sendiri) ....
Pengguna Blogger.com
Login ke account blogger kamu.
Pilih Design >>> Edit HTML
Cari kode ]]></b:skin> (tekan Ctrl + F untuk mencari)
Copy dan paste kode di bawah ini tepat diatas kode yang kamu cari tadi.
/* CURSOR GENERATOR */
body { cursor:url("http://www.myspacecursor.net/cursor/smiley6.cur"),default;}
Simpan
Silahkan dilihat apakah cursor blog kamu udah berubah.
Untuk Pengguna Wordpress (hostitng sendiri)
Login di Dashboard WordPress
Buka Apperance >> Editor
Pilih Header.php
Copy dan paste kode di bawah ini tepat di atas tag </head>
<style type="text/css">body {cursor: url(http://www.myspacecursor.net/cursor/smiley6.cur);}</style>
NB : Untuk icon cursor yang lain bisa kamu temukan http://www.myspacecursor.net/ atau di Cursor-4u
Pilih sesuai selera atau sesuai tema blog kamu. Example url cursor keren:
http://www.myspacecursor.net/cursor/cursor_35_87.cur
http://www.myspacecursor.net/pencil/pencil.cur
http://www.myspacecursor.net/cursor/LEDBlue.cur
Membuat Animasi Loading Blog
Cara pasang gambar status page loading di blogger. Jika mungkin, blog anda kurang impresif saat proses loading, kini anda dapat mengubahnya menjadi lebih menawan dengan menyisipkan status “Loading” pada blog Sobat. Animasi ini akan muncul saat blog kita sedang dalam proses loading.
Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template anda sebelum mengubah kode HTML-nya.
Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini.
Caranya ikuti langkah-langkah berikut,
Pertama, pilih saja dulu salah satu Animasi preloader dari dua layanan ini Preloader.net atau Ajaxload.info, Jika sudah, download hasil animasinya dan upload ke Hosting anda seperti Photobucket.com
var ld=(document.all);var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
Langkah kedua silahkan buka notepad , kemudian simpan kode di atas dengan nama preloader.js (pastikan ekstensi berakhiran JS , bukan TXT) dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites.
Kemudian ikuti langkah berikut ini :
1. Silahkan login dulu ke Blogger.
2. Kemudian tuju halaman Edit HTML.
3. Klik Expand Template Widgets.
4. Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini :
<body onLoad='init()'><div id='loading' style='position:fixed; _position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>
5. Simpan Template.
Keterangan :
Kode yang berwarna merah adalah url dimana anda menyimpan gambar animasi status loading-nya.
Kode yang berwarna Biru adalah url tempat anda mengupload kode javascript animasi status loading-nya, kalau bingung atau susah -susah upload preloader.js di hosting kamu pake aja punya saya ini :
http://rozein.googlecode.com/files/preloader.js
Cara untuk mengcopy kode URL gambanya, arahkan korsor pada salah satu gambar, kemudian klik Kanan Pilih Copy Image Location.
Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template anda sebelum mengubah kode HTML-nya.
Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini.
Caranya ikuti langkah-langkah berikut,
Pertama, pilih saja dulu salah satu Animasi preloader dari dua layanan ini Preloader.net atau Ajaxload.info, Jika sudah, download hasil animasinya dan upload ke Hosting anda seperti Photobucket.com
var ld=(document.all);var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
Langkah kedua silahkan buka notepad , kemudian simpan kode di atas dengan nama preloader.js (pastikan ekstensi berakhiran JS , bukan TXT) dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites.
Kemudian ikuti langkah berikut ini :
1. Silahkan login dulu ke Blogger.
2. Kemudian tuju halaman Edit HTML.
3. Klik Expand Template Widgets.
4. Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini :
<body onLoad='init()'><div id='loading' style='position:fixed; _position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>
5. Simpan Template.
Keterangan :
Kode yang berwarna merah adalah url dimana anda menyimpan gambar animasi status loading-nya.
Kode yang berwarna Biru adalah url tempat anda mengupload kode javascript animasi status loading-nya, kalau bingung atau susah -susah upload preloader.js di hosting kamu pake aja punya saya ini :
http://rozein.googlecode.com/files/preloader.js
Cara untuk mengcopy kode URL gambanya, arahkan korsor pada salah satu gambar, kemudian klik Kanan Pilih Copy Image Location.
Membuat Animasi Pada Blog
Untuk membuat animasi disebelah pojok atas atau disisilain Blog anda caranya seperti berikut :
Buka Blog - Rancangan - Edit HTML - Ups jangan lupa sebelum di utak-atik htmlnya Download Template Lengkap jaga-jaga aja.
Siapkan gambarnya dengan Type gambar terserah anda bisa JPG, BMP, GIF, TFT dll asalkan anda mendapatkan Url gambar tersebut, bisa juga anda Upload ke dalam photobucket.comdan ambil Url gambarnya.
setelah mendapatkan Url anda copykan code dibawah ini diatas
]]></b:skin> codenya:
#gambar1 { position:fixed; _position:absolute; top:0px; left:0px; clip:inherit; z-index:+1000;}
Kemudian langkah berikutnya adalah copykan code berikut ini di bawah </head>
<div id='gambar1'> <a href='http://noterozein.blogspot.com/' target='_blank' title='Membuat Animasi pada Blog'><img border='0' src='http://i1210.photobucket.com/...gif'/></a> </div>
Selesai deh, selamat mencoba
Buka Blog - Rancangan - Edit HTML - Ups jangan lupa sebelum di utak-atik htmlnya Download Template Lengkap jaga-jaga aja.
Siapkan gambarnya dengan Type gambar terserah anda bisa JPG, BMP, GIF, TFT dll asalkan anda mendapatkan Url gambar tersebut, bisa juga anda Upload ke dalam photobucket.comdan ambil Url gambarnya.
setelah mendapatkan Url anda copykan code dibawah ini diatas
]]></b:skin> codenya:
#gambar1 { position:fixed; _position:absolute; top:0px; left:0px; clip:inherit; z-index:+1000;}
Kemudian langkah berikutnya adalah copykan code berikut ini di bawah </head>
<div id='gambar1'> <a href='http://noterozein.blogspot.com/' target='_blank' title='Membuat Animasi pada Blog'><img border='0' src='http://i1210.photobucket.com/...gif'/></a> </div>
Selesai deh, selamat mencoba
Script Mempercantik Blog
Ada berbagai macam Script untuk mempercantik Bog kita saya dapatkan beberap script untuk mempercantik blog seperti efek Bintang jatuh, salju, kembang api dll. Berikut ini contoh scriptnya tinggal di copy paste aja
Script efek Bintang jatuh
<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>
Script efek salju berguguran
<script src='http://www.geocities.com/ridwanox/saljubesar.js' type='text/javascript'></script>
Script efek kembang Api
<script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>
Script efek hati bertaburan
<script src='http://www.geocities.com/ridwanox/efekhati.js' type='text/javascript'></script>
untuk cara pemasangannya :
silahkah masuk blogger.com-->tata letak/layout--->edit html
download lengkap template buat jaga-jaga
kemudian cari kode </body> ditemplate kamu, (letaknya dibagian paling bawah template) kalo udah ketemu paste script yang kamu sukai.
Script efek Bintang jatuh
<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>
Script efek salju berguguran
<script src='http://www.geocities.com/ridwanox/saljubesar.js' type='text/javascript'></script>
Script efek kembang Api
<script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>
Script efek hati bertaburan
<script src='http://www.geocities.com/ridwanox/efekhati.js' type='text/javascript'></script>
untuk cara pemasangannya :
silahkah masuk blogger.com-->tata letak/layout--->edit html
download lengkap template buat jaga-jaga
kemudian cari kode </body> ditemplate kamu, (letaknya dibagian paling bawah template) kalo udah ketemu paste script yang kamu sukai.
Cara Pasang Flash di Blog
Untuk memasang flash ke dalam blog cukuplah mudah. Yang kamu perlukan yaitu file flash yang biasanya ber-extensi .swf lalu upload file tersebut ke hosting. misal di geocities.com ato 000webhost ato tempat hosting lainnya. File animasi flash tersebut bisa dijadikan hiasan pada blog ato bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :
1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "HTML/Javascript" kemudian taruh script berikut :
<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>
Contoh :
* Ganti "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ganti width="500" height="100 dengan ukuran dari file flashmu.
1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "HTML/Javascript" kemudian taruh script berikut :
<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>
Contoh :
* Ganti "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ganti width="500" height="100 dengan ukuran dari file flashmu.
Membuat Menu Vertikal (Vertical)
tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Cara Membuat Menu DTree
Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?
Beginilah cara membuatnya :
1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>
<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>
3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?
Beginilah cara membuatnya :
1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>
<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>
3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
Cara Membuat Menu Tab View
Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
Tab view itu contohnya seperti ini :
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
Cara Mudah Membuat Banner
Untuk membuat banner (Link Baner) tentunya merupakan hal yang mudah bagi yang mengerti software2 desain seperti Adobe Photoshop, Image Ready, Corel Draw dll. Tapi bagi yang tidak tahu dengan software2 tersebut pastilah merasa sulit. Tapi jangan kawatir dan jangan berkecil hati, berikut ini akan aku tunjukkan cara yang mudah untuk membuat link banner tanpa harus mengerti software2 desain. Hanya dengan memilih dan sedikit otak-atik maka kamu nantinya bisa memiliki link banner yang cukup menarik. Mau tahu caranya?
Cara membuatnya sangat mudah, yaitu:
1. Buka situs http://cooltext.com
2. Disana nanti akan langsung terpampang macam-macam banner yang disediakan. Kamu tinggal pilih baner yang kamu suka.
3. Setelah itu akan muncul fomr untuk menstting banner yang telah km pilih tadi. Kamu bisa mensetting textnya, warna text, warna background, ukuran, effect, dll.
4. Kalo sudah merasa cocok lalu klik tombol "Rander Logo"
5. Tunggu sebentar sampai proses rendering selesai.
6. Maka bannermu akan langsung jadi, km bisa mengambilnya dengan mengklik link "Download Image". dan simpan banner kamu.
7. Biasanya file bannernya akan berupa file gif.
Setelah km mendapatkan bannernya maka langkah selanjutnya supaya bannernya bisa kamu pasang yaitu dengan menguyplaod file tadi ke webhosting. Kamu bisa menguplaodnya di photobucket.com. disanan nanti kamu akan mendapat link untuk banner kamu.
Cara membuatnya sangat mudah, yaitu:
1. Buka situs http://cooltext.com
2. Disana nanti akan langsung terpampang macam-macam banner yang disediakan. Kamu tinggal pilih baner yang kamu suka.
3. Setelah itu akan muncul fomr untuk menstting banner yang telah km pilih tadi. Kamu bisa mensetting textnya, warna text, warna background, ukuran, effect, dll.
4. Kalo sudah merasa cocok lalu klik tombol "Rander Logo"
5. Tunggu sebentar sampai proses rendering selesai.
6. Maka bannermu akan langsung jadi, km bisa mengambilnya dengan mengklik link "Download Image". dan simpan banner kamu.
7. Biasanya file bannernya akan berupa file gif.
Setelah km mendapatkan bannernya maka langkah selanjutnya supaya bannernya bisa kamu pasang yaitu dengan menguyplaod file tadi ke webhosting. Kamu bisa menguplaodnya di photobucket.com. disanan nanti kamu akan mendapat link untuk banner kamu.
Cara Menampilkan Jumlah Visitor Yang Online
Salah satu pemberi semangat blogging adalah ketika melihat jumlah visitor yang online di blog saya seperti blog di hadapan anda ini. Alhamdulillah jumlah visitor terus bertambah seiring semakin banyak artikel yang saya tulis. Bukan GR. Tapi sebagai rasa syukur karena Allah telah memberikan kemampuan pada saya untuk menulis apa yang saya tahu dan saya alami.
Untuk mengetahui jumlah visitor atau pengunjung yang sedang online saat ini di blog anda, bisa memakai widget yang disediakan oleh web http://whos.amung.us Contohnya bisa dilihat di bagian bawah kanan blog ini. Widget berwarna merah dengan jumlah angka visitor yang sedang online. Seperti ini nich
Untuk menampilkan widget jumlah visitor silahkan baca tutorialnya sebagai berikut :
1. Kunjungi web http://whos.amung.us
2. Memilih atau mengatur tata letak widget.
Di Sini anda bisa atur letak tampilannya. Mau diletakkan di side bar kanan, kanan tengah atau kanan bawah. Atau di kiri, kiri tengah, atau di kiri bawah. Silahkan pilih sesuai selera anda. Cara mengatur letaknya adalah tinggal arahkan pointer ke kolom bundar kecil yang ada di bawah pengaturan widget. Maka otomatis preview akan ditayangkan di sebelah kirinya.
4. Copy paste kode html yang telah tersedia ke blog anda. Caranya :
Untuk Blogspot
1. Login ke blogger.com
2. Tuju ke blog yang akan anda tambahkan lalu klik Rancangan/Tata Letak/Design
3. Klik Tambahkan Widget
4. Lalu klik HTML/JavaScript.
5. Masukkan/paste kode html yang telah anda copy tadi di area HTML lalu klik Save/Simpan.
Tutrial cara meletakkan kode html pernah saya tulis di sini. Baca lagi ya.
Untuk Blog WordPress
1. Login ke member area wordpress lalu klik Widget.
2. Di area Widget Drag/tarik widget “Text” ke side bar. Masukkan kode html yang telah anda copy di area text.
3. Klik Save.
Untuk mengetahui jumlah visitor atau pengunjung yang sedang online saat ini di blog anda, bisa memakai widget yang disediakan oleh web http://whos.amung.us Contohnya bisa dilihat di bagian bawah kanan blog ini. Widget berwarna merah dengan jumlah angka visitor yang sedang online. Seperti ini nich
Untuk menampilkan widget jumlah visitor silahkan baca tutorialnya sebagai berikut :
1. Kunjungi web http://whos.amung.us
2. Memilih atau mengatur tata letak widget.
Di Sini anda bisa atur letak tampilannya. Mau diletakkan di side bar kanan, kanan tengah atau kanan bawah. Atau di kiri, kiri tengah, atau di kiri bawah. Silahkan pilih sesuai selera anda. Cara mengatur letaknya adalah tinggal arahkan pointer ke kolom bundar kecil yang ada di bawah pengaturan widget. Maka otomatis preview akan ditayangkan di sebelah kirinya.
4. Copy paste kode html yang telah tersedia ke blog anda. Caranya :
Untuk Blogspot
1. Login ke blogger.com
2. Tuju ke blog yang akan anda tambahkan lalu klik Rancangan/Tata Letak/Design
3. Klik Tambahkan Widget
4. Lalu klik HTML/JavaScript.
5. Masukkan/paste kode html yang telah anda copy tadi di area HTML lalu klik Save/Simpan.
Tutrial cara meletakkan kode html pernah saya tulis di sini. Baca lagi ya.
Untuk Blog WordPress
1. Login ke member area wordpress lalu klik Widget.
2. Di area Widget Drag/tarik widget “Text” ke side bar. Masukkan kode html yang telah anda copy di area text.
3. Klik Save.
Membuat Cursor Menjadi Berbintang
Cara mempercantik cursor (pointer mouse), pada blog berplatform blogspot, yg mana kita tahu blog ber-platform blogspot memang cocok buat para blogger yg tidak ingin bersusah payah untuk mempercantik blognya, karena terbilang mudah dalam proses pembuatannya.
Untuk mempercantik suatu blog biasanya menggunakan javascript yg harus di tempatkan pada template maupun pada widget.Yang akan di bahas di bawah ini oleh Blogtegal yakni cara membuat cursor berbintang
Berikut langkah-langkah membuat cursor berbintang.
copy dan pastekan script-script di bawah ini pada widget javascrit/HTML.
<script src="http://blogtegal.googlecode.com/files/cursor_merah.js" type="text/javascript"/>
cursor warna hijau
<script src="http://blogtegal.googlecode.com/files/cursor_hijau.js" type="text/javascript"/>
cursor warna biru
<script src="http://blogtegal.googlecode.com/files/cursor_biru.js" type="text/javascript"/>
cursor warna ungu
<script src="http://blogtegal.googlecode.com/files/cursor_ungu.js" type="text/javascript"/>
cursor warna putih
<script src="http://blogtegal.googlecode.com/files/cursor_putih.js" type="text/javascript"/>
Jika anda newbie dan kurang jelas dalam memasukan script-script di atas, boleh lah Blogtegal berbagi caranya.
login ke dashboard blog anda.
pilih Rancangan
pada halaman elemen laman pilih tambah gadget
pilih widget HTML/JAVASCRIPT
lalu pastekan salah satu script di atas.
klik ''simpan'' selesai.
Untuk mempercantik suatu blog biasanya menggunakan javascript yg harus di tempatkan pada template maupun pada widget.Yang akan di bahas di bawah ini oleh Blogtegal yakni cara membuat cursor berbintang
Berikut langkah-langkah membuat cursor berbintang.
copy dan pastekan script-script di bawah ini pada widget javascrit/HTML.
cursor bintang warna merah
<script src="http://blogtegal.googlecode.com/files/cursor_merah.js" type="text/javascript"/>
cursor warna hijau
<script src="http://blogtegal.googlecode.com/files/cursor_hijau.js" type="text/javascript"/>
cursor warna biru
<script src="http://blogtegal.googlecode.com/files/cursor_biru.js" type="text/javascript"/>
cursor warna ungu
<script src="http://blogtegal.googlecode.com/files/cursor_ungu.js" type="text/javascript"/>
cursor warna putih
<script src="http://blogtegal.googlecode.com/files/cursor_putih.js" type="text/javascript"/>
Jika anda newbie dan kurang jelas dalam memasukan script-script di atas, boleh lah Blogtegal berbagi caranya.
login ke dashboard blog anda.
pilih Rancangan
pada halaman elemen laman pilih tambah gadget
pilih widget HTML/JAVASCRIPT
lalu pastekan salah satu script di atas.
klik ''simpan'' selesai.
Kumpulan Efek-Efek Blog
Suatu cara untuk mempercantik blog adalah dengan menambah efek tertentu di dalam blognya entah itu efek salju berjatuhan, efek bintang, efek hati berterbangan dll. Nah disini kang salman akan shere sedikit tips untuk Anda.
Namun sebelumnya kang salman beri tau tidak semua orang menyukai efek-efek seperti ini, karena apda umumnya mengganggu, apalagi saat sedang membaca, tetapi jika penempatannya tepat seperti bercerita tentang puisi, cinta dan sebagainya, menambah efek tambahan di dalam blog menjadi penunjang penting.
Oke langsung aja yuk kita bahas apa saja sih efek-efek yang ada....
Efek salju berjatuhan di blog
<script src='http://www.geocities.com/ridwanox/saljubesar.js' type='text/javascript'></script>
Script bintang bertaburan
<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>
Membuat efek kembang api di Blog
<script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>
Membuat efek hati bertaburan di kursor blog
<script src='http://www.geocities.com/ridwanox/efekhati.js' type='text/javascript'></script>
Untuk cara pemasangannya adalah sebagai berikut:
1. Silahkah masuk blog anda
2. Pilih Rancangan
3. Kemudian Edit HTML
Tips: Download lengkap template.(ini penting buat backup template blog anda,jika terjadi kesalahan)
4. centang expand widget template
5. kemudian cari kode </body>
Bila sudah ketemu pastekan kode di atas, tepat di atas kode </body>
Kode Tulisan kedip atau Berganti Warna Saat Di Sorot Mouse
1. Silahkan login ke blog anda.
2. Klik Rancangan
3. Klik tab Edit HTML
Tips: Jangan lupa centang expand widget template
4. Cari kode </head>
5. Lalu copy paste kode di bawah ini, tepat di bawah kode
</head>
<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>
6. Klik Simpan template
Namun sebelumnya kang salman beri tau tidak semua orang menyukai efek-efek seperti ini, karena apda umumnya mengganggu, apalagi saat sedang membaca, tetapi jika penempatannya tepat seperti bercerita tentang puisi, cinta dan sebagainya, menambah efek tambahan di dalam blog menjadi penunjang penting.
Oke langsung aja yuk kita bahas apa saja sih efek-efek yang ada....
Efek salju berjatuhan di blog
<script src='http://www.geocities.com/ridwanox/saljubesar.js' type='text/javascript'></script>
Script bintang bertaburan
<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>
Membuat efek kembang api di Blog
<script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>
Membuat efek hati bertaburan di kursor blog
<script src='http://www.geocities.com/ridwanox/efekhati.js' type='text/javascript'></script>
Untuk cara pemasangannya adalah sebagai berikut:
1. Silahkah masuk blog anda
2. Pilih Rancangan
3. Kemudian Edit HTML
Tips: Download lengkap template.(ini penting buat backup template blog anda,jika terjadi kesalahan)
4. centang expand widget template
5. kemudian cari kode </body>
Bila sudah ketemu pastekan kode di atas, tepat di atas kode </body>
Kode Tulisan kedip atau Berganti Warna Saat Di Sorot Mouse
1. Silahkan login ke blog anda.
2. Klik Rancangan
3. Klik tab Edit HTML
Tips: Jangan lupa centang expand widget template
4. Cari kode </head>
5. Lalu copy paste kode di bawah ini, tepat di bawah kode
</head>
<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>
6. Klik Simpan template
Animasi Twitter di blog
Animasi Twitter di blog sangatlah mudah sekali, silahkan anda ikuti langkah berikut :
Silahkan ganti ID twitter “indobisnisgroup” dengan ID twitter yang anda miliki.
Copy dan paste script yang saya berikan di bawah nanti pasang di blog punya sobat.
1. Login ke blogger dashbord > design > edit HTML
2. Cari script yang bertuliskan </body>
3. Tempelkan script yang saya berikan di atas-nya
4. Klik Save Your Template
Berikut adalah code diambil dari www.way2blogging.org yang harus anda pasang di blog:
<script type=”text/javascript” src=”http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js”> </script> <script type=”text/javascript”> var twitterAccount = “indobisnisgroup“; var tweetThisText = ” <data:blog.pageTitle/> : <data:blog.url/> “; tripleflapInit(); </script> <span style=”font-size:11px;position:absolute;”><a title=’Blogger Widget by Way2blogging.Org’ href=”http://www.way2blogging.org” target=’_blank’>Blogger Widgets</a></span>
Silahkan ganti ID twitter “indobisnisgroup” dengan ID twitter yang anda miliki.
Copy dan paste script yang saya berikan di bawah nanti pasang di blog punya sobat.
1. Login ke blogger dashbord > design > edit HTML
2. Cari script yang bertuliskan </body>
3. Tempelkan script yang saya berikan di atas-nya
4. Klik Save Your Template
Berikut adalah code diambil dari www.way2blogging.org yang harus anda pasang di blog:
<script type=”text/javascript” src=”http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js”> </script> <script type=”text/javascript”> var twitterAccount = “indobisnisgroup“; var tweetThisText = ” <data:blog.pageTitle/> : <data:blog.url/> “; tripleflapInit(); </script> <span style=”font-size:11px;position:absolute;”><a title=’Blogger Widget by Way2blogging.Org’ href=”http://www.way2blogging.org” target=’_blank’>Blogger Widgets</a></span>
Langganan:
Komentar (Atom)
Keluarga DEWANATA
Anak TKJ Loro
MOS TKJ LORO
