Showing posts with label blog. Show all posts
Showing posts with label blog. Show all posts

Monday, 7 May 2012

Kumpulan Efek - Efek Blog: Ringan >> Berat

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

2. Efek hati bertaburan

3. Efek bintang bertaburan

4. Efek kembang api


5. Efek Gelembung


Cara pemasangan :
  1. Klik rancangan --> Edit html
  2. Letakkan script efek di atas kode </body>
  3. Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

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


Cara pemasangan :
  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan script efek di dalam kotak yang di sediakan
  3. Klik save dan lihat hasilnya.

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

Thursday, 3 May 2012

Cara Membuat Background Sambaran Petir Di Blog


Bagi para pemula blogger contohnya seperti saya pasti banyak yang menginginkan background blognya di ganti dengan foto sendiri atau gambar yang mereka inginkan sendiri. Kali ini saya akan menulis artikel tentang 'Membuat Background Kilat Di Blog'.
Ikuti langkah berikut untuk membuat background blog :
1. login ke bloger dengan id anda
2. Lalu menuju ke 'design' -> edit HTML
3. Centang Expand Template Widget
3. Cari kode  body {
4. Tambahkan kode berikut di bawah kode ' body { ' 
background:#000000 url(http://petir-project.googlecode.com/files/zuaz-petir.gif) no-repeat center fixed; 
  • Kode ungu = Kode warna di belakang background 
  • Kode Biru  = Link/url background kilat / url background lain yang ingin dipasang 
  • Kode merah = Jika inginkan gambar berulang-ulang hilangkan saja
5. Lalu 'Save Template' dan lihat hasilnya.

Semoga bermanfaat ya,,,!!!

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.
Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 
Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:



Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

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 ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>


Klik show untuk melihat
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCfzMAafE9b6E4abKGduAAb6vyqG-KGnucw0KAa_73oRwPkL62jBC13_it8XKjPqxU5NrbYEZiPWV0_umwYk2syO_GKxxlYDCtSXQQR2KGjnoJ7OVV-6CHpRAQI38EzCMumY56uUB06I/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVG8B6xrz_-cn9LK2VhEoWKKfqRxQhEbnyOaJXsKyKgtEltjaH6R5ZM3RAszrppW2RMPvKt0gxKVdEAsIxgPE5OEvQt4E7lY9DJ20q1lLFOuhTfYaWzxV9sXmwwOvCBOSt8smcSTAZL4E/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}


Selanjutnya sobat blogger cari kode berikut:
  • <header>  : untuk menempatkan menu di atas nama blog
  • </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0ohbOVe_GJ4_6Zt88zm3bgRkYI-QM1zgGFf_ibzrcuPTCXrV7gjXOWNgl0Jkmo3RCPX8M_vuzbiH3ImqCWxO80v9cGXsHamiCjZjPhbI5ExTW5ZAd856uI0HyjDy4lbunN02JeFt4iE/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
<li class='hr'/>
</ul>
</li>
</ul><div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz6stIUcl2fICDLZMtMpslrQ05Q3tzh8BrhelsBuG-31o1WRMdrNJYyGcHhoKCDrGKyFymsJ-R-O7-p5Q04g4xAWtwUpkgla71zdAiBAgd_ok2y_It9pY8ZQflOrnhQ1QDrDb64Oe557E/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVqhi3AYWK2KioR7dDf1Lt9rjwzYfnjs9iS42v9pltjMIn0iujvA0C_Fo0mE9qulzMS9O8JnTLhrpXUm9LcxPmRxoIKoMOWt7jTZWGaJxKdblj5hnH5z5lACYHSjYgx7t5g59i6e8hNE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div></div></div>

Keterangan:
  1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
  2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog


