Generator Kode Warna HTML

Kode Warna/Color Generator sangat diperlukan sekali dalam kita mendesain suatu halaman web blog. Dalam mendesain blog ataupun website,pastinya kita tidak akan terlepas dari gradiasi warna. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut kode warna HTML. Oleh karena kebutuhan tersebut, saya coba sediakan untuk semuanya, generator kode warna HTML berikut. Selamat berkreasi,semoga membuatmu bermakna dan berwarnaa

Read more »

Cara Menampilkan Status YM (Yahoo Messenger)

Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :



trus jika kamu online maka iconya akan berubah seperti ini:



Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".

<a href="ymsgr:sendIM?paijo"> <img src="http://opi.yahoo.com/online?u=paijo&amp;m=g&amp;t=2&amp;l=us"/>
</a>

Ganti text yang warna merah (paijo) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.

Read more »

Cara Pasang Tombol Share ke Social Bookmarking

Salah satu cara meningkatkan pengunjung blog atau website adalah dengan mendaftarkan artikel-artikel anda ke dalam Situs Social Bookmarking , Social bookmarking Network , Favourite Bookmarking dan lain sebagainya. Contohnya mendaftarkan posting anda ke digg, stumbleupon,ma.gnolia, delicious, furl, technorati, simpy, spurl,reddit, mybloglog, blogcatalog, dan situs social bookmarking lainnya. Saya akui cara ini sangat efektif untuk meningkatkan pengunnjung blog anda. Selain itu situs-situs social networking (situs pertemanan) seperti facebook, twitter, friendster dan lain-lain juga dapat dijadikan sebagai media promosi yang juga dapat meningkatkan pengunjung blog anda.

Dan pada trik kali ini saya akan menjelaskan bagaimana memasang tombol sharing dan tombol submit ke social bookmarking ke dalam blog. Dengan sobat blogger memasang tombol submit/share ke situs social bookmarking seperti ini, akan memudahkan siapapun untuk share artikel/posting sobat langsung ke media bookmarking bila dirasa bermanfaat bagi yang lainnya, ini akan sangat bermanfaat untuk meningkatkan reputasi dan akan meningkatkan pengunjung ke blog sobat. Tombol share/submit yang akan dibuat disini saya rasa sangat lengkap mulai dari facebook, twiiter, digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan masih banyak lagi. Untuk tampilannya adalah sebagai berikut :

Nha jika sobat tertarik dan berminat memasang tombol tersebut, berikut saya akan jabarkan caranya memasang ke blog sobat, check it

1. Pertama, login dulu ke Blog sobat 

2. Masuk ke tab Rancangan (Design/Layout) -> Edit HTML

3. Klik pada Expand Widget Templates
4. Kemudian Carilah kode berikut ini

<data:post.body/>

atau

<p><data:post.body/></p>

(Note: Gunakan CTRL+F untuk mempermudah pencarian)
Kode ini biasanya ada 2 buah, pilihlah yang lebih bawah

5. Setelah ketemu, letakkan kode ini setelah kode <data:post.body/>

<div style='border-top:0px solid #ccc;border-bottom:3px solid #FE9A2E; padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>

6. Selesai, SAVE TEMPLATE anda dan lihat hasilnya

Note: Jika anda telah memasang readmore, tombol submit ini akan terlihat jika posting tampil fullpost

Read more »

Cara Menampilkan Kotak Komentar Di Bawah Postingan

Blogger/Blogspot memang tau apa isi hati para penggemar setianya,terbukti Blogger/Blogspot sekarang sudah menyediakan Comment Box(Kotak Komentar) yang muncul langsung di bawah postingan.. Kalau dulu hanya berupa link "Post a Comment" di bawah postingan, yang sekarang benar-benar lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah artikel ini). Dengan adanya kotak komentar yang seperti ini, kita tidak usah susah2 pake haloscan comment box . Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement"menjadi "Embedded below post" (lihat gambar dibawah)



3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>

8. Lalu simpan template kamu.

