Senin, 13 Juli 2009
Cara Membuat Efek Zoom Gambar pada Postingan

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ini ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>
.post img:hover {5. Simpanlah template sobat
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }
Tiap kali anda mengarahkan cursor mouse pada gambar di dalam posting blog maka animasi zoom akan muncul. Selamat mencoba trik diatas, good luck!!
Label:
Gambar,
Tips dan Triks
Cara Menambah Icon Smiley di Shoutmix

Pada kotak shoutmix kita tidak hanya bisa berbagi pesan singkat namun kita juga dapat menyertakan karakter smiley yang telah tersedia. Namun karena sedikitnya beberapa karakter smiley pada shoutmix, maka sobat dapat menambahkan lebih banyak karakter smiley lainnya secara manual. Untuk membuat trik yang satu ini ikuti langkah dibawahnya:
1. Masuk ke website ini ...http://www.getsmileyface.com/
2. Jika anda ingin menambahkan emoticon smiley klik link "smiley"
3. Klik gambar yang anda sukai
4. Pada bagian kotak diatas akan muncul url gambar smiley, langsung saja dikopi.
5. Selanjutya anda buka windows baru dan pergi ke situs Shoutmix
7. Setelah login pada Shoutmmix, pAda menu tab klik setting sehingga muncul kotak pilihan.
8. Klik link "Smiley"
9. Pada kotak dibawahnya disitu anda akan dimintai url gambar smiley. Jadi langsung saja paste url gambar smiley yang tadi anda kopi kemudian klik "add"
10. Jika anda ingin tambah icon smiley, kopi gambar yang lain dan paste pada kotak tersebut.
11. Terakhir jangan lupa untuk menyimpan setting anda..
Cobalah buka kotak smiley, maka anda sudah bisa melihat icon smiley yang baru....selamat mencoba!
Label:
Tips dan Triks,
Widget
Minggu, 12 Juli 2009
Menampilkan Icon Bergambar Sebelum Judul Posting

1. Carilah gambar yang anda ingin tampilkan.
2. Atur ukuran gambar sehingga ukurannya 50 x 50 pixel, kemudian upload file gambar ke file hosting kalian dan kopi url link gambar.
3. Masukkan url link gambar sobat dikode berwarna merah dibawah ini:
<img src="URL-LINK-GAMBAR" style="border-width: 0px;" />3. Login ke blogger
4. Masuk ke Rancangan -- Edit HTML, kemudian centang Expand Widget Template.
5. Carilah kode berikut ini <b:if cond='data:post.url'>
6. Letakkan kode HTML yang anda kopi tadi diatas kode <b:if cond='data:post.url'> sehingga terlihat seperti ini
<img src="http://www.blogger.com/LINK%20TO%20YOUR%20IMAGE%20HERE" style="border-width: 0px;" />7. Simpanlah template anda.
<b:if cond='data:post.url'>
Kini sobat dapat melihat icon bergambar sebelum judul posting. Selamat mencoba dan good luck!!!
Label:
Gambar,
Tips dan Triks
Menampilkan Twitter Status Update dengan Javascript

1. Login ke blogger.
2. Pilih Rancangan -- Elemen Laman
3. Tambahkan gadjet anda
4. Klik HTML JavaScript
5. Tambahkan kode dibawah ini:
<div style="background:#fff url(http://4.bp.blogspot.com/-lyshwq5tQvc/T7mN15chH2I/AAAAAAAADSA/3y8pgPVkUQo/s400/Widget%2BTwitter%2BBlog.png) no-repeat;padding-top:45px;padding-left:8px">Keterangan:
<script src="http://defecafe-blogspot.googlecode.com/files/widget_twitter.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#135a9e'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('defecafe').start();
</script>
</div>
- Isi kode berwarna biru diatas dengan ID twitter anda
- Kode berwarna merah andalah kotak twitter.
- Kode berwarna hijau adalah pengaturan lebar dan tinggi status pada kotak twitter
6 Langkah terakhir adalah simpan gadjet anda
Label:
Tips dan Triks,
Widget
Cara Membuat Tombol Digg pada Blog

