Cara Membuat Efek Banjir di Blog

Halo Sobat blogger kembali lagi bersama Blog Trik dan Tips. Sobat sudah pernah belum ngalamin rasanya banjir ditempat sobat tinggal. Banjir pasti sangat menggangu aktivitas yang sobat ingin lakukan. Namun kali ini, blog trik dan tips akan membahas cara membuat efek banjir di blog. Ingin tau caranya, langsung saja ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadjet
4. Pilih HTML/Javascript 
5. Masukan kode berikut ini:

<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="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script>

6. Simpan gadjet

Sekarang sobat sudah bisa melihat hasilnya. Efek ini akan membuat blog anda tenggelam akibat banjir. Akan muncul ikan dan gelembung udara di screen blog anda. Menarik bukan? Selamat mancobanya!!

Read More

Cara Membuat Bayi Merangkak di Blog

Selamat malam sobat blogger, bagaimana kabar anda? Kali ini Blog Trik dan Tips akan memberikan tutorial cara membuat efek bayi merangkak di blog. Efek ini sudah cukup menarik namun juga cukup menggangu karena si bayi akan menyoret screen blog anda. Dari pada basa basi mari langsung aja kita praktekan. Berikut ini adalah langkahnya:

1. Login ke blogger
2. Masuk ke Tata Letak/Rancangan
3. Tambah gadjet blog
4. Pilih HTML/Javascript
5. Kopi kode dibawah ini lalu paste pada gadjet:

<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://blogtrikdantips-blogspot.googlecode.com/files/efekbayiberjalan.js"></script>

6. Simpan gadjet 

Jika sobat udah mengikuti langkah diatas, sekarang dilihat aja hasilnya diblog. Semoga informasi ini bermanfaat. Selamat mencoba!

Read More

Membuat Efek Telur Ceplok di Blog

Ada yang lapar gak? Kalau makan mie goreng paling lezat pakai telur ceplok. Kebetulan karena ada waktu memposting artikel kali ini saya akan memberikan tips bagaimana cara membuat efek telur ceplok. Efek ini cukup mengganggu penampilan blog, tapi kalau ingin mencobanya gak ada salahnya:

1. Login ke blogger.
2. Masuk ke Tata Letak / Rancangan
3. Tambah gadjet, lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<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://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

5. Simpan gadjet

Kini sobat bisa melihat hasilnya diblog. Selamat mencobanya!

Read More

Cara Membuat Efek Bintang Pada Link

Bulan lalu saya pernah menulis sebuah posting cara membuat link berwarna warni, kali ini kita akan membuat link tersebut dengan efek bintang berkedip. Efek ini akan muncul apabila link tersebut disorot oleh cursor. Jika sobat ingin membuat blog lebih menarik dengan berbagai macam animasi maka trik yang satu ini mungkin saja bermanfaat. Efek bintang pada link udah saya terapkan di demo blog dan hasilnya sukses. Berikut ini saya akan berikan langkahnya kepada sobat:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode a:link{ atau a:visited{
4. Lalu letakkan kode dibawah ini dibawah kode tadi

a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmJj4HiJiwv6lq1ewsLAy-ctx0T6Qhs3fsVK7Arb5tltK6V5_2a1LesukqYYTAU1KnFqRQxGqmzQeMXyjOk8HqND60nt-TMburI1w62EyrzCDZTElFqRmFkznouWOHESSmIVUhwrBqog/s1600/stars.gif);}

Link akan mengeluarkan gambar seperti ini:

5. Simpan template anda lalu lihat hasilnya

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!

Read More

Membuat Efek Gelembung pada Cursor

Jika sobat ingin membuat cursor terlihat lebih bergaya dan menarik maka cobalah trik yang satu ini. Kali ini blog trik dan tips akan membahas bagaimana cara membuat efek gelembung pada cursor. Efek gelembung akan muncul apabila cursor digerakan dihalaman blog anda. Gelembung akan timbul lalu melayang ke atas halaman blog. Jika sobat penasaran dengan tampilkan efek cantik ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<noscript></noscript><!-- --><script type="text/javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/cursor_gelembung.js"></script><script type="text/javascript">

