Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Thursday, September 13, 2012

Cara Membuat Kotak Fanpage Facebook Hitam Putih

Fanpage Facebook Hitam Putih


Jika kamu merasa bosan dengan kotak fans facebook kamu, kali ini saya akan memberikan sebuah tutorial yang dapat mengubah kotak fans facebook kamu menjadi berwarna hitam putih. Pokoknya keren dan mantap deh :) Lihat caranya di bawah ini yah.

1. Login ke akun blogger kamu


2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini


3. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.


/* Facebook Black and White by http://hzndi.blogspot.com*/


#FBox{background-color:#f6f6f6;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #ccc;height:230px;position:relative;margin-bottom:10px;width:292px;padding:0 10px 15px 0;}
#FBox:before,#FBox:after{background:#f7f7f7;border:1px solid #aaa;border-top:none;bottom:-3px;content:"";height:1px;left:2px;position:absolute;right:2px}
#FBox:after{bottom:-5px;box-shadow:0 0 2px #aaa;left:4px;right:4px}
#FBox {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray;-webkit-filter: grayscale(1);}
#FBox:hover {filter: none;-webkit-filter: grayscale(0);}
/* Facebook Black and White by http://hzndi.blogspot.com*/

4. Simpan template, namun masih belum selesai.

5. Kemudian kamu klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode   Fans Facebook kamu di dalam kotak tersebut.


<div id='FBox'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/hzndi&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23F7F7F7&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:292px; height:238px;" ></iframe>
</div>

Ganti "hzndi" dengan username fans page facebook kamu

6. Simpan dan kamu lihat hasilnya :) sudah saya coba dan berhasil dengan baik.

Thursday, August 30, 2012

Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan

Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan

Pentingnya memasang widget subcription adalah untuk meningkatkan trafik pengunjung kamu. Di dalam widget ini dapat meningkatkan jumlah pelanggan pembaca setia kamu, fans facebook kamu serta follower kamu di twitter. Selain itu widget ini sudah memiliki kotak subscribe, kotak share postingan dari addthis, kotak fanpage facebook juga ada. Komplit banget dah pokoknya. Oh iya, widget ini dibuat oleh topbloggingidea.com, mungkin untuk demo langsungnya bisa kamu lihat disini

Widget ini juga tidak terlalu memberatkan blog kok. Sizenya cuma 10kb :D ! bagaimana ? sangat cantik dan ringan bukan ? saya saja mau pasang widget yang keren ini hehe. Langsung kamu lihat caranya di bawah ini ok.

1. Login ke Blogger.com

2. Klik Template --> Kemudian kamu Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini :
3. Masih dibagian Template, sekarang kamu klik Edit HTML --> Lanjutkan --> Centang Expand Template Widget --> Cari kode <data:post.body/>. Nantinya kamu akan menemukan bebrapa kode <data:post.body/>, maka kamu pilih yang pertama atau yang kedua. Setelah itu kamu salin kode di bawah ini :

