Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Minggu, 24 November 2013

Cara Membuat Widget Followers Google Plus Lebih Keren Dengan Buka Tutup

Posting yang pernah saya publikasikan mengenai Widget Follower Google Plus ada dua yaitu :
  1. Cara Mengatur Lebar Widget Google Plus Supaya Sesuai Dengan Sidebar
  2. Informasi singkat tentang kehadiran Google+ Followers Gadget
Kalau sobat blogger belum pernah membaca postingan di atas, silahkan langsung klik link-nya, siapa tahu ada informasi menarik tentang widget pengikut Google Plus yang belum sobat blogger tahu.

Widget Followers Google+ sudah menjadi widget default bawaan blogger. Widget ini menjadi ciri khas sebagian besar blog yang bernaung di bawah Flatform blogger.com. Sedikit sentuhan menarik harus ditambahkan pada widget Google Plus, supaya pemilik blog yang belum memasang widget ini tertarik untuk memasangnya. Oleh karena itu, saya sebuah kode untuk membuat widget Google+ terlihat lebih keren yaitu dengan menambahkan fitur Slide Out. Slide Out itu yang bagaimana sih? Itu lho... Supaya

Sliding Google+ Followers Box,follower Google+,Google plus pengikut,widget pengikut Google+,followers,tutorial google plus,widget blog,widget blogspot,widget blogger,cool widget,widget keren,widget cantik,tutorial blog,google+,widget jejaring sosial,widget terbaru,widget unik,widget indah

Cara Memasang Widget Google+ Slide Out
  • Login ke blogger.com
  • Pada menu drop down, pilih Layout (Tata Letak)
  • Klik Add a gadget dan pilih HTML/JavaScript
  • Copy Paste kode berikut pada kolom yang tersedia
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQADnlgP39A46SvkO9N65C7PVfuWC3HZoO6-VlT48hApaU0VfmgAugNv_JaENl2JgNeDZ-UNfi84GBvM5dwqizWxP0YVtAGjVK1JKFZlSD8oZPMXg9_d5A60-qQu4mawcfUkVwCz24d84/s1600/google+plus+gemar+html.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 330px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 16px;
background: white;
border: 1px solid #ff4747;
border-right: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/108329354747256877665" data-source="blogger:blog:followers" data-width="320">
</div>
<script>
<!--
document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x57\x69\x64\x67\x65\x74\x20\x47\x6F\x6F\x67\x6C\x65\x2B\x20\x46\x6F\x6C\x6C\x6F\x77\x65\x72\x73\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x3E\x54\x75\x74\x6F\x72\x69\x61\x6C\x42\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
</script>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        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>​
  • Simpan widget Google Plus sobat.

Tambahan :
Silahkan ganti https://plus.google.com/108329354747256877665 dengan URL akun Google+ sobat.

Minggu, 17 November 2013

Cara Membuat Widget Social Subscription Penuh Warna

Dalam satu minggu, tutorialblogspot.com melakukan update terjadwal sebanyak dua atau tiga kali. Saya selaku Author tidak pernah menulis posting kemudian langsung dipublikasikan. Saya masuk laman blogger.com, terkadang satu minggu sekali, dan tidak jarang satu bulan sekali. Jadi, buat sobat blogger yang bertanya melalui komentar Google Plus kemudian tidak mendapatkan respon secara langsung, saya mohon maaf yang sebesar-besarnya. Kurangnya waktu saya untuk blogging disebabkan oleh pekerjaan saya yang tidak bisa ditinggalkan.

Untuk kesempatan ini, saya akan membagikan sobat blogger kode singkat untuk membuat widget Social Subscription. Bentuk dari widget ini sangat bagus dan penuh warna. Setiap Icon Social Network dihiasi oleh warna background yang colorful dan bundar. Silahkan lihat langsung melalui screenshot di bawah ini!

Widget Social Subscription,widget jejaring sosial,widget social network,widget twitter,widget facebook,widget feedburner,widget google+,widget youtobe

Cara Memasang Widget Social Subscription di blog
  • Masuk ke laman blogger.com
  • Pada menu drop down, pilih layout dan klik Add gadget
  • Add HTML/JavaScript dan Copy paste kode berikut pada kolom yang tersedia
