Selamat malam menjelang siang semua nya, haha. Akhir nya hari ini saya bisa posting lagi tentang tips blog. Sebenarnya sih tips ini saya copy dariKang Dadang tapi tidak semua nya saya ambil karena sudah saya edit kembali. Tips kali ini tentang Cara Membuat Buku Tamu Keren V.3. Ok deh karena saya tidak mahir menulis langsung saja ke cara membuatnya. Ikuti langkah berikut ini : 1. Login ke blogger 2. Pada Dasbor >> Rancangan >> Elemen Laman 3. Klik Tambah Gadget, kemudian pilih HTML/Javascript 4. Copy kode berikut ini dibawah ini <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".gbbtn").click(function(){ $("#gbcontent").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <style> /* --------------- by : Dadang Herdiana edited by : Taufiq Azhari ---------------------------------- */ .gb { position:fixed; top: 0px; right:450px; z-index:+1000; } #gbcontent { height: auto; background: #898787; width: auto; display: none; padding: 10px; border:4px solid silver; background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; padding:10px; } .gbbtn { position:fixed;_position:relative;top:50px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight) } .active { background-position: right 12px; } </style> <div class="gb"> <div id="gbcontent"> KODE CHATBOX KAMU</div> <br /> <div align="right"><font size="2"><a href = "http://besttaufiqblog.blogspot.com/2012/01/cara-membuat-buku-tamu-keren-versi-3.html " target=_blank"><div style="color: #000;"> <span style="font-size: x-small;">:: Get This Widget!! ::</span></div></a></font></div> <div id="gbbtn"><a href="#" class="gbbtn" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png" border="0"style="cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a></div></div> 5. Paste di kolom HTML/Javascript tadi
Ganti tulisan berwarna merah tadi dengan kode chatbox kamu
atau Chatting Box adalah salah satu media komunikasi pada blog. CBox berfungsi sebagai media komunikasi antara pengunjung blog dengan pemilik blog sehingga pengunjung tak perlu repot-repot berkomentar di postingan tapi melalui kotak chating atau CBox yang kamu punya di blog kamu.
Cara membuat nya sangat gampang kok, ikuti saja langkah berikut ^_^v 1. Buka terlebih dahulu http://cbox.ws./ 2. Setelah itu klik Sign Up 3. Kemudian isi kolom Cbox Name, Email Address, Password, Confirm Password, Website. Pada Language kamu pilih saja English, dan pilih Style sesuai keinginan mu. Jangan lupa centang I have read and do agree to the Cbox terms and conditions of service. 4. Sekarang lihat Inbox Email kamu, dan kamu klik link yang terdapat pada email tersebut untuk mengaktifkan Cbox kamu. 5. Selamat Cbox kamu selesai di buat. Kita lanjut ke cara memasang nya pada blog.|
Cara Memasang Cbox pada blog Setelah selesai membuat CBox, sekarang aku akan memberi tahu cara memasang CBox yang baru kamu buat ke dalam blog kamu. Ok langsung aja ya ^_^ 1. Login dulu ke Akun CBox kamu. Isi Login Name dengan Cbox Name kamu waktu daftar tadi dan isi juga Password nya. 2. Setelah login, kamu akan langsung pada halaman Control Panel. Kemudian klik Publish! 3. Pada kolom Your Website, kamu isi kan dulu alamat blog kamu. 4. Pada Step 1 kamu pilih saja Blogger/Blogspot. 5. Pada Step 2 kamu pilih Inline (Default). 6. Di Step 3 itu adalah kode CBox kamu untuk di pasang pada blog kamu, kamu copy semua kode tersebut. Sekarang kita pasang CBox tersebut pada blog kamu. Ikuti langkah-langkah berikut 1. Login ke Blogger kamu 2. Klik Rancangan >> Elemen Laman >> klik Tambah Gadget>> pilih HTML/Javascript 3. Kamu paste kode CBox kamu tadi ke dalam HTML/Javascript. 4. Simpan dan lihat hasil nya. Akhirnya selesai juga cara membuat dan memasang CBox pada blog ^_^ Kalau belum mengerti kamu buat aja komentar di postingan ini :) Selamat Mencoba
Selamat Siang Menjelang Pagi :D Semoga sobat dalam keadaan sehat selalu.. dalam Tutorial saya kali ini,saya akan menjelas kan Bagai mana Cara Membuat Teks Kursor Di Ikuti Teks. Karna sebuah Blog akan Cantik Bila kita bisa menghias nya,dan itupun cara untuk membuat pengunjung blog kita Betah berlama-lama di dalam Blog kita... Kita mulai saja tutorial nya... Silahkan Sobat Copy scrip Di bawah ini.|
<style type="text/css"> /* Circle Text Styles */ #outerCircleText { /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */ font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #FF0000; /* End Optional */ /* Start Required - Do Not Edit */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} /* End Required */ /* End Circle Text Styles */ </style><br /> <script type="text/javascript"> /* Circling text trail- Tim Tilton Website: http://www.tempermedia.com/ Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts Modified Here for more flexibility and modern browser support Modifications as first seen in http://www.dynamicdrive.com/forums/ username:jscheuer1 - This notice must remain for legal use */ ;(function(){ // Your message here (QUOTED STRING) var msg = "Nama sobat"; /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */ // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 24; // Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2; // The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 10; // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.4; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.3; ////////////////////// Stop Editing ////////////////////// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); </script> Untuk cara Memasukan Kode di atas ini adalah sebagai berikut : 1. Pilih tataletak rancangan --> Elemen-elemen -->Tambah Gadget-->pilih HTML/java Scrip. 2. Kemudian Sobat Bisa Copy Scrip di atas ini.. 3. Sobat Bisa Lihat Kode yang seperti ini di dalam scrip,Ubahlah yang bertulisan "Nama Sobat"sesuai dengan Keingin sobat sendiri... // Your message here (QUOTED STRING) var msg = "Nama sobat";... 3. Kemudian Simpan...
Saya rasa Sudah cukup Jelas Untuk tutorial Cara Membuat cursor Di Ikuti Teks ini. "Selamat Mencoba"
