Tips Trik Blogging

Membuat Social Profile Widget Keren: Metro UI

noreply@blogger.com (Amatullah Ummu Ubaid) — Thu, 02 May 2013 22:16:00 +0000

Alhamdulillah setelah sebelumnya saya posting tutorial membuat modifikasi pada widget profil blogger, kali ini saya ingin mengetengahkan cara membuat widget profil sosial networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati.
View Demo

Fitur

Meliputi 7 jejaring social yang paling sering digunakan
Efek hover dan desain yang elegan,
Sangat rapi dan bersih
Tidak ada JavaScript, No Jquery, murni dengan CSS

Cara menambahkan widget ini ke blog

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger

Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
Copy dan paste kode berikut pada kolom konten:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur rel="nofollow"></a></li>
</div>
<style>
.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{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.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>

Kustomisasi: Ganti link profil saya dengan link profil milik anda.

Simpan dan lihat hasilnya diblog anda.

Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.

Modifikasi Widget Profil Blogger

noreply@blogger.com (Amatullah Ummu Ubaid) — Thu, 02 May 2013 13:24:00 +0000

Tutorial kali ini saya ingin mengetengahkan cara membuat modifikasi tampilan widget profil blogger. Sebagaimana tutorial sebelumnya, cara menambahkan basmalah dan hamdalah di awal dan akhir artikel blog, tutorial kali ini juga masih merupakan request sahabat blogger.

Ada beberapa pilihan modifikasi widget profil blog, intinya hanya pada permainan CSS, karena yang ditanya adalah yang terpasang diblog ini maka saya hanya akan memberikan kode sesuai permintaan, untuk selanjutnya anda bisa lebih kreatif dalam membuat modifikasi lainnya.

Baiklah silahkan ikuti langkah-langkah berikut:

cara membuat modifikasi widget profil blogger di blog

1. Setelah login ke akun anda.
2. Pada dasbor >> masuk menu tata letak >> klik tambah gadget >> HTML/JavaScript
3. Pada kolom title beri nama sesuai keinginan, selanjutnya copy dan tempelkan kode HTML berikut pada kolom kontent

<style>
#profileAmatullah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAmatullah:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;  
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
transform: rotate(0deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
} 
</style>
   <!--[endif]----> 

<img align="left" class="opacity" id="#profileAmatullah" src="URL YOUR IMAGE PROFIL" />About YOU<a href="YOUR LINK BLOGGER PROFIL" style="color: #888888;">...Read More</a><!--![endif]----> 

<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/blogID=5143343840607190550&amp;widgetType=Profile&amp;widgetId=Profile1&amp;action=editWidget&amp;sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>

Kustomisasi

Ganti profilAmatullah dengan nama profil anda,
perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
ganti blog ID dengan ID blog anda
silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.

4. Simpan dan klik simpan lagi. Lihat hasilnya diblog anda

Demikian tutorial kali ini, cara modifikasi tampilan widget profil blogger pada blog. Semoga bermanfaat.

Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel

noreply@blogger.com (Amatullah Ummu Ubaid) — Sun, 28 Apr 2013 06:46:00 +0000

Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat fakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.

Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.

Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.

Baiklah cukup untuk pengantar, berikut cara menambahkan basmalah dan hamdalah diawal dan akhir posting blog

Setelah login ke akun blogger anda
Pada dasbor >> klik tab template >> Edit HTML
Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1
Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>
Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم</span></span></span></div><br/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>

<div align='center'><span style='font-size: medium;'>ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين</span></div>

Simpan template dan lihat hasilnya di blog anda.

Demikian tutorial kali ini, cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog. Semoga bermanfaat dan berkah.

Terimakasih.

Cara Menambahkan Google Plus Comments Pada Blogger

noreply@blogger.com (Amatullah Ummu Ubaid) — Tue, 23 Apr 2013 07:36:00 +0000

Setelah memperbaharui editor HTML template blogger, nampaknya Google telah siap merilis banyak perangkat tambahan untuk menjadi yang terdepan, dan kali ini hadir dengan Google+ Comments untuk blogger. Suatu sistem komentar yang berbeda, tidak saja dapat membuat ikatan yang lebih kuat dengan pembaca anda tetapi juga diharapkan dapat meningkatkan keterlibatan pengguna G+. Bagaimana hal ini dapat bekerja? Lanjutkan membaca, saya akan menunjukkan bagaimana kinerja sistem Google+ Comments ini di blogger

Apa Saja Fitur Sistem Google+ Comments?

Baiklah sekarang kita akan membahas setiap aspek dari Google+ Comments, agar para blogger dapat memutuskan apakah tetap setia dengan sistem threaded comments atau mereka harus beralih pada sistem komentar baru saat ini.

Antarmuka Interaktif: Komentar tampil dalam urutan yang sistematis berdasarkan tanggal diterbitkan sehingga pengguna dapat menjawab atau memberikan plus 1 dengan mudah. Anda dapat mengontrol komentar teman-teman anda karena interaktif dan langsung update.

Publik atau Khusus: Sekarang pembaca anda dapat memposting komentar umum atau pribadi mereka kepada orang-orang dalam lingkaran G+ mereka atau selainnya, ketika orang browsing maka mereka dapat melihat komentar tersebut.

Semua kegiatan pada satu tempat: Setiap kali seseorang akan berbagi kontent anda di Google+ atau mereka akan menanggapinya, maka secara otomatis akan menampilkan komentar mereka pada feed komentar di blog anda. Misalnya, jika ada diskusi terjadi tentang konten anda di Google+ maka komentar tersebut, balasan semuanya akan muncul di blog anda.

Edit atau Hapus Komentar: Anda sekarang dapat mengedit atau menghapus komentar Anda. Melalui opsi fleksibilitas Google+ Anda dapat dengan mudah mengedit atau menghapusnya kapan saja, di mana saja. Anda tidak bisa serius, bukan?

Bagaimana, tertarik menambahkan Google+ Comments di blog anda?

Hal pertama yang perlu anda lakukan tentu harus terlebih dahulu menghubungkan blogger dengan profil Google+ anda. Setelah menghubungkan akun anda.

Pada dasbor --> Klik tab Google+

Sekarang untuk mengaktifkan Google Plus Comments anda harus mencentang kotak kecil disamping teks 'Gunakan Google+ komentar di blog ini'
Selesai.

Tidak melihat perubahannya? Kemungkinan anda menggunakan custom template dan perlu untuk mengikuti langkah-langkah tambahan berikut:

Pada dasbor --> Klik Tab Template --> Edit HTML --> Format Template
Klik Dropdown lompat ke widget --> Blog1
Klik code folding tanda panah pada <b:includable id='post' var='post'>
Cari kode <div class='post-footer'> kemudian copy dan paste kode berikut dibawahnya:

<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>

Simpan template dan lihat hasilnya diblog anda. Atau lihat demo komentar disini

Jika anda mengaktifkan sistem Google Plus Comments pada blog maka siapapun yang ingin memposting komentar harus register ke akun G+. Mengaktifkan sistem ini tidak akan menghapus komentar lama anda.

Demikian informasi dan tutorial kali ini, semoga bermanfaat.

Tampilan Baru Editor HTML Template Blogger

noreply@blogger.com (Amatullah Ummu Ubaid) — Sat, 13 Apr 2013 06:23:00 +0000

Google baru baru ini mengumumkan bahwa mereka telah membuat beberapa penyesuaian untuk editor HTML template blogger. Jika anda melihat pada bagian editor template blogger, maka anda akan menemukan bahwa sekarang fitur tersebut mendukung line numbering, syntax highlighting. auto-indentation dan code folding.

Dalam postingan di blog Blogger Buzz, seorang insinyur perangkat lunak Google yaitu Samantha Schaffer dan Renee Kwang mengetengahkan tutorial cara memindahkan tanggal posting blog dari yang awalnya berada diatas posting menjadi dibawah posting sebagai contoh cara mengedit template pada editor template baru blogger.

Jika anda ingin pula turut mencobanya, silahkan ikuti langkah-langkah cara memindahkan tanggal posting blog sebagai berikut:

Klik tab template pada dasbor blogger, klik tombol edit HTML untuk melihat editor HTML template baru anda

Kemudian cari widget "Blog 1" dengan cara cepat langsung ke widget drop down:

Widget ini mengontrol bagaimana postingan blog anda akan ditampilkan, kode dalam widget ini tersembunyi atau dilipat untuk menampilkannya klik tanda panah kecil '►' disamping line numbering

Di dalam tag includable block kode yang membuat tanggal posting:

Potong bagian kode tanggal posting seperti diatas dan pindahkan ketempat yang kita inginkan, sebagai contoh dibawah judul posting

Untuk melihat perubahan klik tombol preview template.

Demikian tampilan editor HTML template blogger yang baru serta sebuah contoh cara mengedit template yang bisa saya uraikan kali ini.

Jika kita perbandingkan dengan versi lama maka opsi dari Expand template widget tergantikan dengan adanya tombol format template, dan code folding yang dapat menjadikan anda jauh lebih mudah dalam mengedit template.

Adapun untuk mencari teks gunakan 'Ctrl + F' dan untuk mengganti teks kode satu persatu, setelah anda mengklik pada editor gunakan 'Ctrl + Shift + F dan untuk mengganti semua kode sekaligus gunakan 'Ctrl + Shift + R'. Silahkan dicoba biar lebih mengerti. Perubahan ini menuntut kita untuk beradaptasi kembali dan bagi kami yang mengetengahkan tutorial harus update menyesuaikan dengan perubahan yang ada. Bagaimana menurut anda dengan perubahan ini?

Referensi: Blog Blogger Buzz

Award Istimewa Dari Dua Sahabat Paling Baik

noreply@blogger.com (Amatullah Ummu Ubaid) — Fri, 29 Mar 2013 00:27:00 +0000

Alhamdulillah hari yang cerah, secerah hatiku saat ini. Semoga hal indah ini juga menjumpai sahabat blogger dimanapun berada. Kali ini saya tidak ingin mengetengahkan tutorial blogger ataupun tips trik blogging dulu, karena saya ingin majang award istimewa dari dua sahabat paling baik yang rasanya tak ada yang tak mengenal keduanya dibelantara blogger?

Bukan sengaja menyematkan kata istimewa dan sahabat paling baik pada award ini.
Istimewa: karena setelah sekian tahun baru kali ini adalagi sahabat yang memberikan apresiasi berupa award, dan setelah custom domain ini terhitung awar pertama dan kedua.

Sahabat paling baik. karena keduanya adalah sahabat yang saya kira tidak pernah lupa untuk membagikan +1 pada setiap sharing posts saya di google plus, keduanya juga merupakan sahabat yang hampir disetiap postingan saya memberikan apresiasi meskipun saya kira salah seorang diantara mereka sudah tidak asing dengan tutorial yang saya ketengahkan karena dia sendiri the next blogger master insyaAllah, bagi saya mereka sahabat yang baik dengan apresiasinya pada saya dan sahabat blogger lainnya akan membantu kita untuk terus semangat dalam berbagi.

Ini dia sahabat yang telah berbaik hati memberikan award diatas

Oh ya ternyata ni, untuk sekedar posting award juga tidak semudah yang saya kira, karena selain award ada pula PR yang harus dikerjakan. PR itu adalah menjawab 7 fakta tentang diri kita dan membagikan kembali award yang didapat ke 15 orang sahabat blogger.

Nah untuk yang pertama tiba-tiba saya berfikir, kesempatan lagi untuk saya memperkenalkan dan menegaskan tentang diri saya yang sering disangkai keliru hanya karena tema blog yang saya usung dan banyaknya blogger yang melakukan pemalsuan identitas dengan alasan yang beragam.

Baiklah 7 fakta itu adalah:

Saya seorang hamba Allah,

seorang manuasia biasa dengan segala kekurangan dan keterbatasnya ingin terus berbagi, Alhamdulillah.

seorang anak dari kedua orang tua yang saya sayangi (semoga Allah menjaga mereka) amiin,

seorang saudari dari saudara-saudara lelaki saya, maka sayalah yang tercantik sendiri :)