<!--No Ordinary Social Subscription Widget--> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<style> 
.tbibox { 
background: #fff; 
border: 1px solid #ddd; 
height: 360px; 
margin: 10px auto; 
padding: 10px; 
width: 572px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
.tbisubscribe { 
border: 1px solid #D3D3D3; 
padding: 8px; 
width: 300px; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
.tbisubscribe:hover { 
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); 
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); 
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); 
.tbimailbox { 
border: 1px solid #D3D3D3; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; 
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; 
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; 
color: #666; 
font: 14px "trebuchet ms", sans-serif; 
padding: 7px 15px; 
width: 160px; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
.tbimailbox:hover { 
-webkit-box-shadow: none; 
box-shadow: none; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
.tbisubmit { 
font: bold 12px Tahoma, Geneva, sans-serif; 
font-style: normal; 
color: #ffffff; 
background: #ff5714; 
border: 0px solid #ffffff; 
text-shadow: 0px -1px 1px #222222; 
box-shadow: 2px 2px 5px #000000; 
-moz-box-shadow: 2px 2px 5px #000000; 
-webkit-box-shadow: 2px 2px 5px #000000; 
border-radius: 10px 10px 10px 10px; 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
padding: 8px 15px; 
cursor: pointer; 
margin: 0 auto; 
.tbisubmit:active { 
cursor: pointer; 
position: relative; 
top: 2px; 
.tbisubmit::-moz-focus-inner { 
border: 0; 
padding: 0; 
margin: 0; 
.tbisharebox { 
border: 1px solid #D3D3D3; 
margin: -157px 0 0 330px; 
padding: 8px; 
width: 225px; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
.tbisharebox:hover { 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
</style> 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> 
<div class='tbibox'> 
<div class='tbisubscribe'> 
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div> 
<div style='margin: 10px 0 0 6px;'> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' 
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Masukkan-ID-Feedburner-Kamu&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' 
style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='Masukkan-ID-Feedburner-Kamu' /> 
<input name='loc' type='hidden' value='en_US' /> 
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' 
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 
type='text' value='Enter your email...' /> 
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/> 
</form> 
</div> 
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div> 
<div style='margin: -32px 0 0 120px;'> 
<a href='Masukkan-URL-FACEBOOK-Kamu' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj760hOidC0RXFjBivuiTvyDpcwYJFSGoQADPLZQC_FEceFjL57Cv7iq3pEob-1omyZCXuwx2YAyKD2J_do0_fHoMKvRwJsQxozVN81n-PcrKin0oyymFu3pL5B4YJJfPQVTTLktGD6-Q/s32/facebook500.png' alt='facebook'/></a> 

<a href='Masukkan-URL-TWITTER-Kamu' rel='nofollow' target='_blank' 
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9HO7re5WuIWRF3U1NKCjUIpPUQ7-yxxik9APvYISXrX86qmNJhIN5LfxbK3P707rln0w0qbUYhcTnyZpqLplWvoRK7ZafMBlXfp4AWzx3nmW3aLvmc_FDaTWhjRB370jPWgytGhbSNSA/s32/twitter.png' alt='twitter'/></a> 

<a href='Masukkan-URL-GOOGLE-PLUS-Kamu' rel='nofollow' target='_blank' 
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rONXVAB7Xn-su6yXkWZ6EXs2-_-gE_DP392RYXCfzix3ck9D1EIK5SYhFIepmagO3WFI0rUUwXf7xt4ZhnjBuPITbjoJZ_7df3usZlmptMyo6vBq8U5dbG8eR-o2nMyjKuIdE50gAs4/s32/googleplus-revised.png' alt='gplus'/></a> 

<a href='Masukkan-URL-PINTEREST-Kamu' rel='nofollow' target='_blank' 
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7mvc6Y_SpLVaq1fE6Y6bxcrwjI4uIzPUg8gZHiH9qDlX0shXa4g4HCpCmFina0JVlmkaLTV2RWADA9HIIbpwwXDYn8_fYAsZFoKaHLyULx9GIA_yxCQEfLPfAfonyddnw90L1yhyRdzU/s32/pinterest.png' alt='pinterest'/></a> 

<a href='Masukkan-URL-RSS/FEED-Kamu' rel='nofollow' target='_blank' 
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG6TPG1JXdzC4uPmqJ0CJMqdZIoJ7EVMZ-2dEFhFn4tsZuCsok8EJQiTGXz4lVMb1r3FscZUO-TfTvH8psHirzvUQD9qR1Sbegt9SSF8gkuyP2-mt4-7-6Yrp6nlTNQIkl8NrDg-HN3P4/s32/rss.png' alt='rss'/></a> 
</div> 
</div> 
<div class='tbisharebox'> 
<script type='text/javascript'> 
var switchTo5x = true; 
</script> 
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> 
<script type='text/javascript'> 
stLight.options({ 
onhover: false 
}); 
</script> 
<div style='margin: 5px 5px;'> 
<span class='st_fblike_hcount' displaytext=''></span> 
</div> 
<div style='margin: -30px -20px 0 0; float: right;'> 
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' 
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' 
data-count='horizontal'  data-lang='en'></a> 
<b:if cond='data:post.isFirstPost'> 
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script> 
</b:if> 
</div> 
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'> 
<a class='addthis_counter'></a> 
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script> 
</div> 
<div style='margin: 5px 5px;'> 
<su:badge layout='1'></su:badge> 
<script type='text/javascript'> 
(function () { 
var li = document.createElement('script'); 
li.type = 'text/javascript'; 
li.async = true; 
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(li, s); 
})(); 
</script> 
</div> 
</div> 
<div style='float: right; margin: -40px -5px 0 0;'> 
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div> 
<script type='text/javascript'> 
(function () { 
var po = document.createElement('script'); 
po.type = 'text/javascript'; 
po.async = true; 
po.src = 'https://apis.google.com/js/plusone.js'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(po, s); 
})(); 
</script> 
</div> 
<div style='margin-top: 20px;'> 
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhzndi&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' 
style='border:none; overflow:hidden; width:570px; height:180px;' /> 
</div> 
</div> 
</b:if> 
<!--hzndi.blogspot.com-->
<!--No Ordinary Social Subscription Widget-->

NOTE : Ganti www.facebook.com%2Fhzndi dengan nama URL Fanpage Facebook kamu, %2F adalah kode dari garis miring, contohnya, yang tadinya www.facebook.com/hzndi kemudian dibuah menjadi www.facebook.com%2Fhzndi.

4. Oh iya, kalau kamu tidak mau ribet, widget ini bisa digunakan sebagai widget biasa dengan cara :

Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan masukkan kode JS diatas.

5. Klik simpan jika sudah selesai. Selamat mencoba...

Cara Membuat Lencana Facebook Melayang Untuk Blogger

Cara Membuat Lencana Facebook Melayang Untuk Blogger


Promosikan fans di facebook kamu dengan menggunakan salah satu widget ini. Yup widget ini digunakan untuk menambah fans facebook kamu. Widget ini letaknya di sebelah pojok kanan blog, namun widget ini dapat melayang sesuai arah scroll dari cursor mouse kita. Silakan coba widget yang menakjubkan ini ayng dibuat oleh http://exeideas.com/. Untuk cara menaruhnya pun sangat mudah, cukup dengan...

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode JS di bawah ini.

<style type="text/css">#facebook {position: fixed;top: 0;right: 0;z-index: 9997;cursor: pointer;}</style><a target="_blank" id="facebook" href="MASUKKAN ALAMAT FACEBOOK KAMU"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhvMbiaLwjiVtsXCZEJG68o6l-3OoDBg746VYfw5XV5fAwo4R3lbGDZ_MrJ76qZFI0GFs7yr488StZgfSXK4omPlKj3Mqz_qmiQM_RSOLDwYXG2MXerj9M4nKl1b-KdZ_UzWMsG4JXg/s1600/JoinUsOnFacebook.png" alt="Join Me On Facebook" /></a>

3. Simpan template deh, sangat mudah bukan ? untuk demonya seperti gambar diatas, sudah saya coba sendiri dan berhasil :)

Tuesday, August 21, 2012

Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar

Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar


Jika beberapa hari yang lalu saya membagikan random post dengan thumbnail yang bisa berputar, kali ini saya akan membagikan sebuah widget yang di buat oleh Abu Farhan dan Mungkin sebagian dari kalian sudah mengetahui tentang widget ini. Yup inilah widget artikel terbaru atau yang biasa kita sebut dengan recent post.

Widget ini akan menampilkan artikel terbaru dari blog kamu beserta thumbnail. Widget ini juga bisa di ubah sesuai keinginan kamu loh. Oh iyah, efek yang ditimbulkan dari widget ini adalah turun kebawah otomatis serta akan berputar saat kamu menyorot thumbnail-nya. Oke langsung saja kita lihat cara pembuatannya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript setelah itu kamu salin dan masukkan kode di bawah ini kedalam kotak HTML/Javascript tersebut.


<style type="text/css">
#spylist-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
    font-family:calibri;
}

#spylist-widget ul {
    width: autopx;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#spylist-widget li {
    width: autopx;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNY5_80LJTuEzeAKLvNenEoKmReIQV3tTE8_QA_Obe92HsaeqYxBzuXi2ROewIsWwnhYhujk6xoyRV22UBUNjrVkcSn5EGfRFHD5F49b9y81YHMicyE1X7fSp_m_E3JxPEintWVDE6Xs/s320/latesthack.com-.jpg) repeat-x;
    border: 1px solid #ddd;
}

#spylist-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#spylist-widget img {
    float: left;
    margin-top: 5px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#spylist-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";numposts = 10;
home_page = "http://www.hzndi.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br />
<div id="spylist-widget">
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-scrollpost.js" type="text/javascript"></script>
</div>

Note :
  • Ubah jumlah postingan yang ditampilkan dengan mengubah kode numposts = 10
  • Ubah http://www.hzndi.blogspot.com dengan alamat URL blog kamu, untuk mengganti URLnya harus menggunakan http://www.namablogkamu.com/ ingat pake garis miring '/' dibelakang domain kamu, kalau tidak widget ini tidak akan berjalan !
  • Ubah showPostDate = true; ke false jika tidak ingin menamplkan tanggal postingan 
4. Simpan dan kamu lihat hasilnya dan untuk demo livenya mungkin kamu bisa melihatnya di bawah ini.

Saturday, August 18, 2012

Cara Membuat Widget Popular Post Warna Warni V.2


Kemarin saya sudah membagikan cara bagaimana menambahkan widget popular post warna-warni versi ke 3. Nah kalau yang ini sama saja dengan widget yang kemarin, namun yang saya bagikan ini adalha versi yang ke-2 nya. Tentunya dengan menambahkan widget ini akan semakin terlihat cantik dan menarik. Bedanya, kalau kemarin tidak ada efek hover atau gambar yang bisa berputar, kalau versi yang kedua ini bisa menampilkan gambar yang bisa berputar loh!

Saya sendiri sudah merasakan dan mencoba widget ini. Dan menurut saya widget ini tidak terlalu berat, masih standar hehe. Untuk screenshotsnya lihat gambar diatas, itu sudah saya coba sendiri kok :). Oke bagi kamu yang mau mencoba widget ini, silakan lihat caranya yah.

1. Login ke Blogger.com.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, boleh memakai GAMBAR tapi saya menyarankan untuk tidak memakai cuplikan agar terlihat lebih rapi. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja. 

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Rainbow Popular repost by http://hzndi.blogspot.com*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular repost by http://hzndi.blogspot.com*/

6. klik Simpan dan kamu lihat hasilnya. Cantik bukan ? warna warni gitu hehehe

Thursday, August 16, 2012

Menambahkan Widget Bookmark Otomatis di Blog

Menambahkan Widget Bookmark Otomatis di Blog

Kembali saya akan membagikan sebuah tutorial yang saya tahu hehe. Oke kali ini saya akan membagikan sebuah widget yang berfungs untuk membuat bookmark otomatis. Nah maksudnya adalah ketika seorang pengunjung mengunjungi blog kamu, maka blog kamu sudah tertanda di browser miliknya. Biasanya jika suatu situs sudah di bookmark loadingnya akan lebih cepat (pengalaman sendiri) heheh. Oke langsung saja yah

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode di bawah ini :

<script type="text/javascript">

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Shared by Alfian J. @ HOW-TO HOUSE www.place2how-to.com
***********************************************/

function bookmarksite(title,url){
if (window.sidebar) // firefox
    window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
    var elem = document.createElement('a');
    elem.setAttribute('href',url);
    elem.setAttribute('title',title);
    elem.setAttribute('rel','sidebar');
    elem.click();
}
else if(document.all)// ie
    window.external.AddFavorite(url, title);
}
</script>
<a href="javascript:bookmarksite('NAMA BLOG KAMU', 'URL BLOG KAMU')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoNj5u0pilP4y_9E5D_D39HPNeM6ugRImX1Wmd23YzhSs1MIP-Ibur_MWmV2AeDnajwMgTf0Wh3Adx43NTimt7aBGULcfb56mnpwa2fjmVEM1KGtJEeMZ0xWZYR3qdEvLg9X68mAvs5NQ/s1600/bookmark-this-site.png" /></a> 

NOTE : Kode yang berwarna biru adalah alamat gambar, kamu bisa ganti dengan gambar yang kamu inginkan dan menyimpannya di situs file hosting (seperti google code, imageshack.us, dll) dan kamu ganti alamat yang berwarna biru, dengan alamat URL gambar kamu yang sudah disimpan di file hosting tersebut.

4. Simpan deh, kalau mau lihat demonya ada di bawah loh.


Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba

Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba


Di Tutorial kali ini saya akan membagikan social share lagi. Kalin sudah pada tahu kan fungsi dari social share itu sendiri ? Yup, fungsinya untuk membagikan artikel yang ada di blog kamu ke situs-situs seperti facebook dan twitter sehingga akan menambah trafik pengunjung blog kamu.

Ketika kamu mengarahkan pointer mouse kamu ke widget ini, secara otomatis widget ini akan keluar dari persembunyiannya. Oke langsung saja lihat tutorialnya di bawah ini :

1. Login ke Blogger.com

2. Klik Template --> Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
3. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Centang "Expand Template Widget" --> Cari kode </body>, gunakan CTRL + F untuk memudahkan Pencarian.

4. Salin kode di bawah ini dan letakkan diatas kode </body>.

<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>
<div class='addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style'>
    <a class='addthis_button_more'>Share</a>
    <ul>
              <li><a class='addthis_button_preferred_1'/></li>
        <li><a class='addthis_button_preferred_2'/></li>
        <li><a class='addthis_button_preferred_3'/></li>
        <li><a class='addthis_button_preferred_11'/></li>
    </ul>
</div>

5. Simpan template. Mudah sekali bukan ?


Sunday, July 22, 2012

Cara Membuat Twitter Box Untuk Blogger



Di sore hari ini saya akan membagikan salah satu widget yang sangat bagus untuk kamu. Namanya Twitter Follower Box. Nah fungsi dari widget ini tentu saja akan menampilkan semua follower twitter kamu layaknya facebook fanpage. Thanks to Mark Carey yang sudah membuat widget ini. Langsung saja lihat caranya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode HTML/Javascript di bawah ini.

<!-- Twitter Fan Box --> <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("MASUKKAN-USERNAME-TWITTER-KAMU-DISINI");</script><div style="font-size:10px;"> <a href="http://goo.gl/tQQ6e">Tutorial Blog dan SEO</a></div> <!-- End Twitter Fan Box -->

3. Simpan Template dan amu lihat deh hasilnya :)