<h2 class='title'>Subscribe</h2> <div class='widget-content'> <style> #social { margin: 15px 0 5px -15px; width: 300px; height: 40px; text-align: center; } #social img { margin-left: 3px; margin-right: 3px; } #social img:hover { opacity: 0.6; } </style> <div id='social'> <a href='URL-TWITTER-SOBAT-DISINI'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3bALoHKpMm1iATFV-Bv0vLuNKO-mjK80OAK33Q_y84l5h2WQ3u4pdV_L6ovLp2aJ264AlJp947YomZtIg9acCBwUg5RoI0WwYRl5aLnmsskFLIK4HErshucW22MJJsZjehZ_P4oNSsN4/s1600/twitter.png' title='Twitter'/></a> <a href='URL-FEEDBURNER-SOBAT-DISINI'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXahKy9cBFYxIdrCzbNUX3EnejpqVUqePV882dJAUPfNG2V9Zaxa-jy1pCTuKrX8iILXGLapJ50PKmRNzTXTWgwpZbd_Jk9x9AZi3tRSPuL-J-LjSr1OkHba6YTqap4lzzh1uJwMa6SwLf/s1600/rss.png' title='RSS'/></a> <a href='URL-FACEBOOK-SOBAT-DISINI'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy8cc7W-jiluB2IS6cn5-mGW0y43xA4g9ee7jo9hFdECKuxqcL7qyZFVlkujMNb-mR07qjITUoIq0xQQ8VSn9XtgQBclT4anIzOUGyfqYyeEAYEKhztetPcBkieqwRowg9C4fGnGJFtLcV/s1600/facebook.png' title='Facebook'/></a> <a href='URL-GOOGLE-PLUS-SOBAT-DISINI'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqmT9Dmuf8M4z8wgQk_VFMczcCMX9UL8V_AqnDyqeka8paDvDtJrN47iNxNpNOSZFDZqydqfW5cRuxMwJV36mHijcgYEURzJBM10BJlFhxoG0dsgDkNECJcgE0l9ZegXMURThpNIbUMxhV/s1600/google%252B.png' title='Google Plus'/></a> <a href='URL-YOUTOBE-SOBAT-DISINI'><img alt='Youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4j0RYEi_dY52RmF1c2GmeBzlUWqbY2RLZmOAMh5yn7r1vsbwsI7Ad4xRoYFgHqSAy4YwiKhvNYQxvG6vdmhxGS4VxklsRN0SaF09qIR0CitCOB-41HnRilQVV6jkiRip-95fRbDlx3lI/s1600/you_tube.png' title='Youtube'/></a>
<script>
<!--
document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x53\x6F\x63\x69\x61\x6C\x20\x53\x75\x62\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x3E\x54\x75\x74\x6F\x72\x69\x61\x6C\x42\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
</script>
  • Simpan widget sobat

Tambahan :
Ganti URL yang menggunakan huruf Capital dengan URL sobat

Senin, 28 Oktober 2013

Widget Popular Post Yang Menakjubkan

Widget Popular Post merupakan widget bawaan blogger. Widget ini menampilkan list posting yang paling sering di baca oleh pengunjung per minggu, bulan atau sepanjang waktu. Bentuk dasar widget ini menampilkan thumbnail posting, ringkasan posting dan judul posting. Untuk membuat widget Default blogger ini terlihat lebih stylish, kita akan menambahkan sedikit kode CSS. Kenapa kita harus tambahkan kode CSS? Untuk membuat widget ini berwarna-warni (Seperti widget popular post sebelumnya), supaya daftar posting di atur menggunakan nomor dan supaya terbentuk efek hover pada gambar atau thumbnail.

Cara buat widget popular post,popular post hover efek hover,popular post dengan thumbnail,popular post berwarna warni,popular post bernomor,widget cantik untuk blogger,cara membuat widget popular post,widget blog,free widget,cara membuat blog keren

Cara membuat widget popular post lebih stylish
<!-- Popular posts multi colored tutorialblogspot.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:97%}
#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;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:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 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;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored tutorialblogspot.com -->
  • Save Template.

Jika posting ini bermamfaat buat sobat blogger, jangan lupa untuk membagikan posting ini ke lingkaran sobat di situs jejaring sosial Google+

Kamis, 17 Oktober 2013

Cara Memasang Widget Feed Validator

Sebelum Anda memasang Widget Feed Validator dari W3c, yang harus Anda lakukan pertama adalah melakukan validasi feed di laman W3c. Silahkan kunjungi URl ini untuk melakukannya : http://validator.w3.org/unicorn/#validate-by-uri+task_feed. Pada kolom yang tersedia, masukkan URL web blog sobat. Setelah itu, tekan tombol "Check/Periksa". Jika atom Feed Anda Valid, Anda akan mendapatkan pemberitahuan seperti di bawah ini.

feed validator logo, feed validator png,cara memasang widget feed validator,menambahkan widget feed validator di blog,cara validasi feed blog,feed valid,feed validator,feed valdator banner,cara memasang widget feed validation

If you would like to create a banner that links to this page (i.e. this validation result), do the following:
  1. Download the "valid Atom 1.0" banner.
  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
  3. Add this HTML to your page (change the image src attribute if necessary):
    <a href="http://feed2.w3.org/check.cgi?url=http%3A//www.tutorialblogspot.com/feeds/posts/default">
    <img src="valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" />
    </a>
If you would like to create a text link instead, here is the URL you can use:
http://feed2.w3.org/check.cgi?url=http%3A//www.tutorialblogspot.com/feeds/posts/default