seorang istri dari suami yang teramat saya cintai fillah, maka jangan pernah mencoba menodai hati saya :))

seorang Ummi dari anak-anak lelaki saya, maka sekali lagi tetap menjadi yang tercantik diistanaku :)

Jadi tentulah saya seorang wanita/perempuan, maka berhentilah menyapa saya dengan Mas, kang, baang, dll yang lebih tepat sobat sematkan pada lelaki!

Terakhir yang buat saya bingung, mau diforward kemana lagi secara sekarang kayaknya musim award? Khawatir aja yang dikasih dah terima bahkan mungkin dah lebih dari double, akhirnya sebelum posting award harus selancar dulu nyari orang-orang yang akan menerimanya.

Jadi saya kata ini award istimewa untuk orang-orang istimewa karena sobat semua adalah yang terpilih dari hati saya (cieh)

Dan yang terpilih menerima award berikutnya:

Kalau anda sudah menerima award yang sama mohon maaf ya! Saya bingung mau memberikan kesiapa lagi? Pengunjung yang ingin memboyong award ini juga boleh, konfirmasi saja dikolom komentar insyaAllah saya akan kunjungi blog sobat.

Akhirnya PR dari sahabat selesai sudah.

Cara Membuat Widget Member Aktif Di Blog

noreply@blogger.com (Amatullah Ummu Ubaid) — Sat, 09 Mar 2013 17:15:00 +0000

Ingin memberikan apresiasi kepada pengunjung? Banyak cara mewujudkannya, bisa dengan memberikan mereka kenangan sebagai hadiah pada ajang acara yang anda selenggarakan, atau memberikan back link kepada mereka dengan memasang widget top komentator, atau widget member aktif berikut inipun bisa menjadi sebuah alternatif lain bagi anda. Sebenarnya widget ini masih menggunakan script yang sama dari widget top komentator, hanya saja style widget dimodifikasi dengan tampilan berbeda dan kalimat komentar tidak ditampilkan.

Fitur:

Menampilkan nama dan link komentator
Menampilkan Avatar komentator
Avatar dengan polaraid style
Efek hover pada Avatar menampilkan jumlah komentar
Bersih dan elegant

Untuk mendapatkan ide yang jelas tentang widget ini silahkan lihat live demo terlebih dahulu

Tekan tombol view demo

View Demo

Cara menambahkan widget ini keblog

Copy paste saja code berikut kebagian HTML editor posts atau laman mandiri blog anda

<style type="text/css"> 
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
.comments {display: none;}
</style>
<script type="text/javascript">
//<![CDATA[
var homepage = 'http://www.tipstrikblogging.com/',
  maxTopCommenters = 77,
  minComments = 1,
  numDays = 0,
  excludeMe = true,
  excludeUsers = ["Anonymous", "Admin"],
  maxUserNameLength = 42,
  txtTopLine = '[image] [user]',
  txtNoTopCommenters = 'No top commentators at this time.',
  txtAnonymous = '',
  sizeAvatar = 80,
  cropAvatar = true,
  urlNoAvatar = 'http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s' + sizeAvatar + '/avatar_blue_m_96.png',
  urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
  urlMyProfile = '',
  urlMyAvatar = '';
if (!Array.indexOf) {
  Array.prototype.indexOf = function (obj) {
    for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;
    return -1
  }
}
function replaceTopCmtVars(text, item, position) {
  if (!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
    avaimg = author.gd$image.src
  } else {
    var parseurl = document.createElement('a');
    if (authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname
    }
  }
  if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
  if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
  var newsize = "s" + sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
  if (cropAvatar) newsize += "-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
  var authorName = author.name.$t;
  if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
  var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
  if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
  if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
  var authorcode = authorName;
  if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[count]', item.count);
  return text
}
var topcommenters = {};
var ndxbase = 1; 

function showTopCommenters(json) {
  var one_day = 1000 * 60 * 60 * 24;
  var today = new Date();
  if (urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {
      urlMyProfile = elements[i].href;
      break
    }
  }
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
      if (days > numDays) break
    }
    var authorUri = "";
    if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
    if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
    var authorName = entry.author[0].name.$t;
    if (excludeUsers.indexOf(authorName) != -1) continue;
    var hash = entry.author[0].name.$t + "-" + authorUri;
    if (topcommenters[hash]) topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter
    }
  }
  if (json.feed.entry.length > 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    return
  }
  var tuplear = [];
  for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function (a, b) {
    if (b[1].count - a[1].count) return b[1].count - a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
  });
  var realcount = 0;
  for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
    var item = tuplear[i][1];
    if (item.count < minComments) break;
    document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
    realcount++
  }
  if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>

Untuk konfigurasi widget, perhatikan tulisan berwarna merah diatas dan sesuaikan menurut selera anda

Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial membuat widget member aktif. Semoga bermanfaat.

Widget Top Komentator Dengan Avatar

noreply@blogger.com (Amatullah Ummu Ubaid) — Sat, 09 Mar 2013 13:48:00 +0000

Sebelumnya saya sudah pernah mengetengahkan tutorial membuat widget top komentator, kali ini masih masih akan mengetengahkan cara menambahkan widget yang sama namun sedikit perbedaan pada style. Widget top komentator sebelumnya hanya menampilkan nama dari komentator sedangkan widget kali ini menampilkan pula avatar dari komentator. Style tentunya bisa anda modifikasi lagi sesuai dengan keinginan anda, menambahkan efek howover pada avatar atau nama, menampilkan jumlah komentar atau pada jenis dan size link komentator.
Adapun kegunaan dari widget ini, bisa anda maknai sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda.
Jika anda tertarik untuk menambahkan widget top komentator menarik dengan avatar ini, silahkan ikuti tutorial berikut:

Pada dasbor –> Menu Tata Letak –> Tambah gadget HTML/JavaScript

Beri title/judul yang anda inginkan dan Pada kolom konten masukkan kode berikut:

<style type="text/css">
.top-commenter-line img {
-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);
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "Nama Admin"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author; 

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t; 

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); 

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; 

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>'; 

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
} 

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date(); 

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  } 

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); 

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t; 

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue; 

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  } 

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); 

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  }); 

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Silahkan konfigurasikan widget sesuai keinginan anda.

Tulisan berwarna merah dan bercetak tebal diatas (Nama Admin), silahkan diganti dengan nama anda jika anda tidak menginginkan masuk dalam lists top komentator

Simpan dan lihat hasilnya di blog anda.

Demikian tutorial menambahkan widget top komentator di blog. Semoga bermanfaat.

Cara Mengatasi Pesan Komentar Yang Berada Dibawah Formulir Komentar

noreply@blogger.com (Amatullah Ummu Ubaid) — Wed, 27 Feb 2013 12:01:00 +0000

Apa kabar sahabat blogger semua? Semoga berbahagia selalu. Alhamdulillah dihari yang cerah ini saya selaku admin tips trik blogging.com sangat bersyukur dapat menyapa anda lagi. InsyaAllah tutorial kali ini masih akan mengetengahkan seputar trik blogger comment. Sebelumnya saya pernah mengetengahkan trik mengatasi masalah pada code captha yang terpotong, kali ini saya ingin memberikan trik cara mengatasi pesan komentar yang jatuh berada dibawah formulir komentar. Kedua masalah tersebut mungkin masih banyak dialami para blogger, mungkin bukan masalah besar namun masalah pertama tentu akan menyulitkan pengunjung memberikan apresiasi, sedangkan masalah yang kedua tentunya ditinjau dari tata letak desain akan nampak ganjil dan kurang rapi.

Untuk anda yang mengalami masalah ini, silahkan ikuti langkah-langkah cara mengatasi masalah pesan komentar yang jatuh dibawah form komentar berikut:

Setelah login ke akun anda
Pada dasbor Klik Edit HTML ---> Proceed ---> Expand Widget Templates
Klikk Ctrl+F dan cari kode berikut ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Lalu hapus semua kode berawal dari kode<b:includable id='threaded-comment-form' var='post'> sampai </b:includable> selanjutnya ganti dengan kode dibawah ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
    <b:else/>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Selanjutnya Klikk Ctrl+F cari kode berikut ini:

document.getElementById(domId).insertBefore(replybox, null);

Ganti dengan kode berikut ini:

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial kali ini. Semoga dapat menjadi solusi untuk masalah pesan komentar yang jatuh dibawah formulir komentar pada blog anda. Oh ya, jika tertarik untuk membuat modifikasi pada pesan komentar blog anda lihat triknya disini dan trik untuk mempercantik formulir komentar blog anda, cek out disini. Silahkan memberikan apresiasi anda terhadap artikel diatas. Terimakasih.

Dua Modifikasi Threaded Comments Menarik Dan Keren

noreply@blogger.com (Amatullah Ummu Ubaid) — Thu, 21 Feb 2013 19:57:00 +0000

Tutorial kali ini, insyaAllah saya akan kembali membagikan kode CSS untuk dua modifikasi threaded comment blogger. Modifikasi berikut terhitung sebagai versi ke-3 dan ke-4 threaded comment yang pernah saya posting diblog ini, karena sebelumnya saya sudah pernah membagikan dua modifikasi yang berbeda.

Saya sematkan kata menarik dan keren pada modifikasi threaded comment kali ini bukan tak beralasan, sebab modifikasi ini telah memikat hati saya dan mungkin hal yang sama akan berlaku bagi anda pecinta warna. Ya karena letak dominan modifikasi kali ini pada permainan CSS background color dan CSS border.

Tertarik untuk mengganti threaded comment default blogger diblog anda dengan modifikasi threaded comment colored style ini? Silahkan ikuti langkah-langkah berikut:

Tutorial berikut hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini

Cara menambahkan kode CSS modifikasi threaded comment

Setelah login ke akun blogger anda
Pada dasbor klik Template --> edit HTML
Klikk Ctrl+F dan cari kode ]]></b:skin>
Tambahkan kode CSS berikut diatas kode ]]></b:skin>

Kode CSS Threaded Comment Menarik Versi 3

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

Kode CSS Threaded Comment Keren Versi 4

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- 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); 
} 
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

Untuk demo bisa lihat pada blog personal saya disini. Demikian tutorial modifikasi threaded comment menarik dan keren versi 3 dan 4 kali ini. Semoga bermanfaat.

Modifikasi Tampilan Widget Statistik Bawaan Blogger Versi 2

noreply@blogger.com (Amatullah Ummu Ubaid) — Sun, 17 Feb 2013 08:50:00 +0000

Kembali lagi dengan tutorial modifikasi widget statistik blog bawaan blogger, dan modifikasi ini adalah versi kedua. Perbedaannya dengan modifikasi versi pertama hanya terletak pada kode CSS adapun dari aspek desain: Yang pertama menggunakan background gambar icons dan berbentuk vertikal, sedangkan versi kedua ini hanya menggunakan background warna dengan horizontal style. Atau seperti screenshot disamping:

Adapun Fitur dari widget statistik blog ini:

Fitur

Menampilkan Jumlah postingan

Menampilkan Jumlah Komentar

Menampilkan Total Tayang Laman

Tertarik untuk menambahkannya pada blog anda? Baiklah silahkan ikuti langkah-langkah berikut:

Cara menambahkan widget statistis blogger ini ke blog

Pada dasbor pilih menu Tata Letak
Tambah Gadget --> Pilih widget Statistik blog

Pada kolom konfigurasikan widget, anda tidak perlu mengganti nama atau memilih tampilan, langsung klik simpan kemudian klik simpan setelan

Sekarang masuk menu Template --> Pilih edit HTML
Klik Ctrl+F dan cari kode ]]></b:skin>
Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

Anda bisa mengganti background, warna font pada kode CSS widget statistik diatas agar sesuai dengan desain template blog anda. Untuk kode warna, silahkan lihat disini

Klik Ctrl+F dan cari kode berikut:

<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>

Setelah dapat, ganti kode tersebut dengan kode berikut:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

Anda bisa mengganti tulisan yang memiliki background warna diatas dengan kata-kata anda sendiri

Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial modifikasi widget statistik bawaan blogger versi dua, jangan lupa untuk mengecek modifikasi widget statistik blog versi 1, dengan mengklik link title judul tersebut.
Terimakasih.

Modifikasi Tampilan Widget Statistik Blogger Versi 1

noreply@blogger.com (Amatullah Ummu Ubaid) — Tue, 12 Feb 2013 13:00:00 +0000

Banyak ragam widget statistik untuk blogger yang disediakan oleh pihak ke tiga. Baik itu widget dari Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter dan segudang layanan widget statistik lainnya. Adapun widget statistik default blogger meskipun masih memiliki kekurangan karena belum memberikan data statistis yang lengkap seperti jumlah visitor karena hanya menampilkan jumlah total tayang laman, tetapi cukup untuk memantau perkembangan blog anda.

Tutorial kali ini saya ingin mengetengahkan cara modifikasi widget statistik default blogger agar terlihat lebih indah dari aspek desain. Tentu dengan pengetahuan CSS anda bisa mengembangkan lagi desain dari widget ini.

Fitur

Menampilkan Jumlah postingan
Menampilkan Jumlah Komentar
Menampilkan Total Tayang Laman
Penggunaan CSS Sprite

CSS sprite teknik keren yang digunakan untuk mempercepat loading blog ketika melakukan permintaan HTTP gambar. Dalam widget ini mungkin anda berfikir terdapat 3 gambar ikon yang digunakan. Sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini tidak umum diblogger tapi sangat sering digunakan pada blog worpress.

Baiklah silahkan ikuti langkah-langkah berikut:

Cara menambahkan widget statistis blogger ini ke blog

Pada dasbor pilih menu Tata Letak
Tambah Gadget --> Pilih widget Statistik blog

Pada kolom konfigurasikan widget, anda tidak perlu mengganti nama atau memilih tampilan, langsung klik simpan kemudian klik simpan setelan

Sekarang masuk menu Template --> Pilih edit HTML
Klik Ctrl+F dan cari kode ]]></b:skin>
Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>

#Stats1
ul{margin:10px 0;border:0;padding:0}

#Stats1
li{margin:0;border:0;background-color:#ff4e47;background-image:url(http://lh3.ggpht.com/-JypPIDhQgEY/UIfUN_w0jkI/AAAAAAAABOM/s_O3VHyQSlw/s194/sprites-stats.png);background-repeat:no-repeat;padding:10px
10px 10px 80px;list-style-type:none}

#Stats1
h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}

