SMPN 96 Blog: Widget

Home » Posts filed under Widget

Tutorial Membuat Widget Social Media Dengan Metro Style

in CSS, Javascript, Tutorial, Widget - on 15.47 - 2 comments

Selamat pagi,selamat siang,selamat malam bagi kalian yang sedang sekolah :D maupun yang sedang beraktivitas.Pagi yang cerah admin ingin membahas Tutorial Membuat Widget Social Media Dengan Metro Style.Metro style ini mempunyai 3 style.Ingin tahu apa saja style itu? Mari simak tutorial berikut ini :

Login AKUN/ID Blogger sobat
Baca basmallah
Dashboard >> Tata Letak >> Add Gadget >> Pilih HTML/Javasript.
Dan copy code dibawah ini tepat di gadget HTML/Javascript tadi.

STYLE 1

HTML DAN CSS :

<div class="metro-social"><li><a class="fb" href="#"></a></li><li><a class="tw" href="#"></a></li><li><a class="gp" href="#"></a></li><li><a class="pi" href="#"></a></li><li><a class="in" href="#"></a></li><li><a class="yt" href="#"></a></li><li><a class="fd" href="#"></a></li></div><style>/*Metro UI Social Profile Widget v3.0 by Tech Prevue LabsWeb link to gadget code: http://www.techprevue.com/2013/02/social-profile-widget-metro-style.htmlDistributed under license CC BY-NC-ND 3.0 INTPlease keep license information intact while using this widget*/.metro-social{width:285px}.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}</style>

DEMO GAMBAR

STYLE 2

HTML DAN CSS :

<div class="MH" id="MH"><ul id="MH-social"><li><a class="fb" href="#"></a></li><li><a class="tw" href="#"></a></li><li><a class="gp" href="#"></a></li><li><a class="fd" href="#"></a></li></ul></div><style>#MH-social{width:305px;float:left;margin-top:10px}#MH-social li{position:relative;cursor:pointer;padding:0!important}#MH-social .fb,.tw,.gp,.fd{position:relative;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;z-index:5;display:block;float:left;margin:1px}#MH-social .fb{width:150px;height:152px;background:url(//goo.gl/6xmUk) no-repeat center center #3b5998}#MH-social .tw{width:150px;height:74px;background:url(//goo.gl/oyiFK) no-repeat center center #3b5998}#MH-social .gp{width:150px;height:74px;background:url(//goo.gl/oT0kF) no-repeat center center #3b5998}#MH-social .fd{width:302px;height:74px;background:url(//goo.gl/ncoLY) no-repeat center center #3b5998}#MH-social li:hover .fb{-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;background:url(//goo.gl/MH8AP) no-repeat center center #3468b6}#MH-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #e44524;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #f60;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}</style>

DEMO GAMBAR

STYLE 3

HTML DAN CSS :

<style>#socialicons_widget_sidebar-2{Width:300px;Height;auto;}.socialicons_widget_sidebar li { float: left; width: 147px; height: 147px; margin: 0 0 0 0; padding: 0 0 0 0; border-bottom: none;}.socialicons_widget_sidebar li a { line-height: 1px; display: block;}.socialicons_widget_sidebar li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8;}.socialicons_widget_sidebar li a span { display: none;}.socialicons_widget_sidebar li.rss-icon { margin: 0 6px 6px 0;}.socialicons_widget_sidebar li.facebook-icon { margin: 0 6px 0 0;}</style><div id="socialicons_widget_sidebar-2" class="row widget socialicons_widget_sidebar"><ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;"><li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href="#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyl6biNMx6GNufCfeH0o02WwQ7NZ-4w1r0L774PaWG8xXWLOWeh3Df2AzWHXy1VrtzuJeDlPOUtthsbMy7zCSY9ct8oLy8fldzsqYwW3CpX72GXosRN9PYfrFa6AbrEIdmuX2ClAUYm7fw/s1600/twitter.png" width="147" height="147" /><span>Twitter</span></a></li><li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href="#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIWbEa9nbrNlu5vc6QShlNOmiedcuUn651jNHXAMiJWnOuBbEoIpD4mS8iIdUEVpi0HcfZogppUSXfeN4Zngll70X0O9dNIgZurSrSgXPCM7xKTtyuC4FpiL4TDStG8DaK349aunJDbTKU/s1600/facebook.png" width="147" height="147" /><span>Facebook</span></a></li><li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href="#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf29DtN3S5BN4yV_XSHX-FdMd2zwTUwJWFgPIOE9bIqom6MuUoCehK6y2niB8fkZy2jpnztpwzrJsTVkv2JumAyv5sOID-K0M24AVz7vtX5F0_bKSl1NwshqEMUr44VGI9tUPgSIhr1yiY/s1600/rss.png" width="147" height="147" /><span>Rss Feed</span></a></li><li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61UP0MHLMaGIaZn7pWzpn4rzC-khoLqNZzOJ5eavDdrhCnTWxcpbbW-lgTdLq4wwtTSHq5R7Jln1NlTT27gCEiaBckLZLh-sFj1p4kBW4lKg5wv1EuHXtXY-fzGjWfbLf3OacrGwQX1fx/s1600/google.png" width="147" height="147" /><span>Google+</span></a></li></ul></div>

