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

Cara desain blog Membuat Efek Salju Berjatuhan Di Blog

Cara Membuat Efek Salju Berjatuhan Di Blog

Cara Membuat Efek Salju Berjatuhan Di Blog

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

Ingat :
Kamu cukup pilih salah satu kode di bawah ini.

» Efek Salju Berjatuhan :
<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2012/11/cara-membuat-efek-salju-di-blog.html" target="_blank">Cara Membuat Efek Salju Berjatuhan Di Blog</a></small>

Catatan :
  • Karena salju itu warnanya putih maka efek salju berjatuhan di atas juga warnanya adalah putih, dan ini hanya cocok untuk blogger yang menggunakan template dengan warna gelap seperti Hitam (Pokoknya yang bisa menampilkan efek salju yang berwarna putih).

Jika blog kamu menggunakan template dengan warna terang seperti Putih, maka kode efek salju berjatuhan yang harus digunakan adalah kode efek salju berjatuhan Alternatif, silahkan gunakan kode di bawah ini.

» Efek Salju Berjatuhan Alternatif :
<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>
<script type="text/javascript">
snowStorm.snowColor = '#99ccff';

snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>
<small><a href="http://enoparnoabiezz.blogspot.com/2012/11/cara-membuat-efek-salju-di-blog.html" target="_blank">Cara Membuat Efek Salju Berjatuhan Di Blog</a></small>

Keterangan :
  • snowStorm.snowColor = '#99ccff'; adalah warna salju biru muda, silahkan kamu ganti dengan selera yang kamu mau. agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)



sumber : http://enoparnoabiezz.blogspot.com

Cara Desain Blog Memasang Burung Twitter Terbang Melayang Di Blog

Cara Memasang Burung Twitter Terbang Melayang Di Blog

Cara Memasang Burung Twitter Terbang Melayang Di Blog

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4lVrNEa0CUriA8k8rA-3VsTfPpdB5BiCfxlZS8Js1GFgpbQNKpJLTEcWkWVtnWyupg3lhDCmH5ii52c78S_07GsnHmFLDXdYA0XJX_WHsJSpMOw3fc5MIKWPuvxyc9wHVNAPnZjRjK5M/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 = "https://twitter.com/EnoParnoAbiezz";
var tweetThisText = "Twitter - UserID";
tripleflapInit();
</script>
<small><a href="http://enoparnoabiezz.blogspot.com/2012/11/cara-memasang-burung-twitter-terbang.html" target="_blank">Cara Memasang Burung Twitter Terbang Melayang Di Blog</a></small>

Keterangan :
  • Warna ungu adalah warna burung twitter, jika tidak kamu ganti, maka burung twitternya berwarna biru (pilihan Warna Burung Twiter yang lainnya, saya sertakan di bawah).
  • Silahkan kamu ganti https://twitter.com/EnoParnoAbiezz dengan URL twitter kamu sendiri.

Di Bawah Ini, Ada Beberapa Pilihan Yang Bisa Kamu Pilih :

Ingat :
Kamu cukup pilih salah satu kode di bawah ini.

» Burung Twitter Warna Merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh31VS9OAXePdCHvexGw_DI26F7c4drBvjiSzxwdSKilWCr_gIyWzc0AWI7CCXN9p-T5t74zM7Z6ry9CPl6DfR629WA55oCf-kujgIQz1sendbJaxzoeoKh7ddvG2EM_ZYPdwJInBXa-jU/s1600/red+bird.png

» Burung Twitter Warna Kuning :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxyAZ_LYGyyA9YGcWJebun3jTZcfEWBPqcdDfZMN9beDt-2VryDCAKrm0IP6RyR0VQNr4f4zLnB-SnqqzkzflNGh-Fd0hSY1nhr51wAD3WlVM8rxkpETLDEjZqQEMUR1oQdTBkxu9DUw/s1600/yellow+bird.png

» Burung Twitter Warna Hijau :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN4qBKcEaL88vS2h1kFpODfNSrjccGIvcaMlao9_zbuLLcGguSneOpJmvOasCisgONRo4i2hZHZBE3x9X4sZGCkW04lTRvTdTVNHzkfjQVsKjmH8QRR8p-NvljS7HO7Q8WYqdO-tI-QIo/s1600/Green+bird.png

» Burung Twitter Warna Ungu :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEipYp2xIwMFzwRiJmyPiRxrMHheYLeuJtvCbel7U1jr7fBvq_rPMh7is9eXwEgixzAEsL0NFivTXGl1diAciGXFs9jkPOjEROgmq4GWOcMJid3drSv6CDD4n_9nrRtcZJQDLu7bMloY/s1600/purple+bird.png