Thursday, July 19, 2012

Membuat Kotak Email Subcription Muncul Tiba-Tiba


jika di postingan sebelumnya tentang tanda tangan, di postingan kali ini saya akan membagikan sebuag trik untuk memunculkan kotak email subscription secara tiba-tiba,  atau yang biasa disebut dengan pop up. Tentu saja widget ini digunakan untuk menambah pembaca setia blog kamu, sehingga mereka bisa mendapatkan postingan-postingan terbaru kammu dengan hanya memasukkan email mereka ke dalam kotak tersebut.

Biasanya, widget berbentuk pop up ini sangaaatlah menggangu para pengunjung kamu, mereka pasti tidak nyaman dengan munculnya widget ini secara tiba-tiba. Namun tenang saja, pembuat widget ini sudah mengatur widgetmya agar muncul hanya 1 kali dalam seminggu di pengunjung blog yang sama ! wah mantap banget bukan ? diambah lagi kamu juga dapat mengatur waktunya, apakah ingin seminggu sekali, sehari sekali, bahkan 3 hari sekali untuk pengunjung yang sama pun bisa ! langsung saja lihat tutorialnya di bawah ini yah.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode HTML/Javascript-ya di bawah ini.


<link rel="stylesheet" href="http://code.helperblogger.com/colorbox-css-code-helperblogger.css" />
<style>
 /*-----------------------------------------------------------------------------------*/