Apa yang harus dilakukan setelah mendapatkan pemberitahuan seperti di atas? Yang harus Anda lakukan adalah meng-copy paste kode yang terdapat pada poin ke tiga ke blog Anda dengan cara :
  1. Login ke blogger.com
  2. Pada menu drop down pilih Tata Letak
  3. Klik Add a Gadget dan HTML/JavaScript
  4. Letakkan kode yang didapat pada kolom yang tersedia.
  5. Klik tombol simpan

Jika posisi widget Feed Validator tidak di posisi tengah, Anda bisa menyisipkan tag center sebelum dan setelah kode. Lihat contoh berikut!
<center>
<a href="http://feed2.w3.org/check.cgi?url=http%3A//www.tutorialblogspot.com/feeds/posts/default">
    <img src="valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>
</center>

Senin, 07 Oktober 2013

Cara Memasang Widget Sharing Super Keren Di Bawah Posting

Untuk membuat sebuah posting, biasanya waktu saya yang terbuang tidak lebih dari 30 menit. Tapi, untuk beberapa minggu ini, saya menghabiskan waktu 2 hari hanya untuk menulis satu posting. Penyebab dari semua ini tidak lain dan tidak bukan karena kodisi fisik saya yang drop yang disebabkan oleh perjalanan jauh yang saya lakukan minggu kemarin. Biasanya, teknik paling ampuh untuk mengobati keadaan yang seperti ini saya lakukan dengan dua cara yaitu dengan melakukan pijat refleksi atau teknik sedot darah dengan metode Bekam.

share button,tombol berbagi,social sharing,cara membuat widget berbagi,caramemasang tombol berbagi,cara menambahkan social network di bawah posting,tombol share di bawah arikel,facebook share,stumble share,twitter share,google+ share,Tombol pinterest,tombol digg,jejaring sosial,widget social sharing blogger

Waduh... Jadi kebanyakan cerita. Oya... Buat sobat blogger saya ingin memasang Widget Sharing Social atau tombol berbagi atau share button atau apalah istilahnya. Anda bisa menggunakan kode yang saya siapkan ini. Kode ini akan menghasilkan Widget Social Sharing yang sangat keren. Kalau pengunjung blog Anda mengarahkan crussor-nya ke arah widget ini, maka widget ini akan terlihat meredup (Kecuali pada ikon yang ditunjuk, tetap terang dan menampilkan teks). Untuk demo-nya atau live preview bisa di lihat di bawah ini!

Demo




Bagikan Artikel ini ke teman Anda...!!!

Untuk memasang widget berbagi ini di bawah artikel atau posting blog tidak sulit. Coba Anda ikuti saja langkah-langkah di bawah ini!

  • Anda masuk dulu ke blogger.com
  • Pilih Template dan Edit HTML
  • Cari kode ]]> </ b: skin> dan letakkan kode berikut di atas kode ]]> </ b: skin>
ul.social_tutorialblogspot{list-style:none;display:inline-block;margin:15px auto}ul.social_tutorialblogspot li{display:inline;float:left;background-repeat:no-repeat}ul.social_tutorialblogspot li a{display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none}ul.social_tutorialblogspot li a strong{font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px}ul.social_tutorialblogspot li.abfacebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQZqvboswuuDW_5i1RG2s9nw4p_H6DnpYiPrAXXbribZjPX7mFRkik3CjN50Qwes75Gc1GxHnQwC6S7b8p_GNFEFNZB51aSjP7fB00LrKMhlkqo1Rzmt6u-_2MV0ZylHR1BLD_hQ7PZlX/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE1bCvb8-ICfkbgyGCsWy10UsKvULIcp_RR_NiiFO9DMW-CD11J0753L__DAKBTQgX6mHs2vfbyRJ0a5iM_iqANFY6wm2JkcoO3ArUYFfAEQOChOR3Iv_IZF2RAVv9yDpIYIVGKdNPgIxQ/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCevqOgeQdNPAVm0eMPwNI9HRX4FV7vdq36w2b51zdInxbWTJ1IfVyAOJh4OcF19VefzkGhLi37kXfTcUv3rx4KJdGB5yWt4qoYwMw-iHcFTbJKjgGw4C9psMTyz7LMxb_rbpbQIE8VAoO/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTYljreMiJaMk9DfLE08kOXx_xmGlNuYF7dei4SA_G6jM2qZK6uStZM8KzIa3vdPqinPHqIhPaMeHwysW8Pl65IO66FPDWHn5EGGYg_1MT4sF9cp88_TR5fiXst1ABVeWQ-aw4vUnvqqil/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVN9R52cNrs8IxV-awygb2q2Rv1dlDOJL1KzSCzdOy4EhLv9SSIwDQSOEuUh5psMbMxQDvrUZoFAfyyKSn6e6_7C0aFieaw8Wu0r5p1IBG8azvwtOVSeJHrm6lJcizJl1ZbzPrrajETWYm/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivazgkQnPeJYVKbCau571PACEgUYt1DIck6hjIA1xHN7KUs1hQaE3Bmx1eB-zl7bZEJY-3iGaDlfbbPQ23lHrEj3Z5zGPpvc43G99QqfYMiWZlmZaqBMuk521EGT5hxwpo1LA1CuLJyJUv/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_-RZugyQ5D_XsQv4P5H9wza2udSnd91bIAYJgKI2ZZxvao05FNa3UJVXm8M6vt3ik8PHUXwdWY-MdT4b1B6znQy39t_pSKFDu7L51Gh6ftMj7F2uzn7oHrEqAYgZO5QwX5EYns4aoeVW/s1600/tutorialblogspot-Linkedin-icon.png)}#animation_tutorialblogspot:hover li{opacity:.2}#animation_tutorialblogspot li{-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms}#animation_tutorialblogspot li a strong{opacity:0;-webkit-transition-property:opacity,top;-webkit-transition-duration:300ms;-moz-transition-property:opacity,top;-moz-transition-duration:300ms}#animation_tutorialblogspot li:hover{opacity:1}#animation_tutorialblogspot li:hover a strong{opacity:1;top:-10px}

  • Cari kode <data:post.body/> dan letakkan kode berikut SEBELUM kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Bagikan Artikel ini ke teman Anda...!!!</b></div>
    <ul class='social_tutorialblogspot' id='animation_tutorialblogspot'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>
  • Preview template Anda terlebih dahulu baru di Save.