// <![CDATA[
var colours=new Array("#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
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;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

5. Simpan gadjet lalu lihat hasilnya

Jika sobat ingin mengubah warna gelembung pada cursor silahkan ganti kode yang berwarna biru diatas kode kode warna yang anda sukai. Selamat mencoba! Good Luck!

Read More

Membuat Efek Daun Berguguran di Blog

Selalu saja ada berbagai macam efek menarik yang bisa kita tampilkan di blog, salah satunya yaitu membuat efek daun berguguran. Efek ini tentunya berbeda dari efek-efek sebelumnya karena pola jatuhnya daun berayun-ayun. Cara membuat efek ini sangat mudah, ikuti saja langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML Javascript
4. Masukkan kode dibawah ini:

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/daun.js'/></script>

5. Simpan gadjet lalu lihat hasilnya

Selamat mencobanya! Good Luck!

Read More

Cara Membuat Efek Meteor Jatuh di Blog

Sobat blogger sudah pernah belum melihat efek meteor yang jatuh pada blog. Efek yang satu ini bisa dikatakan cukup menarik karena disertai dengan suara saat meteor bertabrakan. Efek meteor jatuh merupakan efek yang cukup saya sukai karena berbeda dengan efek-efek lainnya. Efek ini dibuat oleh Stephen Chapman. Jika sobat blogger penasaran bagaimana tampilan dari efek meteor jatuh silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/meteor_jatuh.js">
</script>

5. Simpan gadjet lalu lihat hasilnya

Selamat mencoba!

Read More

Cara Membuat Efek Gelembung di Blog

Sebelumnya blog trik dan tips telah memberikan info cara membuat efek love berjatuhan. Kali ini seperti judul diatas saya akan berbagi trik terbaru cara membuat efek gelembung di blog. Ada dua efek gelembung yang akan saya bagikan triknya ke sobat blogger. Efek yang pertama yaitu efek gelembung berwarna biru muda yang berjatuhan di blog sementara efek kedua yaitu efek gelembung terapung (float effect). Jika sobat penasaran bagaimana tampilan efeknya silahkan dicoba aja langkahnya dibawah ini:

Efek Pertama:
1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/bubble.js'/>

5. Simpan template sobat

Efek Kedua:
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkkan kode berikut ini:

<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/bubble2.js"></script>

5. Simpan gadjet

Read More

Cara Membuat Efek Love Berjatuhan di Blog

Seperti yang sudah saya janjikan sebelumnya kita akan membuat efek-efek yang manarik di blog sobat. Kali ini blog trik dan tips akan memberikan trik untuk membuat efek love berjatuhan di blog sobat. Efek ini sangat cocok untuk para wanita yang ingin membuat blognya agar terlihat lebih girly dan romantis. Cara membuatnya sangat mudah, langsung saja ikuti langkahnya dibawah ini

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML JavaScript
4. Masukkan kode berikut ini:

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/love_berjatuhan.js'></script>

5. Simpan gadjet lalu lihat hasilnya

Selamat mencoba efek ini!

Read More

Cara Membuat Efek Kembang Api di Blog

Udah beberapa minggu ini saya belum mengupdate posting yang baru. Kebetulan karena ada kesempatan menulis, beberapa hari ke depan blog trik dan tips akan memberikan berbagai macam trik untuk membuat animasi pada blog sobat. Untuk kali ini kita akan membuat animasi yang manarik dan juga bisa menjadi inspirasi buat teman-teman blogger lainnya. Animasi yang akan kita buat yaitu efek kembang api pada blog. Jika sobat tertarik bagaimana tampilan dari animasi ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode </body>
4. Paste kode dibawah ini diatas kode </body>

<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/fireworks1.js"></script>

5. Simpan template sobat dan lihat hasilnya

Jika sobat ingin membuat efek kembang api yang berbeda bisa dilihat langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

5. Simpan gadjet sobat dan lihat hasilnya

Selamat mencoba!

Read More

Membuat Efek Hover Transparan pada Gambar

Anda bisa membuat berbagai macam efek hover pada objek yang anda inginkan di blog. Salah satunya yaitu membuat efek hover transparan pada gambar. Efek hover ini akan nampak apabila anda mengarahkan cursor mouse pada object. Jika cursor mouse berada tepat diatas gambar maka gambar tersebut akan menjadi normal, namun jika anda tidak mengarahkan cursor pada gambar maka gambar tersebut menjadi transparan. Jika sobat ingin tau cara membuat efek tersebut ikuti langkahnya dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode ]]></b:skin>
4. Lalu tambahkan kode Css berikut ini diatas kode ]]></b:skin>

a.thumbopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

5. Simpan template anda.

Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini

<a href="http://www.blogtrikdantips.blogspot.com" class="thumbopacity" ><img border="0" src="................................jpg" /></a>

Keterangan:
- Kode berwarna merah andalah adalah url blog
- Kode berwarna biru adalah url gambar

Read More

Membuat Page Peel Join Us On Facebook

Page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar disamping. Page peel biasanya berada pada bagian sudut atas dari blog anda. Efek page peel ada yang statis juga ada yang dinamik. Page peel ini umumnya digunakan untuk berbagai tujuan salah satunya yaitu untuk mempromosikan iklan. Namun pada trik dan tips kali ini kita membuat page peel dengan efek Join US on Facebook. Jadi jika seseorang pada blog anda mengklik page peel tersebut maka dia akan diarahkan ke halaman page facebook anda. Jika anda penasaran bagaimana membuat page peel efek ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Design --> Klik Edit HTML
3. Cari kode </head>
4. Letakan script dibawah ini diatas kode </head>

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/blogtrikdantips &#39;</script>
<script src='https://sites.google.com/site/ivennuary/script-ivennuary/page-peel-effect/page_peel_effect.js/' type='text/javascript'/>

5. Ganti kode berwarna merah dengan url halaman facebook anda.
6. Simpan template

Mudah saja kan membuatnya, dengan tambahan efek page feel tersebut pada blog maka akan semakin banyak pengunjung yang bergabung dengan page facebook milik anda. Semoga artikel ini bermanfaaat......

Read More

Membuat Sitemap atau Daftar Isi Accordion pada Blog

Kali ini saya berbagi tutorial untuk meningkatkan Page Rank (Ranking Halaman) pada blog anda.. Pertanyaannya bagaimana cara membuatnya? Mudah saja jawabannya yaitu buatlah sitemap atau daftar isi blog anda. Ketika anda adalah pengguna wordpress maka sangat mudah untuk membuatnya, tetapi jika anda pengguna blogger jangan cemas karena saya akan memberikan trik dan tips cara membuat site map. Site Map yang akan kita buat akan menggunakan Javascript Accordion milik Abu farman. Site Map ini dilengkapi dengan efek SHOW HIDE yang sangat keren. Jadi sekarang saya akan kasih tutorial bagaimana membuat SEO Friendly Sitemap (Tabel Contents) with Accordion untuk blog anda.

1. Masuk ke Blogger
2. Pilih Posting - Edit Laman
3. Pilih Laman Baru, Masukan judul Posting misalnya SITEMAP BLOG TRIK DAN TIPS
4. Terakhir Paste kode dibawah ini:

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.blogtrikdantips.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

5. Ubah kode http://blogtrikdantips.blogspot.com dengan url blog anda
6. Terbitkan posting anda lalu lihat hasilnya

Ok itu saja, sangat mudahkan untuk membuatnya! Tentunya dengan sitemap tersebut penunjung anda akan betah di blog sobat dan tentunya blog menjadi lebih SEO Friendly. Terima kasih telah berkunjung ke blog saya, semoga artikel ini bermanfat. Jangan lupa berkomentar ya.....

Read More

Cara Memasang Recommended Slide Out di Blog

Widget Recommended Slide Out dapat membuat pengunjung menyukai situs anda dengan efek animasinya yang keren. Widget semacam ini pernah popular di beberapa situs ternama seperti New York Times, Mashable, Times of India dan lain-lain. Widget ini mengajak pengunjung untuk membaca artikel lainnya di blog anda. Widget jquery ini akan muncul seperti slide ketika pengujung melihat halaman yang paling bawah. Recommended slide out akan menampilkan posting acak pada blog anda. Anda tidak perlu kuatir dengan loading page blog karena widget ini telah dimodifikasi sehingga tidak membuat halaman menjadi berat.

1. Untuk membuatnya silahkan kunjungi situs BloggerPlugins.org atau KLIK DISINI
2. Pada situs tersebut klik icon blogger yang tampak seperti dibawah ini:

3. Akan muncul jendela baru, lalu klik Menambah Widget

Widget anda akan tersimpan pada Elemen Halaman. Jika anda ingin melihatnya, maka buka posting dari halaman anda, lalu scroll ke halaman paling bawah. Anda akan melihat recommended post slideout muncul dari sudut kanan. Selamat mencobanya!

Read More

Efek Link Nudging Pada Label Blog