/*Email Subscribe Box Popup By Helper Blogger @helperblogger.com*/
/*Shared by hzndi.blogspot.com*/
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
    color: #666;
    height: 355px;
}

#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration: none;
}

.box-title {
    color: #F66303;
    font-size: 20px !important;
    font-weight: bold;
    margin: 10px 0;
    border: 1px solid #ddd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    line-height: 25px;
    font-family: arial !important;
}

.box-tagline {
    color: #999;
    margin: 0;
    text-align: center;
}

#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}

a:link, a:visited {
    border: none;
}

.demo {
    display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script>
 <script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"390px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->


<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<style> .home-featured-right {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
    border: 5px solid #fff;
    font-size: 16px;
    margin: 0px;
    width: 320px;
    font-family: calibri;
}

.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
    color: #fff;
    text-shadow: #a64242 -1px -1px;
    text-align: center;
}

.home-featured-right p {
    font-size: 16px;
    margin-bottom: 20px;
}

.home-featured-right .widget {
    margin: 35px;
}

.home-featured-right h4.widgettitle {
    font-size: 26px;
    margin-bottom: 20px;
}

.home-featured-right input[type=text] {
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
    border-bottom: none;
    border-left: 1px solid #963c3c;
    border-right: none;
    border-top: 1px solid #963c3c;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #000;
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 12px;
    padding: 14px 15px 14px 45px;
    width: 180px;
}