Tambahan :
  1. Kalau Anda sudah menerapkan fitur read more otomatis, kode kedua sebaiknya diletakkan setelah kode Read More.
  2. Kode CSS di atas sudah di kompress menggunakan Online YUI Compressor jadi Anda tidak perlu kompress lagi.


Senin, 30 September 2013

Membuat Widget Popular Post Dengan Gambar Round Corner

Ternyata, widget popular post cukup di gemari oleh banyak blogger, hal ini terbukti dengan banyaknya situs web yang memasang widget tersebut. Jadi, sangatlah wajar kalau kita sering menemukan tutorial yang membahas tentang cara memodifikasi widget popular post dengan menawarkan style yang berbeda-beda. Saya sendiri, beberapa bulan yang lalu sempat juga membuat posting tentang cara membuat widget popular post berwarna warni di blog, bisa di baca melalui link ini.

widget cantik,popular post sudut bundar,popular post dengan thumbnail,gambar popular post,cara membuat widget popular post

Apa kelebihan widget popular post yang saya bawa kali ini?
  1. Menggunakan Efek Hover
  2. Thumbnail gambar tidak kotak (Menggunakan Round Corner)
  3. Background terpisah di setiap judul posting dan menggunakan efek round corner (Sudut bulat)

demo,contoh,sampel

Cara menerapkan kode widget Popular Post
  • Sign in di blogger.com
  • Pada menu drop down pilih template dan klik "Edit HTML"
  • Cari kode ]]></b:skin> lalu tempatkan kode berikut sebelum kode ]]></b:skin>
/* Kode CSS tutorialblogspot.com */
.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
.popular-posts ul li a{font-style:italic}
.popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
.popular-posts ul
li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}
  • Simpan template.

Cara konfigurasi widget popular post
  1. Setelah menerapkan kode di atas, klik Layout (Tata letak)
  2. Klik add a gadget
  3. Tambahkan widget Popular Post
  4. cara memasang widget popular post di blog
  5. Hilangkan tanda centang pada "Snippet" atau "Cuplikan"
  6. Klik Save

Rabu, 31 Juli 2013

Cara Membuat Recommended Post Slide Out Di Blogger Dengan Mudah

Recommended Post Slide Out adalah sebuah widget yang menampilkan Related Post atau artikel terkait melalui menu pop up yang muncul di bagian bawah posting sebelah kanan. Recommended Post Slide Out sebelumnya merupakan widget Wordpress, tetapi saat ini pengguna blogger dapat menggunakan atau memasang widget Recommended Post Slide Out di blog mereka.

Recommended Post Slide out,widget Recommended Post Slide out,blogger widget,related post slide out,slide out,related post di bawah posting,artkel berhubungan,related articel,rekomendasi,direkomendasikan untuk anda

Buatlah pengunjung blog sobat blogger terpukau dan buatlah blog sobat terlebih keren dengan memasang widget Recommended Post Slide out. Bagaimana cara membuat Recommended Post Slide out? Atau bagaimana cara memasang Recommended Post Slide out di blog? Sangat mudah dan sangat gampang. Sobat blogger tidak perlu edit template dan sobat blogger cukup menambahkan widget Recommended Post Slide out dalam hitungan kurang dari 30 detik

Cara Memasang Recommended Post Slide Out Di Blogger

Add Page Element,add widget,add to blogger
  1. Sign In di blogger.com
  2. Lalu klik tombol di bawah ini dan klik Add Widget

Post Slide Out ini tidak muncul di halaman Home atau beranda, jadi untuk memastikan kode ini berhasil apa tidak, silahkan buka salah satu postingan sobat dan tarik scroll dari media browser yang sobat blogger gunakan.

Kamis, 18 Juli 2013

Cara Membuat Widget Komentar Avatar Yang Cantik Di Blog