#Stats1
span{font-size:13px;color:#fff;text-shadow:none}

#totalComments{background-position:0 -68px}

#totalCount{background-position:0 -136px}

Anda bisa mengganti background, warna font pada kode CSS widget statistik diatas agar sesuai dengan desain template blog anda. Untuk kode warna, silahkan lihat disini

Klik Ctrl+F dan cari kode berikut:

<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>

Setelah dapat, ganti kode tersebut dengan kode berikut:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

Anda bisa mengganti tulisan yang memiliki background warna diatas dengan kata-kata anda sendiri

Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial kali ini, insyaAllah pada kesempatan yang lain saya akan sharing juga modifikasi widget statistik bawaan blogger yang berbeda. Terimakasih.
Original Source: DuyPham

Modifikasi Tampilan Pesan Komentar Blogger

noreply@blogger.com (Amatullah Ummu Ubaid) — Sun, 10 Feb 2013 06:27:00 +0000

Alhamdulillah bisa menyapa anda lagi dengan tutorial baru. Setelah beberapa hari kesempatan on line hanya sempat dan asyik utak-atik template, update sampai terlupakan, apalagi yang namanya blogwalking. Maka kali ini insyaAllah saya ingin mengetengahkan tutorial sederhana saja, seperti judul diatas, cara modifikasi tampilan pesan komentar blogger.

Tampilan default pesan komentar blogger sangat sederhana tanpa sedikitpun polesan dari aspek desain, nah bagi anda yang ingin memiliki pesan komentar yang berbeda anda bisa mencoba menembahkan beberapa property CSS untuk merubah background pesan komentar anda, juga jenis dan ukuran font dll. Sebagai contoh yang bisa anda kembangkan lagi seperti berikut:

Cara Modifikasi Tampilan Komentar Blogger

Setelah login ke akun anda
Pada dasbor Klik Edit HTML ---> Proceed ---> Expand Widget Templates
Klikk Ctrl+F dan cari kode berikut: <p><data:blogCommentMessage/></p>
Lalu ganti dengan kode berikut: <div id='pra-comment'><data:blogCommentMessage/></div>

Biasanya kode <p><data:blogCommentMessage/></p> jumlahnya lebih dari 2, ganti semua kode tersebut.

Klikk Ctrl+F dan cari kode ]]></b:skin>
Tambahkan kode CSS berikut diatas kode ]]></b:skin>

#pra-comment{
position: relative; 
background:#F3C5C5;
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #AD3000;
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#pra-comment::after, #pra-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#pra-comment::before { 
border-top-color: #AD3000; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#pra-comment::after { 
border-top-color: #F3C5C5; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
}

Anda masih dapat mengedit CSS diatas. Misalnya mengganti warna background, jenis dan ukuran font dll. Untuk mendapatkan kode warna anda bisa lihat disini

Simpan template dan lihat hasilnya diblog anda

Demikian tutorial cara modifikasi tampilan pesan komentar blogger. Semoga bermanfaat. Good luck.

Mungkin anda juga bisa melihat tutorial cara modifikasi form komentar blogger dengan penggunaan CSS anda bisa menambahkan padanya background warna ataupun gambar. Cek out disini

Cara Menampilkan Emoticons Smiley Pada Komentar Blogger

noreply@blogger.com (Amatullah Ummu Ubaid) — Wed, 06 Feb 2013 08:59:00 +0000

Tutorial kali ini saya ingin berbagi cara menampilkan emoticons smiley pada komentar blogger. Walau mungkin dipencarian google anda akan menemukan banyak blog tutorial yang membahas cara menambahkan yahoo smiley emoticons pada komentar blogger tapi yang menggunakan konsep JQuery mungkin masih jarang. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Semoga dengan trik ini threaded comments blog anda tampil lebih aktraktif.

Screenshot Emoticons Smiley Untuk Komentar Blogger

Cara Menambahkan Emoticons Smiley Ke Blog

Setelah login, pada dasbor masuk ke menu template kemudian klik edit HTML dan lanjutkan:

Klik Ctrl+F dan cari kode ]]></b:skin>

Tambahkan kode CSS berikut diatasnya;

.emoWrap {
  background-color:#fff;
  border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}

kemudian tambahkan script JQuery berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Untuk anda yang sudah memiliki atau menginstal script JQuery pada template anda maka langkah diatas abaikan saja!

tambahkan lagi Script berikut dibawah script JQuery tadi

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src='https://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js type='text/javascript'/>

Simpan template dan lihat hasilnya diblog anda!

Demikian tutorial cara menambahkan emoticons smiley pada komentar blogger. Semoga bermanfaat!

Sudah Tahu Algoritma Google Dan Tips SEO?

noreply@blogger.com (Amatullah Ummu Ubaid) — Tue, 05 Feb 2013 17:44:00 +0000

Google Update PageRank 2013

Alhamdulillah bisa kembali update meski pada awal ingin memulai tadi fokusnya terbagi lagi karena begitu buka halaman postingan tutorial terakhir (Cara membuat photo gallery keren diblog) sempat heran dengan apa yang ditampilkan plugin page rank status dibrowser crome saya. Lho kok postingan baru dah dapat PR 1 ya? Buka artikel sebelumnya lagi PR 1 juga, buka artikel sebelumnya lagi PR 1 juga, buka yang sebelumnya lagi PR 1 juga, bahkan sampai 8 artikel terbaru saya yang tampil di home page, semua mendapat PR 1. Curiga google sudah update page rank diawal tahun 2013 ini, maka segera kambali ke halaman beranda blog ini untuk memastikan, dan rupanya tetap PR 2. Penasaran akhirnya mengantar blogwalking ke blog MKR-Site yaitu blog yang belakangan ini banyak menginspirasi saya dalam hal desain, yup benar PR blognya dah naik menjadi PR 2, dan lanjut ke blog seorang sahabat yang adminnya banyak memberi support terutama dengan +1nya pada hampir setiap sharing posts saya di G+, mbak Indah namanya. Saya keblog terakhir itu untuk memastikan Google update PR karena saya tahu mbak indah baru dalam dunia blogging tapi sungguh-sungguh dalam optimasi SEO yang mungkin dia sendiri tidak menyadarinya karena dengan rendah hatinya mengaku kurang mengerti dengan hal itu. Dan nyatanya blognya dah PR 3 dan saya tak ragukan lagi apa yang saya cari dan jumpai.

Maka melalui kesempatan ini saya ucapkan selamat kepada teman-teman, sahabat blogger yang mendapatkan hadiah berupa kenaikan Page Rank Google pada update diawal 2013 ini. Dan tetap semangat dan happy blogging untuk yang belum mendapatkan kenaikan atau mengalami penurunan PageRank.

Algoritma Google dan Tips SEO.

Sampai Update PageRank Google 2013 ini, jujur saja saya masih kurang mengerti dengan algoritma google, sebagaimana saya juga kurang paham alasan google adsense saya diblog ini kena disable. Apalagi yang namanya SEO, maka jangan heran jika judul blog ini Tips Trik Blogging tapi lebih banyak menyuguhkan trik dan tutorial serta sharing widget ketimbang tips. Sekali lagi karena memang saya minim ilmu untuk berbagi tips blogging seperti tips meningkatkan page rank, tips merampingkan alexa, cara meningkatkan traffik blog, atau segala yang berkaitan dengan SEO. Sekarang ini apa yang saya lakukan hanya mengikuti saja saran-saran dari blogger-blogger yang memaparkan tips-tips SEO diblognya, sambil memantau dan menganalisa hasilnya. Kedepan insyaAllah saya juga akan berbagi tips yang sudah saya terapkan berdasarkan pengalaman dan hasil analisa tersebut. Jadi saya harapkan tidak akan menyesatkan pembaca. Lho memangnya ada tips yang menyesatkan? Yah iyalah karena algoritma google selalu update. Dan masalahnya tidak banyak mungkin blogger yang telah memaparkan tips SEO lama akan update seiring dengan update Google maka yang disuguhkan ke pembaca blognya adalah tips SEO kadarluarsa alias ketinggalan zaman. Dan sayalah salah satu contoh yang pernah jadi korban optimasi SEO yang berlebihan dan terjebak pada google sandbox. Apa sih google sandbox itu? Berkenalan sajalah dengan tanya langsung ke google search tapi upsh, hati-hati tersesat! Hee?

Nah setelah melalui pengalaman blogging anda, apakah anda sudah mengerti dan paham Algoritme Google dan Tips SEO terbaik? Silahkan berbagi melalui threaded comments blogger dibawah ini dan terimakasih tuk apresiasi anda!

NB: Maaf karena judul dan isinya jadi malah banyakan curhat dan ujung-ujungnya nanya??! Karena memang tidak tahu dan dari pada penasaran terus mending nanya sama pembaca…

Cara Membuat Gallery Photo Keren Di Blog

noreply@blogger.com (Amatullah Ummu Ubaid) — Sun, 20 Jan 2013 11:05:00 +0000

