0 Membuat widget back to top


Artikel cara Membuat widget back to top di blog – Ketika Tampilan Halaman blog atau content sebuah artikel yang panjang, maka akan membawa pengunjung meng-scroll kursor-nya sampai bagian bawah halaman blog. Nah pada saat di bagian bawah halaman, pengunjung yang akan kembali ke bagian atas akan mengalami kesulitan atau akan menscroll ulang kursor untuk naik lagi ke bagian halaman blog bagian atas. Maka dari itu dibutuhkan sebuah alat bantu berupa widget yang ketika di klik akan otomatis menuju ke halaman blog bagian atas sehingga akan memudahkan pengunjung ketika akan kembali lagi ke halaman blog bagian atas.


Widget back to to di blog ini bisa bisa berupa gambar panah atau sesuatu yang menandakan kembali ke-atas. Pandai-pandailah memilih gambar yang cocok dengan warna blog anda sehingga selain fungsinya di-atas juga akan mempercantik blog anda.

Langkah dalam pembuatan widget back to top adalah:
  • Log in ke blogger
  • Pada halaman dashboard pilih Layout>HTML/Javascript 
  • Untuk jaga-jaga silahkan download terlabih dahulu html anda 
  • Centang Expand Widgets Templates
  • Cari kode </b:section> 
  • Pastikan kode tadi adalah kode yang terakhir dati susunan HTML anda 
  • Letakan kode dibawah tepat setelah kode </b:section>
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://g.imagehost.org/0373/arrow_up_green.png'/></a>
  • simpan pekerjaan anda.
Nah di step ini anda sudah selesai membuat widget back to top pada blog.
Kalau ada masalah silakan sms saya melalui widget sms gratis yang artikelnya sudah saya buat sebelum artikel ini dibuat.

Keterangan:
Url yang ditandai merah di atas tampilan gambarnya seperti ini:
Alamat url yang ditandai merah bisa diganti dengan alamat url lain jika anda menghendaki gambar yang lain seperti di bawah ini:
  • http://g.imagehost.org/0439/arrow_1.jpg
  • http://g.imagehost.org/0497/arrow_2.jpg
  • http://g.imagehost.org/0466/arrow_3.jpg
  • http://g.imagehost.org/0130/arrow_4.jpg
  • http://g.imagehost.org/0042/arrow_5.jpg    
Dengan menambahkan fasilitas widget back to top pada blog akan membuat pengunjung blog anda akan semakin betah.

By : Rahman De Cyber Genesis

0 Cara Mengganti Bacgraund Pada Blogger

Langsung Aja ya !!!!!

0 Cara Membuat Gambar Berputar Di Postingan Blogger

Jika agan tertarik dengan tips ini, silahkan ikuti petunjuk cara membuatnya berikut ini. 



  • login ke blogger anda.
  • pilih Rancangan »» Edit HTML , Jangan lupa untuk beckup template terlebih dahulu.
  • Centang Expand Template Widget. 
  • Tempatkan kode berikut diatas kode ]]></b:skin>


.galeryzoneberputar img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.galeryzoneberputar img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

  • terakhir klik SIMPAN/SAVE
Kemudian dalam penulisan kode gambarnya seperti ini dan harus pada mode ''Edit HTML'' bukan pada mode Compose
<div class="galeryzoneberputar"><img src="http://link-gambar-kamu.jpg" /></div>



Jika ingin mengatur ukuran gambarnya sebelum pointer mouse melintas diatasnya (gambar default tampilan) tinggal menambahkan kode height="nilai-tinggi" weight="nilai-lebar" Dan nantinya akan menjadi seperti 
berikut  

<div class="galeryzoneberputar"><img src="http://link-gambar-kamu.jpgheight="nilai-tinggi" width="nilai-lebar" /></a></div>


Demikian Cara Membuat Gambar Berputar Dipostingan Blog, mudah bukan?
Semoga bermanfaat. 



By : Rahman De Cyber Genesis

0 Cara Mudah Membuat Tampilan Hemat Energy

 Kali ini saya akan membahas cara mudah membuat modus hemat energy atau tampilan screen hitam bertuliskan save your energy yang akan muncul menutupi seluruh halaman index dan akan hilang kembali setelah panah mouse di geser. Sebenarnya modus ini bukan untuk hemat energi yang sesungguhnya melainkan tampilan screen biasa yang telah dipadukan dengan javascript untuk membuat menarik blog sobat. langsung saja ikuti langkah-langkah mudah membuat nya tapi tampilan nya sedikit saya modifikasi sehingga berbeda dari tampilan save your energy biasanya,