Widget komentar yang diletakkan di sidebar atau di Footer, terkadang menjadi motivasi bagi pengunjung blog kita untuk memberikan komentar karena komentar mereka plus foto mereka langsung terpampang di widget komentator. Lho... Foto atau gambar dari komentator kok bisa terpampang di widget komentar? Karena Widget Komentar ini adalah Recent Comments Widget with Avatar (Widget Komentar yang menampilkan Avatar).

komentar,widget komentar,widget blogger,komentar blog,widget komentator,komentar avatar,widget komentar avatar,avatar komentator,avatar,Recent Comments Widget with Avatar

Tidak sedikit blog atau situs yang memasang widget komentar dengan avatar ini, karena selain bermamfaat buat blog dapat juga memperindah tampilan blog. Insyaallah untuk kedepannya, saya akan memberikan Tutorial Blogspot tentang cara buat widget komentar yang simple (Sederhana). Talk less do more, let's practice to make it.

Cara Membuat Widget Komentar Avatar di Blogger


  • Sign In di blogger.com
  • Pada Menu drop down, Pilih layout
  • Klik Add a gadget dan pilih HTML/JavaScript
  • Copy paste kode berikut pada kolom yang tersedia
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<p style="display:none;">Recent Comments Widget with Avatar by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tutorialblogspot.googlecode.com/files/recentcommentavatar.js"></script>
<script type="text/javascript" src="http://contoh.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
  • Jangan Lupa mengganti http://contoh.blogspot.com dengan URL blog sobat,lalu simpan Widget sobat

Tambahan :
Jika sobat blogger memasang komentar Google Plus, maka widget Komentar Avatar ini TIDAK BISA di pasang di blog sobat.

Jumat, 05 Juli 2013

Koleksi Widget Ramadhan atau Puasa Yang Unik dan Keren untuk Blog

Beberapa hari ke depan, kita akan dihadapkan pada bulan yang sangat istimewa buat umat muslim di seluruh dunia yaitu bulan Ramadhan. Allah Ta’ala berfirman :

شَهْرُ رَمَضَانَ الَّذِي أُنْزِلَ فِيهِ الْقُرْآنُ هُدًى لِلنَّاسِ وَبَيِّنَاتٍ مِنَ الْهُدَىٰ وَالْفُرْقَانِ ۚ فَمَنْ شَهِدَ مِنْكُمُ الشَّهْرَ فَلْيَصُمْهُ ۖ وَمَنْ كَانَ مَرِيضًا أَوْ عَلَىٰ سَفَرٍ فَعِدَّةٌ مِنْ أَيَّامٍ أُخَرَ ۗ يُرِيدُ اللَّهُ بِكُمُ الْيُسْرَ وَلَا يُرِيدُ بِكُمُ الْعُسْرَ وَلِتُكْمِلُوا الْعِدَّةَ وَلِتُكَبِّرُوا اللَّهَ عَلَىٰ مَا هَدَاكُمْ وَلَعَلَّكُمْ تَشْكُرُونَ

Artinya : (Beberapa hari yang ditentukan itu ialah) bulan Ramadhan, bulan yang di dalamnya diturunkan (permulaan) Al Quran sebagai petunjuk bagi manusia dan penjelasan-penjelasan mengenai petunjuk itu dan pembeda (antara yang hak dan yang bathil). Karena itu, barangsiapa di antara kamu hadir (di negeri tempat tinggalnya) di bulan itu, maka hendaklah ia berpuasa pada bulan itu, dan barangsiapa sakit atau dalam perjalanan (lalu ia berbuka), maka (wajiblah baginya berpuasa), sebanyak hari yang ditinggalkannya itu, pada hari-hari yang lain. Allah menghendaki kemudahan bagimu, dan tidak menghendaki kesukaran bagimu. Dan hendaklah kamu mencukupkan bilangannya dan hendaklah kamu mengagungkan Allah atas petunjuk-Nya yang diberikan kepadamu, supaya kamu bersyukur. (Al Baqarah 185)

Sebagai seorang blogger atau webmaster, ada banyak hal yang bisa kita lakukan untuk menyambut kedatangan bulan ramadhan, salah satunya dengan cara memasang widget puasa atau Ramadhan yang berupa ucapan " Marhaban Ya Ramadhan" atau Selamat menunaikan ibadah puasa. Di bawah ini beberapa widget Ramdahan yang kami sediakan. Untuk memasang widget di bawah ini, silahkan klik tomol Add to Blogger yag terdapat di bawah setiap Widget.

1. Widget Selamat menunaikan Ibadah Puasa

Selamat Menunaikan Ibadah Puasa,widget puasa,widget ramadhan,widget blog,widget blogger,widget blogspot,widget agama islam,widget agama,widget religi


2. Widget Marhaban Ya Ramadhan Pak Haji



3. Widget Marhaban Ya Ramadhan Bu Haji



4. Widget Marhaban Ya Ramadhan plus waktu