Sekarang coba akses blog kamu dan kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar dari blogger.hohoho..Semoga Berhasil...

Read more »

Membuat Marque Effect

Marquee?Mungkin kata itu masih asing di telinga kita.Oke dalam kesempatan kali ini akan dikupas tuntas mengenai Marquee. Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.



Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan


Scroll --> teks bergerak berputar

Slide--> teks bergerak sekali lalu berhenti

Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen


Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right"
height="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :



marquee dari kanan ke kiri


ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .


Contoh marquee dari perilaku gerakan :

<MARQUEE align="center"
direction="left" height="200" scrollamount="3"
width="70%" behavior="alternate">

marquee menurut perilaku


</MARQUEE>




marquee menurut perilaku



Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">


</MARQUEE></b></FONT></div>


hasilnya :

marquee dengan variasi hurup

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.


Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini

</marquee>



hasilnya :




silahkan tunjuk ke sini



Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">


<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>


<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>


<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>


</marquee>


hasilnya :





Free Template



Kolom iklan 


Kang Rohman




Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat ber eksperimen

Read more »

Cara Mudah Mengganti Favicon Blogger Tanpa Mengedit HTML

Mengganti Favicon, mungkin sudah banyak yang tahu caranya, dan blog-triks juga pernah memaparkan caranya disini. Mengapa saya membahasnya lagi? Karena kali ini cara yang akan saya paparkan berbeda, ini lebih mudah dari cara mengganti favicon yang sebelumnya saya tulis disini. Panggantian favicon yang akan saya jelaskan disini tanpa melalui editing HTML, melainkan langsung dari fitur yang dimiliki blogger. Tak usah belama-lama, langsung akan saya jelaskan caranya secara lengkap, silakan disimak :)

1. Masuk halaman Blogger in Draft, silakan login dengan akun blogger sobat
2. Di halaman utama terdapat daftar blog sobat, silakan klik Dashboard pada blog yang akan diedit faviconnya
   
   
   
3. Kemudian klik Edit pada elemen Favicon Setting yang terletak diatas elamen navbar
   
   
   
   
4. Akan muncul window baru, yaitu window favicon configuration
   
   
5. Silakan sobat pilih file icon yang ingin dipasang, gunakan file dengan ekstensi .ico karena file yang support adalah file icon .ico . Bagi sobat blogger ingin mengkonversi file JPG, PNG atau file lain ke .ICO dapat sobat lakukan dihttp://www.icoconverter.com/ atau situs konversi lainnya
   
6. Setelah itu klik Save untuk menyimpan setting yang telah dilakukan
   
   
   
7. Selesai, coba sobat buka blognya, dan favicon sudah berubah susai yang diganti tadi :)

Read more »

Yahoo Messenger Emoticons (Smileys) di Blogspot

Yahoo messenger emoticons adalah kumpulan smileys / ikon yang dimiliki oleh yahoo untuk menggambarkan atau mengekspresikan suasana perasaan kita pada saat kita chat sama teman-teman kita, ikon tersebut bisa dalam bentuk gambar yang bergerak maupun tidak, mungkin dari sobat blogger sudah tidak asing lagi dengan emoticon miliknya Yahoo ini bukan? Yahoo emoticons ini bisa kita lihat pada software Yahoo messenger, bagi yang belum punya software YM bisa di download di situsnya Yahoo! biasanya sih online installer sama seperti aplikasi Windows Live Writer saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google...

Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger

Secara default kotak komentar (form comment) Blogger platform tidak dilengkapi dengan emoticons, tapi sobat jangan khawatir dengan sedikit tips dan trik kita bisa mengakalinya dengan memasang dan menambahkan sedikit script yang berisi beberapa kumpulan Yahoo messenger emoticonsyang umum dipakai dalam chat.

Langkah-langkahnya adalah :

• Login di Blogger > Design > Edit HTML
• Centang pada Expand Widget Templates
• Cari kode dibawah ini

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

Copy kode dibawah ini kemudian letakkan (paste) diantara kode diatas

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #2b2b2b; padding: 5px; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Kemudian cari kode </body>