Dalam tutorial kali ini saya ingin mengetengahkan cara membuat gallery photo keren diblog dengan menggunakan CSS3 dan tanpa JavaScript. Ya, anda tidak salah membaca, benar tanpa javaScript. Kalau pada tutorial sebelumnya membuat image slidermenggunakan javascript maka kali ini tidak ada penggunaan script sama sekali, murni hanya dengan properti CSS3 seperti, user-select, box-sizing, transition, box-shadow dan transform.
Pada gallery photo ini anda bisa mengklik image/photo untuk mendapatkan efek zooming dan anda bisa menggunakan tombol tab pada keyboard untuk melihat photo selanjutnya. Penasaran? Silahkan ke blog tempat eksperiment saya, untuk mendapatkan ide yang jelas dari gallery photo yang mengagumkan ini.

Tekan Tombol “View Demo”

View Demo Bagaimana? Tertarik untuk membuat gallery photo keren diblog anda? Silahkan ikuti langkah-langkah berikut ini:

Cara Menambahkan Widget Ini KeBlog

Login ke akun blogger anda
Pada dasbor pilih Template >> Edit HTML >> Proceed
Klik Ctrl+F cari kode ]]></b:skin
Tambahkan kode CSS berikut diatas kode ]]></b:skin>


/* Photo Gallery styles */   
.gallery {      
margin: 100px auto 0;    
width: 800px;    
}      
.gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
/* CSS3 Prevent selections */
-moz-user-select: none;
 -webkit-user-select: none;
-khtml-user-select: none;
user-select: none; 
} 
.gallery a img { 
border: 8px solid #fff;
border-bottom: 20px solid #fff; 
cursor: pointer;
display: block; 
left: 0px;
 position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */ 
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease; 
 -o-transition: all 1.0s ease;
transition: all 1.0s ease;
/* CSS3 Box Shadow */ 
-moz-box-shadow: 2px 2px 4px #444;
 -webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}       

/* Custom CSS3 rotate transformation */ 
.gallery a:nth-child(1) img { 
 -moz-transform: rotate(-25deg); 
-webkit-transform: rotate(-25deg); 
transform: rotate(-25deg); 
} 
.gallery a:nth-child(2) img {  
-moz-transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}       

.gallery a:nth-child(3) img { 
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}       

.gallery a:nth-child(4) img {
 -moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}       

.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg); 
 transform: rotate(-5deg);
}       

.gallery a:nth-child(6) img { 
-moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg);
}       

.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}       

.gallery a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg); 
}       

.gallery a:nth-child(9) img { 
-moz-transform: rotate(15deg); 
-webkit-transform: rotate(15deg); 
transform: rotate(15deg);
}       

.gallery a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
 transform: rotate(20deg);
}       

.gallery a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}       

.gallery a:nth-child(12) img {
-moz-transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
transform: rotate(30deg);
}       

.gallery a:focus img { 
cursor: default;
height: 250%; 
left: -150px;    
 top: -100px;   
position: absolute;
width: 250%;
z-index: 25;
/* CSS3 transition rules */ 
-webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
 -o-transition: all 1.0s ease; 
    /* CSS3 transform rules */ 
-moz-transform: rotate(0deg);  
-webkit-transform: rotate(0deg); 
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

Simpan template.

Cara Menampilkan Widget Ini Dalam Postingan

Anda bisa menampilkan gallery photo keren ini dalam postingan atau pada halaman mandiri blog anda dengan menambahkan kode berikut pada bagian HTML.

Ingat pada bagian HTML bukan bagian Compose!


<div class="gallery">   
<a tabindex="1"><img src="IMAGE LINK"></a>    
<a tabindex="2"><img src="IMAGE LINK"></a>      
<a tabindex="3"><img src="IMAGE LINK"></a>      
<a tabindex="4"><img src="IMAGE LINK"></a>    
<a tabindex="5"><img src="IMAGE LINK"></a>     
<a tabindex="6"><img src="IMAGE LINK"></a>      
<a tabindex="7"><img src="IMAGE LINK"></a>     
<a tabindex="8"><img src="IMAGE LINK"></a>      
<a tabindex="9"><img src="IMAGE LINK"></a>      
<a tabindex="10"><img src="IMAGE LINK"></a>      
<a tabindex="11"><img src="IMAGE LINK"></a>      
<a tabindex="12"><img src="IMAGE LINK"></a>       
</div>

Kustomisasi

Ganti IMAGE LINK dengan alamat gambar anda.
Silahkan klik pratinjau, jika sudah sesuai dengan yang anda inginkan, silahkan publikasikan gallery photo anda.

Anda bisa mengedit lagi bagian CSS diatas, menyesuaikan dengan bagian posting blog anda dengan mengganti lebar dan tinggi gallery, atau menambah dan mengurangi jumlah photo yang ingin ditampilkan. Anda juga dapat menampilkan gallery photo dengan menghilangkan bagian sidebar blog, footer blog dengan menambahkan kode display: none.

Silahkan mengembangkan kreasi anda.

Demikian tutorial cara membuat gallery photo keren diblog, semoga bermanfaat. Jika ada pertanyaan seputar tutorial ini silahkan kemukakan pada kolom komentar.
Original Source: Script Tutorial

Membuat Image Slider Keren Dengan Thumbnails

noreply@blogger.com (Amatullah Ummu Ubaid) — Wed, 09 Jan 2013 07:46:00 +0000

Alhamdulillah akhirnya bisa kembali lagi menyapa anda dengan tutorial baru membuat image slider keren dengan thumbnails. Image slider ini tentu sangat bagus sebagai sarana promosi artikel terbaik anda dengan bantuan gambar yang membuatnya tampil aktraktif, elegant dengan efek yang halus bertenaga CSS3 dan JavaScript, namun tetap dengan fast loading sehingga anda tidak perlu khawatir akan mempengaruhi kecepatan loading blog anda.
untuk membuktikannya anda bisa mengecek live demo pada blog eksperimen saya

Tekan Tombol view Demo

View Demo
Nah jika anda tertarik untuk menambahkan image slider keren dengan thumbnails pada blog anda, setelah melihat live demonya atau sekedar ingin tahu cara membuatnya, silahkan ikuti langkah-langkah berikut:

Cara Menambahkan Widget Ini KeBlog

Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
Klick Ctrl+F dan cari kode ]]></b:skin
Tambahkan kode CSS berikut diatas kode ]]></b:skin>


.slider{   
width: 640px; /*Same as width of the large image*/ 
position: relative;          
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 100px auto; 
/*Lets add a shadow*/ 
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); 
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute; 
left: 0; top: 0;
transition: all 0.5s; 
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label { 
/*Lets add some spacing for the thumbnails*/ 
margin: 18px 0 0 18px;
border: 3px solid #999; 
float: left;   
cursor: pointer; 
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6; 
}
.slider label img{ 
&display: block; 
}
/*Time to add the click effects*/ 
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;  
}  
/*Clicking any thumbnail now should change its opacity(style)*/ 
/*Time to work on the main images*/ 
.slider input[name='slide_switch'] ~ img { 
opacity: 0;
transform: scale(1.1); 
} 
/*That hides all main images at a 110% size 
On click the images will be displayed at normal size to complete the effect 
*/ 
.slider input[name='slide_switch']:checked+label+img {
opacity: 1; 
transform: scale(1);
} 
/*Clicking on any thumbnail now should activate the image related to it*/

Perhatikan tulisan berwarna biru adalah lebar dan tinggi gambar

Cari kode <div id='main-wrapper'>
Setelah dapat tambahkan kode HTML berikut diatas kode <div id='main-wrapper'>


<div class="slider">  
<input type="radio" name="slide_switch" id="id1"/>           
<label for="id1">         
<img src="IMAGE LINK" width="100"/>
</label>  
<img src="IMAGE LINK"/>

    <!--Lets show the second image by default on page load--> 
<input type="radio" name="slide_switch" id="id2" checked="checked"/> 
<label for="id2">
<img src="IMAGE LINK" width="100"/>             
</label>           
<img src="IMAGE LINK"/>            
<input type="radio" name="slide_switch" id="id3"/>            
<label for="id3">           
<img src="IMAGE LINK" width="100"/>         
</label>          
<img src="IMAGE LINK"/>          
<input type="radio" name="slide_switch" id="id4"/>             
<label for="id4">            
<img src="IMAGE LINK" width="100"/>           
</label>             
<img src="IMAGE LINK"/>           
<input type="radio" name="slide_switch" id="id5"/>            
<label for="id5">          
<img src="IMAGE LINK" width="100"/>           
</label>         
<img src="IMAGE LINK"/>             
</div>

Kustomisasi

Ganti IMAGE LINK dengan link gambar anda.

Tambahkan script berikut diatas kode </head>


<script src="http://tipstrikblogging.googlecode.com/files/imagesliderthumbnails.js" type="text/javascript"></script>

Simpan template.

