Senin, 22 April 2013
cara membuat text berputar mengikuti mouse
- Login ke Blogger, pilih Rancangan ( Yang dulunya Tata Letak ) kemudian pilih Edit HTML Klik tulisan Download Template Lengkap.
- Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula. Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
- Kemudian cari kode </head>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
Kalau sudah ketemu, Copy Paste kode berikut dan letakkan diatasnya.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000ff; /* warna huruf */
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;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = " belajar dan beramal "; /* tulisan yang muncul */
/* 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 =15; /* ukuran huruf */
// 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>
Tulisan yang berwarna biru bisa sobat ganti sesuai selera Simpan dan lihat hasilnya.
Selamat mencoba.
CARA MEMBUAT CURSOR BERTABUR BINTANG
Cara membuat cursor blog bertabur bintang | mouse blog mengeluarkan kelap kelip bahasa awam-nya, tema artikel kali ini yaitu tutorial blog dan khususnya nih artikel buat para blog yang suka mengotak-atik/mempercantik tampilan blog mereka. Paling gampang, ya iyalah kan cuma tambah gadget>html/javascript>paste makanya di judul artikel ini ada tambahan kata 'paling gampang'.
Setelah sobat memasang kode script yang akan saya berikan, cursor blog sobat akan menaburkan serpihan-serpihan yang indah dan itu akan membuat tampilan blog sobat berbeda. Blog sobat akan terlihat hidup, mengapa tidak, blog sobat akan berbeda dari blog lain yang kebanyakan cursor di blog biasa-biasa saja ehhh di blog tercinta sobat ternyata luar biasa. Gak cuma cursor blog yang bagus jikalau ditambah lagu uiihhh manteb, dan BlogRion udah ngepostingnya di cara memasukan lagu ke blog. Balik ke topik pembahasan!, sudah bagus gampang lagi membuat cursor/mouse blog bertabur bintang, mau tau cara pemasangan cursor blog bertabur bintang?, ikuti langkah berikut ini :
Cara membuat cursor mouse blog bertabur bintang
- Yang jelas sobat harus login dulu ke blogger.com
- Di dashbord sobat klik 'tata letak' yang nampak di gambar dibawah ini :
- Tambah gadget, lalu scroll ke bawah pada jendela baru yang terbuka hingga terlihat html/javascript
- Klik pada html/javascript tadi!
- Setelah itu, copy kode dibawah ini dan edit seperlunya :
Bintang Warna Merah :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>
Bintang Warna Kuning :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-kuning.js" type="text/javascript"></script>
Bintang Warna Hijau :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>
Bintang Warna Hitam :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hitam.js" type="text/javascript"></script>
Bintang Warna Biru :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>
Bintang Warna Ungu :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-ungu.js" type="text/javascript"></script>
Bintang Warna Silver :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-silver.js" type="text/javascript"></script>
- Paste kode yang tadi sobat copy ke kotak yang besar pada jendela html/javascript
- Klik simpan di bagian kiri bawah jendela dan cobalah di test dengan membuka blog sobat.
Membuat Widget Burung Twitter Terbang Di Blogspot
Cara membuat / memasang widget burung Twitter terbang di Blogger,
mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak
sekali saya melihat blog yang sudah memasang widget burung Twitter
terbang ini dengan berbagai macam style dan warna burung Twitter yang
berbeda-beda, sekarang saya akan mengulas kembali khusus buat
teman-teman blogger yang baru membuat blog dengan platform blogspot
Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini
Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini
- Pertama-tama silahkan login di Blogger
- Klik Design > Page Element > Add Gadget > Html/Javascript
- Copy paste kode di bawah ini ke kolom Html/javascript
<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVdzOFaOztNz6B8ix4JFXJWiIIMtspk-XVJgpvaosLQ9yuZEul2Di3OEGlZMGAej7gAbL7obSci2DFRJiFQVJ6R5qAIpl648NjWsjgu73EZVMbIanCUqHCOywMF2RSTpa4dowGjEVkgI/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVdzOFaOztNz6B8ix4JFXJWiIIMtspk-XVJgpvaosLQ9yuZEul2Di3OEGlZMGAej7gAbL7obSci2DFRJiFQVJ6R5qAIpl648NjWsjgu73EZVMbIanCUqHCOywMF2RSTpa4dowGjEVkgI/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>
- Ganti kode yang berwarna biru dengan akun Twitter sobat
- Ganti kode warna merah bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
- Simpan dan lihat hasilnya.
Warna Pilihan Burung Twitter
Warna Kuning
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTcsfuW1zOXQG0BbfTbvc4eiWdIS6sQGmcV9GUxrVPDX9-rotvWW2fFd7YBFQsApdTn-5dO6xp776tccUIOTDL9Axs9JO4XDIihfv5u0QsbY-RVXSgAHzN5IYO6OSkwSqRD3YpRCVfW0/s1600/yellow+bird.png
Warna Hitam
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfjQl5PHAoLGqqra2TttXLOwJnKO7rE8zpq_YH-NCUDglUlRQsuOXVw8dOtKFLwp91weI8e0BGbwWLjsWWMSoD8Vwf0Fx6T2HA9iafg3-zDtXG9thUKG8DRIUr6OOsBzL_Hfd4a0xD4w/s1600/black+bird.png
Warna Biru
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6yFbZnm4m5VExYmYvulC-pCjks0qZPq0y11VJy9hhFgR8iFW_iCDM9XcQUTJbaLda2uZvABIXn1-nGvXqL5nfjQJqy2wf-lIZ5ImN_ZaVZUujGi8C8KvVlDqpec_8b6K-RgLXryQZ5To/s1600/Blue+bird.png
Warna Coklat
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH91Il1kzjOfgRbpAlblNu39IZ-tI-tJmWrFVOfh5LPZi4knVCaR8t0K4S0UueTcfGs40azPpoU6QO_3akWXdIOIN2rHiMFPH49HxtwqdAMHzhvUWm7uRXTjZp_no08vaSZEwFK47-P9o/s1600/brown+bird.png
Warna Hijau
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVw1vzt-fdqu4rP5EjNLn20ZggEZuuV0deGJ0Dafz8LhoCjwqtKrVsZBMgAdpnpdCQ0WzS_TlK8vLtfSW8H5d3fjt_RahxCbz5JuO6WTFmwZxFZRWegnnQFKFbAZGxGWXc8e2TWtPz23k/s1600/Green+bird.png
Warna Ungu
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC3T80mVgHV8X48ZkkI1390_MDWp-xkcpfhHsOpz7QEcq65XVdDax3Y23e_zIGXHJRJsA3sDLPTe8JjSiMCjGnsqgX8KEwrmHWSZGBKpAG8VZUZcjM_hAAe_TCFBQ_UhiXgC4yaICo-z0/s1600/purple+bird.png
Warna Putih
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyQSnz5hDr83X3WjS5CXtk8zULxGNWemqjCKx2q0JRErl7P9byTXToC0mxXXaLUCkWwnz8UNrE3d6pJm4vbKxbhS01BsIywlYO6JpX553HHMWtj5P0OA-z7qB0iLjaCzT_R9an2SNDRY/s1600/white+bird.png
Warna Merah
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLq_lDZ2pYM-MRnRIxOs5qbKfrrgDJ_7O5udIeIO3O0m6mMcqRGldGjleXjpwQsAnYipndQal4iF5DXj1yEFKAmQyJNFQ_RenAsilsjRma_CIJ8ne0jZ0zfA7MMMuZ_CR5dTuq4ZcUKzk/s1600/red+bird.png
Dan terakhir jangan lupa disimpan
Good luck Sob..!!!!
Kumpulan Efek - Efek Blog: Berat
Share kumpulan efek blog yang telah di posting oleh sobat CHRISTIAN TATELU kumpulan
efek-efek blog baik dari yang ringan hingga yang berat, untuk diterapka
pada blog sobat sekalian, singkat cerita saja silakan simak keterangan
berikut.
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.
Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .
Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.
1.Meteor Jatuh
2. Banjir
3. Bunga Mekar
4. Bom Atom
5. Ufo
6. Graffity
7. Shaver
8. Gun
9.Bloody gun
10. Paint ball
11. Chainsaw
12. Dinosaur
13. Lebah
14. Lalat
15. Semut
16. Siput
17. Cacing
18. Mold
19. Bayi merangkak
20. Telur mata sapi
21. Kopi tumpah
22. Terbakar
23. Tomat
24. Creampie
25. Murka
26. Sapi Jorok
27. Anjing Jorok
28. Kencing Sembarangan
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.
Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .
Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.
1.Meteor Jatuh
2. Banjir
3. Bunga Mekar
4. Bom Atom
5. Ufo
6. Graffity
7. Shaver
8. Gun
9.Bloody gun
10. Paint ball
11. Chainsaw
12. Dinosaur
13. Lebah
14. Lalat
15. Semut
16. Siput
17. Cacing
18. Mold
19. Bayi merangkak
20. Telur mata sapi
21. Kopi tumpah
22. Terbakar
23. Tomat
24. Creampie
25. Murka
26. Sapi Jorok
27. Anjing Jorok
28. Kencing Sembarangan
Kumpulan Efek - Efek Blog: Ringan
Share kumpulan efek blog yang telah di posting oleh sobat CHRISTIAN TATELU kumpulan
efek-efek blog baik dari yang ringan hingga yang berat, untuk diterapka
pada blog sobat sekalian, singkat cerita saja silakan simak keterangan
berikut.
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.
Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .
Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.
A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.
1. Efek salju berjatuhan
<script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>
2. Efek hati bertaburan
<script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>
3. Efek bintang bertaburan
<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>
4. Efek kembang api
<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>
5. Efek Gelembung
<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>
Cara pemasangan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ). so, pilih mana yang terbaik menurut sobat.. salam..
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.
Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .
Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.
A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.
1. Efek salju berjatuhan
<script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>
2. Efek hati bertaburan
<script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>
3. Efek bintang bertaburan
<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>
4. Efek kembang api
<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>
5. Efek Gelembung
<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>
Cara pemasangan :
- Klik Template --> Edit html
- Letakkan script efek di atas kode </body>
- Klik Save
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ). so, pilih mana yang terbaik menurut sobat.. salam..
Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog
Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.
Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari hackerzpro.blogspot.com nah silakan anda ikuti cara-cara berikut ini,,
Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari hackerzpro.blogspot.com nah silakan anda ikuti cara-cara berikut ini,,
Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:
<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px;
font-size: 10px;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Hide'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Show'; }"
type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
</div></div></div>
Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:
Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.
Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.
Klik show untuk melihat
Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.
Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor
Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai-sampai
tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging,
tampilan sebuah blog yang memiliki tampilan yang menarik akan menambah
pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah
dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak
jumlah pengunjung. Cukup demikian basa-basinya [heheheheheee.. ] mari kita menuju ke pokok pembahasan.
Kali ini saya sedikit berbagi tentang Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor, untuk demonya coba sobat arahkan cursor ke gambar Naruto pada posting saya yang satunya di Kumpulan Trick Blog,
maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian
berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:
1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode </head>
5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>
6. dan sobat klik save / simpan template.
Langkah selanjutnya untuk penenpatan gambar dalam postingan.
1. Sobat harus menambahkan kode <div id="denzuaz"> sebelum URL gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:
<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBthAQeA_AZ-Kq095lV2cCVGzXk-zq5_Wtjuu-Pec_vSY6zbj-RocINXv2buwcYm-WGkNPKf3Ke4DQb2kSrQL6Y0yhZSdhqY2q2XJybcZCQ4YhHw-7Y2gfRed9axUXvG1MIWlfu_Ff9wvp/s200/naruto+dont+copy.png" /></a></div>
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBthAQeA_AZ-Kq095lV2cCVGzXk-zq5_Wtjuu-Pec_vSY6zbj-RocINXv2buwcYm-WGkNPKf3Ke4DQb2kSrQL6Y0yhZSdhqY2q2XJybcZCQ4YhHw-7Y2gfRed9axUXvG1MIWlfu_Ff9wvp/s200/naruto+dont+copy.png" /></a></div>
keterangan:
- kode berwarna merah adala kode pembuka dan penutup
- kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
- Setelah semuanya selesai klik Publikasikan dan lihat hasilnya.
Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor".
www.yudhyaditya.blogspot.com
makanja ni
BalasHapusbagus pa
Hapus