» Burung Twitter Warna Putih :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeqDbwf1cvEHhH6T88Psl-Qt0ojDrXIInJV7YxlPPLHEAJ8_bOKiuUNBU-DxnhvqaAZn6t2JnwjofsKAzhuEfc31oJ7cfRsrYDha99WDQObEm2DCgzmQEu0qc7DX3aAloeqzTghlVWaKo/s1600/white+bird.png

» Burung Twitter Warna Hitam :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzWzwLtExr_2eKBUKyQThlFyqgeAnEea-EJYagqQxZMDRAuRMITZwtj5HhkRKaYPBouhjUt1o5m35U5N5z6LehxresfCyYJ-1WltwSBreWVTHFn2JMyUyDsVP9CHW-7hcE-Aq6lt5UzE/s1600/black+bird.png

» Burung Twitter Warna Coklat :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CTf9fgjcgDIa1hk1iUGBTcpyCNiawOiUnQoLHg9DJABfhnBWiy9QXfCIYg7L7_Ic4gc7sk7nwjRF1xS3aKcsfKRgk0tqHhhvKAEUQoZQHwe_Vl44JTwh_ygVN-OHBy_sGNtk-8_3Pjg/s1600/brown+bird.png

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)

Cara Desain Blog Memasang Widget Gambar Animasi Bergerak Di Pojok Blog

Cara Memasang Widget Gambar Animasi Bergerak Di Pojok Blog

Cara Memasang Widget Gambar Animasi Bergerak Di Pojok Blog

Banyak hal yang dapat membuat sebuah blog dikatakan menarik, selain dari isi content atau postingan, ternyata ada hal-hal lain yang bisa membuat si blog terlihat lebih menarik dan tentunya banyak pengunjungnya.
Nah selain postingan, disain dan animasi/pernak-pernik blog ternyata dapat meningkatkan performa dari suatu blog. gak percaya? cobalah kamu berkunjung ke suatu blog yang disainnya polos hanya berisikan artikel saja kemudian bandingkan dengan blog yang berisi postingan menarik dengan disain yang menarik pula. pasti kita akan lebih betah berlama-lama di blog yang berisi artikel menarik dan disain/animasi yang menarik itu bukan? tentunya.
Dan, memberikan efek animasi di blog itu gak sulit kok, dan pilihan animasinya pun beragam bergantung selera.

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://enoparnoabiezz.blogspot.com/2012/12/cara-memasang-widget-gambar-bergerak-di.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipOH87AzppxSXzGtRtraoJGF4T04O1cetPbT3Yn7y9h6616ohPXUlCujpN82VyGzt3o3iRTe0AUB8HZ0ijdp2LLczOa-yZyYV6Db1V06BiAe8sfGmeBlrBF1mXydJzpNh6tSihbjWUCBFa/s1600/Kamera+CCTV.gif" title="Cara Memasang Widget Gambar Animasi Bergerak Di Pojok Blog" alt="Kamera CCTV" /></a>

Keterangan :
  • Kamu bisa mengatur dimana kamu ingin meletakkan widget tersebut sesuai keinginan kamu, caranya dengan mengedit tulisan yang saya beri warna biru pada kode tersebut.
  • bottom (bawah), top (atas), left ( kiri), right (kanan), contoh : jika kamu ingin memasang di pojok kanan atas, berarti kamu harus mengubahnya menjadi top dan right. mudah bukan :)
  • Warna ungu adalah URL gambar, silahkan kamu ganti dengan selera yang kamu mau.
  • Warna orange adalah judul gambar, silahkan kamu ganti dengan selera yang kamu mau.
  • Warna hijau adalah ALT gambar, silahkan kamu ganti dengan selera yang kamu mau.

Rekomendasi Untuk Kamu :

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)

Cara Desain Blog Membuat Efek Bintang Bertaburan Pada Kursor Di Blog

Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog

Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

Ingat :
Kamu cukup pilih salah satu kode di bawah ini.

» Bintang Warna Merah :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

» Bintang Warna Kuning :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-kuning.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

» Bintang Warna Hijau :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

» Bintang Warna Biru :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

» Bintang Warna Ungu :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-ungu.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

» Bintang Warna Silver :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-silver.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

» Bintang Warna Hitam :
<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hitam.js" type="text/javascript"></script>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-efek-bintang-bertaburan.html" target="_blank">Cara Membuat Efek Bintang Bertaburan Pada Kursor Di Blog</a></small>

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)

