Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Jumat, 20 April 2012

Cara Memasang / Membuat Tanda Tangan di Blog

tanda tangan
Cara Memasang Tanda Tangan di Blog - Apa kabar sobat blogger! Senang di pagi yang cerah ini saya kembali menyapah sobat blogger... Hmmm. sekedar info, mungkin beberapa hari kedepan ane tak mungkin ngapdet posting serutin ini jadi kali ini saya akan kasih tutorial cara memasang tanda tangan dengan selengkap - lengkapnya.
Pada postingan sebelumnya kita telah membahas tentang Kumpulan Efek - Efek Blog, dan kali ini setelah sekain lama tersimpan di draft akhirnya artikel ini di Poskan dengan judul Cara Bikin Tanda Tangan di Blog. Mungkin di antara sobat blogger sudah pernah melihat hiasan yang satu ini, biasanya diletakkan di bagian bawah postingan yang semakin menegaskan bahwa sobat adalah pemilik resminya. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.

Cara Memasang / Membuat Tanda Tangan di Blog
1. Kunjungi situs http://mylivesignature.com
2. Klik pada tombol bertuliskan Proceed untuk membuat tanda tanda tangan tanpa perlu registrasi.
tanda tangan

3. Setelah itu, klik tulisan Using the signature creation wizard.
tanda tangan

4. Silahkan masukkan nama sobat di kotak yang di sediakan dan klik Next Step
tanda tangan

5. Pilih jenis huruf yang di inginkan dan klik Next Step.
tanda tangan

6. Setelah itu, tentuhkan ukuran tanda tangan yang di inginkan dan klik next step.
tanda tangan

7. Kemudian sobat akan melihat tampilan seperti berikut yang bertanda bahwa tanda tangan sobat akan segera jadi. Pilih warna background dan warna tanda tangan yang di inginkan.
tanda tangan

Tambahan :
Untuk warna background direkomendasikan menggunakan background ( latar ) transparan agar nantinya cocok dengan semua warna.

8. Atur kemiringan ( slope ) teks dan klik Next Step
tanda tangan

9. Nah dengan demikian maka tanda tangan online sobat telah berhasil dibuat.


Tambahan :
Klik Copy Image Location untuk mengambil URL gambarnya
Klik Save Image As untuk mendownload Tanda Tangannya.

Beginilah hasilnya

Selasa, 17 April 2012

Cara Memasang Menu Accordion di Blog

Cara Memasang Menu Accordion di Blog - Cara Memasang, Membuat atau Membikin Menu Accordion di Blogspot ini adalah re-post dari posting lawas saya yang berjudul cara membuat menu accordion blogger yang nggak masuk ke hatinya om gugel. Karna itu diharapkan mudah - mudahan dengan Re-post ( posting ulang ) ini, artikel saya yang telah saya hapus tersebut bisa terindeks lagi meskipun dengan URL yang berbeda.

Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : cara membuat menu horisontal di blog )yang biasa sobat jumpai, mungkin ini adalah salah satu solusi menyembunyikan widget yang terlalu banyak di halaman blog sobat.  Sobat yang tertarik pasang menu accordion di blogger, silahkan ikuti tutorial berikut.

1. Logi ke akun blog sobat.
2. Klik rancangan --> Edit HTML
3. Kemudian letakkan kode berikut di atas kode ]]></b:skin>
#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

4. Klik save template dan kita akan menuju ke penambahan gadget.
5. Klik Rancangan --> Elemen laman--> Tambah gadget--> Pilih HTML/Javascript
6. Masukkan kode berikut ke dalam kotak yang di sediakan.
<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
</div>

7. Klik save dan lihat hasilnya... Gimana?? sederhana dan mudah bukan??

Jumat, 13 April 2012

Cara Memasang Game Online di Blog

Cara Memasang Game Online di Blog - Cara Pasang Game di Blogspot - Kadang kala ada saja faktor yang membuat kita malas ngeblog, ada yang karena bosen, karena nggak mood dan macem - macem deh... Sebenarnya rasa bosen tu terjadi di berbagai kegiatan bukan hanya ngeblog, kali ini saya akan kasih tutorial cara mensiasati kebosanan ngeblog.
Mengawali pagi yang indah ini, saya akan memulai postingan saya yang berjudul Cara Meletakkan Game Onlien di Blog yang nantinya bisa sobat maenkan langsung di blog sobat sendiri. Setelah sebelumnya berhasil memposting cara memasang TV di Blog, Cara Bikin Blog, dan lainnya, kali ini akan saya kasih tutorial lengkap cara pasang permainan di blogspot entah sobat pasang di sidebar ataupun di halaman posting. Sobat yang tertarik, silahkan ikuti tutorial berikut.