Tombol Digg adalah adalah tombol social bookmarking yang cukup populer saat ini dan dapat meningkatkan banyak trafik untuk blog anda. Jika sobat ingin membuat posting blog lebih dikenal maka sebaiknya tambahkan tombol ini. Menambahkan tombol Digg pada blogger cukup mudah, berikut adalah caranya:
1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Back-up template sobat
4. Centang Expand widget template
5. Cari kode ini <data:post.body/>
6. Tambahkan kode dibawah ini sebelum kode diatas:
<div style='float:right; margin-left:10px;'>7. Simpan template sobat lalu lihat hasilnya!
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://defecafe-blogspot.googlecode.com/files/tombol_digg.js' type='text/javascript'/>
</div>
Label:
Tips dan Triks,
Widget
Menambahkan Tombol Twitter pada Posting

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Widget Template
4. Cari kode ini: <data:post.body/>
5. Tambahkan kode dibawah ini sebelum atau sesudah kode diatas:
<script type="text/javascript">Sedangkan tombol Twitter Compact tambahkan kode ini:
tweetmeme_url = '<data:post.url/>';
</script>Retweet this button on every post blogger
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>
<script type="text/javascript">6a. Jika sobat ingin menempatkan tombolnya disisi kanan gunakan kode ini:
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<div style='float:right; margin-left:10px;'>6b. Jike anda ingin menempatkan tombol di sisi kanan pakai kode ini:
Retweet Button Code Here
</div>
<div style='float:right; margin-left:10px;'>7. Hapus kode berwarna merah lalu masukkan kode Twitter
Retweet Button Code Here
</div>
8. Simpan template sobat lalu lihat hasilnya. Selamat mencoba! good luck!
Label:
Tips dan Triks,
Widget
Cara Pasang Snapshots pada Blog

1. Daftarkan diri anda pada Snapshot atau klik disini http://account.snap.com/signup.php
2. Klik tombol Continue
3. Kita bisa melakukan pengaturan untuk snap shots, mulai dari tema (theme), logo, dan bahasa (language) yang akan digunakan. Jika anda tidak ingin mengaturnya klik Skip.
4. Isi formulit pendaftaran dengan lengkap dan beri tanda centang pada I agree to Terms & Condition Above.
5. Klik Continue
6. Setelah itu akan tampil halaman untuk menginstal Snapshot pada blogger kemudian klik tombol Instal Now
7. Anda akan diiringi ke situs Blogger lalu login ke blog anda
8. Tambahkan widget Snapshot pada blog anda
Sekarang coba lihat blog anda. Jika muncul screen shot, maka pengaturannya berhasil. Met mencoba dan good luck!
Label:
Tips dan Triks,
Widget
Cara Mendaftar Domain Gratis co.cc di Blogger
Apakah anda tahu bahwa anda bisa memiliki domain baru yang gratis yaitu co.cc. Dengan co.cc domain anda akan lebih mudah dikenal, selain itu anda bisa mengontrol DNS Records, A, MX, dan CNAME records. Apakah sobat udah bosan domain yang sekarang dan ingin beralih ke domain seperti ini....
Caranya mudah saja....ikuti aja langkahnya berikut ini. Langkah ini saya akan golongkan ke dalam 2 tahap yang berbeda, yaitu tahap 1 dan tahap 2.
Tahap I
1. Klik di sini co.cc
2. Klik "Create an account now"
3. Kemudian anda akan disuruh untuk mengisi formulir pendaftaran. Isi formulir pendaftaran dengan lengkap dan jangan lupa klik tanda centang pada I accept the Terms of Service yang artinya anda menyetujui ketentuan layanan mereka.
4. Sobat akan diiringi ke halaman selanjutnya dan klik pada "Getting A New Domain"
5. Cek domain yang tersedia dengan memasukan nama domain yang sobat inginkan, klik tombol Check Availability.
6. Jika domain tersedia maka akan tertulis Domain Available jika gak tersedia atau Unavailable cobalah cari domain baru.
7. Klik Continue to registration.
8. Klik Set Up untuk melanjutkan setting pada hostnya.
9. Klik pada Please Domain Setup Now
10. Kita akan menggunakan hosting domain gratisan, maka sobat klik Zone Record,
11. Isi nama domain sobat kemudian isi data sebagai berikut TTL = 1 D, type = CNAME, value = ghs.google.com,
12. Setelah itu klik Setup dan akan ada pemberitahuan bahwa domain baru akan aktif kurang lebih 2 hari.
Tahap II
1. Login ke blogger
2. Klik "Pengaturan" dan klik lagi pada Publikasikan
3. Klik pada tulisan Berpindah ke custom domain
4. Kemudian klik Beralihlah ke Pengaturan Lanjut
5. Isi domain anda yang tadi didaftar di co.cc
Nah sudah selesai langkah diatas. Mudah bukan? he3 met mencoba dan good luck....!!!!
ReadFull Article ..