DEMO GAMBAR

NOTE :

TANDA # BERWARNA MERAH ADALAH ALAMAT URL SOCIAL MEDIA SOBAT

Responsive,Keren,Tidak berat .. ingin mencoba??? Ayo dicoba sob :D

Selamat mencoba !

Tutorial Membuat Round Sidebar Social Media Untuk Blog

in Javascript, Tutorial, Widget - on 13.03 - 9 comments

Pagi Menjelang Pagi,:DAdmin ingin membahasa tutorial membuat round sidebar social media untuk blog.Mungkin di blog/web lain sudah memberikan tutorialnya.Tetapi apakah mudah dimengerti??admin akan memberi tahukan tutorialnya dengan semudah-mudahnya.Seperti kita ketahui,banyak orang yang ingin terkenal bukan hanya dari Real-Life,tetapi juga di Social Media.Terutamanya mempunyai blog dan membuat widget "Round Sidebar" ini.Atau kalian juga bisa membuat widget social media dengan "Metro Style"

Widget ini flat,modern,dan yang pastinya keren serta memiliki tata letak yang menarik bagi pengunjung.Untuk membuat widget ini sempurna,harus diingatkan bahwa width sidebar harus 300px.Simak Tutorialnya berikut ini :

Login Akun/ID Blogger sobat
Baca basmallah :)
Dashboard >> Tata Letak >> Add Gadget
Lalu Pilih HTML/Javascript.
Setelah itu,copy-pastekan code dibawah ini di kolom Gadget HTML/Javascript tersebut.