#home-featured .home-featured-right input[type=submit] {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
    border: none;
    font-size: 0;
    height: 28px;
    margin: 0 0 0 15px;
    line-height: 0;
    text-indent: -9999px;
    width: 26px;
}

#email-news-subscribe .email-box {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 35px;
    margin-left: -20;
}

#email-news-subscribe .email-box input.email {
    background: #FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
    color: #333
}

#email-news-subscribe .email-box input.subscribe {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    padding: 7px 14px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
    background: #ff9b00;
    background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline: 0;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: #FFFFFF;
    text-shadow: #d08d00 1px 1px 0
}  
</style> 

<div class="home-featured-right">
    <div id="enews-2" class="widget enews-widget">
        <div class="widget-wrap">
            <div class="enews">
                <h4 class="widgettitle">Sign Up for Free Email Updates</h4>
                <p>Get our latest updates direct in your inbox.Just enter your wail address
                    below....</p>
                <p>Your privacy and email address are safe with us!</p>
                <div id="email-news-subscribe">
                    <!-- Email Subscribe -->
                    <div class="email-box">
                        <form action="http://feedburner.google.com/fb/a/mailverify" method="post"
                        target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=hzndi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                            <input class="email" type="text" style="width: 150px; font-size: 12px;"
                            id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"
                            onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />
                            <input type="hidden" value="hzndi" name="uri" />
                            <input type="hidden" name="loc" value="en_US" />
                            <input class="subscribe" name="commit" type="submit" value="Subscribe"
                            />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end .home-featured-right -->