Tahap I
1. Klik di sini co.cc
2. Klik "Create an account now"
3. Kemudian anda akan disuruh untuk mengisi formulir pendaftaran. Isi formulir pendaftaran dengan lengkap dan jangan lupa klik tanda centang pada I accept the Terms of Service yang artinya anda menyetujui ketentuan layanan mereka.
4. Sobat akan diiringi ke halaman selanjutnya dan klik pada "Getting A New Domain"
5. Cek domain yang tersedia dengan memasukan nama domain yang sobat inginkan, klik tombol Check Availability.
6. Jika domain tersedia maka akan tertulis Domain Available jika gak tersedia atau Unavailable cobalah cari domain baru.
7. Klik Continue to registration.
8. Klik Set Up untuk melanjutkan setting pada hostnya.
9. Klik pada Please Domain Setup Now
10. Kita akan menggunakan hosting domain gratisan, maka sobat klik Zone Record,
11. Isi nama domain sobat kemudian isi data sebagai berikut TTL = 1 D, type = CNAME, value = ghs.google.com,
12. Setelah itu klik Setup dan akan ada pemberitahuan bahwa domain baru akan aktif kurang lebih 2 hari.
Tahap II
1. Login ke blogger
2. Klik "Pengaturan" dan klik lagi pada Publikasikan
3. Klik pada tulisan Berpindah ke custom domain
4. Kemudian klik Beralihlah ke Pengaturan Lanjut
5. Isi domain anda yang tadi didaftar di co.cc
Nah sudah selesai langkah diatas. Mudah bukan? he3 met mencoba dan good luck....!!!!
Label:
Tips dan Triks
Sabtu, 11 Juli 2009
Cara Membuat Dock Menu Horizontal di Blog

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode dibawah ini dibawah kode <head>
<script src='http://defecafe-blogspot.googlecode.com/files/jquery.js' type='text/javascript'></script>5. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
<script src='http://defecafe-blogspot.googlecode.com/files/interface.js' type='text/javascript'></script>
/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
6. Langkah selanjutnya yaitu kita menempatkan dock menu dibawah header blog, caranya cari kode dibawah ini:
<div id='header-wrapper'>7. Setelah ketemu kode diatas letakkan kode berikut ini dibawah kode diatas
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a>
</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
7. Terakhir simpan template sobat....
Selamat mencobanya dan Good Luck!!!!
Label:
Menu
Cara Mudah Memasang Widget Social Bookmarking

Tentunya manfaatnya yaitu pengunjung akan lebih mudah mengenal dan menjangkau blog anda, serta meningkatkan trafik blog. Jika anda belum tau tentang tombol social bookmarking, sobat bisa mengunjungi Social Bookmarking Widget Provider. Berikut ini saya akan memberikan trik bagaimana memasang tombol social bookmarking pada blog sobat dengan cara yang mudah:
1. Masuk ke website Addthis.com
2. Daftarkan diri anda lalu isi data-data yang diperlukan dan klik create account
3. Kemudian klik Get Your Button
4. Kopi kode Social Bookmarking Widget tersebut
5. Login ke blogger.
6. Masuk ke Rancangan -- Edit HTML
7. Klik expand widget template
8. Cari kode ini <b:includable id='post' var='post'> dan paste kode social bookmarking widget dibawahnya
9. Simpan template sobat
Sekarang sobat coba lihat hasilnya, Selamat mencoba!
Label:
Tips dan Triks,
Widget
Membuat Recent Post dengan Gambar atau Thumbnails

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">Keterangan:
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 25;
thumbheight = 25;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 4;
home_page = "http://defecafe.blogspot.com/";
</script>
<script src="http://defecafe-blogspot.googlecode.com/files/recentposts_thumbnail.js" type="text/javascript"></script>
- numposts = 4; Jumlah posting yang ingin ditampilkan
- thumbwidth = 25; ukuran lebar gambar
- thumbheight = 25; ukuran tinggi gambar
5. Ganti http://defecafe.blogspot.com/ dengan url blog anda
6. Simpanlah template anda dan selamat mencoba!!!
Label:
Gambar,
Tips dan Triks
Cara Membuat Readmore dengan Gambar

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Template Widget
4. Cari kode ini </head>
5. Kopi kode dibawah ini dan paste dibawah kode diatas:
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://defecafe-blogspot.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>Keterangan :
summary_noimg = 430; adalah jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 340; adalah jumlah karakter yang akan ditampilkan dengan gambar
img_thumb_height = 100; adalah ukuran tinggi gambar
img_thumb_width = 120; adalah lebar gambar
6. Carilah kode <data:post.body/>
7. Hapus kode diatas dan ganti dengan kode dibawah ini:
<b:if cond='data:blog.pageType != "item"'>Keterangan:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Kode berwarna merah diatas adalah gambar atau teks yang ingin ditampilkan pada readmore. Untuk contoh gambar sobat dapat lihat dibawah ini:
http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg | |
http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif | |
http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png | |
http://1.bp.blogspot.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif%27 | ![]() |
8. Simpan template sobat
Label:
Gambar
Cara Mencari Link yang Rusak pada Blog