<style>
/*---www.learnmore-seemore.com----*/
#social-stats {
border-left: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
display: block;
float: left;
position: relative;
}
#social-stats ul {
overflow: hidden;
}
#social-stats ul li {
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
display: block;
float: left;
width: 33%;
}
#social-stats ul li a {
-moz-transition: all 0.6s ease-out 0s;
display: block;
float: left;
padding: 10px 0 3px;
text-decoration: none;
width: 100%;
}
#social-stats ul li a span, #social-stats ul li a large, #social-stats ul li a small {
display: block;
float: left;
margin: 0 auto;
text-align: center;
width: 100%;
}
#social-stats ul li a span {
background: url("http://4.bp.blogspot.com/-jN645A-bYkI/U0rQVit-liI/AAAAAAAADM0/zM2fqWp79kY/s1600/social_icon.png") no-repeat;
float: none;
height: 46px;
margin-bottom: 5px;
text-indent: -9999px;
width: 47px;
}
#social-stats ul li.ss-rss a:hover h5 {
background: #F18421;
}
#social-stats ul li h5 {
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
background: #999999;
border-radius: 50% 50% 50% 50%;
margin: 0 auto;
width: 47px;
}
#social-stats ul li a span:before {
}
#social-stats ul li.ss-twitter a:hover h5 {
background: #45B0E3;
}
#social-stats ul li.ss-facebook a:hover h5 {
background: #3C5B9B;
}
#social-stats ul li.ss-google-plus a:hover h5 {
background: #F83E29;
}
#social-stats ul li.ss-youtube a:hover h5 {
background: #CC181E;
}
#social-stats ul li.ss-linkedin a:hover h5 {
background: #1790CD;
}
#social-stats ul li.ss-rss a span {
background-position: 0 0;
}
#social-stats ul li.ss-twitter a span {
background-position: 0 -91px;
}
#social-stats ul li.ss-facebook a span {
background-position: 0 -47px;
}
#social-stats ul li.ss-google-plus a span {
background-position: 0 -135px;
}
#social-stats ul li.ss-youtube a span {
background-position: 0 -180px;
}
#social-stats ul li.ss-linkedin a span {
background-position: 0 -226px;
}
#social-stats ul li a large {
color: #333232;
font-size: 25px;
font-weight: 500;
}
#social-stats ul li a small {
color: #333232;
font-size: 10px;
}
</style>
<div id="social-stats">
<ul>
<li class="ss-rss"><a target="_blank" href="/feeds/posts/default" rel="nofollow external"><h5><span>Rss</span></h5><large>5000</large> <small>Subscribers</small></a></li>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/Your-FB-Username" rel="nofollow external"> <h5><span>Facebbok</span></h5><large>14,782</large> <small>Followers</small></a></li>
<li class="ss-twitter"> <a target="_blank" href="http://twitter.com/Your-Twitter-Username" rel="nofollow external"> <h5><span>Twitter</span></h5><large>63,207</large> <small>Followers</small> </a></li>
<li class="ss-google-plus"><a target="_blank" href="https://plus.google.com/Your-GPlus-Username" rel="nofollow external"> <h5><span>Google+</span></h5> <large>70,781</large> <small>Followers</small> </a></li>
<li class="ss-linkedin"><a target="_blank" href="http://bd.linkedin.com/Your-Linkdin-Username" rel="nofollow external"> <h5><span>Linkedin</span></h5> <large>2,453</large> <small>Followers</small></a></li>
<li class="ss-youtube"><a target="_blank" href="http://www.youtube.com/user/Your-YT-Username" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>Subscribers</small> </a></li>
</ul>
</div>

NOTE : UNTUK TULISAN BERWARNA BIRU ADALAH ALAMAT DARI SOCIAL MEDIA SOBAT-

Tutorial Membuat Widget Simple Flat UI Subscribe Email

in Javascript, Tutorial, Widget - on 21.28 - 2 comments

Flat UI Design ini sedang trend di kalangan blogger.Flat UI Design membuat blog/web kita menjadi lebih indah dengan widget ini.Widget ini tidak memberatkan loading blog kok,paling hanya 0,0003%.Mari simak tutorialnya berikut ini :

DEMO

Login ID/Akun Blogger Anda
Baca Basmallah XD
Dashboard >> Template >> Edit HTML.
Cari ]]></b:skin> (CTRL+F) Dan copy-pastekan code dibawah ini di atas code tadi.

#vn-emailsubsocial {background:#34495e; width: 300px; height: 330px; border: 1px solid #ddd; border-radius: 5px 5px 0px 0px; } #vn-emailsubsocial .heading {padding: 15px 25px;line-height: 35px;font-size: 26px;font-weight: 600;font-family: open sans;color: #fff;text-align: center;background:#22313F; } #vn-emailsubsocial p {background:#34495e; font-family: open sans; font-size: 13px; color: #fff; line-height: 25px; padding: 10px 20px 0 20px; margin: 0; } #vn-emailsubsocial .emailsub { padding: 0px 20px 10px 20px; } #vn-emailsubsocial .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; } #vn-emailsubsocial .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; } #vn-emailsubsocial .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; } #vn-emailsubsocial .emailsub .button:hover{ background: #DD7761; }

Jika sudah selesai.
Beralih ke Tata Letak >> Add Gadget >> Pilih HTML/Javascript.
Dan Copy-pastekan code dibawah ini tepat di gadget HTML/Javascript tadi.