Semoga keempat widget blogger di atas menambah semarak keindahan bulan puasa. Buat semua pengunjung yang membaca tutorial ini, saya ucapkan "Selamat menunaikan Ibadah Puasa", Mohon maaf lahir dan Batin.

Senin, 20 Mei 2013

Cara Memodifikasi Tampilan Widget FeedBurner Supaya Terlihat Indah

Tidak lebih dari lima bulan yang lalu, saya pernah membuat sebuah posting dengan judul "Cara Buat Widget Recent Post Dengan FeedBurner". Setelah saya coba pasang widget Feedburner itu pada blog saya yang lain, saya baru sadar tenyata tampilan dari widget Feedburner itu sangat simple (Sederhana). Jangan-jangan karena simpel-nya itu, banyak blogger yang tidak memasangnya. Beranjak dari semua itu, saya pun mencari script di Google yang bisa digunakan untuk memperindah tampilan Widget FeedBurner milik sobat, dan Alhamdulillah, saya pun menemukannya.

Dengan menggunakan kode CSS yang saya dapatkan Bullet list yang terdapat di sisi kanan judul posting kita akan di ganti dengan sebuah ikon yaitu Ikon tanda silang. Bila pengunjung blog kita mengarahkan cursor-nya pada judul posting kita, maka ikon tersebut akan berubah menjadi ikon thick (ikon tanda centang). Bagaimana? Keren kan?

Cara Memodifikasi Tampilan Widget FeedBurner
  • Masuk ke akun Blogger sobat
  • Setelah itu, pada Widget Feedburner sobat, sisipkan kode berikut :
<style>
 /* ============ Customize Fedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 div.feedburnerFeedBlock ul li {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrwTJrUQU0DRPjFWDxnmqyPKsrlbCenWB_UPjAyg1SKj9TS3LYKBVVB19s52FAeYDgO9LPvNGHKPnIgU_K_DKo7qYbMgrPaCCY7k3LjJguF3D46o42g4icI02-DXCwbMRzCSRqioS7hNK/s1600/rb+cancel+icon.png) no-repeat 2px;
     list-style-type: none;
     margin: 0 0 5px 0px;
     padding: 5px 5px 5px 30px !important;
     border: 1px solid #dddddd;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
  }
 div.feedburnerFeedBlock ul li:hover {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AsXW7t8MtPvfj58j6MI8u7HOOdct6THzsnGoCU8-phILhJjOQavxkw2zm83lMaGjnBAkPpSCJEyuwnD7ZFTs_WUisQEgaGJbI22urqJGhDZPN2yhgglH6TENpDZHM2fhAI3xJoRxPMUn/s1600/rb+mark+icon.gif) no-repeat 2px;
     border: 1px dashed #848484;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.feedburnerFeedBlock ul li a:hover {
     text-decoration: none;
}
 div  #creditfooter {
     display: none;
 }
 /* ============ Customize Feedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 </style>
  • Sehingga keseluruhan dari kode kita akan terlihat seperti di bawah ini!
<style>
 /* ============ Customize Fedburner Buzzboost WidgetBy www.tutorialblogspot.com ============= */
 div.feedburnerFeedBlock ul li {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrwTJrUQU0DRPjFWDxnmqyPKsrlbCenWB_UPjAyg1SKj9TS3LYKBVVB19s52FAeYDgO9LPvNGHKPnIgU_K_DKo7qYbMgrPaCCY7k3LjJguF3D46o42g4icI02-DXCwbMRzCSRqioS7hNK/s1600/rb+cancel+icon.png) no-repeat 2px;
     list-style-type: none;
     margin: 0 0 5px 0px;
     padding: 5px 5px 5px 30px !important;
     border: 1px solid #dddddd;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
  }
 div.feedburnerFeedBlock ul li:hover {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_AsXW7t8MtPvfj58j6MI8u7HOOdct6THzsnGoCU8-phILhJjOQavxkw2zm83lMaGjnBAkPpSCJEyuwnD7ZFTs_WUisQEgaGJbI22urqJGhDZPN2yhgglH6TENpDZHM2fhAI3xJoRxPMUn/s1600/rb+mark+icon.gif) no-repeat 2px;
     border: 1px dashed #848484;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.feedburnerFeedBlock ul li a:hover {
     text-decoration: none;
}
 div  #creditfooter {
     display: none;
 }
 /* ============ Customize Feedburner Buzzboost Widget By www.tutorialblogspot.com ============= */
 </style>
<script src="http://feeds.feedburner.com/tutorialblogspot/PbmK?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/tutorialblogspot/PbmK"></a><br/>Powered by FeedBurner</p> </noscript>

Tambahan :
  1. Yang warna merah adalah kode Feedburner.
  2. Hasil akhirnya akan terlihat seperti di bawah ini!

Live Demo


Selasa, 02 April 2013

Biar Pengunjung Tentukan Jumlah Laman Yang Akan Ditampilkan