Sulit bagi sobat untuk menemukan setiap link pada blog yang udah rusak. Saya akan memberikan tips kepada sobat untuk mengecek link pada blog yang udah tidak digunakan atau rusak. Anda dapat mencari link tersebut dengan mudah dan cepat. Jika sobat mencari link tersebut satu per satu maka anda akan membuang banyak waktu dan tenaga. Langsung saja ke prakteknya:
1. Kunjungi situs berikut ini "Broken Link Checker".
2. Sobat hanya perlu memasukan URL website atau blog.
3. Akan muncul daftar link dari blog sobat, dimana link yang rusak akan ditandai dengan tanda silang sedangkan link yang tidak rusak diberi tanda centang....
4. Apabila ada link blog sobat yang ditemukan rusak atau tidak bekerja maka sobat hanya perlu menghapusnya atau memperbaikinya.
Semoga bermanfaat dan selamat mencoba. Good luck!
Label:
Link,
Tips dan Triks,
Widget
Jumat, 10 Juli 2009
Cara Mengganti Background Blog dengan Gambar

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Jangan lupa backup template anda
4. Carilah kode CSS seperti dibawah ini
/* ------ navbar ------------- */
#navbar-iframe {display:none!important}
body{background:#ECECEC url(http://1.bp.blogspot.com/-dwhd6gmYsYI/T44HSYoz9bI/AAAAAAAADCs/qvfAAyUHep0/s400/background.jpg) scroll 0 0;
Keterangan:
- Kode diatas (body{background) adalah latar belakang blog sobat
- Kode berwarna biru adalah gambar latar belakang, sobat dapat gantikan dengan gambar yang sobat sukai
- Jika sobat ingin menggantikan latar belakang blog dengan warna cukup hapus saja kode url gambar diatas, lalu gantikan kode berwarna merah dengan warna latar belakang yang sobat sukai.
5. Simpan template sobat
Sekarang sobat tinggal lihat hasilnya. Good Luck dan Selamat mencoba!
Label:
Gambar
Cara Membuat Garis Melengkung Pada Sudut Kotak

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Back up template anda
4. Modifikasi kode CSS dengan cara mempaste mengkopi kode berwarna biru dibawah ini lalu paste ke kode CSS kotak posting atau gambar
border-1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 3px solid #A89D61;
}
.border-2 {
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
border: 3px solid #A89D61;
}
Hasilnya seperti ini
.circle {
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
border: 2px solid #A89D61;
background:#D2CCAD;
width: 200px;
height: 200px;
}
Label:
Kolom,
Tips dan Triks
Rabu, 08 Juli 2009
Cara Mudah Membuat Teks Area yang Unik

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ]]></b:skin>
4. Masukan kode teks area dibawah ini diatas kode ]]></b:skin>
6. Simpan Template sobat
Apabila sobat ingin menambahkan teks area pada posting maka sisipkan script yang berwarna merah seperti dibawah ini:
<textarea>Baguskan teks areanya, met mencoba........!!!!! Happy blogging
Tulisan anda disni
</textarea>
Label:
Teks,
Tips dan Triks
Cara Mudah Membuat Blockquote di Blog