<div id="vn-emailsubsocial"><div class="heading">Sign Up Here </div>TULISKAN PESAN ANDA DISINI<br /><div class="emailsub"><form action="http://feedburner.google.com/fb/a/mailverify method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=T-fvnBlogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="name" placeholder="Your Name" type="text" /> <input name="email" placeholder="Your Email" type="text" /> <input name="uri" type="hidden" value="BloggerYard" /> <input name="loc" type="hidden" value="en_US" /> <input class="button" type="submit" value="Subcribe Now!" /> </form></div></div>

KETERANGAN :

Warna Orange adalah Pesan Yang Ingin sobat sampaikan.Tapi admin sarankan untuk menghapus pesan tersebut.Alasannya?? Sobat bisa tahu sendiri.
Sedangkan Warna BIRU adalah Nama feed rss blog anda.

Nantikan post FLAT UI berikutnya ya sobat,Allahamdulilah masih sempet buat post ini sesudah pulang kampung :D.

Tutorial Membuat Widget Twitter Melayang

in Javascript, Tutorial, Widget - on 23.59 - 2 comments

Banyak cara lain mempromosikan akun twitter sobat,salah satunya dengan cara membuat widget ini.Widget ini tidak terlalu membuat blog sobat menjadi lama loading,karena hanya memperlambat sekitar 0,0003 detik.DEMO DISINI.Simak tutorial berikut ini :

Login ID/Akun blogger sobat.
Dashboard >> Tata Letak >> Add Gadget Dan Pilih HTML/Javascript
Kemudian Copy Code Berikut Ini :

<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;" href="http://twitter.com/alfryan_"_blank"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3u1zIuhQCpGX0S0Pwtpz9x8Hgv9_RUIxIcjWQNBPG_J0VXrB9ca_6YodL17ODIcH4opcxxb55TgVvDz7ledwhddd8wJ-vRynx6LHJPv0WiTb3vCD-HTpFARfLZJ19I3WGMjEusaLyWVPA/s1600/floatingtwitter.png" /></a>

Untuk Warna Merah Adalah tempat ditaruhnya widget twitter melayang ini.Jika kalian ganti dengan left,berarti akan dipindahkan disebelah kiri.dan right itu disebelah kanan.
Untuk Warna Biru adalah url twitter sobat.Ganti alfryan_ tersebut dengan URL Twitter sobat.

Klik save dan lihat hasilnya.

Bagaimana ? tertarik untuk mencoba?? Silahkan tinggalkan komentar jika ada pertanyaan :)

Membuat Widget Pesan Pada Waktu Tertentu Spesial Ramadhan

in CSS, Javascript, Tutorial, Widget - on 15.50 - 17 comments

Keren yah,jika blog kita dihiasi widget Pesan spesial ramadhan seperti "Sahur... Sahur" , "Selamat Berbuka Puasa" , "Selamat Menantikan Berbuka puasa" Dan masih banyak lagi.Nah kali ini saya akan membahas cara membuat widget pesan pa

da waktu tertentu spesial ramadhan.Oke simak caranya berikut :

Login Akun ID/Blogger anda
Dashboard -> Tata Letak -> Add A Gadget -> HTML/Javascript
Kemudian Copy-Pastekan code berikut ini tepat di Gadget HTML tadi :

Klik untuk melihat

Untuk style,Kalian bisa memodifikasikan sendiri.

Untuk yang ke-2 , ini sudah dimodifikasikan oleh Muh Akram,jika kalian berminat dengan style ini.ganti code yang diatas tadi dengan code dibawah ini :

Klik untuk melihat