Saya tidak tahu sebutan atau nama yang tepat untuk widget blogger ini. Yang pasti, widget ini dapat menampilkan jumlah posting sesuai dengan yang ditentukan oleh pengunjung blog kita. Jadi, dengan adanya widget ini pengunjung blog kita dapat dengan mudah mencari Tutorial Blogspot atau mencari artikel yang mereka butuhkan. Seperti kata salah satu teman saya "This widget allows your blog viewers to select the number of posts to display per page"

Bagaimana Cara Memasang Widget Blogger ini?
Cukup dengan melihat gambar di bawah ini, sobat blogger pasti akan tahu bagaimana memasang widget ini.

add a gadget,add a widget,blogger widget,blogger gadget
Silahkan Sign In di akun blogger sobat, kemudian klik tombol yang tersedia!

Jumat, 29 Maret 2013

Cara Membuat Tombol Berbagi Paling Keren

Shareaholic Sassy Bookmarks Widget adalah widget berbagi untuk blogger blog yang akan membantu sobat blogger dalam mempromosikan konten atau blog sobat blogger ke situs-situs jejaring sosial seperti Google Plus, Twitter, Facebook, Pinterest, Tumblr atau ke Email. Widget berbagi ini memiliki tampilan yang sangat indah dan menakjubkan. Situs-situs jejaring sosial yang terdapat dalam widget ini tidak akan muncul bila sobat blogger tidak mengarahkan Cursor sobat kearahnya.

Shareaholic Sassy Bookmarks Widget,blog widget,blogger widget,widget berbagi,sharing widget

Widget Shareaholic Sassy Bookmarks di disain oleh ShareHolic, sebuah situs yang cukup famous dengan widget-widget jejaring sosial buatannya. Salah satu widget buatannya yang cukup terkenal adalah Widget Sexy Bookmarks. Apa kelebihan dari Widget Shareholic Sassy Bookmarks? Berikut ini keterangan shareholic.com yang saya petik dari situs resminya:
  1. Looks great on mobile devices
  2. They’re animated
  3. Small size means they load FAST!
Widget ini bisa juga di sebut dengan Floating Sharing Widget, karena posisinya yang melayang di sebelah kiri bawah halaman blog.