1. Login ke blogger.
2. Pilih Rancangan -- edit HTML
3. Cari kode ini ]]></b:skin>
4. Letakkan salah satu kode dibawah ini sebelum kode diatas
Blockquote 1.
.post blockquote {Hasilnya seperti dibawah ini:
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }
.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}
Contoh Blockquote 1.Blockquote 2.
.post blockquote {Hasilnya seperti dibawah ini:
background-color: #FFFFFF;
border-left: 10px solid #8A2908;
border-right: 10px solid #8A2908;
margin: 1em 3em;
padding: .5em 1em;
font-size: 12px;
Contoh Blockquote 2.
Blockquote 3.
.post blockquote {Hasilnya seperti dibawah ini:
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : Courier, Arial, Verdana;
line-height:1.6;
background: url('http://3.bp.blogspot.com/-XHc6bsXTMvw/T47faFP2o_I/AAAAAAAADEk/k-icLJmzFz4/s400/w2b_codeicon.gif') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.post blockquote li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}
Contoh Blockquote 3.
5. Simpan template sobat
Untuk membuat blockquote pada posting sobat jangan lupa untuk menyertakan kode seperti dibawah ini pada tulisan atau script yang ingin dihighlight:
<blockquote>
Masukkan tulisan atau script disini
</blockquote>
Selamat mencoba, dan good luck!
Label:
Teks,
Tips dan Triks
Membuat Menu Hubungi Saya atau Menu Slide

1. Download scriptnya klik DISINI
2. Ekstraklah file itu dengan menggunakan WinZip, WinRAR
3. Setelah di ekstrak, akan menghasilkan dua file (ssm.js & ssmItems.js) yang akan kita edit hanya file ssmItem.js saja, buka file itu dengan menggunakan program teks editor seperti NotePad.
5. Isi file ssmItem.js seperti sebagai berikut ini. Kode-kode ini untuk mengatur tampilan menu hubungi saya.
YOffset=200;
XOffset=0;
staticYOffset=150;
slideSpeed=20
waitTime=100;
menuBGColor="#d1d8ec";
menuIsStatic="yes";
menuWidth=180;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="300";
barBGColor="#86629f";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="#ffffff";
barVAlign="center";
barWidth=15;
barText="Hubungi saya";
ssmItems[0]=["<center><img src=http://domain.com/gambarfoto.jpg><br>kata-kata-kamu<br><img src=http://domain.com/gambaremail.jpg> "]
buildMenu();
Untuk lebih jelasnya penjelasan dari kode diatas adalah sebagai berikut ini:
00. mengatur posisi menu pada baris y axis layar monitor (vertical)
01. mengatur posisi menu pada x axis layar monitor (horizontal)
02. untuk mengatur posisi vertical menu, pada layar monitor
03. kecepatan slide
04. waktu tunggu lamanya menu muncul setelah mouse menjauhi menu
05. untuk mengatur warna background menu, gunakan kolor picker dibawah posting ini untuk melihat kodenya
06. untuk men-set apakah menu harus tetap statis pada layar
07. Mengatur lebar menu. Harus kelipatan dari angka 10! Tanpa tanda kutip
08. jumlah kolom
09. jenis huruf header
10. ukuran huruf header
11. warna teks header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
12. warna backround header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
13. perataan teks header
14.perataan teks vertikal header
15. tinggi header
16. warna background bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
17. jenis huruf bar
18. ukuran huruf bar
19. warna huruf bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
20. perataan teks bar secara vertikal
21. lebar bar
22. kata2 yang akan muncul pada bar (hubungi saya)
23/24. ganti http://domain.com/gambarfoto.jpg dan http://domain.com/gambaremail.jpg dengan url dimana kamu upload gambar foto dan gambar email.dan jangan lupa ganti kata-kata-kamu dengan yang kamu inginkan
26. Buat menu
6. Jika sudah selesai mengedit file ssmItem.js simpan file tersebut, lalu upload-lah kedua file javascript itu ke server kamu, kamu bisa menggunakan googlepage untuk menghosting file itu
7. Kalau sudah di upload, jangan lupa untuk mengkopi alamat URL kedua file tersebut.
8. Sekarang saatnya memasukkan file java script tadi kedalam blog kita, silahkan ikuti langkah-langkah berikut ini :
9. Login ke Blogger klik Rancangan----> Edit HTML
10. Kopi dan paste kode/script berikut di atas kode </head>
<script src='http://defecafe-blogspot.googlepages.com/ssm.js' type='text/javascript'></script><script src='http://defecafe-blogspot.googlepages.com/ssmItems.js' type='text/javascript'></script>Silahkan ganti teks berwarna merah dengan url dimana kamu upload file javascript-nya
10. Simpan dan lihat blog sobat.
Label:
Menu,
Tips dan Triks
Cara Membuat Pop Up Dengan Ukuran Tertentu

1. Login ke blogger.
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukan kode ini dibawah ini:
<center><form onsubmit="window.open('http://defecafe.blogspot.com/','popupwindow','scrollbars=no, width=300,height=300');return true"><input type="submit" value="Buka Pop Up"></form></center>Keterangan:
- Kode berwarna hijau adalah lokasi url pop up
- Kode biru adalah lebar dan tinggi pop up
- Kode merah adalah tombol teks untuk membuka pop up
5. Simpan gadjet dan lihat hasilnya!!
Apabila pop-up sobat tidak muncul cobalah periksa pengaturan bowser, caranya:
1. Pada menu browser mislx. Firefox, pilih Tools -- Option
2. Pilih tab Content kemudian hapus centang Block Pop-up Windows
Selamat mencoba dan good luck!
Label:
Animasi,
Tips dan Triks
Membuat Alert Selamat Tinggal di Blog

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode </head>
4. Kopi dan paste kode dibawah ini sebelum kode </head>
<script type='text/javascript'>5. Simpan template anda
// goodbye alert
function goodbye(){
alert(' Selamat Tinggal ^_^ ');
}
parent.window.onunload=goodbye;
</script>
Sobat dapat mengganti kode berwarna merah dengan kata-kata pesan sendiri. Good Luck dan selamat mencoba!
Label:
Animasi
Selasa, 07 Juli 2009
Membuat Alert Ucapan Selamat Datang di Blog

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode </head>
4. Kopi dan paste kode dibawah ini sebelum kode </head>
<SCRIPT language='JavaScript'>alert("Welcome To My Blog");</SCRIPT>5. Simpan template anda
Sobat dapat mengganti kode berwarna merah diatas dengan kata-kata sendiri. Good luck dan selamat mencoba!
Label:
Animasi,
Tips dan Triks
Membuat Fungsi Redirect Blog

Agar lebih jelas, saya ambil salah satu contoh.
Selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik.
Cara buatnya gini loh:
1. Login ke blogger.
2. Pilih Tata letak dan klik edit HTML
3. Cari kode <head>
4. Letakan script dibawah ini dibawah kode <head> dan diatas kode ini </head>
Untuk template klasik gunakan kode ini:
<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini">
Untuk template baru gunakan kode ini:
<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini">
</meta>
Selamat mencoba!!!
Label:
Link,
Tips dan Triks
Membuat Refresh Otomatis pada Blog

Dengan menerapkan trik ini anda tidak perlu menekan refresh button (tombol) karena akan dilakukan secara otomatis. Untuk membuat trik ini pada blog sobat berikut ini adalah langkahnya:
1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode </head>
4. Letakkan kode berikut ini setelah kode </head>
<meta content=’300‘ http-equiv=’refresh’/>5. Simpan template anda.
Sedikit uraian kode diatas, content="300" --> angka 300 menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 300 detik. Angka ini jangan diatur terlalu cepat karena bisa menimbulkan pengunjung terganggu apabila halaman terlalu cepat di refresh.
Label:
Tips dan Triks
Cara Membuat Efek Shaking (Earthquake) di Blog

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Letakkan kode berikut ini diantara tag <head> dan </head>
<SCRIPT LANGUAGE="JavaScript">4. Kode kode dibawah ini lalu letakkan diantara tag <body> dan </body>
function shake(n) {
if (parent.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
parent.moveBy(0,i);
parent.moveBy(i,0);
parent.moveBy(0,-i);
parent.moveBy(-i,0);
}
}
}
}
</script>
<form>8. Simpan template sobat
<input type=button onClick="javascript:shake(2);" value="Click Me To Shake Your Screen">
</form>
Good Luck. Semoga bermanfaat....!!!
Label:
Animasi
Cara Membuat Rotating Banner

