Tampilkan postingan dengan label Trick Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Trick Blog. Tampilkan semua postingan

Senin, 22 April 2013

Cara Bikin Dialog Message di Blog

Udah lama gua gk posting akibat blog gua yang rusak akibat hancur Htmlnya.
Temen gua ada yang nanya ni giamana cara buat dialog pesan seperti yang ada pada blog saya. Oke gk usah basa basi, ni gua kasih tau cara-nya.


1. Login dulu ke blogger
2. Setelah login, Pilih Tata Letak Seperti ini :


3. Setelah klik Tata letak, Pilih Tambah Gadget.


4. Maka akan Muncul window baru, lalu Pilih JavaScript 



5. Dan Isikan kode ini di JavaScript-nya :
    "<script language='javascript'>alert(" Terima Kasih Udah Mampir Gan ");</script>" (tanpa tanda petik)

6. Jika sudah Klik Simpan

cara membuat text berputar mengikuti mouse



  1. Login ke Blogger, pilih Rancangan ( Yang dulunya Tata Letak ) kemudian pilih Edit HTML Klik tulisan Download Template Lengkap.
  2. 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,
  3. 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



cursor blog bintang,cursor blog bintang,cursor bertaburan bintang blog,cursor bintang bertaburan di blog,cursor bintang di blog,cursor blog 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 :



kursor blog bintang,kursor bintang pada blog,kursor bintang di blog



  • 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>
cursor bintang,cursor bintang bertaburan,cursor bintang bertaburan pink,cursor bintang,tutorial cursor bintang,cara membuat cursor bintang,cursor bertabur bintang,cursor bintang blog,cursor bintang bertaburan di blog,cursor bintang di blog,cursor bintang jatuh

  • 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
  • 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>

  • 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: 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 :

  1. Klik Template --> Edit html
  2. Letakkan script efek di atas kode </body>
  3. Klik Save
Tambahan :
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,,

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;">
Masukkan tulisanmu di sini
</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
Masukkan tulisanmu di sini


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>
keterangan:
  1. kode berwarna merah adala kode pembuka dan penutup
  2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
  3. Setelah semuanya selesai klik Publikasikan dan lihat hasilnya. 
Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor".
www.yudhyaditya.blogspot.com
Semoga bermanfaat Sobat.. 

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Salam Blogger, Melengkapi permintaan salah satu sahabat Zuaz'Z Creator yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.

Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: DEMO
  1. Login ke account blogger Sobat
  2. Klik rancangan lalu klik Edit HTML
  3. Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
  4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
  5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
  6. Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>

  7. Klik buka untuk melihat kode:
        .comments-page { background-color: #f2f2f2;}
        #blogger-comments-page { padding: 0px 5px; display: none;}
        .comments-tab { float: left; padding: 5px; margin-right: 3px;
        cursor: pointer; background-color: #f2f2f2;}
        .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
        .comments-tab:hover { background-color: #eeeeee;}
        .inactive-select-tab { background-color: #d1d1d1;}

    Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

    Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.

  8. Kemudian Sobat cari kode </head>
    Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>


  9. Klik buka untuk melihat kode:
        <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
        <script src='http://code.jquery.com/jquery-latest.js'/>
        <meta content='ID FB Sobat disini' property='fb:admins'/>
        <script type='text/javascript'>
        function commentToggle(selectTab) {
        $(".comments-tab").addClass("inactive-select-tab");
        $(selectTab).removeClass("inactive-select-tab");
        $(".comments-page").hide();
        $(selectTab + "-page").show();
        }
        </script>

    Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890

  10. Kemudian cari kode  <div class='comments' id='comments'>


  11. Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.


    Klik buka untuk melihat kode:
        <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
        <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
        <fb:comments-count expr:href='data:post.url'/> Comments
        </div>
        <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
        <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
        </div><div class='clear'/>
        </div>
        <div class='comments-page' id='fb-comments-page'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='fb-root'/>
        <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
        </b:if>
        </div>
        <div class='comments comments-page' id='blogger-comments-page'>

    NB: Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna ungu ya: <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.

    Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.

    Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.

  12. Kemudian klik save, dan lihat hasilnya.

Selamat mencoba ya Sobat dan jangan lupa nih Komentarnya, hehehe,,,  bila ada kata-kata yang salah saya mohon maaf,,

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:
  1. Seperti biasa sobat harus Login dulu di akun blog sobat
  2. Pilih Tata Letak
  3. Tambah Gadget HTML/Java Script
  4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.
<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVzfSDpxBOHUUf97jz_1IQcf2AWtAhmF1RZWMF7PdKeIz-S9hy2PoHKYNJFzyt34qGvaV63-0-qn0iyjRGC9E27NdbQe1jREA_EwqlItEy-gKIlfva_D8hPI_fvxPuccVekucRUXVGMYOm/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</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.bottom = 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:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>
Klik save / simpan.

Keterangan:
  1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
  2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
  3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
  4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).
Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

  1. Tetap login di akun blog sobat
  2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Wz5ijSQ7ukyekf1rIECnELGurKsXI8HGb0QGXp5vuhrei8TbSPDfxGdgH1gsN7KLI5a4VNqJ2gvQEwIt5xjJNdSSQaSUZgaSmIp7mHAHrlr6QgyyE2K0-OShz8DmvY9QhbjTWleQIMOA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 
  • Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
  • Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
  • Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.
Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.