pertama-tama:

  1. Login ke blog sobat

  1. Klik "Rancangan" --> "Edit HTML"

  1. Backuplah terlebih dahulu template blog sobat dengan mengklik "Download Full Template".

  1. Centang kotak kecil "Expand Template Widge".

  1. Kemudian carilah kode dengan menggunakan control + f pada keyboard sobat</head> dan copy-pastekan kode dibawah ini tepat di atas kode </head>
<script language='javascript' src='http://herihlk.googlecode.com/files/savingmode12.js' type='text/javascript'/>

  1. Klik tombol "Simpan Template
  2. kemudian lihatlah blog sobat biarkan selama 2-3menit maka tampilan hitam akan keluar & telah terpasang modus save energy editan.
<=== Selamat mencoba ===>>

0 Template BlogSpot

Hai BLogger...
Bosan saya sebar cheat mulu nih...
sekarang saya mau sebar tentang template Blogspot atau bisa dibilang tampilan Blog...
TEMPLATE : Malik Abdul Aziz


Mau Liat Tampilannya Klik Disini

Kalau Tertarik kalian bisa Download


By : Rahman De Cyber Genesis

8 Cara MemBuat Lagu Sendiri Di Blogger

Langsung aja nih Ikutin caranya
- Masuk Blogspot.com

- Buka Rancangan

- Tambah Gadget

- Lalu tambah Html ini

<embed src="http://img227.imageshack.us/img227/3087/playergv1.swf?soundFile=http://uploads3.mp3songurls.com/1323539.mp3&amp;bg=0x000000&amp;leftbg=0x000000&amp;lefticon=0xFFFFFF&amp;rightbg=0x333333&amp;rightbghover=0x333333&amp;righticon=0xCCCCCC&amp;righticonhover=0xFFFFFF&amp;text=0xcccccc&amp;slider=0x666666&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0xcccccc&amp;autostart=yes&amp;loop=yes" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" height="1" width="1px"></embed>

NB : Tulisan yg berwarna biru itu adalah link lagu yg sudah kalian upload

Untuk yg belum upload bisa upload Disini

0 Cara Mengganti Template Blogger

Nih Jika kalian masih bingung cara menganti template blog kalian bisa ikuti vidio dibawah ini




Create By : Rahman De Cyber Genesis

0 Cara Membuat Daftar Isi Di postingan Blog


Daftar isi sangatlah penting di semua wacana seperti di buku articel maupun di blogger ataupun website, daftar isi guna mempermudah pengunjung untuk menemukan daftar yang mereka inginkan dan memudahkan untuk pencarian isi blog yang ada di blog kita. Posting kali ini saya akan berbagi tips membuat daftar isi blog pada postingan, dengan fasilitas terdapat kata new!! bila anda update articel terbaru....




Unruk contohnya anda bisa lihat di sini: DEMO
ScreenShoot:
langsung aja ikuti langkah-langkah ini untuk pembuatannya :

1. login ke blogger


2.Pilih Posting trus entri baru.


3.Pilih Edit HTML dan copas script dibawah ini di dalamnya.


<div ;="" margin="3px" style="-moz-border-radius: 5px; border: 1px solid #32A50C; height: 500px; overflow: auto;">
<script src="http://amminessalafy.googlecode.com/files/daftarisi.js">
</script>
<script src="http://amminessalafy.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.


5. Ubah tanggal penerbitan pada tanggal pertama kali anda mulai menulis artikel dengan mengeklik Opsi entri.


6. Kemudian Terbitkan dan lihat hasilnya.


7. Selesai, dan lihat hasilnya.

0 Cara Bikin Back To Top Keren





langsung aja ya!.



Pertama buka Blogger > Rancangan > Edit HTML > jangan lupa klik Expand Template Widget

Kalo Udah Copy Kode dibawah ini!

#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;} 