Trik dan Tips kali ini yaitu kita akan membuat Link Nudging dengan menggunakan Jquery dan Javascipt. Efek link nudging ini membuat link bergoyang dengan halus ketika mouse diarahkan diatas link tersebut. Efek ini akan menambah keindahan dari blog anda. Link nudging kali ini kita akan terapkan pada label atau kategori blog. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:

1. Masuk ke Rancangan--> Edit HTML
2. Cari kode </head>
3. Letakkan script dibawah ini diatas kode </head>

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

Keterangan: Kode Jquery diatas sudah umum digunakan, jadi jika template anda sudah ada kode tersebut tidak usah memasukan kode jquery diatas.

4. Tambahkan kode dibawah ini dan letakan dibawah kode jquery tadi:

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

5. Simpan template anda lalu liat hasilnya.

Jika anda ingin melihat link nudging bekerja pada label maka anda harus menambahkan widget (gadjet) label pada blog. Pilih Label dengan tampilan "Daftar". Selamat mencobanya!!

Read More

Membuat Efek Link Nudging Menggunakan Kode CSS

Trik yang satu ini mudah untuk dibuat, jika anda ingin menambah efek pada posting atau widget. Efek link nudging adalah efek yang membuat objek bergeser ketika mouse over (cursor diatasnya). Efek ini bisa diterapkan di gambar ataupun tulisan. Ada juga yang menerapkan efek ini pada label (biasanya daftar label yang vertikal). Link nudging yang kita buat ini tidak membuat blog anda menjadi berat jadi tidak usah kuatir dengan loading blog anda. Bagaimana menurut anda, jika tertarik untuk membuatnya langsung saja ikuti trik yang satu ini:

1. Masuk ke Rancangan --> Edit HTML
2. Tambahkan kode berikut diatas kode ]]></b:skin>

/*--- Link Nudging Effect ---*/
.nudge {
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.nudge:hover {
margin-left: 25px;
padding-left: 5px;
}

3. Simpan template anda
4. Untuk menambahkan link nudging pada postingan tambahkan kode berikut ini:

Link Nudging pada Text

<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>

Link Nudging pada Gambar

<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>

Keterangan:
- Ganti kalimat "Disini letakkan URL" dengan link anda
- Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan

Read More

Membuat Buku Tamu dengan Efek Show Hide

Buku tamu berfungsi untuk meninggalkan pesan dari pengunjung yang datang ke blog kita. Kita bisa memperoleh buku tamu dari chatbox, shoutbox (berbayar), dll. Selain itu ada juga beberapa cara kita menempatkan buku tamu pada halaman blog. Semuanya itu tergantung dari selera kita masing-masing. Biasanya ada yang menempatkan buku tamu pada sidebar dan footer, namun ada juga yang menempatkan buku tamunya di sudut blog "menyembunyikan buku tamu dengan efek slide". Kali ini kita akan membuat penempatan buku tamu dengan cara Show Hide. Jika penasaran ikuti langkahnya berikut ini:

1. Masuk ke Rancangan -- Elemen Laman
2. Tambahkan gadjet lalu pilih HTML/Javascript
3. Masukan kode di bawah ini:

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #00ff00;
-moz-box-shadow: -2px 2px 25px lime;
background:#000 no-repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url();">


<!-- Masukan Kode Cbox Anda -->

</div>
</div>
</div>
<br/>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGF7_p0UKejlvKyix1LNuhcnDsOt76BgT3_zU4B6AOhbthMSyS6ke1Cx_o8m_Mzc-XRkh6fkPZj_H27V4gOzT22kTjdDu2hGKEPIWGRTqxmkBEQ2pIIjaWIVDVIUFRXV6bhVOb2Ci9WOTI/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>


<div style='display:scroll; position:fixed; top:80px; left:3px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif" /></a>
</div>

Keterangan:
- Anda dapat mengedit kode diatas untuk tampilan dan penempatan buku tamu

4. Masukan kode buku tamu anda pada kode diatas yang berwarna merah
5. Simpan gadjet dan lihat hasilnya

Selamat mancoba, semoga artikel ini bermanfaat!

Read More

Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Rancangan -- Edit HTML
3. Masukan script jquery berikut ini diatas </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});
</script>

5. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;

7. Simpan template sobat dan lihat hasilnya.

Read More

Thumbnail Gallery dengan efek JQuery pada Heading dan Caption

Untuk membuat blog anda lebih creative maka anda perlu membuat sesuatu yang berbeda. Kali ini Blog Trik dan Tips akan memberikan trik untuk membuat Thumbnail Gallery dengan efek JQuery pada bagian heading dan caption. Thumbnail Gallery menampilkan efek heading serta caption apabila cursor mouse anda berada diatas gambar. Untuk membuatnya sangat mudah. Ikuti saja langkah berikut ini:

