Not Found

Senin, 08 April 2013

Cara Membuat Efek Banjir di Blog

Cara Membuat Efek Banjir di Blog (seperti gambar diatas) :

1. Login ke blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadget
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 dan lihat hasilnya. Selamat mencoba:))

Sumber:

Rabu, 06 Februari 2013

Cara Membuat Label Cloud Berwarna-warni

Setelah kemarin kita "belajar Tutorial Cara Membuat Label Green Cloud With Css3", kali ini kita akan belajar Cara Membuat Label Cloud Berwarna-warni.

Langkah pertama Sebelum membuat Label Cloud Menjadi Berwarna-warni,anda harus memasang widget label blog:
1. Pilih Tata Letak, kemudian Tambah Gadget
2. Lalu pilih Label dan pilih tampilkan Cloud
3. Klik Simpan jika sudah selesai.

Langkah kedua:
1. Masuk Ke Akun Blogger Anda Anda
2. Pilih ke menu Template
3. Kemudian klik Edit HTML
4. Centang Expand Widget Template
5. Kemudian cari kode ]]></b:skin>
6. Lalu copas/copy paste script di bawah ini,Lalu letakan di atas kode ]]></b:skin>

.label-size-1 a { font-size: 13px; text-decoration: none; color:#4B8A08; } .label-size-2 a { font-size: 15px; text-decoration: none; color:#DF0101; } .label-size-3 a { font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none; color:#045FB4; } .label-size-4 a { font-size: 18px; text-decoration: none; color:#DF7401; } .label-size-5 a { font-size: 23px; text-decoration: none; color:#045FB4; } .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover { text-decoration:underline;}

7. simpan dan lihat hasilnya
8. selamat mencoba

Cara Membuat Label Green Cloud with Css3

login blog
buka menu template --> edit HTML
lalu cari kode ]]></b:skin>
letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 4px 10px 4px 20px;
text-decoration: none;
color:#000000;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: relative !important;
background: #8dc63f;
float: left;
padding: 5px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover{
color:#C16E00;
}
.label-size{line-height:1.5;align:left;}

simpan
selamat mencoba :)

Senin, 17 Desember 2012

Cara Membuat Share Button Melayang

Cara membuat Share Button Twitter, Like Share, Google +1 Melayang. Widget buat share button. Bagi sobat yang belum mempunyai tombol share button alangkah baiknya sobat mempunyai widget ini pada blog sobat. Karena dengan widget ini kita akan lebih mudah bila kita ingin share-share artikel kita ke situs jejaring sosial seperti Facbook, twitter, google + dll.

Cara Membuat Share Button Melayang:
1. Login blog
2. Pilih Tata Letak
3. Pilih Add Gadget (HTML/Javascript)
4. Lalu pastekan kode dibawah ini

<style>
#pageshare {position:fixed; bottom:5%; right:0px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://ilovebloggink.blogspot.com/2012/12/cara-membuat-share-button-melayang.html" target="blank"><font color="blue">[Get Widget]</font></a></div>
</div>

Simpan dan lihat hasilnya. Selamat mencoba

Minggu, 16 Desember 2012

Cara Membuat Page Number Navigation With Colour

Page Number Navigation With Colour adalah widget yang berguna untuk navigasi ke artikel berikiutnya namun yang ini dalam bentuk nomor serta dengan berbagai warna. Untuk Demo Silahkan lihat menu beranda blog ini. Cara membuatnya simak langkah-langkah dibawah ini:

1. login
2. buka menu tata letak lalu add gadget (HTML/JavaScript)
3. lalu pilih salah satu dibawah ini sesuia selera sobat (warna)

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsOlw1yVT0crCNCh-6jVPsTPDnvaA5DNtq9VG2kifXlejkMRAcPxLifOddEJ3sz0chp41fUTuup_RV5a1ZNEv73At1wmvqV_mOatzL0X2A2X2ARXZhwgf2o0MLKOcEWfyHy7tleKCr2I/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>

<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsOlw1yVT0crCNCh-6jVPsTPDnvaA5DNtq9VG2kifXlejkMRAcPxLifOddEJ3sz0chp41fUTuup_RV5a1ZNEv73At1wmvqV_mOatzL0X2A2X2ARXZhwgf2o0MLKOcEWfyHy7tleKCr2I/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;
border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;
border:2px solid #5C8CFB;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
}.showpageOf{
margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
}.showpagePoint {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;
margin:0 3px 0 3px;padding:3px 10px;
line-height:30px;cursor:pointer;white-space:nowrap;
border:2px solid #5C8CFF;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
} </style>

<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsOlw1yVT0crCNCh-6jVPsTPDnvaA5DNtq9VG2kifXlejkMRAcPxLifOddEJ3sz0chp41fUTuup_RV5a1ZNEv73At1wmvqV_mOatzL0X2A2X2ARXZhwgf2o0MLKOcEWfyHy7tleKCr2I/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

4. simpan template dan coba lihat hasilnya. Selamat mencoba..

sumber

Sabtu, 15 Desember 2012

Css3 Beautiful Label Widget

Css3 Beautiful Labels Widget. Langsung saja saya kasih screen shootnya :

ok bagi sobat yang pengen tahu cara membuatnya silahkan simak cara membuat Css3 Beautiful Labels Widget

1. login blog
2. buka menu template > edit HTML > lanjutkan
3. lalu cari kode ]]></b:skin>
4. lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.label-size a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #996633;
border: 1px solid #DDA13C;
background: rgb(238,177,75);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;
background: rgb(240,183,86);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}

5. Simpan template dan lihat hasilnya.

Selasa, 11 Desember 2012

Memodifikasi Followers

Tutorial blog yang ringan, tapi mungkin bermanfaat, kita coba memodifikasi followers blogger. Biasanya followers dipasang langsung pada widget yang sudah tersedia di blogger, tapi kali ini kita akan memasangnya di widget HTML/Javascript.

Tertarik? Langsung saja ikuti langkah-langkah dibawah ini:

Masuk ke Rancangan
Klik Elemen Laman
Pilih Tambah Gadget
Klik yang HTML/JavaScript
Kemudian masukkan kode followers dibawah ini :

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>

<div id="div-eknxr14kfzlq" style="width:280px;border:1px solid #cccccc;"></div>

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#dedede';
skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
skin['ENDCAP_TEXT_COLOR'] = '#444';
skin['ENDCAP_LINK_COLOR'] = '#444';
skin['ALTERNATE_BG_COLOR'] = '#fff';
skin['CONTENT_BG_COLOR'] = '#f9f9f9';
skin['CONTENT_LINK_COLOR'] = '#444';
skin['CONTENT_TEXT_COLOR'] = '#444';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
skin['CONTENT_HEADLINE_COLOR'] = '#444';
skin['NUMBER_ROWS'] = '3';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-eknxr14kfzlq',
site: '06215030860304111239' },
skin);
</script>

Ganti kode yang berwarna merah dan orange dengan kode id blog sobat
Kode berwarna hijau adalah lebar widget, sesuaikan dengan template sobat
Kode warna ungu adalah warna widget blog, sobat bisa ganti. Kode Warna cek DISINI
Simpan.

Keterangan :

- Untuk mencari kode yang berwarna merah dan orange, jika sebelumnya sobat sudah memasang widget followers, maka sobat bisa klik kanan pada halaman blog kemudian klik “view page source” lalu klik CTRL+F dan ketik saja followers. Dari situ sobat dapat melihat kode id dan site dari blog sobat. Selamat mencoba.

Pages