1. Login ke blogger.
2. Pilih Rancangan dan Klik Edit HTML
3. Letakkan script dibawah ini setelah kode ]]></b:skin>
<script type="text/javascript">Keterangan:
var banner= new Array()
banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
- Sobat tinggal ganti url banner/gambar yang ingin ditampilkan (kode berwarna biru)
- Jika sobat ingin menambah banner tinggal tambahkan script dibawah ini:
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
banner[5]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
Kemudian ganti kode berwarna hijau diatas dengan jumlah banner yang ditampilkan, misalnya 5 banner, maka hasilnya seperti ini:
Math.round(5*Math.random());
4. Simpan template anda dan lihat hasilnya
Selamat mencoba!!!!
Label:
Gambar
Cara Membuat iFrame pada Blog

Beberapa atribut atau kode yang digunakan dalam membuat iframe yaitu
- ALIGN ="left/right" --> Untuk mengatur posisi iframe
- WIDTH ="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen
- HEIGHT ="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen
- FRAMEBORDER ="garis pembatas" --> Untuk memberi garis pembatas
- SCROLLING ="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada
iframe
- SRC ="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada
iframe
Kali ini kita akan membuat iframe pada blog, cara membuatnya sangat simpel. Berikut ini saya akan membuat iframe untuk blog saya sendiri....http://defecafe.blogspot.com/
Kodenya seperti ini:
<iframe align="left" frameborder="5" src="http://defecafe.blogspot.com/" width="500" height="300" scrolling="auto"> </iframe>iFramenya akan terlihat seperti ini. Selamat mencoba....!!!
Label:
Gambar
Menghilangkan Tang dan Obeng pada Blog