1. Silahkan menuju ke http://www.khemer.com, disitu sobat akan melihat tampilan seperti berikut.

2. Pilih game yang di inginkan, kemudian ambil embed kode nya.

Cara Pemasangan :
Cara pemasang di sini terbagi 2 yaitu di pasang di halamn postingan ( artikel ) dan di sidebar sebagai widget. Mari kita lihat tutorialnya.

A. Memasang Game Online di Postingan Blog
1. Log in ke akun blogger sobat
2. Buat entri baru dengan meng-klik tulisan Entri Baru
3. Masukkan Embed Code di Edit HTML di form penulisan artikel. Lihat Gambar


4. Setelah itu, klik tulisan Terbitkan Entri yang menadakan entri sobat sudah terposting.
B. Memasang Game Online di Sidebar Blog
1. Klik Rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
2. Masukkan embed kode kedalam kotak yang di sediakan.
3. Klik Save / Simpan

Tambahan :
Embed Code yang sobat ambil, kira - kira seperti berikut.
<object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object>

Tambahkan kode <center></center> agar game online ditampilkan di tengah halaman. Hasilnya seperti berikut. 
<center><object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object></center>

Berikut Contoh Game Onlinenya.. Silahkan di mainkan...


Sabtu, 07 April 2012

Cara Memasang TV di Blog

tv online
Cara Memasang Tv Online Streaming di Blog - Selalu ada yang baru di dunia blog, setelah bisa memasang animasi di blog, memasang lagu di blog, kini dengan kecanggihan teknologi sobat bisa memasang TV online di blog ( nonton sambil ngeblog ) entah itu RCTI, SCTV, TRANS TV, TRANS 7, GLOBAL TV, MNC TV, KOMPAS TV, INDOSIAR, ANTV, TV ONE, dan lain - lain. Tutorial yang seperti ini bisa dengan mudah sobat temukan di google dengan kata kunci "cara pasang tv ( televisi ) di blogspot". Berikut tutorial cara pasang TV di blog bagi sobat yang berminat.

A. Untuk memasang TV Online di sidebar blog, sobat ikuti tutorial berikut.

1. Log in ke akun blog sobat
2. Klik Rancangan --> Elemen laman --> Tambah gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan.
<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. klik save

B. Untuk cara pemasangan di halaman postingan berikut tutorialnya .

1. Login ke akun blog sobat
2. Klik Entri baru kemudian beri judul sesuai keinginan. Misalnya Nonton TV Online
3. Masukkan kode berikut di Edit HTML di postingan dan jangan di Compose
<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. Klik Terbitkan Entri dan lihat hasilnya..