Copy kode dibawah ini dan paste tepat diatas kode </body>

<script src='http://bloggerpeer.googlecode.com/files/smiley.js' type='text/javascript'/><noscript><a href=http://bloggerpeer.blogspot.com target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript> 

Terakhir simpan dan sobat sudah bisa menggunakan emoticon dari Yahoo ini.

Read more »

Cara Buat Bintang Jatuh dari Kursor

Animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat

Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini...

 

Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

• Login di Blogger
• Pilih Design > Add gadget > HTML/Javascript
• Masukkan kode dibawah ini ke kolom HTML/Javascript

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat

Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat

Read more »

Cara Buat Tombol Back To Top di Blogspot

Tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini

Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut...

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

• Silahkan login di Blogger
• Pilih Design > Edit HTML > klik Expand Widget Template
• Cari kode </body>  (gunakan CTRL+F)
• Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- 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/AVvXsEhrnIFQ0nn1VBSA-HaysKv8jdFbd2LnZ7-y3WGomJhn8eJsj7d_iV_9NM6qMPpeqzKkpQkF2-se3dv7dK6HU2LMmx_WERtxFVug5pvDRlOGJJnYIJTq45JTcp0KmmQisVt6fl5cpN5LGMI/s1600/back-to-top.gif'/></a>

Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai

Read more »

Cara Mengganti Favicon di Blog

Cara Mengganti Favicon di Blog - Cara mengganti favicon di blogger. Favicon adalah icon/gambar yang terletak pada address bar dari suatu web browser. Setiap situs atau blog biasanya memiliki favicon.

Pada blogspot, favicon yang dibuat berupa logo blogger berwarna orange. Favicon ini tidak bisa diganti begitu saja melalui setting/pengaturannya. Lalu bagaimana jika anda ingin mengganti/merubah favicon ini?

Sebenarnya cara mengganti favicon blogger ini cukup mudah. Anda bisa menggantinya melalui pengeditan layout.

Membuat favicon
Pertama anda persiapkan terlebih dahulu gambar untuk favicon blog anda. Favicon dapat berupa .ico atau.gif. Jika belum memilikinya, langsung saja klik http://www.html-kit.com/favicon/....



Kemudian klik tombol browse dan cari gambar dari komputer anda untuk dijadikan favicon.



Klik tombol Generate FavIcon.ico.
Klik link Download FavIcon Package.



Anda akan mendapatkan file beformat .zip, extract file .zip tersebut.
Upload favicon.ico atau animated_favicon1.gif ke image hosting anda.Memasang favicon ke blogger

Masuk ke akun blogger anda.
Pilih menu Design (Tata Letak) » Edit HTML.
Cari kode di bawah ini.


<b:include data='blog' name='all-head-content'/>

Copy-paste kode berikut di bawah kode tadi.


<link href='url-gambar.ico' rel='shortcut icon'/>
atau


<link href='url-gambar.gif' rel='icon' type='image/gif'/>
Ganti tulisan berwarna merah dengan url favicon anda tadi.


Simpan template.
Setelah selesai melakukan pengeditan, sekarang lihat hasilnya. Jika anda melakukannya dengan benar, favicon ini akan tampil di address bar, sebelah kiri URL blog anda.

Untuk cara memasang favicon di blog selain blogspot juga bisa menggunakan kode di atas. Tetapi pengeditan HTML-nya mungkin sedikit berbeda.

Selamat mencoba!

Read more »

Membuat Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini....


Pertama-tama silahkan login di Blogger