Cara Memasang Widget Shareaholic Sassy Bookmarks

  • Sobat blogger harus Sign In dulu di blogger.com,
  • Klik tombol yang kami sediakan di bawah ini

    • Lalu klik tombol Add Widget.
    Add Page Element

    Selasa, 05 Maret 2013

    Cara Memasang Jam Animasi Indah di Blog

    Beberapa waktu yang lalu, saya sempat memberikan Tutorial Blogspot tentang cara memasang Jam Digital di Blog. Widget Jam pada tutorial sebelumnya memiliki tampilan sederhana cocok buat blogger yang lebih mengutamakan tampilan yang simple untuk blognya. Bagaimana untuk blogger yang lebih mengutamakan keindahan? Oleh sebab itu, saya sudah menyiapkan beberapa jam yang memiliki tampilan yang sangat cantik. Dalam dunia blogging, widget jam ini disebut dengan nama Stylish Flash Animated Clock (Jam yang menggunakan animasi Flash).

    Jam,o'clock,clock,jam animasi,jam blog,waktu,time,second,minute,menit,cara memasang jam animasi,Stylish Flash Animated Clock

    Kalau sobat blogger memasang Widget Animasi jam di blog sobat, di jamin tampilan dari blog sobat tambah terlihat indah dan cantik. Jadi, buktikan saja langsung dengan memasang Widget Stylish Flash Animated Clock.

    Cara Memasang Jam Animasi di Blogger Blog

    1. Sign In di blogger.com
    2. Pada menu drop down, pilih Layout
    3. Klik Add a gadget dan pilih HTML/JavaScript
    4. Copy Paste kode kode yang sudah saya siapkan di bawah pada kolom yang tersedia
    5. Simpan Widget sobat

    Widget Jam dengan Animasi bagian 1



    Widget Jam dengan Animasi bagian 2



    Widget Jam dengan Animasi bagian 3



    Widget Jam dengan Animasi bagian 4


    Widget Jam dengan Animasi bagian 5

    Widget Jam dengan Animasi bagian 6

    Widget Jam dengan Animasi bagian 7

    Widget Jam dengan Animasi bagian 8

    Widget Jam dengan Animasi bagian 9
    Widget Jam dengan Animasi bagian 10
    Widget Jam dengan Animasi bagian 11
    Widget Jam dengan Animasi bagian 12
    Widget Jam dengan Animasi bagian 13


    Kode dari masing-masing widget Jam
    Kode Widget Jam dengan Animasi bagian 1
    <div class="noop-clock"><center><embed height="140" src="http://www.hitarek.com/clock/clock24-6.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="210"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 2
    <div class="noop-clock"><center><!-- hitarek.com --><embed width="210" src="http://www.hitarek.com/clock/clock24-2.swf?TimeZone=IST&Place=&" height="140"  type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 3
    <div class="noop-clock"><center><!-- hitarek.com --><embed width="120" src="http://www.hitarek.com/clock/clock5-1.swf?TimeZone=IST&Place=&" height="230" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 4
    <div class="noop-clock"><center><embed height="230" src="http://www.hitarek.com/clock/clock5-2.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="120" wmode="transparent"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 5
    <div class="noop-clock"> <center><iframe allowtransparency="true" frameborder="0" height="148" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.hitarek.com/animation/dolls5.html" vspace="0" width="100"></iframe></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center>
    Kode Widget Jam dengan Animasi bagian 6
    <div class="noop-clock"> <center><!-- hitarek.com --><embed width="130" src="http://www.hitarek.com/clock/clock11-4.swf?TimeZone=IST&Place=&" height="130" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 7
    <div class="noop-clock"> <center><!-- hitarek.com --><embed width="160" src="http://www.hitarek.com/clock/clock25-9.swf?TimeZone=IST&Place=&" height="160" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 8
    <div class="noop-clock"> <center><!-- hitarek.com --><embed width="140" src="http://www.hitarek.com/clock/clock22-5.swf?TimeZone=IST&Place=&" height="180"  type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.tutorialblogspot.com/2013/03/cara-memasang-jam-animasi-indah-di-blog.html">Free Clock</a></center></div>
    Kode Widget Jam dengan Animasi bagian 9
    <div class="noop-clock"> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object> </div>
    Kode Widget Jam dengan Animasi bagian 10
    <div class="noop-clock"> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object></div>
    Kode Widget Jam dengan Animasi bagian 11
    <div class="noop-clock"> <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div>
    Kode Widget Jam dengan Animasi bagian 12
    <div class="noop-clock"> <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed> </div>
    Kode Widget Jam dengan Animasi bagian 13
    <div class="noop-clock"> <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object> </div>
    Kalau sobat blogger ingin sedikit memodifikasi letak dari widget jam tersebut, coba masukkan kode berikut SETELAH kode jam:
    <style type="text/css">.noop-clock { position: fixed; right: 0%; top: 0%; padding: 3px 7px; box-shadow: -2px 2px 6px; }</style>

    Sabtu, 02 Februari 2013

    Cara Memasang Widget Twitter Fan Box Yang Indah Di Blog

    What is Twitter Fan Box? Twitter Fan Box dikenal juga dengan nama Twitter Follower Box, yaitu sebuah widget untuk Blogger blog atau Wordpress blog yang menampilkan foto profile dan nama profile dari pengguna Twitter yang mengikuti kita di jejaring sosial itu. Tampilan dari widget Twitter Fan Box tidak jauh beda dengan Widget Facebook Fan Box atau Google Plus Followers. Untuk melihat lebih jelas, bagaimana tampilan dari widget ini, sobat blogger bisa melihat screenshot yang sudah saya siapkan di bawah ini.

    Twitter Fan Widget,Twitter Fan Box,widget twitter,twitter,widget blogger,widget fans,widget followers

    Cara Menambahkan Twitter Fan Box Di Blogger
    • Sign in terlebih dahulu di blogger.com
    • Setelah itu, Pada menu Drop Down klik Add A gadget dan pilih HTML/JvaScript
    • Copy Paste kode berikut pada kolom yang tersedia (Ingat... Jangan lupa untuk merubah atau mengganti tulisan yang berwarna merah dengan ID Twitter sobat blogger)
    <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script> <div id="twitterfanbox"> <script type="text/javascript">fanbox_init("2torialBlogspot");</script></div>
    • Simpan Widget Sobat

    Get a lot of Twitter's followers/fans with this widget...!!!

    Jumat, 01 Februari 2013

    Cara Memasang Widget Radio Atau Player Streaming Di Blog

    Perkembangan teknologi internet saat ini semakin mempermudah kita untuk mengkonsumsi informasi-informasi yang kita butuhkan baik itu berupa informasi Olahraga, Pendidikan, Makanan, Hukum, Hiburan atau Kajian Agama. Perkembangan teknologi internet ini sangat dimamfaatkan oleh pemilik perusahaan-perusahaan Radio sehingga tidak sedikit dari mereka menyediakan widget player streaming supaya pendengar radio mereka, dapat juga mendengarkan siaran mereka melalui jaringan internet yang sudah terhubung di komputer.

    widget player streaming,widget radio,radio internet,radio sunnah

    Widget radio atau widget player streaming yang saya sediakan buat sobat blogger ini hanya membahas tentang ceramah Islam (Menebar Cahaya Sunnah). Dalam satu widget, terdapat puluhan Channel radio yang bisa kita pilih sesuka hati kita. Waduhhhh... Keren banget ini! Internetan sambil denger kajian lho...!!! Saya yakin, situs atau blog kita pasti menjadi lebih bermamfaat buat pengunjung kita jika memasang widget radio ini.

    Live Demo

    Cara Memasang Widget Player Streaming Di Blogger

    1. Login di blogger.com
    2. Kalau sudah login, klik tombol di bawah ini dan klik Add Widget


    Secara otomatis, Widget radio dari puluhan Channel langsung terpasang di blog sobat blogger.