1. Login ke blogger
2. Masuk ke Rancangan, klik pada Edit HTML
3. Cari kode ini ]]></b:skin>
4. Kopi dan paste kode dibawah ini tepat diatas kode ini ]]></b:skin>
.quickedit{5. Simpan template anda dan lihat hasilnya....
display:none;
}
Selamat mencoba....happy blogging
Label:
Gambar
Membuat Tanda Tangan Pada Posting Blog

Anda pun bisa membuatnya, karena caranya mudah. Untuk itu ikuti saja langkah berikut jika anda tertarik membuatnya. Marilah mencoba!
1. Kunjungi situs dibawah ini dan buatlah tanda tangan secara online
a. My live signature
b. 123 Pimpin
2. Setelah membuat tanda tangan tersebut upload gambar anda pada photobucket, atau file hosting lainnya
3. Kopilah kode gambar tersebut
4. Masuk ke Pengaturan pada blog anda
5. Klik Format pada pengaturan
6. Dibagian paling bawah paste kode gambar tadi pada kotak template posting
7. Cobalah untuk terbitkan sebuah posting, dan lihat hasilnya
Selain itu ada cara lainnya untuk memunculkan gambar tersebut pada semua posting. Caranya sebagai berikut:
1. Masuk ke Rancangan -- Edit HTML
2. Centang Expand template widget
3. Carilah kode <data:post.body/>
4. Letakkan kode berikut ini dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>5. Hapus kode berwarna biru lalu gantikan dengan kode gambar (tanda tangan)
<--KODE GAMBAR-->
</b:if>
6. Simpan template anda lalu lihat hasilnya
Label:
Gambar
Cara Membuat Efek Gambar Transparan pada Blog

Jika sobat ingin menampilkan gambar dengan sedikit sentuhan animasi maka trik ini dapat sobat terapkan di blog. Untuk itu ikuti langkah berikut ini untuk cara membuatnya.
1. Login ke blogger
2. Buatlah posting pada blog sobat
3. Masukkan kode berikut ini pada tab Edit HTML di posting.
<img src="Masukkan URL Gambar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />4. Masukkan url gambar pada tulisan berwarna merah!!
5. Terbitkan posting sobat dan lihat hasilnya
Selamat mencoba....!!!
Label:
Gambar
Cara Memasang Meta Tag pada Blog

Yang perlu diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming. Contoh pemakaian meta tag keyword yang salah adalah :
<meta name=”keywords” content=”blog, blog trik, tips blog, blog tutorial, blog hack>
Disini terlihat sekali bahwa kata “blog”, diulang lebih dari 3 kali
Untuk memasang meta tag caranya tidak sulit. Jika tertarik ikuti aja triknya berikut ini:
1. Login ke blogger.
2. Pilih Rancangan dan masuk ke Edit HTML
3. Cari kode ini <title><data:blog.pageTitle/></title>
4. Ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType == "index"'>5. Kemudian pasang kode meta tag dibawah ini tepat dibawah kode tadi
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta expr:content='data:blog.pageTitle + " - deskripsi blog sobat disini"' name='description'/>6. Ubah dan edit kode yang berwarna merah sesuai dengan isi blog dan keyword pada blog anda.
<meta expr:content='data:blog.pageTitle + ", keyword 1, keyword 2, keyword 3, dst "' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
7. Simpan template anda....Met mencoba dan happy blogging...!!!!
Label:
SEO
Membuat Read More yang Diikuti Judul Halaman