<div style="background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <!-- Jangan Di Edit Kode ini agar tidak error --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://goo.gl/7OCEG" target="_blank" >Tutorial Blog dan SEO »</a></span></div></div>
</div>
</div>
</div>

NOTE :
  • Ganti angka 7 dengan angka berapapun yang kamu suka, Jika angka 7 maka akan muncul seminggu sekali kepada orang yang sama, jika 3 maka 3 hari sekali, dst.
  • Ganti 2 buah tulisan hzndi dengan username feedburner kamu.
  • Ganti Tulisan yang berwarna oranye dengan kata-kata yang kamu suka.
3. Simpan Template dan lihat hasilnya...

Cara Memasukkan Tanda Tangan Kedalam Setiap Postingan Blog


Di tutorial kali ini, saya akan membagikan bagaimana caranya memasang tanda tangan di setiap postingan blog. Tentu saja hal ini mulai menjadi tren di kalagan para blogger dimana di setiap postingannya pasti ada tanda tangannya. Cara membuatnya pun sangatlah mudah dan gampaaang sekali. Lihat caranya di bawah ini yah :

1. Pergi ke situs http://www.mylivesignature.com

2. Masukkan nama kamu seperti yang terlihat di gambar di bawah ini.

 

3. Klik "Next Step". Kemudian kamu akan di berikan pilihan berbagai macam font tampilan tanda tangan yang akan di tampilkan di setiap postingan kamu. Seperti yang terlihat di gambar di bawah ini. Dan tentunya klik "Next Step" lagi setelah kamu menentukan pilihan kamu.

4. Kemudian, di step yang ke-3, kamu akan di suruh memilh ukuran tanda tangan yang akan di tampilkan, kamu pilih sesuai keinginan dan hati nurani yah hehehe. Lalu klik "Next Step".

 
5.  Nah kalau di bagian ke-4, kamu akan di berikan pilihan untuk mengatur warna tanda tangan serta warna bacground tanda tangan kamu, pilih sesuai sama bacground postingan kamu saja biar lebih menarik dan matching :).

 
6. Dan kalau di step yang ke-5 ini, kamu disuruh memilih kemiriungannya, suka-suka kamu saja deh :) klik "Next Step" lagi jika sudah.
7. Dan untuk memasukkan Tanda tangan kamu ke dalam blogger, tinggal kamu klik saja gambar blogger seperti gambar di bawah ini.

 
Buka gambar di tab baru jika tidak kelihatan
8. Selanjutnya tinggal kamu masukkan username login blogger kamu, alamat url blog kamu, passwod blogger kamu dan klik "Post" deh.

 
Buka gambar di tab baru jika tidak kelihatan  

9. Selesai deh, sangaaat mudah bukan ? ga pake kode yang ribet segala tinggal klak, klik saja hehehe

Twitter Delicious Facebook Digg Stumbleupon Favorites More