CARA DESAIN BLOG Memasang tombol kembali ke atas atau memasang tombol back to top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
T
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7do1cQ3S2pYoK3LqMqm4nwlaymzO5yKnILnCy4s4cnku-unMl6buzhwMh09TPEKi3-p841WxvE_kH_JxDib0YHVu7qVskQLJk_YAg536YBQ0v2G8gapwLGpgH4D55FrTVyEtGA_mV8ZGh/s148/ke%2520atas.png'/></a>

Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7do1cQ3S2pYoK3LqMqm4nwlaymzO5yKnILnCy4s4cnku-unMl6buzhwMh09TPEKi3-p841WxvE_kH_JxDib0YHVu7qVskQLJk_YAg536YBQ0v2G8gapwLGpgH4D55FrTVyEtGA_mV8ZGh/s148/ke%2520atas.png'/></a>

5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:

  • Kode warna kuning adalah posisi tombol berada
  • Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)


Cara desain blog / blogspot

Artikel kali ini saya akan bagikan tentang cara desain blog sendiri, per bagian blog. Dimulai dari mengedit attribut2 blogger. Lalu masuk ke bagian header, sidebar, halaman posting, kotak komentar blog. dan tambahan desain lainnya.

Cara desain blog sendiri

Mulai dari mengedit atau menghilangkan Atribut2 blogger dan juga desain sederhana untuk blog seperti menghilangkan navbar, gambar tang obeng. Lalu menghilangkan tulisan posting dengan label, langganan entri atom dan juga tulisan Diberdayakan oleh blogger. Membuat favicon, mengganti background blog. Berikut daftarnya.
  1. Mengedit atau menghapus attribut lengkap blogger
  2. Cara membuat dan memasang favicon diblog
  3. Cara mengganti background blog dengan gambar

Selanjutnya masuk ke bagian header, mendesain bagian header dengan gambar, membuat widget header menjadi banyak, manambahkan background di belakang header. Silakan baca di daftar artikel desain header dibawah ini.

  1. Fungsi fixed dan cara menggunakannya
  2. Cara merubah tampilan header blog
  3. Cara buat header dan tabs tanpa jarak
  4. Fungsi margin dan padding di blog
  5. Cara mengganti judul blog dengan gambar

Untuk bagian sidebar widget yang ada di sebelah kanan atau kiri blog. Mulail dengan mendesain background dan warna judul sidebar, memasang icon gambar di samping judul widget sidebar, dan juga lain2nya. Daftar cara desain sidebar blog.

  1. Cara mengganti warna judul sidebar
  2. Memasang icon di judul sidebar widget
  3. Merubah tampilan sidebar blog

Bagian posting, menambahkan icon gambar disamping judul artikel. Lalu menambahkan readmore auto atau manual. Lalu membuat gambar dihalaman posting berputar atau juga membesar ketika disentuh mouse. Beberapa cara desain posting dibawah ini.

  1. Cara membuat read more di blog
  2. Gambar icon disamping judul artikel
  3. Cara membuat gambar posting berputar
  4. Membuat background di halaman posting
  5. Cara membuat gambar posting membesar
  6. Modifikasi baca selengkapnya versi blogger 

Lalu ke bagian kotak komentar blog, seperti menambahkan scroll di kotak komentar blog. Membuat tanda penulis, mengganti tulisan poskan komentar dengan gambar. Dan juga sekaligus merubah seluruh tampilan kotak komentar.

  1. Cara memasang scroll di kotak komentar blog 
  2. Tanda penulis di kotak komentar blog 
  3. Cara mengganti poskan komentar dengan gambar 
  4. Cara merubah tampilan kotak komentar 

Desain tambahan.

  1. Cara mengganti tulisan beranda, posting lama, baru 
  2. Cara mengatur spasi tulisan di blog 
  3. Merubah bullet list dengan gambar 
  4. Cara merubah tampilan blockquotes 
  5. Memasukan kode html css script di posting blog 
  6. Cara membuat icon untuk website 
  7. Cara membuat icon sendiri dengan mudah
  8. Cara membuat tulisan bayangan di blog 
Dan masih banyak lagi artikel2 lainnya tentang cara desain blog sendiri, lengkapnya bisa dilihat di Daftar isi blog ini. Artikel diatas hanya beberapa artikel saja yang saya masukan, agar lebih mudah untuk melihat artikel2 per bagian blog, mulai dari header,sidebar,posting,kotak komentar blog, dan juga yang lainnya. Semoga bisa bermanfaat untuk anda.
 
 
TERIMAKSIH SOBAT  : fandrajuani
sumber : http://fandrajuani.blogspot.com