<style scoped="" type="text/css">.puasa1 { color:#FFC200;}.lebaran { color:#FFC200;}.puasa { background:rgba(19, 19, 19, 0.65); font-size:130%; text-transform:uppercase; text-align:center; margin:15px 15px 0 0; padding:20px 0; font-weight:normal; border-radius:5px; line-height:1.8em; font-family:Trebuchet MS, Verdana, Arial, sans-serif;}.digit {color:#fff}.judul {color:#fff}@media screen and (max-width:974px) {.puasa { margin:10px 0 0 0;}}</style><div class='puasa'><span class="puasa1"><script type='text/javascript'> var now = new Date(); var hours = now.getHours();if (hours >= 16 && hours <= 18){document.write("Selamat menantikan berbuka Puasa"); } else if (hours >= 19 && hours <= 21){document.write("Selamat menjalankan Sholat Tarawih"); } else if (hours >= 22 || hours <= 2){document.write("Kok belum tidur sih udah malam"); } else if (hours >= 2 && hours <= 4){document.write("Sahur! Sahur! Sahur"); } else if (hours >= 5 && hours <= 8){document.write("Selamat pagi, selamat menjalankan Ibadah Puasa.."); } else if (hours >= 9 && hours <= 15){document.write("Selamat menunaikan ibadah puasa, semoga amal ibadah kita di terima di sisi Allah SWT."); }</script></span><br/><span class="lebaran"><span id="countdown"></span><script type='text/javascript'>//<![CDATA[var target_date = new Date("Jul 27, 2014").getTime(); var days, hours, minutes, seconds; var countdown = document.getElementById("countdown"); setInterval(function () { var current_date = new Date().getTime(); var seconds_left = (target_date - current_date) / 1000; days = parseInt(seconds_left / 86400); seconds_left = seconds_left % 86400; hours = parseInt(seconds_left / 3600); seconds_left = seconds_left % 3600; minutes = parseInt(seconds_left / 60); seconds = parseInt(seconds_left % 60); countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> " + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju</span> <span class=\'judul\'>Idul Fitri 1435H</span>"; }, 1000);//]]></script></span></div>

Code diatas dibuat oleh : Dian Anrchyta , Dan Code ke-2 oleh Muh Akram.

NOTE : JIKA BAGI KALIAN WIDGET INI MENGGANGGU,LEBIH BAIK TIDAK USAH DIPASANG

Cara Memasang Widget Pinterest

in Javascript, Social Media, Tutorial, Widget - on 17.33 - 9 comments

Cara Memasang Widget Pinterest

Siapa yang tidak kenal social media ini? ya social media yang bisa mengupdate status dengan cara mengupload gambar/foto seperti Instagram.Foto/gambar ini dalam pinterest disebut pin,Serta tempat pinnya itu sendiri disebut PAPAN.Admin pun pengguna Pinterest Loh ^_^ -> pinterest.com/irg1e.

Oke simak caranya berikut ini.

Pergi ke -> pinterest.com
Login/Signup Akun Sobat.
Pergi ke profil/pin anda.Contoh -> http://www.pinterest.com/irg1e/
Klik yang dituju tanda panah pada gambar dibawah ini.

Salin code yang disediakan.
Lalu pergi ke id/akun Blogger sobat
Dashboard -> Tata Letak -> Add Gadget/Tambahkan Gadget -> HTML/Javascript
Copy code yang telah di salin.Dan ditaruh di HTML/Javascript.
Simpan Dan lihat hasilnya

Jika sudah selesai akan seperti ini hasilnya ---- Follow/ikuti pin dan papan admin ya ^_^.

pinterest.com/irg1e

Cara Membuat Tombol Share Social Media

in CSS, Javascript, Social Media, Tutorial, Widget - on 21.27 - 8 comments

Tombol Share ini memiliki peranan penting untuk meningkatkan traffic blog anda dan pagerank anda.Jika makin banyak "sharing" website anda.Maka traffic blog dan page PR anda pasti akan makin tinggi.Hal ini saat menguntungkan terutama dalam memasang iklan.Makin tinggi trafic dan PR,makin tinggi juga biaya pemasangan Iklan di blog.

Login id/akun blogger sobat
Dashboard -> Template -> Edit Template
Cari code "<data:post.body/>" Dan Copy-Pastekan sript code dibawah ini tepat diatasnya :

<b:if cond='data:blog.pageType == "item"'><div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'><div style='float:left;padding-left:0px;font:normal 12px Georgia;'>Share on :</div><div style='float:left;padding-left:10px;'><a name='fb_share' type='button_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script></div><div style='float:left;padding-left:10px;'><a class='DiggThisButton DiggCompact'/><script type='text/javascript'>(function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})();</script></div><div style='float:left;padding-left:10px;'><a class='twitter-share-button' data-count='horizontal' data-via='Username' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div style='float:left;padding-left:10px;'><g:plusone size='medium'/><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></b:if>