Sebelum menyimpan anda bisa klik pratinjau dulu jika sudah sesuai dengan yang anda inginkan, silahkan Simpan dan lihat hasilnya diblog anda.

Demikian tutorial membuat image slider keren dengan thumbnails semoga bermanfaat. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dan terimakasih tuk apresiasi anda.

Cara Membuat Tooltips Keren Dengan CSS3 Untuk Blogger

noreply@blogger.com (Amatullah Ummu Ubaid) — Mon, 31 Dec 2012 06:04:00 +0000

Alhamdulillah akhirnya bisa kembali memenuhi tutorial request dari salah seorang sahabat blogger kita, kali ini dari sahabat Ade Tiawan admin dari blog Ol Terus. Maaf kalau kemudian permintaan ini agak telat ditanggapi karena dari sekian banyak tutorial membuat tooltip yang pernah saya dapatkan baik yang menggunakan JavaScript, JQuery dan CSS3 saya memilih untuk memberi yang berbeda dari biasanya, dimana padanya terdapat aspek desain sehingga tampilan tidak saja umum dan standar tapi juga bisa terlihat sejuk dan segar. Pertimbangan lain adalah juga melirik pada segi fungsi, sehingga kegunaan tooltips inipun semakin sempurna sebagai pemberi informasi.

Screenshot Tooltips Hasil Dari Tutorial Ini

Untuk mendapatkan ide yang jelas anda bisa mengecek dan melihat langsung live demo tooltips for blogger ini diblog eksperimen saya

Tekan tombol "View Demo"

View Demo
Jika anda tertarik dengan tooltips ini, berikut cara membuat tooltips keren bertenaga CSS3 untuk blogger

Cara Menambahkan Tooltips Ini KeBlog

Login ke akun blogger anda >> Template
Klik Edit HTML ---> Proceed ---> Expand Widget Templates
Klik Ctrl+F Kemudian Cari kode ]]></b:skin>
Letakkan kode CSS berikut diatas kode ]]></b:skin>

.tbi-tooltip {
 outline: none;
 cursor: help;
 position: relative;
 text-decoration: none;
 border-bottom: 1px dotted #000;
}

.tbi-tooltip span {
 margin-left: -999em;
 position: absolute;
 color: #000;
}

.tbi-tooltip:hover span {
 font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif;
 position: absolute;
 left: 1em;
 top: 2em;
 z-index: 99;
 margin-left: 0;
 width: 250px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 0px 0px 9px #000000;
 -webkit-box-shadow: 0px 0px 9px #000000;
 box-shadow: 0px 0px 9px #000000;
}

.tbi-tooltip:hover img {
 border: 0;
 margin: -10px 0 0 -55px;
 float: left;
 position: absolute;
}

.tbi-tooltip:hover em {
 font-family: Candara, Tahoma, Geneva, sans-serif;
 font-size: 1.2em;
 font-weight: bold;
 display: block;
 padding: 0.2em 0 0.6em 0;
}

.custom {
 padding: 0.5em 0.8em 0.8em 2em;
}

.tbi-general {
 background: #EDEDED;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1)));
 background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -o-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -ms-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
 -webkit-box-shadow: 4px 4px 1px 1px #ccc;
 box-shadow: 4px 4px 1px 1px #ccc;
}

.tbi-critical {
 border: 1px solid #FF3334;
 background: #ffccaa;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2NhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg0ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffccaa 0%, #ff8482 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffccaa), color-stop(100%,#ff8482));
 background: -webkit-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -o-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -ms-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: linear-gradient(to bottom,  #ffccaa 0%,#ff8482 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccaa', endColorstr='#ff8482',GradientType=0 );
}

.tbi-help {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-info {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-warning {
 border: 1px solid #FFAD33;
 background: #f1e767;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JjNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f1e767 0%, #fcbc5d 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#fcbc5d));
 background: -webkit-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -o-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -ms-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: linear-gradient(to bottom,  #f1e767 0%,#fcbc5d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcbc5d',GradientType=0 );
}

Simpan template anda.

Cara Menampilkan Tooltip Ini Ke Halaman Posting

Tambahkan kode berikut sesuai dengan spesifikasi tooltips yang anda inginkan pada bagian HTML editor post.

Untuk tooltip umum dan standar/ General tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-general"> TOOLTIP HERE</span></a>

Untuk Critical Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-critical"><img src="https://lh6.googleusercontent.com/-IIUWYhGh_-M/UB1pbdD3wCI/AAAAAAAAFiQ/9BSZXhLX-tQ/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>TOOLTIP HERE</span></a>

Untuk Warning Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-warning"><img src="https://lh3.googleusercontent.com/-sEK0idue4HM/UB1pcNMBpjI/AAAAAAAAFio/JB7yN1M0WF4/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>TOOLTIP HERE</span></a>

Untuk Help Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-help"><img src="https://lh6.googleusercontent.com/-kCmiNkbo9i4/UB1pbogi4JI/AAAAAAAAFiU/hJb76rrKNBo/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>TOOLTIP HERE</span></a>

Untuk Information Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-info"><img src="https://lh3.googleusercontent.com/-aPsqP_cKj0k/UB1pbaBgV_I/AAAAAAAAFiY/xqeP4CLV3ew/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TOOLTIP HERE</span></a>

Kustomisasi

Anda dapat mengganti tanda pager # dengan link yang akan ditampilkan padanya tooltips
Ganti ANCHOR TEXT HEREdengan kalimat yang anda inginkan
Ganti TOOLTIP HEREdengan kalimat informasi yang ingin anda tambahkan

Demikian cara membuat tooltips keren bertenaga CSS3 untuk blogger. Semoga anda suka dengan widget ini dan bermanfaat bagi anda. Terimakasih.

Widget Accordion Featured Post Slider Keren Dengan CSS3

noreply@blogger.com (Amatullah Ummu Ubaid) — Wed, 26 Dec 2012 07:07:00 +0000

Menampilkan Featured posts slider pada blog adalah salah satu cara yang bagus untuk mempromosikan artikel terbaik anda. Mungkin anda telah memiliki widget featured posts diblog anda atau paling tidak pernah menemukan berbagai style dari widget featured posts slider selama menjelajahi dumay, tetapi banyak dari style widget ini, bahkan 98% diiantaranya akan menggunakan beberapa JavaScript atau JQuery untuk menghasilkan efek slide atau animasi. Alhamdulillah, syukurnya dengan pengenalan CSS3
kita bisa mendapatkan semua efek tersebut tanpa menggunakan JavaScript apapun atau JQuery yang berarti bisa mempercepat loading blog kita. Pada kesempatan kali ini insyaAllah saya akan mempresentasekan gaya accordian featured posts slider yang dibuat murni menggunakan CSS. Slider ini memiliki efek slide yang halus bertenaga CSS3 transisi. Konsep efeknya agak mirip dengan efek hover dari widget follow us sexy social buttons yang baru saja saya share kemarin. Dalam slider ini gambar akan diperluas untuk lebar tertentu. Silahkan lihat demo untuk mendapatkan ide yang jelas dari widget menakjubkan ini.

Tekan Tombol "View Demo"

View Demo

Nah jika efek yang hanya mungkin dicapai menggunakan Script dapat dibuat murni dengan CSS, tanpa JavaScript, No JQuery maka mengapa menggunakan JS atau JQuery. Widget ini juga tidak memiliki masalah kompatibilitas jika kita mengesampingkan IE. Widget ini bekerja sempurna dihampir semua browser lainnya. Berikut daftar browser yang mendukung: 1. Chrome: v4 dan diatasx 2. Firefox: v4 dan diatasx 3. Safari: v3 dan diatasx 4. Opera v10.5 dan diatasx 5. IE: v10 dan diatasx Baiklah cukup untuk penjelasan, sekarang melangkah pada tutorial menambahkan widget featured posts slider pure CSS3 ini ke blog anda.

Cara Menambahkan Widget Ini Ke Blog

Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
Klik Ctrl+F Kemudian Cari kode <div id='main-wrapper'>
Setelah dapat tambahkan kode HTML berikut diatas kode no 2 tadi

<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->        
<b:if cond='data:blog.url == data:blog.homepageUrl'>         
<div id="tbi_slider">         
<ul>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
<li>         
<div id="tbi_title">         
<a href="POST LINK">TITLE</a>         
</div>         
<a href="POST LINK">         
<img src="IMAGE LINK "/>         
</a>         
</li>         
</ul>         
</div>         
</b:if>         
<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->

Kustomisasi

Ganti TITLE dengan judul posts (Buat Pendek Saja)
Ganti POST LINK dengan link postingan anda
Ganti IMAGE LINK dengan link gambar anda.
Setelah menambahkan Kode HTML sekarang tambahkan kode CSS berikut diatas kode ]]></b:skin>

/* Accordion Featured Post Slider @ TipsTrikBlogging.com */        
#tbi_slider {         
    overflow: hidden;         
    margin: 20px auto;         
    padding: 0;         
    width: 805px;         
    height: 320px;         
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);         
}         
#tbi_slider ul {         
    margin: 0;         
    padding: 0;         
    width: 2000px;         
}         
#tbi_slider li {         
    position: relative;         
    display: block;         
