Trik Blog

 

Kumpulan Efek - Efek Blog: Ringan >> 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.

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

<script language="javascript"> nd_mode="meteor"; nd_control="on"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

2. Banjir

<script language="javascript"> nd_mode="flood"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

3. Bunga Mekar

<script language="javascript"> nd_mode="flowers"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

4. Bom Atom

<script language="javascript"> nd_mode="bomb"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

5. Ufo

<script language="javascript"> nd_mode="ufo"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

6. Graffity

<script language="javascript"> nd_mode="graff"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

7. Shaver

<script language="javascript"> nd_mode="shaver"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

8. Gun

<script language="javascript"> nd_mode="gun"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

9.Bloody gun

<script language="javascript"> nd_mode="blood"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

10. Paint ball

<script language="javascript"> nd_mode="paint"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

11. Chainsaw

<script language="javascript"> nd_mode="chainsaw"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

12. Dinosaur

<script language="javascript"> nd_mode="dino"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

13. Lebah

<script language="javascript"> nd_mode="wasp"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

14. Lalat

<script language="javascript"> nd_mode="fly"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

15. Semut

<script language="javascript"> nd_mode="ants"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

16. Siput

<script language="javascript"> nd_mode="snail"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script> <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center> <a href="http://zuazz.blogspot.com/2012/03/kumpulan-efek-efek-blog-ringan-berat.html" target="_blank">Efek Blog</a></center> </small></div>

 

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

Sumber: http://christiantatelu.blogspot.com

 

 

 

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

den zuaz | 02:17 | 69comments

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>




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


7. Kemudian Sobat cari kode </head>
   Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>
    <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


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


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

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


1. Kemudian klik save, dan lihat hasilnya.

Membuat Scroll Box di Blog[

Hallo sobat blogger, pada kesempatan ini aye akan membahas mengenai cara membuat scroll box pada postingan blog.

Scroll box berguna untuk membuat halaman blog kita tidak terlalu panjang, sehingga akan terlihat lebih menarik. Juga bisa digunakan untuk memasang kode script yang akan kita terbitkan pada postingan.

Sobat.... cara untuk membuat scroll box pada postingan blog itu hanya membutuhkan beberapa langkah mudah, yaitu dengan membuat kode script seperti di bawah

<div style="overflow:auto; padding:5px; width:320px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #BFBDBD;">Masukkan teks atau kode script disini atau apa saja yang akan kita pasang pada scroll box. biasanya adalah tulisan artikel yang perlu tempat lebih luas dan panjang</div>

Pasang kode script tersebut pada mode edit HTML saat menulis artikel blog.

Maka hasilnya akan terlihat seperti di bawah

Masukkan teks atau kode script disini atau apa saja yang akan kita pasang pada scroll box. biasanya adalah tulisan artikel yang perlu tempat lebih luas dan panjang

Cukup ringkas dan mudah kan... sekarang kita sudah bisa membuat scroll box pada postingan blog.
ganti tulisan yang berwarna hijau dengan yang sesuai keinginan kita, dan ganti tulisan yang berwarna merah dengan warna yang kita inginkan. itu adalah kode warna background

Oke sobat blogger sekian dulu postingan kali ini, semoga bisa bermanfaat dan sampai jumpa di postingan selanjutnya.