• Klik Design > Page Element > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<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/AVvXsEjPXmADupgY8z2LpnkPSCNkUVIF9JRvqy02Qp2Hv7OhMdhPRq-uURTfJ2qLrKj2uuYlxYRNkw0ctKcAnxJnpa5-s1ZRCNhup_XAJbrPzRG85qwq4BI0Spw8xyDOQF0NZu3RyNH_o_mo6iI/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 = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan akun Twitter sobat
• Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgjY52jLVIbKyZ9pV4Pv6kgZ76HnA6gA-aBfkpaVu-ewtI5MSERZzlKpV31OIUvlCe-24qVm2yaJyfAMvMIWzdnurQxrNxrOesIue_uNW_C4PlBahQY_szH3Rhbi0vVUzUimYi0zz7Qo/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak8xECP6vC9zMNY7h-q8Hx1wluZ_tOzyV2HGJLFZ-wHZVzhPr6x9AFWZrrqnMGn_nnYxt8QQ9KvQlWYwYQO12ujwuzi8C9xnPU3A2tvLws4LzsSdhR1NIOUXs6PEYuUDEVJiobzQ9G8w/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaw974WGOtb2zvO39WTxXst1TlIl-_boHxNVOuoiJUfNwioi3_D94s9B5FeBmsbRH2gANZCNFn91-cYFyI2O3DVUrK0V2kTUmlIWw7w_2ZGxDzFT2uUkuJKo7KqctEq8oEL3QpyVZGPg/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNGFuc_xAaPVXtaa-j3vF8qapBSR_LfMNzmgN1jP29ejo4UgIEcyLsCKAQsXa560sGrAzhdbtsAKqZ5ZyesBAkIWw8ChCYupCvo6VARQZs1qF0QiCT-H2bvED-oyiIIclkVIx8JawrAq8/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftPlOjO9bwOwp4xRZ2EV0rqlbOEqjzdwIIQhoIk3A3jemPjY5toIg3bhVxhRlDk06NITAglD54cwJOP-krwY5-Vyr_jWx4Q478EPMVSk2QansN55webNEvFvtvAhd7dikwWTEMccF4_0/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtR12Ban7gdxLG5yHF9fg_Skk38FLV7Jt-_yVKCyYdxdBFQC6h5vYipTZOv36yEXE4jDMfDphyphenhyphenyPvyFSiLhYt2Bfp_jyTDHdE0oQ5JwqEzIE-O7-ta2MOG0prjJVa370pm9jenpXsAO-Y/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYwkiXtBUkdP0z9IDy349ZqFYpGTQGqLr2-yrKJQxuEAFFy5HhqaibJn_VTaiwkE2MXaHpJVKPo67zXZ3kk2z7CkPturx33tEEitdFVp4k1sIX6dS0kuHtTHdSRH4xU88RQsWOJ8dGuuI/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-hwzHXG4yg_Ws_0AO14hZcrmnRgx5ZEISA66XbcKmrfluPCktjuS25nC0poVLps1vNUsHxuyeW9XJmdzgb1ga7aKt1ghETegUmkbofODswp8KrbjR5RRP1rG0QiKpGZljotMNfp2eU8/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Read more »

Jangan Sembarangan BlogWalking

Jangan Sembarangan BlogWalking - Asal teman teman ketahui, blogwalking bukan sekedar kita mengunjungi sebuah blog lainnya dengan meninggalkan sebuah komentar atau pun tanda pertemanan blog dengan blog terkait.

Bahkan yang lebih parah, isi komennya dicopas. Jadi kronologisnya kayak gini : Berkunjung ke suatu Blog, langsung ke komen form, copas komen dari Blog sebelumnya, isi captcha, terus kabur ke blog lain dan melakukan hal yang sama, begitu seterusnya.
Tapi, men.. Setiap orang pasti pernah bikin salah kan?? Nggak apa-apa donk, kalo gue bikin salah. Yang penting dari kesalahan itu gue jadi mempelajari hal baru, yaitu 'Jangan asal blogwalking'. Saat gue berkunjung ke blog lain dan menemukan komen yang sama persis dengan komen yang ada di blog gue, gue baru menyadari bahwa tindakan semacem itu sesungguhnya kurang baik untuk dilakukan.


Kenapa gue bilang begitu? Karena itu tindakan yang egois. Tujuan gue berkomentar hanya agar mendapat kunjungan dan komen balik. Padahal fungsi dari form komentar bukan buat itu. Fungsi aslinya ya buat menyampaikan pendapat kita mengenai isi posting yang kita baca.


