Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Trutorial ini di khususkan untuk templet yang tidak ada Read More nya, kalau sudah ada yang lebih baik jangan. Tapi bagi yang bisa mengeditnya juga silahkan, barang kali ada yang lupa. Kali ini saya akan memberitahu cara memasang Read more tanpa .js hanya mengetikan manual, dan tidak terlalu banyak. Menurut saya ini memang cukup mudah di pasang apalagi tidak memerlukan file .js , jadi kita tisak perlu hosting2 lagi untuk mengupload file .js.
Sebenarnya cara memasangnya cukup bikin pusing, karena ada beberapa yang sama, tapi hasilnya cukup memuaskan. Sebelum kamu mencoba memasang Read More lebih baik kamu Backup dulu templet kamu untuk jaga2 supaya kalau terjadi kesalahan yang cukup parah bisa di kembalikan. Baiklah langsung saja ini dia caranya:
- Pertama kamu buka blog kamu / masuk ke blogger.com,
- Setelah berada di Dasboad pilih Rancangan,
- Setelah kamu berada di Rancangan pilih Edit HTML,
- Setelah berada di bagian Edit HTML kamu beri tanda ceklis (v) pada Expand widget template,
- Setelah itu cari kode </head> dengan menekan Ctrl+F agar lebih cepat dan ketikan </head>,
- Setelah ketemu kamu salin kode di bawah ini dan letakan di atas kode </head>:
<script type="text/javascript">
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type="text/javascript">
//<![CDATA[
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>
Masi Melanjutkan:
Masih pada halaman EDIT HTML, Setelah itu temukan kode seperti dibawah ini:
<data:post.body> dengan cara menekan tombol Ctrl+F dan ketikan <data:post.body> kemungkinan kamuakan menemukan 2 <data:post.body> kemudian kamu ganti kode <data:post.body> dengan semua kode dibawah ini:
<b:if cond='data:blog.pageType != "item"'>
<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>
Setelah itu Simpan dan lihat hasilnya :)
Keterangan:
var thumbnail_mode = "float" ; (kita dapat memutuskan apakah di read more terdapat gambar thumbnail "float" atau jika tidak menginginkan ada gambar silahkan ganti dengan "no-float"summary_noimg = 250 ; (Menetapkan berapa banyak karakter texs yang akan ditampilkan di posting tanpa gambar)
summary_img = 250 ; (Menetapkan berapa banyak karakter texs yang akan ditampilkan di posting dengan gambar thumbnail)
img_thumb_height = 100 ; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 100 ; (Thumbnail 'lebar dalam piksel)
Selamat mencoba, Sekian dari saya, semoga bermanfaat...
Sekarang saya akan memberi tau cara memasang link teman / daftar link dengan keunggulan bergerak sendiri keatas dan ke bawah, dan ketika mouse melewati atau berada di area tersebut maka tidak akan bergerak / berhenti. Baiklah langsung aja caranya ini dia:
- Pertama kamu masuk ke blog kamu,
- Ketika sudah di halaman Dasbor buka / pilih Rancangan,
- Terus kamu pilih Tamba Gatget dimana kamu ingin memasangnya,
- Setelah itu kamu pilih HTML/Java Script,
- Dan salin script di bawah ini ke kolom HTML/Java Script:
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="1">
<ul>
<li><a title="Blog suka - Suka" href="http://fakry1.blogspot.com/" target="new">Blog suka - Suka</a></li>
<li><a title="Cheater Hackboy21" href="http://www.cheaterhackboy21.blogspot.com/" target="new">Cheater Hackboy21</a></li>
<li><a title="Curious Wanna" href="http://www.curious-wanna.blogspot.com/" target="new">Curious Wanna</a></li>
<li><a title="Cyber Benyo" href="http://cyber-benyo.blogspot.com/" target="new">Cyber Benyo</a></li>
<li><a title="Rifaiy Shere" href="http://rifaiy.blogspot.com/" target="new">Rifaiy Shere</a></li>
<li><a title="IT S'neker" href="http://itsneker.wordpress.com/" target="new">IT S'neker</a></li>
<li><a title="Berbagi: Free Download | Artikel | Tips" href="http://muhamadl.blogspot.com/" target="new">Berbagi</a></li>
<li><a title="D-Hans" href="http://dered.blogspot.com/" target="new">D-Hans</a></li>
<li><a title="SOFTWARE, GAMES AND MOVIE" href="http://roisfaozi.blogspot.com/" target="new">Rois Faozi</a></li>
<li><a title="Tux-Corner: All About Linux" href="http://tuxcorner.wordpress.com/" target="new">Tux-Corner</a></li>
</ul>
</marquee>
Keterangan:
Yang saya tandai dengan warna Merah adalah link teman atau link yang akan kamu pasang di blog kamu, Kemudian yang saya tandai dengan warna Hijau adalah keterangan untuk link itu (ketika mouse kita arahkan ke tulisan / link kamu maka akan muncul keterangan seperti yang kamu tuliskan), Dan yang berwarna Biru adalah Nama tampilan yang dimunculkan. Tambahan tulisan target="new" berfungsi jika kita mengklik kiri link itu maka akan terbuka tab baru pada Browser, Setelanjutnya yang saya tandai dengan warna Pink adalah kecepatan berpindahnya, jika kamu ubah menjadi 2 atau 3 maka kecepatan berpindahnya akan bertambah cepat, Dan yang saya tandai dengan warna Ungu adalah berpindahnya, jika kamu ubah menjadi down maka berpindahnya akan ke bawah.
Lihat di bawah ini adalah link teman / daftar link yang sudah jadi:
Hari ini saya akan memberi tau cara mengendalikan Robot.txt, cara ini berfungsi untuk membuat SEO blog kamu. Mungkin bagi pemula banyak yang tidak tau dengan Robot.txt, dan apa kegunaan dengan Robot.txt. Sebenarnya saya tidak tahubetul dengan kegunan dan kenapa adanya robot.txt.
Tapi menurut pendapat saya Robot.txt ini berfungsi untuk mengendalikan URL atau Link - Link website / blog kita agar bisa terindex oleh mesin pencari seperti google. Lantas bagaimanakah cara mengendalikan Robot.txt? caranya cukup mudah, kita hanya mengedit templet dan menambahkan meta content di dalamnya. Baiklah langsung saja ni dia cara memberi meta content untuk mengendalikan robot.txt:
- Paetama tentunya kamu haris masuk dulu ke blog kamu,
- Kemudian setelah di Dasbor blog kamu pilih Rancangan pada blog yang ingin kamu edit,
- Setelah itu pilih Edit HTML,
- Jangan lupa beri tanda V pada
- Dan salin kode di bawah ini di bawah <head> :
<meta content='index, follow' name='robots'/>
Di bawah ini adalah contoh dimana kamu meletakan kode di atas kedalah templet kamu:
<head>
<meta content='index, follow' name='robots'/>
Setelah meletakan kodenya seperti kode di atas kemudian kamu Simpan templet.
Semoga bermanfaat.............
Kali ini saya akan memberitahu cara merubah mouse / cursor / pointer pada blog. Maksudnya merubah itu ketika ada seseorang yang membuka halaman kamu maka pointer / mouse / cursor nya akan berubah ketika berada di halaman blog kamu. Tapi ketika tidak berada di halaman blog kamu maka
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-2/spe114.cur), progress;}</style>
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-2/spe114.cur), progress;}</style>
<head>
Setelah itu pilih Simpan.
Semoga bermanfaat.....
Read More
- Yang pertama tentunya kamu harus masuk dulu ke Blogger.com
- Kemudian jika sudah berada di halaman Dasboard anda pilih Rancangan
- Setelah itu klik Edit HTML
- Sebelumnya jangan lupa klik atau beri tanda V pada:
- Dan salin kode di bawah ini dan letakan diatas kode <head> :
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-2/spe114.cur), progress;}</style>
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-2/spe114.cur), progress;}</style>
<head>
Setelah itu pilih Simpan.
Keterangan:
Yang saya tandai dengan warna Merah adalah link untuk kursor, yang sudah di upload oleh kamu sendiri, atau bisa mengambil dari server2.Semoga bermanfaat.....
Heh.... lama banget udah ga update2 blog, kali ini saya mau mempostingkan cara membuat pencarian sederhana pada blog, yang tentunya bekerja dengan baik.
Read More
Pencarian ini sangat sederhana tidak menggunakan gambar sama sekali, tentunya bagus untuk yang blog yang berat. Baiklah langsung saja ke cara membuatnya ini dia:
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='searchbox' name='q' type='text'/> <input id='searchbutton' type='submit' value='search'/></form>
Lihat di bawah ini adalah aplikasi pencariannya:
Sekian penjelasan dari saya semoga bermanfaat.........
- Pertama kamu masuk atau login ke blog kamu,
- Kemudian kamu pilih Rancangan,
- Terus kamu pilih Tamba Gatget dimana kamu ingin memasangnya,
- Setelah itu kamu pilih HTML/Java Script
- Dan salin script di bawah ini:
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='searchbox' name='q' type='text'/> <input id='searchbutton' type='submit' value='search'/></form>
Penjelasan:
Tulisan yang saya randai dengan warna Biru adalah tulisan untuk tombol, bisa kamu ganti denga Cari atau apapun yang kamu mau.Lihat di bawah ini adalah aplikasi pencariannya:
Sekian penjelasan dari saya semoga bermanfaat.........
Kali ini saya akan mempostingkan bagai mana cara memasang mp3 player di blog. Enaknya mp3 player yang ini kamu bisa upload mp3 kamu sediri. contoh saja musik band kamu atau temen kamu, atau apapun yang kamu mau. Baiklah langsung saja ini caranya:
- Kamu masuk terlebih dahulu ke blog kamu,
- Kemudian pilih rancangan,
- Setelah itu pilih tambah gatget,
- Dan Pilih HTML/JavaScript,
- Kemudian salin kode script di bawah ini dan masukan ke kolom HTML/JavaScript:
<center><b style="color: rgb(51, 255, 51);">Maher Zain & Fadly Padi - Insya Allah</b>
<object id="playerID" data="http://pramborsfm.com/streaming/player.swf" name="playerID" type="application/x-shockwave-flash" width="292" height="20">
<param name="allowfullscreen" value="false" />
<param name="allowscriptaccess" value="always" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashvars" value="file=https://sites.google.com/site/rifaiycocc/musik-com/MaherZainFeatFadlyPadi-InsyaAllah.mp3&title=AMPM Radio&type=sound&frontcolor=3f3f3f&backcolor=87c4ff&lightcolor=5b5b5b&screencolor=0082ff&id=playerID&autostart=false&mute=false" />
</object></center>
Penjelasan:
Untuk tulisan yang saya tandai dengan Hijau Tua adalah judul lagu tersebut, Kemudian Untuk yang saya tandai dengan warna Merah adalah lebar dari Mp3 Player tersebut, Untuk huruf yang saya tandai dengan warna Kuning Tua adalah tinggi dari Mp3 Player tersebut, Untuk yang saya tandai dengan warna Ungu Tua adalah warna untuk Mp3 Player tersebut, Dan untuk yang saya tandai dengan warna Buru Muda adalah link fille Mp3 kamu.
Contoh MP3 Playernya Seperti Di Bawah Ini:
Maher Zain & Fadly Padi - Insya Allah
Sekian Dari Saya Semoga bermanfaat...
Mengatur link agar terbuka di tab baru sangat penting untuk menjaga agar pembaca tidak keluar dari blog yang sedang dibaca atau ditampilkan karena link yang dituju terbuka pada link blog asal.
Dan juga jika tidak diatur dengan tepat maka akan membuat pembaca kesulitan terutama pada tulisan yang bersifat tutorial, disini sedikit membagi bagaimana cara membuat link blog agar otomatis terbuka di tab baru.
Untuk format penulisan link buka tab baru tidak berbeda dengan format penulisan link biasanya, hanya saja untuk link buka tab baru diganti pada target menjadi new.
Contoh Penulisan Link biasa :
<a href="http://fakriy.blogspot.com/">Klik disini</a>
Contoh Penulisan Link buka di tab baru tanpa klik kanan:
<a href="http://fakriy.blogspot.com/" target="new">Klik disini</a>
Pada kedua link tampak perbedaan pada link biasa tidak terdapat / tidak memiliki target="new" dan pada link yang tanpa klik kana memiliki target="new", hanya tinggal menambah dengan tulisan target="new".
Semoga penjelasan singkat ini dapat membantu anda, Terima kasih.
Sebelum ke step cara membuat spoiler, ada baiknya saya menjelaskan pengertian dari spoiler. Spoiler adalah cara untuk menyembunyikan teks,video,gambar,maupun script dengan tujuan untuk menghemat ruang postingan.
Kalo masih bingung,saya berikan contoh gambar dari spoiler :
Itu adalah contoh dari spoiler yang terdapat di blog ini.Setelah sobat semua melihat gambar spoiler di atas,sekarang saatnya untuk membuat spoiler.
Ketika anda sedang membuat artikel,di sebelah kanan ada tulisan Edit HTML atau untuk lebih jelasnya silahkan lihat gambar dibawah ini :
Klik tulisan itu kemudian copy dan paste kode dibawah ini di bagian yang anda ingin membuat spoiler.
Tulisan yang berwarna merah,bisa diganti sesuai dengan keinginan anda.Sedangkan yang berwarna biru adalah tempat anda menyimpan teks,gambar atau video.Untuk menampilkan gambar di spoiler,yang anda masukan adalah HTML gambarnya.Misalnya anda mengupload foto terserah anda contoh aja di tinypic.com,hasilnya akan seperti ini :
Lihat yang saya tandai dengan kotak berwarna biru,itu adalah HTML dari gambar yang akan dimasukan ke dalam spoiler.Setelah itu,kemudian terbitkan entri atau publish artikel anda,kemudian lihat apakah spoiler yang anda buat sudah sempurna atau belum.
Dan spoiler pun jadi, Semoga bermanfaat...
Kali ini saya akan membagi tips dan trik "Cara Membuat Buku Tamu Show/Hide dari Atas". Gak Pake Lama langsung aja:
Kode Script:
Catatan:
Jika ingin menampilkan posisi Tombol di samping, Tinggal ganti Kode di yang sudah saya tandai dengan warna Biru muda dan Merah di atas, Dengan Kode di bawah ini:
Read More
- Login blogger
- Rancangan, Tambah Gadget, Html/java script
- Dan Simpan kode berikut :
Kode Script:
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">
<!-- Simpan / masukan Kode cbox atau shoutmix nya disini -->
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvkgPuiEw6GriYXvHwl9LIQ3MrU-4qHvb9oolhB4NkwTKzjTeueeiiMyhga7nO_rmG4rbgv6FtFlivFeYbcMIHhubGFFeT0xIa_wNYC5pmnZUfgs3IdFZN4jK71iHlgMflHOwc3lyFY_P/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>
Catatan:
Jika ingin menampilkan posisi Tombol di samping, Tinggal ganti Kode di yang sudah saya tandai dengan warna Biru muda dan Merah di atas, Dengan Kode di bawah ini:
<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png" /></a>
</div>
Posting kali ini saya akan memberitahu cara membuat widget space iklan banner atau bisa juga disebut kotak iklan, kalian bisa melihat contohnya pada gambar disamping, maanfaat blog yang memiliki space iklan banner adalah bisa mendapatkan pemasukan berupa uang yang didapat dari para advertiser pemasang iklan, setidaknya blog kalian memiliki Page Rank dan visitor yang lumayan banyak agar para advertiser pemasang iklan tertarik untuk memasang iklan di blog kalian, di blog saya ini memang belum memasang space iklan karena template yang saya gunakan tidak mendukung untuk memasang space iklan, saya rasa kalian mungkin bisa memakai fasilitas ini untuk menaruh foto,banner sendiri dan lain sebagainya. masing-masing setiap banner ukurannya hanya 125x125.
Langsung saja kalian lakukan tahap-tahap dibawah ini untuk membuat widget space iklan banner :
Masuk pada halaman Edit HTML di blogger kalian, jangan lupa beri klik pada kotak kecil seperti contoh di baeah ini:
Lalu cari kode ]]></b:skin> dengan cara tekan CTRL+F pada browser kanmu, dan akan muncul mencarian supaya lebih mudah.
Dan letakkan kode CSS berikut tepat di atas kode ]]></b:skin>.
Kalau sudah, jangan lupa untuk di save.
Selanjutnya pilih Elemen Halaman dan Tambah Gadget lalu pilih HTML/Javascript dan masukkan kode berikut :
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
Untuk kode yang berwarna merah kalian ganti sesuai dengan alamat url iklan banner yang ingin kalian pasang dan untuk yang berwarna hijau adalah url gambar kalian,
Read More
Langsung saja kalian lakukan tahap-tahap dibawah ini untuk membuat widget space iklan banner :
Masuk pada halaman Edit HTML di blogger kalian, jangan lupa beri klik pada kotak kecil seperti contoh di baeah ini:
Dan letakkan kode CSS berikut tepat di atas kode ]]></b:skin>.
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center;
}
#Box-Banner-ads img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}
#Box-Banner-ads img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}
Kalau sudah, jangan lupa untuk di save.
Selanjutnya pilih Elemen Halaman dan Tambah Gadget lalu pilih HTML/Javascript dan masukkan kode berikut :
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
http://www.fakriy.blogspot.com">ads http://alamatgambarmu"/>
Untuk kode yang berwarna merah kalian ganti sesuai dengan alamat url iklan banner yang ingin kalian pasang dan untuk yang berwarna hijau adalah url gambar kalian,
Kali ini saya akan membuaat postingan bagai mana cara memasang Widget Flash / WP-cumulus seperti yang di atas, caranya cukup mudah kok anda tinggal ikuti cara2 di bawah aja ya biar mengerti dan lebih jelasnya.
- Yang pertama tentunya kamu harus masuk dulu ke Blogger.com
- Kemudian jika sudah berada di halaman Dasboard anda pilih Rancangan
- Setelah itu pilih Tambah Gatget letaknya si terserah anda.
- Kemudian kamu pilih HTML/JavaScript
- Dan masukan kode dibawah ke dalam kolom HTML/JavaScript.
<embed quality="high" allowscriptaccess="always" flashvars="tcolor=0xff6600&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<a href='http://cyber-benyo.blogspot.com/'style='12'>Cyber Benyo</a>
<a href='http://fakriy.blogspot.com/'style='12'>Artikel Dunia IT</a>
<a href='http://roisfaozi.blogspot.com/'style='12'>Rois Faozi</a>
<a href='http://itsneker.wordpress.com/'style='12'>IT S'neker</a>
<a href='http://komptstart.co.cc/'style='12'>Komptstart</a>
<a href='http://www.curious-wanna.blogspot.com/'style='12'>Curious Wanna</a>
</tags>" type="application/x-shockwave-flash" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" id="tagcloud" bgcolor="#999999" name="tagcloud" height="230" width="308"></embed>
KETERANGAN: Kode yang berwarna ff6600 adalah warna Teks tersebut. Kode yang berwarna 100 adalah kecepatan bergeraknya. Kode yang berwarna http://fakriy.blogspot.com/ adalah Link Teman, Label atau apapun yang mau kamu masukan (Perhatikan warnanya jika sama fungsinya sama). Kode yang berwarna 12 adalah kecerahan teks tersebut (Perhatikan warnanya jika sama fungsinya sama). Kode yang berwarna Artikel Dunia IT Adalah Teks yang akan di tampilkan di widget flash tersebut (Perhatikan warnanya jika sama fungsinya sama). Kode yang berwarna #999999 Adalah warna latarbelakan/background color widget flash tersebut. Kode yang berwarna 230 adalah Tinggi widget flash tersebut. Kode yang berwarna 308 adalah Lebar widget flash tersebut.
Tips & Trik - Kali ini kita akan mencoba memasang efek pembesaran (zooming) pada gambar di blog kita dengan menggunakan script expando. Expando dikembangkan oleh Dynamic Drive dengan memanfaatkan engine jquery. Sebenarnya script ini bukan hanya digunakan untuk melakukan pembesaran pada gambar saja, tetapi juga bisa digunakan untuk hal yang sebaliknya, yakni mengecilkan gambar.
Cara kerja expando adalah mengembalikan gambar pada ukuran aslinya. Pejelasaannya demikian, jika kita memiliki sebuah gambar dengan ukuran 176px X 220px, agar expando memberi efek pembesaran maka aturlah pamasangan gambar dengan ukuran yang lebih kecil dari gambar aslinya, misalnya mejadi 112px X 139px, dan sebaliknya, jika anda menghendaki untuk efek pengecilan, maka aturlah pemasangan gambar agar memiliki ukuran yang lebih besar dari aslinya. Silahkan lihat contoh gambar berikut ini;
Gambar ini memiliki ukuran asli 176px X 220px, lalu kami pasang dengan ukuran 112px X 139px dan telah kami beri efek expando. Silahkan anda arahkan kursor pada gambar tersebut, lihatlah... gambar kembali ukuran semula 176px X 220px (efek pembesaran). Ini berlaku sebaliknya pada gambar di bawah ini, yang telah kami pasang dengan ukuran 267px X 333px, jika anda arahkan kursor kepadanya, maka gambar akan kembali ke ukuran aslinya (efek pengecilan).
Sudah mendapatkan gambaran yang jelas mengenai penggunaan script expando?. Baiklah, sekarang saatnya kita mencoba memasang script expando ini pada blog kita masing-masing.
Pertama, download file script expando.zip ini lalu extract file tersebut sehingga Anda mendapatkan file expando.js dan upload file expando.js itu ke web hosting Anda. Jika anda belum memiliki tempat penyimpanan online (hosting), anda bisa memanfaatkan hosting web gratis yang disediakan oleh Google melalui sites.google.com atau menyimpannya di google code, silahkan lakukan pendaftaran dengan mengikuti langkah-langkah yang diberikan.
Langkah kedua, pasang script seperti contoh berikut ini pada template html anda, letakkan script diantar kode <head> sebelum kode </head>.
Sesuaikan src='http://hosting.anda.com/expando.js' dengan lokasi tempat Anda menghosting file expando.js. Simpan perubahan yang telah anda lakukan.
Berikut ini adalah cara menambahkan script expando pada gambar. Tambahkanlah kode class="expando" pada setiap gambar yang ingin anda beri efek, ini contohnya;
Selamat mencoba....
Sumber:
Dari Sini
Read More
Cara kerja expando adalah mengembalikan gambar pada ukuran aslinya. Pejelasaannya demikian, jika kita memiliki sebuah gambar dengan ukuran 176px X 220px, agar expando memberi efek pembesaran maka aturlah pamasangan gambar dengan ukuran yang lebih kecil dari gambar aslinya, misalnya mejadi 112px X 139px, dan sebaliknya, jika anda menghendaki untuk efek pengecilan, maka aturlah pemasangan gambar agar memiliki ukuran yang lebih besar dari aslinya. Silahkan lihat contoh gambar berikut ini;
Gambar ini memiliki ukuran asli 176px X 220px, lalu kami pasang dengan ukuran 112px X 139px dan telah kami beri efek expando. Silahkan anda arahkan kursor pada gambar tersebut, lihatlah... gambar kembali ukuran semula 176px X 220px (efek pembesaran). Ini berlaku sebaliknya pada gambar di bawah ini, yang telah kami pasang dengan ukuran 267px X 333px, jika anda arahkan kursor kepadanya, maka gambar akan kembali ke ukuran aslinya (efek pengecilan).
Sudah mendapatkan gambaran yang jelas mengenai penggunaan script expando?. Baiklah, sekarang saatnya kita mencoba memasang script expando ini pada blog kita masing-masing.
Pertama, download file script expando.zip ini lalu extract file tersebut sehingga Anda mendapatkan file expando.js dan upload file expando.js itu ke web hosting Anda. Jika anda belum memiliki tempat penyimpanan online (hosting), anda bisa memanfaatkan hosting web gratis yang disediakan oleh Google melalui sites.google.com atau menyimpannya di google code, silahkan lakukan pendaftaran dengan mengikuti langkah-langkah yang diberikan.
Langkah kedua, pasang script seperti contoh berikut ini pada template html anda, letakkan script diantar kode <head> sebelum kode </head>.
Sesuaikan src='http://hosting.anda.com/expando.js' dengan lokasi tempat Anda menghosting file expando.js. Simpan perubahan yang telah anda lakukan.
Berikut ini adalah cara menambahkan script expando pada gambar. Tambahkanlah kode class="expando" pada setiap gambar yang ingin anda beri efek, ini contohnya;
Selamat mencoba....
Sumber:
Dari Sini
Untuk mengatur penampilan blog anda, bisa anda pasangkan Horizontal tab navigasi pada header.Dengan tab navigasi ini anda bisa meletakkan menu-menu yang mengarah kehalaman lain pada blog anda dan memudahkan para pembaca membuka halaman lain tersebut.
Tab navigasi ini akan ditempatkan pada bagian atas blog yaitu pada header. Seperti yang anda lihat pada blog ini, ada beberapa tab menu yang saya pasang seperti Home, Tutorial, dan Engineering. Menu yang dipasang tergantung pada keinginan anda. Cara membuatnya adalah sebagai berikut :
1.Login pada Blogger.
2.Klik Layout pada Dashboard anda.
3.Pada Layout klik Edit HTML .
4.Untuk menghindari hal-hal yang tidak dinginkan saat akan mengedit template HTML anda, lakukan backup terlebih dahulu.
2.Klik Layout pada Dashboard anda.
3.Pada Layout klik Edit HTML .
4.Untuk menghindari hal-hal yang tidak dinginkan saat akan mengedit template HTML anda, lakukan backup terlebih dahulu.
5.Temukan kode </b:skin> dengan cara menekan CTRL+F pada keyboard.
6.Letakkan kode dibawah ini sebelum kode </b:skin>
6.Letakkan kode dibawah ini sebelum kode </b:skin>
/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
7.Temukan kode dibawah ini.
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Kumpulan Artikel (Header)' type='Header'/>
</b:section>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Kumpulan Artikel (Header)' type='Header'/>
</b:section>
</div>
8.Letakkan kode dibawah ini dibawah kode diatas pada (langkah 7)
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://bayusp.blogspot.com/'>Home</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/tutorial'>Tutorial</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/engineering'>Engineering</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/download'>Download</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/bisnis online'>Bisnis online</a></li>
</ul>
</div>
</div>
</div>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://bayusp.blogspot.com/'>Home</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/tutorial'>Tutorial</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/engineering'>Engineering</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/download'>Download</a></li>
<li><a href='http://bayusp.blogspot.com/search/label/bisnis online'>Bisnis online</a></li>
</ul>
</div>
</div>
</div>
9.Gantilah link yang berwarna hijau dengan link dari blog anda.
10.Selanjutnya save.
Jreng.... Tab navigasi menu sudah muncul pada header anda. Untuk mengganti warna background agar sesuai dengan warna template blog anda, rubahlah pada background: #000 . Dengan kode warna yang lain. Kode-kode warna HTML dapat anda lihat Disini Kode warna pada HTML.
Apa Anda ingin menghapus blog di blogspot? Mungkin ada beberapa alasan yang menyebabkan Anda ingin menghapus blog. Salah satunya mungkin karena sudah lama tidak diurus.
Lalu bagaimana cara menghapus blog yang ada di blogger? Sebenarnya caranya tidak susah, cukup dengan beberapa langkah saja Anda sudah bisa menghapus blog Anda. Tapi ingat, Anda harus berpikir dulu sebelum benar-benar menghapus blog Anda. Agar kelak tidak menyesal karena menghapusnya. kalau begitu ikuti langkah - langkah menghapus blog berikut ini untuk lebih jelasnya.
Read More
Lalu bagaimana cara menghapus blog yang ada di blogger? Sebenarnya caranya tidak susah, cukup dengan beberapa langkah saja Anda sudah bisa menghapus blog Anda. Tapi ingat, Anda harus berpikir dulu sebelum benar-benar menghapus blog Anda. Agar kelak tidak menyesal karena menghapusnya. kalau begitu ikuti langkah - langkah menghapus blog berikut ini untuk lebih jelasnya.
- Pertama, masuk ke akun blogger Anda.
- Pilih menu settings » basics.
- Pada bagian Blog Tools klik tulisan Delete blog.
- Setelah itu akan muncul halaman untuk mengkonfirmasi penghapusan blog Anda. Sebelum menghapus blog, Anda bisa terlebih dahulu mengekspor isi blog Anda.
- Klik tombol delete this blog.
Saya akan mempostingkan bagaimana cara membuat buku tamu yang keluar masuk, atau ingin yang lain, saya sedang baik jadi saya postingkan dua sekaligus. Ada lagi yaitu yang muncul dan menghilang. Baiklah langsung saja jangan lama2, ini dia saranya:
1. Type Keluar masuk
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<a href="">
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
--------------------------------------------------------
2. Type menghilang
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:1px solid #004831;
background:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup ]</b></a></div>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png"/>
</a>
</div>
Keterangan: Tulisan berwarna Hijau adalah tempan kamu masukan code ShoutMix Atau ChatBox kamu. Yang berwarna merah diatas adalah kode warna body tempan untuk ShoutMix Atau ChatBox kamu. Dan Warna Biru muda adalah warna gambar untuk tombol keluar masuk link gambarnya bisa anda ganti dengan link yang anda mau. dan Yang saya blok dengan warna kuning tua adalah tebal garis tepinya bisa di ubah angkanya px nya si tetap.
Saya sudah coba semuanya dan bisa. kedua Java Script diatas bisa di gunakan semua, tinggal bagai mana anda sendiri melakukanya.
Read More
- Kamu harus Masuk/Login dulu ke Blog kamu,
- Kamu pilih Rancangan,
- Kamu pilih Tambah Gadget,
- Kemudian kamu pilih HTML/JavaScript,
- Dan kamu salin kode dibawah ini, tapi pilih salah satu, karena ada dua type:
1. Type Keluar masuk
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
***Masukan Kode ShoutMix Atau ChatBox Kamu Disini***
<div style="text-align:right"><a href="">
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
--------------------------------------------------------
2. Type menghilang
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:1px solid #004831;
background:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup ]</b></a></div>
***Masukan Kode ShoutMix Atau ChatBox Kamu Disini***
</td></tr></table></div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png"/>
</a>
</div>
Keterangan: Tulisan berwarna Hijau adalah tempan kamu masukan code ShoutMix Atau ChatBox kamu. Yang berwarna merah diatas adalah kode warna body tempan untuk ShoutMix Atau ChatBox kamu. Dan Warna Biru muda adalah warna gambar untuk tombol keluar masuk link gambarnya bisa anda ganti dengan link yang anda mau. dan Yang saya blok dengan warna kuning tua adalah tebal garis tepinya bisa di ubah angkanya px nya si tetap.
Saya sudah coba semuanya dan bisa. kedua Java Script diatas bisa di gunakan semua, tinggal bagai mana anda sendiri melakukanya.
Mungkin anda sudah paham dengan Judul postingan saya kali ini Cara Membuat Buku Tamu Blog Tanpa Di Klik atau yang artinya pada saat kursor kita lewat baru membuka sendiri dengan otomatis. Beda hal nya dengan cara membuat buku tamu yang telah saya posting pada postingan saya yang lalu yang berjudul Cara Pasang Buku Tamu / Chat Box
Maka di postingan saya kali ini hanya menambahkan saja, sebagai contoh Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka. Baiklah langsung saja daripada lama2 kita mulai caranya sebagai beriku:t
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaxxSfgyMjIpcXMXu8HnOMzbCKhDxzbVZG9fBGo4Rx7lOWsoAqoq0poK9A9L3C4SbFNoUfu6hEA_T1_MqPyGUzaiDhZKQLy-axr2PM1X5Tn0i6YxgDk25Rt1EKc_d_UJwEfqGo7WSAf5x/s1600/api.gif) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
Letakan Script Buku tamu kamu Disini
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>
Kemudian simpan / Save dan lihat hasil nya.
Mungkin hanya itu saja info dari saya mengenai Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka semoga di lain kesempatan akan ada cara lain lagi mengenai Buku tamu.
Read More
Maka di postingan saya kali ini hanya menambahkan saja, sebagai contoh Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka. Baiklah langsung saja daripada lama2 kita mulai caranya sebagai beriku:t
- Login Ke Akun Blog Anda
- Pilih Rancangan/Tata Letak
- Pilih Tambah Gadget
- Kemudian Add Gadget
- Dan Pilih HTML/JavaScript
- Salin Script / kode Di bawah dan Masukan ke dalam isian HTML/JavaScript.
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaxxSfgyMjIpcXMXu8HnOMzbCKhDxzbVZG9fBGo4Rx7lOWsoAqoq0poK9A9L3C4SbFNoUfu6hEA_T1_MqPyGUzaiDhZKQLy-axr2PM1X5Tn0i6YxgDk25Rt1EKc_d_UJwEfqGo7WSAf5x/s1600/api.gif) no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
Letakan Script Buku tamu kamu Disini
<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>
Kemudian simpan / Save dan lihat hasil nya.
Keterangan:
Teks yang saya beri tanda Warna Merah dan Biru, silahkan ganti dengan script / kode buku tamu kamu, Kemudian teks yang sudah saya tandai dengan Warna Merah adalah gambar2nya. Penjelasannya, Yang warna Merah Biru Muda adalah yang biasa berfungis untuk tombol, tapi karena scriptnya otomatis membuka sendiri jadi berfungsi jika kursor melewati tombol itu, Kemudian yang berwarna Merah Hijau Muda adalah backgroundnya. Dan yang terakhir adalah Warna Merah Kuning Tua adalah gambar untuk klik tutup. Yang sudah saya beri warna Hijau adalah warna dari Garis Tepi dan pada background. Dan terakhir yang sudah saya beri warna Kuning Muda adalah komentar atau tulisan penjelas yang jika muncul ketika kursor kita menunjuk itu. Semua yang sudah saya beri warna adalah bisa anda ganti sesuai selera anda.Mungkin hanya itu saja info dari saya mengenai Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka semoga di lain kesempatan akan ada cara lain lagi mengenai Buku tamu.
Kali ini saya akan mempostingkan cara agar tulisan HTML/JavaScript tidak bisa dibaca dengan mengunakan code Java Script Textarena. Baiklah langsung saja jangan lama2, ini dia:
Ini dia code Java Scriptnya:
Keterangan: (cols="70") Keteranganya adalah lebarnya 70. dan (rows="2") Keteranganya adalah panjangnya 2.
!PERHATIAN: Jika kamu ingin menerapkan ini pada blog kamu, kelemahanya adalah setiap kali kamu mengetik dengan menggunakan enter akan di tambah tulisan <br /> khusus untuk JavaScript, dan untuk tulisan biasa tidak muncul.
Read More
Ini dia code Java Scriptnya:
Contohnya:
Keterangan: (cols="70") Keteranganya adalah lebarnya 70. dan (rows="2") Keteranganya adalah panjangnya 2.
!PERHATIAN: Jika kamu ingin menerapkan ini pada blog kamu, kelemahanya adalah setiap kali kamu mengetik dengan menggunakan enter akan di tambah tulisan <br /> khusus untuk JavaScript, dan untuk tulisan biasa tidak muncul.
Dalam melakukan perubahan pada template blog atau kode-kode HTML, kita sering ingin mengganti warna pada blog kita sesuai dengan nuansa yang di inginkan.Kode warna HTML biasanya di ikuti dengan tanda #, seperti contoh #ffffff (arti kode ini adalah warna putih). Sebagai referensi warna, berikut kode warna yang bisa anda gunakan untuk mempercantik blog anda.
Lebih Jelas Lagi
Read More
| Warna | Kode Warna | Warna RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
Lebih Jelas Lagi
| Nama Warna | Kode Warna | Warna |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DimGrey | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Kali ini kita akan membuat sesuatu yang sangat menarik, sesuatu yang melayang pada blog atau website, dan bisa diisi apa pun yang kamu mau seperti foto kamu, jam, iklan atau widgate2 lain yang kamu inginkan, oiya kode JavaScript ini juga dilengkapi dengan clos/tutup supaya tidak mengganggu pengunjung. Baiklah kita langsung saja mulai untuk mengetahui cara membuatnya:
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>
***Masukan Kode JavaScript atau Link Gambar yang anda inginkan di sini***
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>
Keterangan: Tulisan yang Berwarna Biru adalah tempat kode widget, link foto, atau kode iklan kamu. Tulisan yang Berwarna Merah adalah warna garis tepi dan body background.
Read More
- Masuk dulu dong ke blog kamu kalau ga ya ga tau caranya, hehehe
- Pilih Rancangan pada halaman Dasbor
- Kemudian pilih Tambah Widget
- Setelah itu baru kita pilih HTML/JavaScript
- Dan salin kode di bawah agar widgate atau iklan kita bisa melayang.
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>
***Masukan Kode JavaScript atau Link Gambar yang anda inginkan di sini***
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>
Keterangan: Tulisan yang Berwarna Biru adalah tempat kode widget, link foto, atau kode iklan kamu. Tulisan yang Berwarna Merah adalah warna garis tepi dan body background.