1. Silahkan Login ke akun blogger anda.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget
4. Kemudian cari kode berikut </body>
5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>
<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>
6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)
Keterangan:
  • Kode warna hijau: ganti dengan URL Feeds sobat
  • Kode warna putih: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.
Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.
Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.  
1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.
2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan url gambar sobat:
http://petir-project.googlecode.com/files/fedkcl.png 
(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)
3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah url berikut dengan url gambar sobat:
http://petir-project.googlecode.com/files/feed.png
4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti URL http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.
Selamat mencoba ya sobat,,

Tuesday, 1 May 2012

Desain Blog yang Baik


Di dunia nyata,kita pertama kali melihat orang pasti dari penampilan luarnya. Begitu juga di dunia maya, kita melihat blog pertama kali pasti dari desainnya. Desain merupakan hal yang sangat vital bagi sebuah blog. Jika desain blog kita baik, maka pengunjung akan merasa senang, dan mungkin saja akan berkunjung secara rutin ke blog kita. Tapi jika desain blog kita buruk, jangankan berkunjung lagi, untuk membaca artikel kitapun pasti enggan. Paling dia berkunjung ke blog kita hanya beberapa menit, bahkan beberapa detik. Lalu bagaimana desain blog yang baik. Berikut ini beberapa aspek yang membuat desain blog menjadi (menurut saya) baik.
SIMPLE, MINIMALIS
Suatu Blog hendaknya memiliki desain yang simple dan minimalis. Minimalis disini bukan berarti seadanya, berwarna putih tanpa hiasan apapun. Mnimalis berarti tidak banyak hiasan yang meriah, tidak terlalu fokus pada detail-detail. Penggunaan widgetnya juga tidak terlalu ramai. Cukuplah daftar posting, Shoutbox, dan hit counter. Desain blog yang simple tidak hanya membuat pengunjung tidak capek melihat blog kita, tetapi juga mempercepat loading blog. Di Indonesia, koneksi internet masih terbilang lambat. Apalagi kebanyakan pengunjung tidak mau menunggu berlama-lama. Maka dari itu hendaknya desain blog dibuat sederhana agar lebih mudah dilihat dan lebih cepat dalam loading.
PEMILIHAN WARNA
Orang paling banyak memilih warna hitam atau putih untuk dijadikan warna background blog mereka.Walaupun saya suka hitam, tapi jujur saya lebih nyaman membaca blog berbackground putih daripada hitam. Background putih membuat blog nampak lebih luas, lebih longgar. Warna putih juga lebih cocok dipadukan dengan berbagai warna. Tetapi warna hitam juga punya kelebihan. Yaitu tidak membuat lelah mata. Di dalam ilmu fisika, warna hitam akan menyerap semua sinar. Sehingga warna hitam berkesan gelap dan “dingin”. Berbeda dengan warna putih yang memantulkan semua sinar sehingga berkesan terang dan panas.
Eits, jangan lupa memperhatikan warna font. Warna font yang baik adalah warna yang kontras dengan warna backgroundnya. Misalnya jika warna background anda putih, anda dapat memilih warna hitam atau biru tua untuk warna font. Jika background hitam, warna putih atau kuning menjadi pilihan yang tepat untuk warna font anda.
SIDEBAR DI KANAN ATAU DI KIRI?
Sebetulnya tidak ada yang salah jika kita memilih sidebar kanan atau kiri. Toh, semuanya terlihat baik. Tetapi saya cenderung memilih sidebar di sebelah kanan. Kenapa? Karena orang membaca artikel kita dari kiri ke kanan. Itu berarti kemungkinan orang akan melihat widget setelah membaca artikel. Coba kalau dipasang di kiri, orang akan lebih berkonsentrasi ke widget kita sebelum membaca artikel kita. Rugi kan?? Pengunjung hanya datang untuk melihat widget kita tanpa memperhatikan apa yang kita tulis. Lalu bagaimana dengan sidebar di kanan dan di kiri? Menurut saya itu adalah pilihan yang paling buruk karena dengan sidebar di kanan dan di kiri konsentrasi pengunjung akan pecah. Pengunjung tidak fokus ke artikel maupun widget. Kalau sudah begini, tambah rugi kan kita??
2 COLOUMN ATAU 3 COLOUMN?
Ketika Blogwalking saya melihat kebanyakan blogger menggunakan 3 COLOUMN. Mungkin mereka berpikir dengan 3 coloumn, mereka dapat memanfaatkan desain blog sebanyak mungkin. Ketika kita memutuskan memakai 2 coloumn atau 3 coloumn hendaknya kita mempertimbangkan tujuan kita membangun blog. Jika tujuan kita ringan, misalnya hanya ingin menulis pikiran kita, dan widget juga tidak terlalu banyak, maka 2 coloumn adalah pilihan yang tepat. Jika tujuan kita adalah monetize atau tujuan-tujuan lain yang lebih berat, maka 3 coloumn lebih dibutuhkan untuk menampung iklan-iklan maupun menu yang banyak.
POSISI IKLAN
Letakkan iklan di posisi yang mudah dilihat, misalnya di bawah header, di sidebar, di bagian paling bawah blog, dan di sela-sela posting. Untuk ukuran, di bawah header lebih baik menggunakan ukuran leaderboard, untuk di sidebar menggunakan ukuran SkyCapper jika masih banyak tempat kosong, untuk di bagian bawah bisa menggunakan ukuran leaderboard atau large rectangle. Untuk di sela-sela posting ukuran lebih banyak variasi, misalnya ukuran banner, large rectangle, atau dapat juga menggunakan link unit berukuran banner.
Download Tulisan Lengkap: desainblog.zip