Makanya biar nggak makin banyak blogger-blogger sesat kayak gue, gue mau memberikan sedikit tips mengenai tata cara Blogwalking yang baik dan benar versi gue.

1) Jadilah komentator yang sopan
Perhatikan bahasa yang kita gunakan saat akan mengomentari blog orang. Ibarat tamu yang masuk ke rumah orang, ucapkan salam atau minimal basa basi apalah. Jangan cuma ninggalin nama tanpa komentar apa pun. Itu jleb, buat si empunya blogger. Jangan pake bahasa yang kasar juga.
"Blog lo keren abis, nyet!!" Walaupun maksudnya muji, tapi tetep aje jleb buat si empunya blogger. Mending jangan deh!

2) Belajar jadi komentator yang ikhlas
Yang gue maksud menjadi komentator ikhlas di sini adalah : berikanlah komentar, tanpa mengharapkan komentar balasan. Oke, mungkin ada yang berpendapat bahwa komen itu kayak cinta. Harus dibales, biar nggak nyesek. Tapi kita juga harus mengingat bahwa nggak semua blogger itu ramah.
Ada beberapa blogger yang nggak suka bersosialisasi, dan menganggap nggak perlu lah ramah tamah ke blogger lain. Toh, mereka ngeblog bukan buat jadi populer. Nah, jadi boleh-boleh aja ninggalin link URL blog kita di komen tapi jangan sewot andaikata blog kita nggak dikunjungi balik oleh si empunya blog.
Kalo emang identitas kita menarik, kepribadian kita menarik, isi blog kita menarik, dan kita juga suka menarik uang di ATM (woi, yang terakhir apaan?!!) gue yakin pengunjung akan datang untuk berkomentar dengan sendirinya. Walaupun prosesnya cukup memakan waktu.

3) Jadilah komentator yang nyambung
Sempatkan diri untuk membaca isi postnya walau sedikit agar komentar kita bisa nyambung  sama topik yang dibahas. Itu lebih berkesan ketimbang isi komen yang cuma basa basi kayak : Nice post, Mantaap, Kereen, dan sekawanannya. Ketara banget kalo kita nggak baca isinya.
Kalo bisa isi komennya juga berbobot. Misalnya nambahin informasi yang sesuai dengan isi posting. Atau komentar mengenai pemikiran kita soal topik yang dibahas. Gue yakin si empunya blog bakal lebih terkesan dengan komentar macem begini. Dan dengan senang hati berkunjung balik ke blog kita.

4) Jalinlah pertemanan
Sesekali kunjungi lagi orang-orang yang pernah berkunjung ke blog kita. Jangan abis ninggalin URL Blog dan dikunjungi terus udah. Nggak ada kelanjutan ceritanya lagi. Kalo emang nggak ada waktu, yah dikit dikit aja lah.. Misalnya minggu ini, mampir ke blognya si A dan B. Minggu depan, mampir ke blognya C dan D. Dan seterusnya.


Hindari cara-cara yang nggak etis kayak "Gue udah follow blog lo, follow back ya". Selain kesannya kayak merintah, cara ini cuma dipake ama orang-orang yang peduli kuantitas bukan kualitas. Mungkin punya followers banyak itu emang keren, tapi apa gunanya kalo nggak ada satupun yang mampir untuk baca blog kita.

5) Jadi Blogger Nggak Boleh Sombong
Jangan pilih-pilih teman kalo lagi blogwalking. Emang ada pendapat yang menyarankan untuk Blogwalking ke blog yang trafficnya udah tinggi. Tapi, percaya kata-kata gue. Blog dengan traffic tinggi itu yang komen juga bejibun. Kemungkinan komen kita bakal dibaca ama pemiliknya itu juga makin kecil.
Jadi, nggak ada salahnya untuk blogwalking ke blogger yang masih pemula. Selain kedatangan kita udah pasti akan disambut baik sama pemiliknya, kita juga membantu memberikan mood booster buat blogger blogger newbie tadi. Jangan pernah meremehkan blogger-blogger newbie, mungkin aja suatu hari nanti blog mereka trafficnya jadi lebih tinggi dari punya kita.