1. Login ke blogger
2. Klik Rancangan -- Edit HTML
3. Centang Expand template widget
4. Masukan script berikut ini sebelum code </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});</script>

5. Masukan kode CSS berikut sebelum ]]></b:skin>

<!--Jquery-Thumbnail-www.blogtrikdantips.blogspot.com-BEGIN-->
.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:350px;
height:186px;
}
.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:350px;
/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;

}
.photo .heading {
/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}

.photo .caption {
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-50px;
}

/* styling of the classes*/
.photo .heading span {

color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#999;
font-size:12px;
display:block;
padding:5px 10px 0 10px;
}
<!--Jquery-Thumbnail-http://blogtrikdantips.blogspot.com-END-->

6. Simpan template sobat
7. Masuk ke Rancangan -- Elemen Laman. Kemudian tambahkan gadjet lalu pilih HTML Javascript. Masukan kode dibawah ini:

<div class="photo">
<div class="heading"><span>Judul Thumbnail Gallery</span></div>
<img src="http://4.bp.blogspot.com/_kmq5S6nnKMQ/SlX3s-xJYOI/AAAAAAAAAV8/cEOKCUQoyL4/s200/konversi.jpg" width="340px" height="175" alt="" />
<div class="caption"><span>Tulislah Caption Thumbnail Gallery Disini</span></div>
</div>

Keterangan:
- Kode berwarna merah diatas adalah judul thumbnail gallery
- Kode berwarna ungu adalah gambar thumbnail gallery
- Kode berwarna hijau adalah lebar dan tinggi (ukuran) thumbnail gallery
- Kode berwarna biru adalah caption thumbnail gallery

8. Simpan gadjet sobat dan lihat hasilnya

Read More

Membuat Slide Show dan Caption - JQuery

Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat efek Slide Show dan Caption. Slide show ini akan menampilkan beberapa gambar dan caption (deskripsi singkat dari gambar tersebut. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog dan biasanya digunakan untuk menampilkan foto serta informasi yang menarik untuk dilihat oleh pengunjung. Untuk melihat demonya KLIK DISINI. Jika sobat ingin membuat Slide Show dan Caption ikuti triknya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand template widet
4. Masukan script dibawah ini setelah kode <head>:

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}
//]]>
</script>
<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Keterangan: kode berwarna merad adalah tinggi dan lebar slideshow dan caption, sobat dapat sesuaikan atau merubahnya sesuai dengan ukuran image yang ingin ditampilkan.

5. Simpan Template sobat
6. Masukan kode berikut ini pada gadjet sobat, caranya masuk ke Rancangan --Elemen Laman, tambahkan gadjet lalu pilih HTML/Javascript

<ul class="slideshow">
<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJIlq-AfSIyL0SWD33iZOmOASdfG41zUe0okVsxJ_QIdAX8WLrSSkGeeCpR2FX_eAqByls4Z36yzX997_C9q8-5VEnDp7O-sOla-RxjRS_-98be5rGFhOhKOeOy4PuVkLVsKCRW8kPrk/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0eVyIc2DQxxfAO2qYTliVrrHMtPu0_k6T6cWQBuVU5Vxpz-lRs-3o05cx4d-Kieq_JMWGb-7PLT07r7t1g_UCBNOD50URdcvQbeSz8qvY2NjePtTo0zA8nQ6LXuIUb-Ukya6kDZC1dk/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtoj6QvQIlks8DpwWZsJzeKRdwdObU6JNVPIwcnlaUiX44pRk13mqWZ9_Y737Pl_joBTgsMpA-fZ2QuCfswYXROt5bEIjrUwOcSOkrUTpxz71AQS6UCNKRN0teHUJX73ZsEhYSbqVcMI/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="http://blogtrikdantips.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrsMxlK-xR9-UlptRrogbe3zM4fEQlMrOr8dLnBTdsRZqZrxeAJU0dSyCUU29lYf7LhRO_xi36BdDwhoDnexhJGTFzyH8SXTYJRwuNlA6JryxbJwKEDEeDXmHzonFINDj55zMw087ovY/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Keterangan: Ubahlah alamat url, url gambar, dan caption diatas sesuai keinginan sobat

7. Simpan gadjet dan lihat hasilnya

Read More