Tambahan :
Atur ukuran width ( lebar ) dan Height ( tinggi ) TV online sesuai keinginan.

    Minggu, 01 April 2012

    Cara Menambahkan Widget/Gadget di Blog

    Cara Menambahkan Widget / Gadget di Blogspot - Menghias dan mempercantik tampilan blog selalu identik dengan yang namanya widget. Widget itu sendiri seperti yang di kutip dari wikipedia.org, merupakan “kode portabel ( DHTML, JavaScript atau Adobe Flash ) yang dipasang pada suatu halaman web, yang memiliki fungsi tertentu dan menjadi suatu bagian dalam halaman web tersebut.”. Adapun contoh widget yang biasa di pasang di blog di antaranya jam, lagu, counter ( baca : cara memasang flag counter di blogspot ), kalender, animasi, efek ( baca : kumpulan efek - efek blog lengkap )dan lain - lain.

    Kali ini saya akan sedikit share tentang cara menambahkan widget untuk para newbie. Mengapa untuk newbie? Nggak mungkinlah untuk para master.. karna cara ini terlalu mudah bagi para blogger yang sudah lama berkecimpung di blogosphere, cara ini hanya di tujukkan untuk sobat blogger yang baru di dunia blog. Silahkan ikuti tutorial berikut jika sobat ingin menambahkan widget atau gadget di blog.

    1. Log in ke akun blog sobat.
    2. Klik Rancangan 



    3. Klik Elemen Laman


    4. Klik Tambah Gadget


    5. Pilih gadget yang akan digunakan dan Klik tanda Plus ( + ) di samping gadget.


    6. untuk menamgahkan widget dari fungsional pihak ke 3 seperti lagu/Mp3, animasi, jam dll silahkan gunakan widget HTML/Javascript.


    7. Klik save dan lihat hasilnya.

    Jumat, 30 Maret 2012

    Cara Memasang Breaking News di Blog

    Cara Memasang Breaking News di Blog - Ada yang baru dengan tampilan christian tatelu, blog jelek ini kini dilengkapi dengan breaking news. Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.

    Sebenarnya postingan kali ini hampir sama dengan postingan sebelumnya ( baca : cara membuat headline news di blog ) tapi mungkin yang ini ( breaking news ) agak sedikit lebih keren. Sobat yang tertarik memasang widget ni, silahkan ikuti tutorial berikut.


    Cara Memasang Breaking News di Blog

    1. Login dulu ke akun blog sobat
    2. Klik rancangan --> Edit HTML
    3. Letakkan kode berikut di atas kode ]]></b:skin>
    .newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqQI6nlTNCK0sjX-x0m48w_g-0-UYPeAFFDQzjdSO_lEiF-cdTTMfiQRQvx2MLbUiUsyTcs97-Qdf_-6yVfeF0veWDdrRlk8Iq_ZmMC-qLn0_nqIb5O1moHByfbb6yPWb80eJvnsDsPc/s1600/BRK+NW.png) no-repeat top left;width:979px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
    .news {width: 979px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
    .news a:link, .news a:visited{color:#000000;text-decoration:none;}
    .news a:hover {color:#ddd;text-decoration:underline;}

    Catatan :
    Sesuaikan kode yang berwarna biru dengan ukuran template blog sobat


    4. Kemudian letakkan kode berikut di atas kode </head>
    <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
    <script type='text/javascript'>
    //<![CDATA[
    var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
    var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
    //]]>
    </script>
    <style type='text/css'>
    .titlefield{ /*CSS for RSS title link in general*/
    text-decoration: none;}
    .labelfield{ /*CSS for label field in general*/
    color:#aaa;font-size: 100%;}
    .datefield{ /*CSS for date field in general*/
    color:#aaa;font:normal 14px Arial;text-transform:none;}
    #example1{ /*Demo 1 main container*/
    width: 780px;
    height: 14px;
    border: 0px solid #aaa;
    padding: 0px;
    font:bold 16px Arial;
    text-transform:none;
    text-align:left;
    background-color:transparent;}
    code{ /*CSS for insructions*/
    color: #fff;}
    #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
    #example1 a:hover {color:#C8D3F2;text-decoration:none;}
    </style>

    5. Cari kode <div id='header-wrapper'> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.
    <div class='newspic'>
    <div style='float:left;width:979px;padding:1px 0 6px 130px; position:relative; overflow:hidden;'>
    <script type='text/javascript'>
    var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
    cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://christiantatelu.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
    cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
    cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
    cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
    cssfeed.entries_per_page(1)
    cssfeed.init()
    </script>
    </div>
    <div style='clear:both;'/>
    </div>

    Catatan :
    Ganti http://christiantatelu.blogspot.com dengan url blog sobat.

    6. Klik save dan lihat hasilnya.

    Rabu, 28 Maret 2012

    Cara Membuat Teks Berjalan di Blog

    tulisan berjalan
    Tulisan berjalan
    Cara Membuat Teks Berjalan di Blog - Pernah tidak sobat melihat tulisan / teks yang mondar - mandir di suatu blog?? saya rasa pasti sudah pernah.. namanya marquee sob! fungsinya sebenarnya hanyalah sebagai hiasan di blog, hampir sama dengan headline news ( baca : memasang headline news di blog ) cuma yang ini lebih mudah ngaturnya, terutama dalam mengatur gerakan / prilaku teks yang di inginkan. Sobat yang tertarik membuat tulisan yang mondar - mandir ini, silahkan ikuti terus tutorialnya.

    Cara Membuat Tulisan Berjalan di Blog

    1. Tulisan bergerak dari kanan ke kiri
     <marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>
     hasilnya
    Contoh Tulisan Berjalan

    2. Tulisan bergerak dari kiri ke kanan
     <marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
     hasilnya
    Contoh Tulisan Berjalan

    3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan
    <marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
    hasilnya
    Contoh Tulisan Berjalan


    4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri
    <marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
    hasilnya
    Contoh Tulisan Berjalan


    5. Teks bergerak dari atas ke bawah
     <marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
     hasilnya
    Contoh Tulisan Berjalan

    6. Teks bergerak dari bawah ke atas
     <marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>
    hasilnya
    Contoh Tulisan Berjalan

    7. Teks bergerak mondar- mandir dari atas ke bawah
     <marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>
    hasilnya
    Contoh Tulisan Berjalan

    8. Teks bergerak zig - zag ( diagonal ) memantul
     <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>
     hasilnya


    Contoh Tulisan Berjalan

    9. Teks bergerak zig - zag ( diagonal ) tembus
     <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>
    hasilnya


    Contoh Tulisan Berjalan

    Cara memasang :
    1. Login ke akun blog sobat
    2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
    3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
    4. Klik save dan lihat hasilnya.

    tambahan :
    • Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
    • Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
    • Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
    • Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan  kode marquee antara kode berikut
    <div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
    <marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
    </div>

    hasilnya :
    Contoh Tulisan Berjalan

    • Untuk menyisipkan link pada marquee, gunakan kode berikut :
    <div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
    <marquee direction="left" scrollamount="6" align="center"><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-teks-berjalan-di-blog.html"/>Cara Membuat Teks Berjalan di Blog</a></marquee>
    </div>
    catatan :
    ganti tulisan yang berwana biru dengan Url yang di inginkan.
    hasilnya :
    • Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :
    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
    <a href=" http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html/">cara membuat permalink di blog</a><br/>
    <a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-logo.html">cara membuat logo</a><br/>
    <a href="http://christiantatelu.blogspot.com/2012/03/blog-di-blogspot-dan-blog-di-wordpress.html">blog di blogspot dan blog di wordpress</a><br/>
    </marquee>
    catatan :
    kode yang di cetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer
    Hasilnya :

    Sekian posting cara bikin tulisan berjalan nya....

    Cara Membuat Permalink di Blog

    Cara Membuat Permalink di Blog - Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan jawaban atas pertanyaan sobat blogger tentang cara membuat / memasang permalink di blogspot sama persis dengan permanen link di blog ini. Sekedar informasi, postingan sebelumnya adalah cara membuat logo. Sebelum kita ke TKP ada baiknya saya jelaskan sedikit dulu tentang Permalink ( permanen link).

    Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

    Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) . Contohnya bisa sobat lihat tepat di bawah artikel.


    Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.

    Cara Membuat Permanen Link di Blog

    1. Login ke akun blog sobat.
    2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
    3. Letakkan kode berikut di atas kode ]]></b:skin>
    .admin-tulisan{
    width:auto;
    background:#f2f2f2;
    border:2px solid #000000;
    margin:30px 0 10px 0;
    display:block;
    font-family:"julee";
    color:#000;
    }
    .admin-tulisan .kontainer{padding:5px;}
    .admin-tulisan h4{
    background:#FF0000;
    border:none;
    border-bottom:1px solid #000000;
    color:#fff;
    font-family:"julee";
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
    padding:5px 10px;
    margin:0 0 0 0;
    display:block;
    }
    .admin-tulisan h4 a{color:#000000;}
    .admin-tulisan img{
    background:#000000;
    width:90px;
    height:100px;
    border:1px solid #000000;
    margin:3px 10px 0 0;
    float:left;
    padding:2px;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }

    4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.
    <!-- Permalink Tatelu -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
    <div class='kontainer'>
    <img alt='Christian angkouw' src='http://i1108.photobucket.com/albums/h405/christian410/269111_225685127450056_100000257112719_900053_7432574_n.jpg'/>
    Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
    <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
    <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
    <a href='http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Permalink Tatelu -->

    5. Klik save dan lihat hasilnya.

    Tambahan :
    • Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat
    • Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )

    Senin, 26 Maret 2012

    Cara Membuat Logo

    Logo Blog
    Cara Membuat Logo  - Banyak hiasan yang bisa sobat pasang di blog sobat, saran saya pada sobat untuk tidak melewatkan yang satu ini. Kali ini kita akan coba membuat logo website / blog secara online dengan logoease. Logo website sebenarnya  juga bisa sobat buat menggunakan software seperti coreldraw, photoshop dan software - software lainnya, tapi untuk saat ini saya mohon maaf karena saya nggak pakar bidang gituan, kita bahas cara online nya saja. Nggak terlalu beda jauh kok! sama - sama gratis.. hehehe

    Postingan kali ini tak bedah jauh dengan 2 postingan saya sebelumnya tentang membuat logo secara online ( baca : membuat logo untuk header secara online) dan cara versi ke 2 nya ( baca : membuat logo header secara online versi 2 ). Sobat blogger yang tertarik memasang logo di blog sobat, silahkan ikuti tutorial berikut.

    Cara Bikin Logo
    1. Daftar terlebih dahulu ke logoease dengan mengklik di sini!
    2. Isi data - data yang di minta seperti nama, login ID, password, Confirm Password, E-mail, Company name, Address ( alamat ), state ( diisi nama kota atau provinsi ),  country ( negara ), Zip Code ( kode pos ), Phone ( no. Hp / Tlp ), fax, dan kode captcha. Kira - kira form pengisisan datanya seperti gambar berikut.

    Logo website

    tambahan :
    Fax tak perlu di isi jika tidak ada ( optional )

    3. Setelah mengisi semua form identitasnya, klik submit. Jika pengisian datanya benar, maka sobat akan melihat tampilan berikut yang bertanda bahwa sobat sukses membuat akun di logoease.
    Logo Blog

    4. Log in dengan Login ID dan password baru sobat, kemudian sobat akan melihat tampilan berikut
    Logo website

    klik start your logo kemudian akan muncul jendela baru seperti tampilan berikut
    Logo Blog

    Pilih kategori logo yang akan di pakai. Misalnya sobat menggunakan Mountain, maka sobat akan melihat tempilan berikut.
    Logo website

    Pada kategori mountain, ada 2 pilihan logo yang bisa di edit pilih salah satu. Misalnya sobat meilih yang ke dua ( dari kiri ) maka tampilannya seperti berikut.
    Logo Blog

    Edit sesuka hati logonya dengan menambahkan warna, menambahkan dan mengganti huruf atau apapun yang ingin sobat edit.  Jika sudah selesai, klik save kemudian sobat akan melihat tampilan berikut.
    Logo website

    Pilih logo yang akan di save dengan mencentang radiobutton di samping logo, Klik download logo.

    Logo yang di download akan berupa link download yang di kirim ke email yang sobat pakai mendaftar di logoease. Periksa email masuknya dan klik link downloadnya.

    Logo website

    Tambahan :
    Logo yang di download berformat zip, di ekstrak terlebih dahulu dengan winrar.

    Logo Blog

    Dengan demikian, berarti logo blog sobat sudah berhasil di buat. Berikut logo sederhana yang bisa di hasilkan dari logoease. Silahkan di pakai jika di inginkan...
    Logo website
    sekian cara membuat logo nya.

    Minggu, 25 Maret 2012

    Cara Membuat Buku Tamu Auto Hide di Blog

    buku tamu cbox
    Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog - Apa kabar sobat blogger??? Pertama - tama saya memohon maaf atas komentar - komentar sobat blogger yang belum sempat saya balas sebelumnya, karena hidungku ( mampet ), aktivitas blogging ku terhenti hampir seminggu. Setelah sebelumnya memposting artikel cara memasang artikel acak di blog, kali ini dengan hidung yang masih cenat - cenut saya akan menjawab permintaan dari salah satu sobat blogger yang meminta cara membuat buku tamu auto hide di blog seperti yang tampak di sidebar blog ini.

    Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

    <style type="text/css">
    #gb{
    position:fixed;
    top:20px;
    z-index:+1000;
    }* html #gb{position:relative;}

    .gbtab{
    height:150px;
    width:50px;
    float:left;
    background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
    }

    .gbcontent {
    float:left;
    border:1px solid #000000;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-radius-bottomleft:5px;
    -o-border-radius-bottomleft:5px;
    -khtml-border-radius-bottomleft:5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    background: #F2F2F2; url() no-repeat bottom;
    padding:10px;
    }

    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
    gb.opened = !gb.opened;
    }function moveGB(x0, xf){

    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
    }</script>

    <div id="gb">
    <div class="gbtab" onmouseover="showHideGB()"> </div>

    <div class="gbcontent">
    <center>
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>
    <div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>
    </div>
    <!-- END CBOX -->
    <br />
    <div style="text-align:center">
    <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
    </div>
    </center></div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>

    </div>
     

    Caranya :
    1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
    2. Masukkan kodenya di kotak yang di sediakan.
    3. Klik Save 
    Tambahan :
    Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

      Senin, 19 Maret 2012

      Cara Memasang Artikel Acak di Blog

      random post
      Cara Membuat Artikel Acak ( Random Post ) di Blog -  Widget random post adalah widget yang manampilkan postingan atau artikel secara acak atau random untuk seluruh artikel di blog tanpa terkecuali. Berdasarkan penjelasan ini, berarti kita sudah dapat membedahkan antara related post, recent post ( baca : cara membuat recent post berjalan di blog ), popular post dengan random post.

      Dengan memasang widget ini, postingan - postingan lawas yang kemungkina sudah lama tak di lihat pengunjung ( apalagi artikel yang tak memperoleh top 10 google ) akan di tampilkan kembali secara acak bersama postingan - postingan lawas dan postingan terkini lainnya.

      Sobat yang tertarik memasang widget random post di blog silahkan ikuti tutorial berikut.

      1. Klik Rancangan --> Elemen laman --> Tambah Gadget --> Pilih HTML/Javascript
      2. Masukkan kode berikut ke dalam kotak yang di sediakan

      <div style="overflow:auto; width:auto; height:250px; padding:5px;border:px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
      <script type="text/javascript">
      var randarray = new Array();var l=0;var flag;
      var numofpost=10;function randomposts(json){
      var total = parseInt(json.feed.openSearch$totalResults.$t,10);
      for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
      if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
      for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
      for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
      document.write(item);}}
      }document.write('</ol>');}
      </script>
      <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script><span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-memasang-artikel-acak-di-blog.html"> widget! </a></span></div>

      catatan :
      var numofpost=10 berarti jumlah postingan acak yang akan di tampilkan berjumlah 10, silahkan tambah atau kurangi angkahnya dengan memperhitungkan berat loading blog.

      3. Klik save dan lihat hasilnya.

      Singkat padat namun di harapkan bisa membantu...

      sekian...

      Selasa, 13 Maret 2012

      Pasang Logo Blogger Manado di Blog

      Pasang Logo Blogger Manado di Blog - Salam blogger kawanua kawan!!! Kali ini khusus untuk teman blogger yang berasal dari manado ( sulawesi utara ), saya akan sedikit berbagi tentang widget yang baru saja saya buat, widget apakah itu?? Widget ini hampir sama dengan widget i love indonesia yaitu memberi informasi tentang daerah asal blogger. Dan widget kali ini saya beri nama widget blogger manado. contohnya bisa sobat lihat di sudut kiri atas blog ini.

      Sobat blogger manado yang tertarik memasang widget blogger manado di blog, silahkan

      Cara Memasang Logo Blogger Manado di Blog

      1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
      2. Pilih kode widget ke dalam kotak yang di sediakan .
      3. Kemudian klik save.

      berikut kode widgetnya ...
      Logo Blogger manado


      Logo Blogger manado



      Logo Blogger manado
      Tambahan :
      Untuk mengubah posisi widget, silahkn edit kode topright pada script di atas.
      • top : atas
      • bottom : bawah
      • left : kiri
      • right : kanan

      Postingan ini masih akan di update karena ada kemungkinan widgetnya nanti akan di tambah.. sekian dulu sob!!!

      Minggu, 11 Maret 2012

      Cara Memasang Flag Counter di Blogspot

      Cara Memasang Flag Counter di Blog Blogspot - Berapa jumlah pengunjung blog sobat?? Bagi sobat blogger yang belum tahu saya sarankan untuk memasang widget ini. Namanya Flag Counter. Flag counter adalah visitor count yang menampilkan jumlah pengunjung blog dengan ciri khas menampilkan bendera negara setiap pengunjung. Contoh bisa sobat lihat di sidebar blog ini.
      Setelah sebelumnya posting cara membuat banner untuk link exchange kali ini saya akan share cara memasang widget flag counter di blog sobat. Sobat yang penasaran dan tertarik silahkan ikuti tutorial berikut.

      1. Sobat kunjungi situs http://flagcounter.com 
      Sobat akan melihat tampilan seperti berikut.


      2. Seperti pada gambar, di situ sobat bisa mengatur tampilan dari flag counter tersebut sesuka hati.
      Berikut beberapa menu editnya..
      • Top Countries : menampilkan jumlah pengunjung tiap negara dengan bendera negara asal pengunjung
      • Flag Map : menamplkan pengunjung dalam bentuk map aatau peta dunia seperti gambar berikut.



      • Mini Counter : menampilan counter dalam bentuk mini berupa pagaview blog.
      • Maximum Flag to Show : Jumlah bendera yang akan di tampilkan
      • Column of Flags : Jumlah kolom untuk counter
      • Label on Top of Counter : Nam dari counternya. bisa di ganti sesuai keinginan.
      • Background Color : Warna latar belakang
      • Text Color : warna teks
      • Border color : Warna garis tepi
      • Show Country Codes : Menampilkan kode setiap negara, misalnya amerika dengan kode US.
      • Show Pageview Count : Menampilkan jumlah pageview atau jumlah penelusuran halaman di satu blog
      • Show Number of Flags : Menampilkan seluruh jumlah bendera asal pengunjung
      3. Setelah selesai ngeditnya, klik tulisan GET YOUR FLAG COUNTER. Kemudian sobat akan melihat tampilan seperti berikut.



      4. Klik Skip, ambil kodenya, kemudian pasang ke HTML/Javascript blog sobat.


      Cara Pemasangan :
      Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
      Masukkan kode kedalam kotak yang di sediakan kemudian klik save.

      Jumat, 09 Maret 2012

      Cara Membuat Recent Post Berjalan di Blog

      Cara Membuat Recent Post Berjalan di Blog - Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
      Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

      Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

      1. Log in ke akun blog sobat.
      2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
      3. Masukkan kode berikut ke dalam konten.

      <style type="text/css">
          #rp_plus_img{height:377px;}
          #rp_plus_img li {height:60px;padding:5px;list-style:none;
          background-color:#ffffff;
          border:solid 1px #000000;}
          #rp_plus_img a{color:#00000;}
          #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
          text-align:justify;
          -moz-border-radius: 5px;}
          #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
         
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
      </script>
      <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
      </script>
      <script type="text/javascript">
          var speed = 1500;
          var pause = 3500;
          $(document).ready(function(){
          rpnewsticker();
          interval = setInterval(rpnewsticker, pause);
          });
         
      </script>
      <ul id="rp_plus_img"><script>
          var numposts = 5;
          var numchars = 0;
         
      </script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
      </script>     </ul>
      <small><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-recent-post-berjalan-di.html" target="_blank">get this widget here</a></small>

      4. Klik save dan lihat hasilnya.

      Kamis, 08 Maret 2012

      Kumpulan Efek - Efek Blog ( Lengkap )

      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>

      5. Efek Kupu - Kupu Terbang
      <script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      17. Cacing
      <script language="javascript">
      nd_mode="worms";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      18. Mold
      <script language="javascript">
      nd_mode="mold";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      19. Bayi merangkak
      <script language="javascript">
      nd_mode="baby";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      20. Telur mata sapi
      <script language="javascript">
      nd_mode="eggs";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      21. Kopi tumpah
      <script language="javascript">
      nd_mode="coffee";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      22. Terbakar
      <script language="javascript">
      nd_mode="burn";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      23. Tomat
      <script language="javascript">
      nd_mode="tomato";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      24. Creampie
      <script language="javascript">
      nd_mode="creampie";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      25. Murka
      <script language="javascript">
      nd_mode="god";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      26. Sapi Jorok
      <script language="javascript">
      nd_mode="cow";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      27. Anjing Jorok
      <script language="javascript">
      nd_mode="dog";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

      28. Kencing Sembarangan
      <script language="javascript">
      nd_mode="pee";
      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://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.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..