Taruh Code diatas, diatas tag ]]></b:skin>
Oke! Lanjut ke kode </head> n taruh script di bawah ini, dibawah kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() &gt; 100) { $(&#39;#toTop&#39;).fadeIn(); } else { $(&#39;#toTop&#39;).fadeOut(); } });
$(&#39;#toTop &gt; img&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

 kalo udah Copy kode dibawah ini!
<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div>

Code yang berwarna merah kamu ganti dengan url gambar kamu sendiri


Lalu klik

SIMPAN TEMPLATE

Lihat Hasilnya!

Sekian mas bro semoga berhasil n bermanfaat!


By : Rahman De Cyber Genesis

0 FONT KEREN



Kali Ini Saya Akan memberikan font-font yang keren yang cocok untuk mengedit gambar
Langsung aja Ke TKp :
  1. Poke Font : http://www.dafont.com/poke.font
  2. MetalMacabre Font :  http://www.dafont.com/metal-macabre.font

  3. Vanilla Whale Font : http://www.dafont.com/vanilla-whale.font
  4. Tanda Tangan Font : http://www.dafont.com/pappos-blues-band-official-font.font
  5. Yahoo Font : http://www.dafont.com/search.php?psize=m&q=yahoo
  6. Crown Title Font : http://www.dafont.com/crown-title.font
  7. Pepsi Font : http://www.dafont.com/pepsi.font
  8. Gothferatu Font : http://www.dafont.com/gothferatu.font
  9. BloodOmen Font : http://www.dafont.com/blood-omen.font 
  10. Mostwasted Font : http://www.dafont.com/mostwasted.font
  11. Transformers Movie Font : http://www.dafont.com/transformers-movie.font
  12. Social Logos Font : http://www.dafont.com/social-logos.font
  13. Pokemon Font : http://www.dafont.com/pokemon.font
  14. Alhambra Font :  http://www.dafont.com/alhambra.font
  15. Blazed Font : http://www.dafont.com/blazed.font
  16. Graffonti Font : http://www.dafont.com/graffonti.font
  17. Font (el&font gothic!) : http://www.dafont.com/el-font-gohtic.font
  18. Urban Calligraphy Font: http://www.dafont.com/el-font-urban-caliigraphy.font 
  19. Font (el&font BLOCK) : http://www.dafont.com/-el-font-block.font
  20. Droid Robot Font : http://www.dafont.com/droid-robot.font
  21. Batman beat the hell outta Font : http://www.dafont.com/batman-beat-the-hel.font
  22. Ice Age Font : http://www.dafont.com/ice-age-font.font
  23. NickLodeon Font : http://www.dafont.com/nickelodeon-tv.font
  24. Scrawl 3rd Font : http://www.dafont.com/scrawl-3rd.font
  25. Megatron Font : http://www.dafont.com/megatron.font
  26. Blade 2 Font : http://www.dafont.com/blade-2.font
  27. GOD OF WAR Font : http://www.dafont.com/godofwar.font
  28. Arab Dances Font : http://www.dafont.com/arab-dances.font
  29. Famous Logo Font : http://www.dafont.com/famous-logos.font
  30. Ninja Naruto Font : http://www.dafont.com/ninja-naruto.font
  31. Batik Dayak Font : http://www.dafont.com/batik-dayak-font.font
  32. Carpal Tunnel Font : http://www.dafont.com/carpal-tunnel.font
  33. Gun Metal Font : http://www.dafont.com/gun-metal.font
  34. Facfont : http://www.dafont.com/pacfont.font
  35. Pimper Font : http://www.dafont.com/pimper.font
  36. Failure Font : http://www.dafont.com/failure.font
  37. Guignols_Band Font : http://www.dafont.com/guignols-band.font
  38. Karate Font : http://www.dafont.com/karate.font
  39. Rain Forest Font : http://www.dafont.com/rainforest.font
  40. Panhead Font : http://www.dafont.com/panhead.font
  41. Vtks Revolt Font : http://www.dafont.com/vtks-revolt.font
  42. Canon Font : http://www.dafont.com/canon.font
  43. Lion King Font : http://www.dafont.com/lion-king.font
  44. raven_slab Font : http://www.dafont.com/raven-slab.font
  45. Barcedo Font : http://www.dafont.com/barcode-font.font
  46. Insommnia 1 Font : http://www.dafont.com/insomnia1.font  
  47. Bleeding Cowboys : http://www.dafont.com/bleeding-cowboys.font

™Selamat Datang Sobat!Kunjungan Anda Sangat Berarti Bagi Saya. Dan Jangan Lupa Juga Kunjungin Balik Ya Blog Saya.™
 
--= [ Copyright © 2012 Rahman Chandra Modified By Rahman Blog Powered By Blogger ] =--