float: left;         
    width: 160px;         
    border-left: 1px solid #888;         
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);         
-webkit-transition: all 0.5s;         
-moz-transition: all 0.5s;         
-ms-transition: all 0.5s;         
-o-transition: all 0.5s;         
    transition: all 0.5s;         
}         
#tbi_slider ul:hover li {         
    width: 40px;         
}         
#tbi_slider ul li:hover {         
    width: 640px;         
}         
#tbi_slider li img {         
    display: block;         
    width: 640px;         
}         
#tbi_title {         
    position: absolute;         
    top: 0;         
    left: 0;         
    padding: 20px;         
    width: 640px;         
    background: rgba(0, 0, 0, 0.5);         
    color: #fff;         
    font: bold 16px 'trebuchet MS', sans-serif;         
}         
#tbi_title a {         
    display: block;         
    color: #fff;         
    text-decoration: none;         
}         
/* Accordion Featured Post Slider @ TipsTrikBlogging.com */

Tidak ada yang perlu diganti pada bagian ini.

Silahkan simpan template dan lihat hasilnya diblog anda.

Sekali lagi, widget featured posts slider ini menggunakan CSS3 transisi. Semoga anada menyukai widget ini dan bisa membantu anda untuk mempromosikan artikel atau postingan terbaik anda. Jika ada kesulitan atau perlu bantuan dan pertanyaan seputar widget ini silahkan gunakan komentar dibawah ini. Terimakasih tuk apresiasi anda.

Original Resaurce.

Cara Membuat Widget Social Subscription Box

noreply@blogger.com (Amatullah Ummu Ubaid) — Thu, 20 Dec 2012 09:35:00 +0000

Akhirnya dapat membuat widget Social Subscription Box atau widget berlangganan posting yang berbeda dari biasanya. Saya katakan berbeda karena widget berlangganan artikel ini lengkap dengan berbagai fitur yang dapat menghubungkan anda dengan beberapa jejaring sosial yang terkenal, dengan tombol share diharapkan artikel anda akan tersebar ibarat virus ke berbagai jejaring sosial yang ada, dan diharapkan juga dapat meningkatkan pelanggan RSS feed anda juga kotak fans page untuk meningkatkan penggemar blog anda.

View Demo

Fitur:

1. Formulir feedburner untuk meningkatkan pelanggan artikel anda

2. Tombol follow sehingga pembaca dapat bergabung dengan Anda pada jaringan sosial Anda

3. Tombol sosial media yaitu,, Facebook, Twitter, g+1, StumbleUpon dan tombol share Addthis untuk jaringan sosial lainnya.

4. Kotak Fans Page Facebook untuk meningkatkan penggemar blog Anda

Keempat fitur utama dari widget berlangganan artikel ini cukup rapi dan bersih yang tidak akan membingungkan pembaca. Semua tombol media sosial yang resmi terdapat pada tombol ShareThis. Untuk memberikan nuansa halus digunakan box-shadow bertenaga CSS3 transisi . Jenis Font yang digunakan adalah font Google bernama Oswald.

Sangat antusias untuk menggunakan widget baru yang mengagumkan ini? Anda tidak perlu menunggu lagi. Silahkan ikuti langkah-langkah berikut:

1. Seperti biasa login ke akun Blogger anda -> Template -> Edit HTML -> Proceed

2. Cek list Expand Widget Templates

3. cari kode berikut: <data:post.body/>

Anda mungkin akan menemukan dua atau tiga kode diatas, letakkan kode berikut pada kode pertama diatas

<b:if cond='data:blog.pageType == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=TipsTrikBlogging-Amatullah', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TipsTrikBlogging-Amatullah' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
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=‘http://www.facebook.com/amatullah.syukur’target='_blank' title='Join us on Facebook'><img src='https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/amatullahsyukur' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/116382152511220195182#116382152511220195182/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/amatullahsyukur/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/TipsTrikBlogging-Amatullah' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/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-related='topbloggingidea:Get latest Blogger Widgets, Blogging Tips, Blogging Ideas, Blogger Gadgets, Free Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.'
data-count='horizontal' data-via='topbloggingidea' 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%2FTopBloggingIdeas&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--Social Subscription Box Tipstrikblogging.com—>

<small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href='http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-social-subscription.html' target='_blank' title='Widget Social Subscription'>+ Get This Widget Here</a></div></small>

Sesuatu yang penting untuk anda ganti pada kode diatas

Ganti feedburner uri TipsTrikBlogging-Amatullah dan values dengan akun Feedburner anda
Ganti link Facebook, Twitter, Google+, Pinterest and RSS feed dengan URL media sosial anda
Ganti www.facebook.com%2FTipsTrikBlogging.Amatullah fans page facebook anda. Jangan menggunakan http:// dan ganti (/) dengan %2F

Demikian tutorial cara membuat widget Social Subscription Box. Semoga bermanfaat. Silahkan tinggalkan komentar baik pertanyaan, saran atau kritik membangun. Terima kasih atas apresiasi anda!

Original Resource

Cara Membuat Widget Follow Us Social Media Buttons Keren

noreply@blogger.com (Amatullah Ummu Ubaid) — Sun, 16 Dec 2012 21:49:00 +0000

Hampir setiap blog atau website memiliki widget follow social media dengan tombol icons yang beragam. Dengan memasang widget sosial media pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi blog anda. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring sosial anda, dan mereka hanya akan mengklik atau mengikuti update blog anda kecuali mereka merasa atau menemukan hal yang berguna dan bermanfaat pada blog anda.

Widget ini tidak otomatis dapat meningkatkan follower blog anda diberbagai jaring sosial tapi setidaknya kita dapat memancing mereka untuk setidaknya mengklik sekali pada tombol dengan membuat/menampilkan tombol widget ini lebih menarik dan memiliki efek hover yang meluas, mulus dan sexy . Efek hover ini kita buat dengan bantuan CSS3 transisi.

Widget ini juga tanpa javascript, tanpa JQuery, murni hanya dengan CSS. Widget akan terlihat rapi dan bersih disidebar blog anda atau dibagian manapun anda meletakkannya.

Nah silahkan lihat demo widget ini terlebih dahulu, jika anda menemukannya menakjubkan atau tertarik sekedar mencoba membuatnya atau menambahkannya pada blog anda silahkan melangkah pada tahapan pembuatannya

View Demo

Fitur:

Widget ini cukup sederhana tapi memiliki beberapa fitur utama:

• Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS

• Efek memperluas, mulus dan sexy pada hover

• Penggunaan CSS sprite

• Sangat rapi dan bersih

• Tidak ada JavaScript. JQuery No. Ini murni CSS

CSS sprite Teknik cukup keren dan berguna terutama ketika Anda memiliki terlalu banyak gambar. Dalam widget ini Anda akan berpikir bahwa satu gambar atau ikon yang digunakan untuk setiap tombol yang membuat total 5 gambar. Tapi sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini berguna karena bukannya 5 permintaan HTTP, Anda hanya membuat satu permintaan yang mempercepat waktu loading. Teknik ini tidak sangat umum di blog Blogger tetapi dalam blog WordPress teknik ini sering digunakan.

Sekarang mari kita menambahkan widget ini di blog Anda.

Catatan:

Jika Anda ingin menambahkan widget pada tempat tertentu, gunakan HTML terpisah dan CSS dan jika Anda ingin widget untuk muncul di suatu tempat di sidebar Anda, silahkan melompat langsung di bagian Alternatif di bagian bawah.

HTML

Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
Letakkan kode berikut pada bagian yang anda inginkan dari blog anda

<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com—>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti semua tanda # dengan URL jejaring sosial anda.

CSS

Sekarang tambahkan kode CSS yang akan membuat tombol ini sexy

Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
Cari kode ]]></b:skin> Letakkan kode berikut diatasx

/* Sexy Social Buttons Widget RePost TipsTrikBlogging.com*/
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
/* Sexy Social Buttons Widget By RePost TipsTrikBlogging.com*/

Alternatif

Jika ingin menambahkan widget ini pada sidebar blog anda

Login ke akun Blogger anda-> Layout
Klik tambah gadget pada sidebar
PilihHTML/JavaScript pada form letakkan kode berikut

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti semua tanda # yang berwarna biru dengan URL jejaring sosial anda

4. Simpan dan lihat hasilnya diblog anda!

Nah demikian tutorial membuat widget follow social media dengan tombol sexy. Semoga bermanfaat!

Original Resaurce

Cara Membuat Automatic Featured Posts Slider Dengan JQuery

noreply@blogger.com (Amatullah Ummu Ubaid) — Sat, 08 Dec 2012 15:08:00 +0000