Read more »

Cara Memasang Widget CCTV Di Tampilan Blog

      Kesempatan ini saya akan memberikan tips / cara untuk meletakkan widget CCTV di laman blog para blogger.
       Cara memasang widget kamera CCTV yang layaknya sebagai CCTV blog kita, itu sangat gampang, mau tau gimana caranya ? Nih saya kasih dan semoga bermanfaat dan menambah keindahan blog sobat ya.
Gini dulu nih Gambar CCTV nya :

Baguskan ??? ikuti langkah berikut :
Pertama anda harus login dulu ke blog anda,
Kedua, Masuk ke rancangan,
Ketiga, Pilih Elemen laman,
Selanjutnya , klik Tambah Gadget,
Dan Pilih HTML/JavaScript,
Langkah terakhir yang harus anda lakukan, copy script yang ada dibawah ini dan paste kan di HTML/JavaScript. Setelah itu anda tinggal simpan, Dan........ Baguskan ?

ni scriptnya:

<script language="JavaScript" src="http://js4you.googlecode.com/files/cctv.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXtLGIKMGjBLrq1CbquTLeooqTyK7lHmIhrFw9u3N0HnG5DAc31XZYItBIG06kG6PzUAfPw8hzisq543KsC95xUFzUIQoFr-75xr4zodH-ER4KilIatRPydO2CJ_Gvj5c0tOo6_X-hwL4/s1600/cctv.gif")</script>

Demikianlah cara untuk membuat kamera CCTV pada halaman website anda, semoga bermanfaat artikel tentang cara meletakkan widget CCTV di blogger.

Read more »

Cara Membuat Blog Multi Bahasa

Berawal dari niat saya memajukan blog saya dengan mencari traffic dari luar negeri saya pun ingin menjadikan blog saya menjadi Multi Bahasa, artinya isi blog saya harus berbahasa Indonesia, English, Arab dan lain-lain. Sayangnya saya ini tidak bisa berbagai bahasa tersebut, kecuali English saya masih bisa sedikit.hhehe Akhirnya saya menemukan cara untuk menjadikan blog saya menjadi multi bahasa, tidak hanya bahasa Inggris tapi juga bahasa-bahasa lainnya dengan memanfaatkan "Google Translate". Dengan fitur ini Pageviewer kita bisa bisa melihat dan membaca konten kita dengan bahasa mereka masing-masing seperti bahasa Inggris, bahasa Jepang, Bahasa China dan lain-lain. Yang perlu diperhatikan adalah lebih baik kita menggunskan bahasa yang baku sehingga Google translate bisa menerjemahkannya dengan maksimal. 

Langsung saja ini dia caranya :

• Login ke Blog
• Masuk ke http://translate.google.co.id/translate_tools?hl=id
• Kemudian memilih apakah halaman web/blog kalian akan diterjemahkan semua atau sebagian saja
• Pilih bahasa web/blog kalian, saya menggunakan bahasa Indonesia
• Klik "Add to Blogger", bisa juga dengan mengkopi script yang ada. namun sedikit merepotkan menurut saya

• Pilih Blog yang akan kalian terjemahkan (jika kalian mempunyai 2/lebih)
• Beri nama widgetnnya
• klik "MENAMBAH WIDGET"

• Setelah itu kalian akan masuk ke pengaturan tata letak, letakkan widget tersebut dimana pun kalian suka.
• Lalu Simpan, selesai. hhehe

Bahasa Indonesia diterjemahkan ke bahasa Inggris

Bahasa Indonesia diterjemahkan ke bahasa Jepang

Itu dia cara membuat blog kita menjadi Multi Bahasa, tak perlu repot mempelajari berbagai bahasa untuk konten blog kita dapat dapat dimengerti orang dengan bahasa lain.hhehe Semoga bermanfaat yah ^_^

Read more »