Bagi anda yang penasaran dan ingin tau bagaimana membuat readmore yang diikuti judul posting maka anda perlu mengikuti trik berikut ini.
1. Login ke blogger.
2. Pilih Rancangan dan klik Edit HTML
3. Klik centang pada Expand Template Widget (jangan lupa backup template anda)
4. Cari kode dibawah ini:
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>5. Gantikan kode yang berwarna merah dengan kode:
<p><data:post.body/></p>Keterangan:
<strong><a expr:href='data:post.url'>Lanjut membaca "<data:post.title/>" »» </a></strong>
Kode diatas ditambahkan apabila anda membuat readmore dengan loading halaman blog.
6. Tapi jika anda menggunakan readmore tanpa loading halaman blog maka cari kode dibawah ini:
<span id='showlink'>7. Hapus semua kode diatas dan gantikan dengan kode ini:
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore...</a></p>
</span>
<span id='showlink'>8. Simpan template anda. Selamat mencobanya!!!
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore “<data:post.title/></a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Readmore “<data:post.title/></a></p>
</span>
Label:
Link,
Tips dan Triks
Cara Menampilkan Hanya Judul Posting pada Label
Ketika menklik sebuah label pada blog akan muncul beberapa judul posting dan summary (rincian singkat). Hal tersebut tentunya akan memakan waktu loading yang lama pada blog anda apabila disertai dengan gambar. Sebelumnya saya udah pernah menjelaskan bagaimana membatasi jumlah tampilan label. Tapi kali ini ada sebuah tips baru dimana anda dapat menampilkan hanya judul posting pada label.
Ikuti saja langkah dibawah ini untuk membuatnya!
1. Login ke blogger.
2. Pilih Rancangan dan klik Edit HTML
3. Centang Expand Template Widget
4. Cari kode dibawah ini:
ReadFull Article ..
Ikuti saja langkah dibawah ini untuk membuatnya!
1. Login ke blogger.
2. Pilih Rancangan dan klik Edit HTML
3. Centang Expand Template Widget
4. Cari kode dibawah ini:
<!-- posts -->6. Ganti kode yang berwarna biru dengan kode berikut ini:
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.homepageUrl !=7. Simpanlah template anda dan lihat hasilnya!!!
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Label:
Tag - Label
Logo DoFollow Untuk Blog
Anda mungkin uda tau apa itu dofollow dan no follow. Jika anda dofollow maka dibawah ini adalah logo yang dapat anda sertakan pada blog agar pengunjung tahu bahwa blog anda dofollow. Ganti url http://www.defecafe.blogspot.com dengan url blog anda.

<a href="http://www.defecafe.blogspot.com" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/Dofollow1.png" border="0" alt="defecafe dofollow" /></a>

<a href="http://www.defecafe.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/Dofollow4.gif" border="0" alt="defecafe nofollow" /></a>

<a href="http://www.defecafe.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/dofollow2.png" border="0" alt="defecafe dofollow 1" /></a>

<a href="http://www.defecafe.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/ifollowblue.png" border="0" alt="defecafe dofollow 2" /></a>
Selamat memasangnya!!!> 
ReadFull Article ..
<a href="http://www.defecafe.blogspot.com" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/Dofollow1.png" border="0" alt="defecafe dofollow" /></a>
<a href="http://www.defecafe.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/Dofollow4.gif" border="0" alt="defecafe nofollow" /></a>
<a href="http://www.defecafe.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/dofollow2.png" border="0" alt="defecafe dofollow 1" /></a>
<a href="http://www.defecafe.blogspot.com/" target="_blank"><img src="http://i580.photobucket.com/albums/ss241/nobhita/ifollowblue.png" border="0" alt="defecafe dofollow 2" /></a>
Label:
Gambar
Langganan:
Postingan (Atom)