Cara Membuat Kotak Komentar Keren

in Blogger, DISQUS, Tips & Trik, Widget - on 08.32 - No comments

Disqus Logo

Cara Membuat Kotak Komentar Keren-Kali ini saya akan memberi tahu untuk membuat kotak komentar yang keren di blog Dengan DISQUS.

Fitur-Fitur Dari DISQUS Antara Lain :

Comment moderation. Pemilik blog dapat melakukan moderasi sebelum komentar di-publish.
Inline media embedding. Di dalam comment diswus, dapat disisipkan media seperti video,gambar atau audio yg terintegrasi langsung dengan Youtube, Flickr, dan lainnya.
Mobile commenting. Disqus compatible diakses melalui mobile internet.
Social media integration. Dapat diintegrasikan dengan social media seperti Facebook, twitter dll.
Community box. Disqus juga merupakan wadah komunitas pengguna comment system tersebut.
Like and share. Tool yang terintegrasi dengan system untuk melakukan vote (like) dan sharing.
Realtime system. Comment disqus bersifat realtime sehingga pengguna dapat melakukan diskusi secara langsung melalui reply.
Spam-be-Gone. Salah satu fitur disqus yg dapat menyaring spam.
Mobile apps. Disqus tersedia untuk berbagai macam mobile media seperti iPhone,SmartPhone, dll.
Imprt & Export. Kita dapat melakukan impor atau ekspor comment yang lama.
International language. Disqus support hampir semua bahasa.
Theme customization. Kostumisasi tampilan disqus sesuai template blog atau keinginan blogger.
Tweets and reactions. Disqus dapat membawa tweets dan reaksi tweets ke dalam kotak komentar.

Cara Membuat Kotak Komentar Dengan DISQUS :

Login Akun Sobat di DISQUS
Jika sobat belum mempunyai akun DISQUS , Silahkan Mendaftar/SignUp.
Pilih sesuai Platform blog sesuai Blog.Misal "Blogger"

Sesudah itu.Kalian akan memasuki halaman instruction.Klik "Add to my blogger site"

Kalian akan memasuki "Import Elemen Laman".Pilih Blog yang sobat ingin tambahkan DISQUS ke blog sobat.Edit judul sobat sendiri.Kalian juga bisa mengedit konten dan Template.

Klik tambahkan Widget.Dan lihat hasilnya

Bagaimana Mudah bukan? Tertarik untuk mencoba ?

Widget Burung Twitter

in Blogger, Tips & Trik, Twitter, Widget - on 02.22 - No comments

Widget Burung TWITTER Terbang di blog - Banyak berbagai cara untuk memPromote kan twitter kamu.Contohnya dengan Iklan,Membuat blog,Dll.Widget twitter ini adalah salah satunya.Kalian bisa menghiasi blog Dengan "Flying Bird" (twitter) Dengan berbagai warna burung tersebut.Oke kita langsung ke cara pemasangannya.

Cara memasang Widget Burung Twitter terbang di blog :

Login Akun Blogger Sobat.
Tata Letak -> Tambah Gadget -> Pilih HTML/JavaScript
Co-past code di bawah ini.

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZlVmPgb4EFA71Jxd50guGEXGY1u7S-VNqURyRpX3DG89iXOVYk9J5McmAasCVMl7xS1o6CjooO0Fe8ZfPlVn8p9h48joJBSJFiMUfcJvVjH56ZoAAOgTxWZhUUXtVk6ehddjiOhHu-w/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://t-fvn.blogspot.com/";
tripleflapInit();
</script>