Alhamdulillah kembali lagi dengan tutorial membuat featured posts slider dengan JQuery, sebelumnya telah ada 7 tutorial membuat featured posts slider yang sudah saya posting diblog ini, fetured posts slider yang akan kita buat kali ini berbeda dengan pendahulu-pendahulu sebelumnya, kalau versi sebelumnya kita harus menambahkan images, link dan deskripsi posts secara manual maka featured posts slider kali ini akan otomatis mendekteksi recent posts blog ( postingan atau artikel terbaru blog ) bedasarkan label. Tentunya untuk bisa berfungsi seperti yang telah disebutkan tadi maka script yang digunakan selain script JQuery juga menggunakan script modifikasi dari recent posts.

Tampilan dari featured posts slider ini seperti screenshoot diatas. Sebelum mencoba tutorial ini anda bisa melihat live demonya dulu dengan menekan tombol berikut:

View Demo

Nah jika anda tertarik untuk membuat atau menambahkan featured posts slider otomatis ini pada blog anda, silahkan ikuti tahapan pembuatannya sebagai berikut:

Silahkan login ke akun blogger anda
Pada dasbor >> masuk menu template >> klik edit HTML >> cek lists Expand Template Widget
Cari kode ]]></b:skin> dan letakkan kode CSS berikut sebelum kode ]]></b:skin>

#featured{margin:0;padding:10px 10px 0}

.sliderwrapper{position:relative;overflow:hidden;height:270px;-webkit-box-shadow:#222 0 2px 8px;-moz-box-shadow:#222 0 2px 7px;}

.sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}

.pagination{text-align:right;padding:15px 0 10px}

.pagination a{font-size:11px;color:#fff;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}

.pagination a:hover,.pagination a.selected{color:#000;background-color:#aeaeae}

.featuredPost{width:330px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}

.featuredPost a{color:#fff}

.featuredPost a:hover{color:#dedde5}

.featuredPost h2{font-size:12px;line-height:1;margin:0}

.featuredPost span{font-size:10px}

.featuredPost p{font-size:11px}

Catatan: Kode CSS diatas masih dapat anda modifikasi kembali, seperti merubah lebar featured posts, ukuran font ataupun warna agar sesuai dengan desain blog anda. Untuk referensi kode warna silahkan gunakan tool tabel kode warna disini

4. Kemudian letakkan script JQuery berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Catatan: Bagi anda yang telah menambahkan script JQuery kedalam template blognya, maka langkah no 4 diatas diabaikan saja.

5. Selanjutnya tambahkan script berikut dibawah script JQuery

//<![CDATA[

/* Script from:http://www.tipstrikblogging.com/ */

imgr = new Array();

imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 6;

label1 = "Agama Islam";

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;

}}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="350" height="270" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';

document.write(trtd);

j++;

}}

//]]>

</script>

/* Script from:http://www.tipstrikblogging.com/ */

Catatan: Tulisan berwarna biru diatas adalah jumlah posting yang akan ditampilkan dan label yang dipilih anda sesuaikan dengan label pada blog anda!

6. Tambahkan pula script berikut diatas kode </body>

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>

<script>

//<![CDATA[

featuredcontentslider.init({

id: "slider1", //id of main slider DIV

contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]

nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.

enablefade: [true, 0.5], //[true/false, fadedegree]

autorotate: [true, 6000], //[true/false, pausetime]

onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

}

})

//]]>

</script>

7. Langkah terakhir, tambahkan kode HTML berikut diatas <div id='main-wrapper'> jika anda ingin meletakkannya diatas kolom posting atau diatas <div id='sidebar-wrapper'> jika anda ingin meletakkannya diatas sidebar blog

<div id='featured'>

<div class='sliderwrapper' id='slider1'>

<script>

document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

</script>

</div>

<div class='pagination' id='paginate-slider1'>

</div>

8. Selesai dan lihat hasilnya diblog anda!

Demikian tutorial cara membuat featured posts slider otomatis pada blog, semoga bermanfaat.

Anda bisa melihat tutorial membuat featured posts slider lainnya pada blog ini dengan label featured posts slider.

Widget Popular Posts Dengan Multi Colored Style

noreply@blogger.com (Amatullah Ummu Ubaid) — Mon, 03 Dec 2012 01:53:00 +0000

Postingan kali ini masih seputar tutorial modifikasi widget popular posts, sebuah widget yang bertujuan untuk menampilkan postingan yang sering dilihat/ popular posts berdasarkan page view. Popular posts kali ini akan kita modifikasi masih dengan penambahan CSS3 menjadi Popular Post dengan tampilan sembilan warna pada setiap title posts seperti tampilan screen shoot disamping ini:

Tertarik untuk menambahkan widget popular posts dengan tampilan multi color seperti diatas? Berikut tutorial pembuatannya:

Tahap Pertama:

Seperti biasa login ke akun anda.
Pilih edit HTML >> Cari kode ]]></b:skin>
Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#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:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan.

Tahap Kedua

Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan minimal 9 posts.
Simpan dan lihat hasilnya diblog anda!

Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. Semoga bermanfaat.

Jika tertarik mencoba modifikasi lain dari widget popular posts, silahkan lihat tutorial berikut:

Selamat berkreatifitas!

Widget Popular Posts Dengan Grid Layout Style

noreply@blogger.com (Amatullah Ummu Ubaid) — Thu, 29 Nov 2012 12:30:00 +0000

Pada tutorial sebelumnya saya telah mengetengahkan cara modifikasi popular posts dengan circel image style, dan tutorial kali ini akan mengetengahkan cara modifikasi popular posts dengan grid layout style seperti image/ screen shoot disamping.

Jika anda tertarik membuat popular posts dengan grid layout style pada blog anda, silahkan ikuti step by step tahap pembuatannya:

Tahap Pertama:

Login ke akun anda
Masuk pada menu template >> klik edit HTML dan jangan lupa centang / ceklist Expand Widget templates
Lalu lettakkan kode berikut diatas ]]></b:skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

Kode berwarna merah diats adalah lebar dan tingggi item thumbnails, anda bisa ganti dan sesuaikan agar sesuai pada sidebar template anda.

Kemudian simpan template.

Tahap Kedua:

Masuk pada menu tata letak >> Tambah gadget pilih Popular posts seperti image berikut:

Setelah muncul halaman popular posts, konfigurasikan atau setting widget dengan mencentang/ceklists kotak kecil thumbnail dan biarkan kotak snippet kosong. Judul dan jumlah posts yang ingin ditampilkan terserah anda.
Simpan

Langkah keTiga:

Masuk lagi ke menu template >> edit HTML, jangan lupa ceklist Expand Widget Templates
Cari kode berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Setelah ketemu, ganti dengan kode berikut:

<b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Terakhir simpan template dan lihat hasilnya pada blog anda!

Demikian tutorial modifikasi widget popular posts dengan grid layout style. Jika ingin mencoba modifikasi widget popular posts dengan circle image style, silahkan klik link title posts tersebut.

Anda juga bisa modifikasi widget popular posts anda dengan menambahkan ragam efek seperti:

Selamat mencoba dan mengembangkan kreatifitas anda!

Widget Popular Posts Dengan Circle Image Style

noreply@blogger.com (Amatullah Ummu Ubaid) — Mon, 26 Nov 2012 02:29:00 +0000

InsyaAllah pada kesempatan kali ini, saya masih akan mengetengahkan modifikasi berbeda dari widget popular posts blogger, sebelumnya telah ada sedikitnya 4 widget popular posts dengan efek berbeda, kali ini modifikasi terletak pada style, dan juga penggabungan efek. Seperti tutorial kali ini, kita akan membuat widget popular posts dengan image circle style dan penambahan efek hover spinning pada thumbnails dan efek hover border dan background pada links. Seperti contoh screen shoot disamping atau silahkan lihat live demo pada blog ini atau klik button/tombol berikut:

View Demo

Widget popular posts ini merupakan widget default blogger, modifikasi yang kita buat hanya menambahkan CSS3 sehingga dijamin tetap fast loading.

Nah jika anda tertarik menambahkan widget popular posts dengan image circle style pada blog anda, silahkan ikuti langkah-langkah pembuatannya sebagai berikut:

1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan mencenteng kotak kecil thumbnail dan biarkan kosong pada kotak kecil snippet. Simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini

2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>

3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -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);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -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);-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}

4. Simpan template dan lihat hasilnya ddiblog anda!

Demikian tutorial menambahkan widget popular posts dengan image circle style. Semoga bermanfaat.

Credits: Style widget popular posts dan efek yang ada adalah hasil modifikasi saya, jika anda tertarik dengan widget ini dan hendak mempublikasikannya kembali, adalah lebih bijak jika anda memberi link back kepostingan ini atau keblog ini. Terimakasih ats kerja sama anda!

Tertarik dengan modifikasi lain dari widget popular posts blogger, silahkan lihat tutorial berikut:

Silahkan berkreasi, dan good luck!