Wednesday, 18 April 2012

Cara membuat efek air pada gambar blog


Kembali ke laptop. Hari ini kita akan membahas sebuah efek yang jarang di bahas di blog lain, yaitu membuat efek seperti air pada gambar.

Untuk di ketahui sebelumnya bahwa efek ini hanya bekerja pada wadah yang support HTML seperti misalnya pada posting blog atau sidebar.


contohnya seperti ini..


bikin sekarang !

1. Masuk dulu ke link ini CrazyProfile

2. Masukkan gambar anda dengan menekan tombol "Open"

3. Tunggu loading upload nya sebentar, lalu klik tombol "Get code" untuk mendapatkan kode HTML yang akan di tempel di blog


Keren lho kalau sekali-sekali di jadikan image untuk posting kita, pasti banyak yang nanya tuh. hehee..
Semoga sharing tentang cara membuat efek air pada gambar blog ini berguna bagi Anda.

Friday, 30 March 2012

Cara Mudah membuat Animasi di Blog

cara membuat animasi di blog, memasang ini termasuk cara mempercantik blog kita, hehehe.
baiklah sobat semua kali ini saya akan membahas mengenai cara memasang animasi pada blogspot, Animasi merupakan suatu konten yang akan membuat tampilan blog anda menarik di mata pengunjung, dengan animasi blog akan lebih terlihat hidup dan terlihat aktif serta terlihat dikelola oleh yang empunya blog, dengan cara memasukkan animasi ke dalam blog kita, semoga pengunjung semakin tertarik dengan blog anda dan menyempatkan diri mereka untuk datang dan berkunjung kembali ke blog anda. Berikut adalah cara memasukkan animasi tulisan ke dalam blog anda. Silahkan ikuti langkah2 berikut ini : 

1. Masuk ke situs FLASHVORTEX.COM

2. Pada bagian Menu Di atas, silahkan anda pilih animasi yang ingin anda buat... Baik itu Menus, Texts, Banners, Button, dll.

3. saya akan kasih contoh banner,  Silahkan Pilih banner nya. klik CLICK HERE TO EDIT THIS

4. Edit kata kata sesuai dengan yang anda inginkan, Lalu klik Generate Animation..

5. setelah itu anda akan di berikan sebuah kode, copy paste kode tersebut ke blog anda, baik itu di edit html, postingan, atau pada gadget baru., siip 
sekian tutorial saya mengenai Cara membuat Animasi di Blog, semoga bermanfaat.