Code warna merah dengan username twitter anda.Contoh http://twitter.com/Alfryan_

Simpan dan Lihat hasilnya.

Hasil akan seperti gambar diatas

Jika kalian ingin membuat burung twitter dengan warna yang kalian suka.Kalian tinggal mengganti code warna biru dengan code di bawah ini sesuai dengan warna yang kalian suka.

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn4URr2d7TWXnQTMZ3kryo-aitwMsP7PLJcW4WY6hpdznpCIiHczJR8eVrz_sHmXDnn5629ScmaqgRy59Ane_OV8j5LhimiULy6TQWl795qB_Cs7Kj7_1_VjZh-Dep2w6BFs7Y26G52Yg/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ClSm0LET6Oa_Zy2MseUmoSjGE-zdymFEpXkiQyX1w53R-MSwNWuva_PSzrg7Ch4ovODRZaJAnsR_VsjPpkazrUIeIme1E_yxtyrIjFDE8xp6lHvv95GW-TPe7P93FgLiT45c-mZ-qjE/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8fB3jqm5d_pC-GkUdmr7l04xkeZlwvp0yxsa1XQCFFR49GD_K1WSFdtNzqYrzrELphZoeywfzJP-eDI-jyqb3Z45F72IkchL56E7SWbAeDbf2q_zwJlLgt4EuauE4N7A7gY6tVPkp0s/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHc2aEB42j91EDtQ4bVJKXGGX0ZD9qPxiR_EcnvNz4PnQKCbRSTSTNNXGLgb0OH1XHfByd8b7LB47-Jaw0QFQ6_ZG3DZyhDk3hdkkKt3q08VjzeECIyHzlrc-7jAgmCmrbY7nEcCER9PY/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORmbCh1jNWgYHi7j8h0bUP0szra-2WcYZM0ZXwJ6Vpr0MXjPzJEApMhlD2sCX8yvWdc28KwIjrXFQ2h6OydyZVvoVDfP5iVXTcJLl85PEGSWiQP-5m4p7-KBwF270quguUO8wRvgJMtc/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCV7gDtgxUvWwiMLq__MgKYsqYQtDM5tcITXEZt8TXZw3oTKNyUfetJz4LvQXfIBYbMC7YG5gntniu9BHextZH80MdnkvecE5RNG3BzijhxXTi_1jxCadAi25BrRFoMJ6Pe5ESVGoN0w/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcA-m7s5FybBcyuRQeJ_8Xt_MJX4FMoA7Gj3s3qGdZL8HTkkcMDediLfI9CuWkjNIzlTplekt32ngKdIlUj6Nur_Zan3eqnP5IcWOxf12CkN4wHMVisMMyMeEDc8ivr9OyMWU54pLLMuU/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRX8lp6QT8hENn29Q5N2Qm6D8a_Vg01VCCrGsdjBU1ne9QEF2wOGTdtad179EzHFzf0TsHJ5a_9cBrbUWpkzbHDV3pSveV8hupmlag_FrPj_aK33spUv1-5rgApxSXkIsj8rF-QvvABjE/s1600/red+bird.png

Mudah bukan?Hiasi blog mu dengan Widget ini. Tertarik? Selamat mencoba ^-^

Semoga bermanfaat.

Widget flag counter

in Blogger, Flag counter, Tips & Trik, Widget - on 01.27 - No comments

Kali ini kita akan membahas cara memasang widget flag counter, flag counter merupakan visitor count yang menampilkan total pengunjung blog dengan menampilkan bendera sesuai asal pengunjung.

Ingin memasang? Ikuti cara - cara berikut ini :

Kunjungi situs flagcounter.com
Atur flag counter yang akan ditampilkan sesuai keinginan Anda, sepeti warna background, banyaknya bendera dan kolom yang akan ditampilkan.
Setelah itu klik 'GET YOUR FLAG COUNTER'
Masukkan alamat email jika ingin mengirimkan kode script ke email, jika tidak klik 'Skip'.
Ambil kode script yang disediakan dan copy paste pada HTML/JavaScript blog Anda.