Praktis Kilat Pasang Widget Yahoo Smileys di Blogger - Threaded Comment

Ini adalah cara paling praktis dan mudah untuk memasang yahoo smiley di blogger. Bisa digunakan di Template Tata letak (Layout Template) maupun Template Designer (Perancang Template) yang sudah dilengkapi threaded comment.
Widget Smileys untuk Blogger ini tidak saja menggunakan javascript, xHTML dan kode CSS, namun di dalamnya digunakan juga css3. CSS3 berfungsi untuk membuat bentuk show hide box smiley dengan effek hover sekaligus juga digunakan untuk memperbesar (zoom) emoticon/yahoo smiley agar dapat terlihat dengan jelas saat pemberi komentar memilih emoticon yang akan ditampilkan dalam komentar. Kode css3 yang yang digunakan untuk fungsi zoom adalah css3 transform-scale plus css3 transition, sedang show-hide box yahoo smiley memanfaatkan padding dan css3 transition.

Desain show-hide box yahoo smiley dibuat dalam posisi fixed agar selalu terlihat di halaman blog di sisi kiri-bawah. Cara penempatan box yang seperti ini dimaksudkan untuk mempermudah pemberi komentar saat memilih emoticon/smiley karena box akan bisa dekat dengan comment box. Sebuah trik yang membuat widget menjadi berbeda dibandingkan dengan tutorial lainnya yang tidak menempatkan box yahoo smiley pada posisi strategis dan berdampingan dengan box komentar.

Untuk template non-Threaded Comment, silahkan buka link di bawah ini untuk mendapatkan widgetnya:
Widget Yahoo Smileys non-Threaded Comment

Cara pemasangan javascript widget yahoo smileys:

1. Login ke Blogger.
2. Klik "Rancangan (Design)".
3. Halaman Tata Letak (Layout).
   
   • Pilih salah satu "Add a Gadget/Tambah Gadget" yang terdapat dalam elemen blog bergaris putus-putus.
   • Setelah window baru terbuka dan gadget terlihat, pilih dan klik gadget "HTML/Javascript".
   • Copy dan paste-kan javascript dalam "box HTML/Javascript".
   • Klik "SIMPAN/SAVE".
4. Buka blog dan buat komentar dengan menyisipkan kode smiley seperti yang terlihat dalam box yahoo smiley.
5. Selesai.

Cara lain menyimpan javascript :

1. Login ke blogger.
2. Klik "Rancangan/Design".
3. Klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode </body>
6. Letakkan javascript di atas </body>
7. Klik "Simpan Template/Save Template".
8. Buat komentar dan tambahkan kode smiley kemudian lihat hasilnya.
9. Selesai!

Javascript widget Yahoo Smileys :

<script src="http://gubhugreyot-javascript.googlecode.com/files/GRsmileys-threaded.js" type="text/javascript"></script>

Widget Recent Comments u Blogger Template Designer

Widget Recent Comments ini sangat kompatibel untuk semua semua template blogger, baik Template Tata Letak (template lama/old template) maupun Blogger Template Designer (template baru/new blogger template). Menggunakan widget recent comment sebenarnya sangat bermanfaat, tidak hanya bagi pemilik blog ataupun pengunjung blog, terlebih pemberi komentar yang memerlukan tanggapan atau jawaban author. Dengan digunakannya widget recent comments maka komentar-komentar dari keseluruhan posting akan terkumpul dalam sebuah box khusus yang dengan mudah dibaca pengunjung tanpa. Hal seperti ini akan membuat pengunjung atau pemberi komentar secara cepat mengetahui ada atau tidaknya tanggapan/jawaban terhadap komentar/pertanyaan yang diajukan. Widget Recent Comments sendiri menggunakan javascript yang hanya terdiri dari beberapa baris sehingga loading blog juga tidak akan terlalu terbebani. Satu keuntungan lebih dari widget ini adalah pada tingkat kecepatan untuk menampilkan recent comments. Sangat jauh lebih cepat dibanding widget recent comments bawaan/yang disertakan blogger pada "Add a Gadget".

Javascript dan xHTML Recent Comments

<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/GRrecent.comments.js" type="text/javascript"></script>
<div style="max-height:300px;overflow:auto;">
<script src="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

Cara menggunakan widget recent comments

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan javascript dan xHTML widget Recent Comments dalam box HTML/Javascript.
   • Ganti kode berwarna merah pada :
     http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com sesuai dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

D E M O

Lihat recent comments dalam blog ini!

Catatan :

Dalam demo ini widget telah mengalami banyak modifikasi. Jika anda ingin membuat yang seperti terlihat dalam demo, silahkan tunggu tutorialnya di http://gubhugreyot.blogspot.com

Pasang Google Translate 16 Bahasa di Blog

Simpan Kode Google TranslateKlik di sini! Panduan pasang kode dalam gambar.

Mungkin saja beberapa pengunjung dari luar Indonesia menemukan blog anda dan tertarik untuk menikmati postingnya. Ya..., kenapa tidak?! Bukankah tak ada satupun batasan yang melingkupi dunia maya ini. Segala hal yang tak terbayangkan akan dengan mudah terjadi begitu saja tanpa kita sadari. Yah.., oleh karena itu mengapa tak berjaga-jaga sejak dini?! Berikan saja sebuah "widget Google Translate" agar pengunjung yang sudah sempat membuka blog anda mengurungkan niatnya untuk menutup blog yang sudah terlanjur terpampang di depan matanya. Yah..., barangkali saja sebuah "translator" akan menarik minatnya untuk mencoba mengerti apa maksud posting anda "yang berbahasa Indonesia itu"?! Uih... gampang, kok, pasangnya! Nih coba lihat klo nggak percaya!

Cara Pasang Widget Google Translate di Blog

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Pilih dan klik salah satu Add a Gadget di Elemen Laman (Page Elements). Tunggu beberapa saat.
5. Pilih dan klik widget HTML/Javascript.
   • Copy dan pastekan javascript dalam box Add a Gadget.
   • Klik SIMPAN (SAVE).
6. Selesai! Silahkan buka blog dan coba untuk terjemahkan blog ke bahasa yang tersedia!

Javascript Google Translate- display Vertical

javascript:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Javascript Google Translate- display Horizontal

javascript:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Catatan/Keterangan:

• Klik gambar di bagian teratas untuk melihat panduan dalam gambar.
• Anda dapat juga merubah bahasa yang digunakan di google translate dan memilih sendiri berapa dan bahasa apa yang akan digunakan dengan membuat sendiri widgetnya. Silahkan klik disini » (Google Translate).

Scroll Box Widget Label Blogger

Scroll Box Label.
Klik untuk perbesar image!

Scroll Box Widget label dapat dibuat tanpa terlalu banyak menambah kode. Cukup menggunakan dua macam kode tambahan maka sebuah scroll box segera dapat terpasang. Anda hanya perlu mengatur ketinggian scroll box untuk disesuaikan dengan kebutuhan di halaman posting.

Cara Membuat Scroll Box Widget Label

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.
6. Klik Expand Widget Template.
7. Cari kode:
   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
8. Ganti kode di atas dengan kode baru di bawah ini.
9. Klik Simpan Template *(Save Template).

Kode Scroll Box Widget Label:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;' style='height:100px;overflow:auto;'>

Catatan/Keterangan:

1. Gunakan Ctrl + F saat mencari kode agar lebih cepat dan lebih mudah!.
2. Sesuaikan tinggi scroll box widget label dengan merubah nilai 100px. Semakin besar nilainya maka scroll box semakin tinggi.

Trick Membuat Scroll Box Widget Recent Comment Blogger Plugins

Scroll Box Widget Recent Comment

Menggunakan widget recent comment blogger plugins memberi maanfaat tersendiri bagi blogger karena bisa memonitor secara cepat komentar yang diterima tanpa harus login terlebih dahulu. Hanya satu yang agak merepotkan bagi widget ini. Teks ataupun linknya tak dapat di atur (ukuran font, warna, tebal dll) agar lebih padu (seragam) dengan bentuk font yang dipergunakan di keseluruhan blog hingga tampilannya terlihat berbeda dan terus terang saja terasa sedikit mengganggu. Ada sebuah solusi untuk membuat widget recent comment ini sedikit tersamarkan dan sekaligus membuatnya lebih rapi dan mudah ditata. Tempatkan saja dalam scroll box.

Untuk membuat scroll box bagi widget recent comment kita tak mungkin melakukannya tanpa melakukan penambahan kode html pada bagian body. Perubahan atau penambahan inipun harus melalui Expand Widget Template. Agar lebih cepat dan lebih aman membuatnya, silahkan ikuti panduan berikut.

Panduan membuat scroll box recent comment

.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke kondisi sebelum modifikasi lakukan klik Browse kemudian Upload.
6. Klik Expand Widget Template.
7. Cari kode <b:widget id='Gadget1' locked='false' title='Recent Comments' atau title='Recent Comments'. Gunakan Ctrl + F untuk lebih mempercepat pencarian kode.
8. Di sekitar kode <b:widget id='Gadget1' locked='false' title='Recent Comments' .... akan dijumpai kode lain yang seperti di bawah ini:
   
   

   Kode HTMl Recent Comment default Blogger:

   <b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
   <b:includable id='main'>  
     <!-- only display title if it's non-empty -->
     <b:if cond='data:renderingUrl != ""'>
       <b:if cond='data:title != ""'>
         <h2 class='title'><data:title/></h2>
       </b:if>
       <b:if cond='data:gadgetSnippet != ""'><data:gadgetSnippet/>
       <b:else/>
         <div class='widget-content'>
           <b:if cond='data:nonSocialFragment != ""'>
             <data:nonSocialFragment/>
           </b:if>
         </div>
       </b:if>
     <b:else/>
       <data:errorMessage/>
     </b:if>
     <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

9. Ganti kode dengan kode berikut:

   Kode HTMl Recent Comment Baru:

   <b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
   <b:includable id='main'>  
     <!-- only display title if it's non-empty -->
     <b:if cond='data:renderingUrl != ""'>
       <b:if cond='data:title != ""'>
         <h2 class='title'><data:title/></h2>
       </b:if>
       <b:if cond='data:gadgetSnippet != ""'>
   <div style='max-height:200px;overflow:auto;'><data:gadgetSnippet/></div>
       <b:else/>
         <div class='widget-content'>
           <b:if cond='data:nonSocialFragment != ""'>
             <data:nonSocialFragment/>
           </b:if>
         </div>
       </b:if>
     <b:else/>
       <data:errorMessage/>
     </b:if>
     <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

10. Klik Simpan Template (Save Template).
11. Buka blog untuk melihat tampilan baru widget recent comment anda!

Catatan/Keterangan:

• Untuk mengatur tinggi scroll box rubah nilai max-height:200px;.
• Semakin besar akan semakin tinggi dan sebaliknya semakin kecil akan semakin pendek.
• Dengan penambahan elemen DIV baru tersebut anda punya kesempatan untuk membuat beberapa modifikasi baru melalui kode CSS hanya dengan "menempelkan sebuah class atau id.

Trick Merubah Ukuran Image Profile Blogger

Tips & trick blogger ini berkaitan dengan widget profile blogger. Dalam widget ini, image yang digunakan berukuran maksimal 80px (width) x 80px (height). Jika anda mengupload image dengan ukuran antara width dan height tak sama maka secara otomatis salah satu sisi yang lain (width atau height) di set pada ukuran 80px sedang bagian yang lain menyesuaikan dengan skala image yang diupload. Sebagai contoh, jika misalnya anda upload image berukuran 400px (width) dan 300px (height) maka image profile akan berukuran 80px (width) dan 60px (height). Angka 80px:60px akan sebanding dengan 400px:300px.

Standar ukuran image profile tersebut bukanlah angka mati karena dengan hanya menggunakan kode CSS anda dapat merubahnya dalam berbagai ukuran sekehendak hati. Bahkan, dengan penambahan kode css pengatur height dan width image profile, angka perbandingan (skala) yang berlaku tersebut dapat kita rubah sesuka hati. Di bawah ini disertakan beberapa contoh perubahan ukuran image profile. Silahkan klik pada setiap image agar ditampilkan dalam ukuran sesungguhnya!.

1. Ukuran standart (default).
2. Ukuran image profile diperkecil.
3. Ukuran image profile diperbesar dengan ukuran sedang.
4. Ukuran image profile diperbesar dengan ukuran maksimal atau selebar box/kolom widget.

Kode CSS perubah ukuran image profile

Kode CSS dibawah ini akan merubah ukuran image profile dengan skala sesuai image yang digunakan sebagai image profil.

Kode CSS

.profile-img{
       width:20% !important;
       height:auto !important;
}

Cara menggunkan kode

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC.
6. Cari kode ]]></b:skin>
7. Copy dan paste-kan kode CSS di atas ]]></b:skin>
8. Klik Simpan Template (Save Template).
9. Buka blog untuk melihat hasil perubahan ukuran image profile.

Catatan/Keterangan:

• Lakukan perubahan pada nilai 20% untuk mendapatkan ukuran yang dikehendaki.
• Nilai 100% dipergunakan untuk memperoleh ukuran terbesar hingga lebar image sebesar lebar box/kolom widget profil.
• Semakin nilai diperkecil maka lebar dan tinggi image akan semakin kecil.

Kode CSS untuk merubah ukuran tanpa skala

Dengan kode CSS ini anda dapat merubah ukuran image tanpa harus mendasarkan pada perbandingan (skala) image yang telah diupload. Tentu saja perubahan tanpa skala perbandingan yang standar akan membuat image terlihat lonjong (melebar atau meninggi), hingga bisa terjadi bila image berupa gambar utuh satu tubuh maka akan terlihat menjadi cebol atau terlalu jangkung.

Kode CSS

.profile-img{
       width:20% !important;
       height:100px !important;
}

Catatan:

• Lakukan perubahan pada nilai 20% dan 100pxuntuk mendapatkan ukuran yang dikehendaki.
• Semakin besar nilai maka akan semakin lebar dan semakin tinggi.

Tips & Cara Pasang Photo - Image Blogger Profile

Klik image untuk memperbesar!

Mungkin saja di antara anda ada yang belum memasang image profile blogger sebagai kelengkapan widget profile. Meskipun aku kira semua blogger sudah mengetahui cara untuk menampilkan image profile ini, namun ada beberapa hal kecil seputar image profile perlu anda diketahui. Dibawah ini beberapa di antaranya:

• Image profile blogger berukuran maksimal 80px (width) x 80px (height). Dengan mengetahui ukuran ini anda bisa memperkirakan bagimana dan dengan ukuran seberapa image profile yang akan digunakan.
• Image profile dapat diupload melalui halaman dasboard dengan ukuran tidak dibatasi. Blogger secara otomatis akan memperkecil image dengan ukuran height maksimal 80px (dengan width=auto) atau width 80px (dengan height=auto) sesuai dengan perbandingan ukuran width dan height image yang diupload.
• File image yang bisa dan umumnya dipergunakan adalah gif, jpg dan png. Jiika image atau photo yang akan dipasang menggunakan banyak warna sebaiknya pakai file berekstensi .jpg karena bebannya akan lebih kecil (enteng) jika dibandingkan .gif atau .png .
• Image profile dapat dirubah ukurannya (diperkecil atau diperbesar) sesuka hati melalui kode CSS atau kode HTML.
• Denagn menggunakan kode CSS dan html sebuah Image profile dapat dimodifikasi hingga mempunyai tampilan berbeda dari image profile blogger pada umumnya. Kesempatan melakukan modifikasi ini memberi peluang blogger untuk dapat memperindah blog melalui berbagai modifikasi pada image profile.

Mempertimbangkan kegunaan utamanya sebagai sebuah widget yang berfungsi sebagai media informasi tentang identitas diri pemilik blog serta melihat peluang yang dapat dimanfaatkan untuk memperindah blog, seperti yang tersampaikan di atas, akan lebih baik kiranya jika setiap blogger menggunakan widget ini. Bagi anda yang belum menampilkan image profile di blogger dan punya keinginan untuk segera memasang, silahkan ikuti panduan di bawah ini;

Cara Upload Image Blogger Profile

1. Login ke Blogger. Gunakan alamat email atau user name (untuk gmail) dan password.
2. Halaman Dasbor (Dasboard).
3. Pilih dan klik Edit Profil atau Edit Photo.
4. Halaman Edit Profil User | Foto Profil.
   • Setelah halaman Edit Profil User terbuka, cari "Foto Profile".
   • Upload Image profile. Jika image berasal dari PC anda, pilih dan klik "Dari komputer anda", kemudian lanjutkan klik "Browse".
   • Pilih dan tentukan image yang akan digunakan sebagai image profile.
   • Klik Open. Tunggu sampai proses upload selesai
5. Jika ingin menambahkan teks pada profile anda, tuliskan beberapa hal yang berkaiatan pribadi anda atau hal yang lain pada box "Pendahuluan".
6. Klik Simpan profile.
7. Untuk kembali ke halaman dasbor, hapus sebagian alamat (URL) pada address bar (http://www.blogger.com/edit-profile.g?saved=true) dan sisakan http://www.blogger.com/. Klik "Enter".
8. Selesai dan anda sudah kembali di halaman dasbor.
9. Buka blog untuk melihat profil anda.

Catatan/Keterangan

Jika anda ingin sesuatu yang berbeda pada widget profile, silahkan buka panduan di bawah ini:
Menampilkan 2 photo di Widget Profile Blogger

Memanfaatkan Widget Stats Blogger u Meningkatkan Jumlah Pengunjung

Silahkan lihat demo widget blog's stats di di sidebar kanan. Widget blog's stats blogger tersebut tampilannya berbeda dengan yang selama ini banyak digunakan blogger karena telah mengalami beberapa modifikasi agar terlihat "lebih luwes" dan membuat blog terlihat lebih manis.

Melanjutkan apa yang sudah anda ikuti di gubhugreyot, silahkan lakukan beberapa perubahan pada template agar jumlah pengunjung yang terdata di blog's stats blogger segera meningkat secara drastis dan fenomenal (kaya' thukul: fenomenal!).

Langkah meningkatkan jumlah pengunjung blog:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup templateterlebih dahulu
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC.
   • Berikan nama khusus agar mudah diingat.
6. Klik Expand Widget Template.
7. Cari kode <b:widget id='Stats1'. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
8. Di bawah kode tersebut terdapat sebuah kode seperti berikut:
   
   

   Kode blog's stats yg hrs diganti:

   <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>

9. Ganti dengan kode berikut.
   

   Kode pengganti :

   <span class='counter-wrapper text-counter-wrapper' style='margin-right:-2px;'>,198,527,</span>
          <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
   

10. KlikSimpan Template (Save Template).

Catatan/Keterangan:

1. Semoga anda sudah tahu dan menyadari tipuan yang sudah menimpa anda!
2. Segera buat tipuan ini untuk gantian menipu pengunjung.
3. Tambahkan angka di depan koma yang pertama dan yang terakhir untuk membuat angka stats terlihat "orisinil".

ttd


gubhugreyot

Merubah Tampilan Widget Blog's Stats Blogger

Satu yang terpikirkan ketika ada keinginan untuk menggunakan widget Blog's Stats Blogger adalah "tampilannya yang sangat tidak menarik". Kalau boleh dikatakan secara jujur, bentuk dan tampilannya sangat ndeso tak ubahnya si gubhugreyot" yang "ndeso kluthuk". Berangkat dari dari inilah maka terpikir untuk sedikit mengubah si "widget blog's stats" ini agar terlihat lebih "pantas dipajang di halaman blog". Yah..., biar blog juga nggak terlihat semakin amburadul, gitu, lhoh!

Merubah gaya dan penampilan widget blog's stats blogger dapat dilakukan melalui penggunaan kode css atau xHTML atau sekaligus keduanya. Beberapa perubahan yang dapat dilakukan diantaranya pada jenis font (font-family), ukuran font (font-size), warna font (color), background serta dimungkinkan juga menambah beberapa properti css baru agar tercipta perubahan yang lebih drastis dari aslinya. Dalam posting ini akan kita buat sebuah bentuk kode css baru (mengacu pada kode yang digunakan widget blog' stats blogger) yang bisa anda kembangkan lagi hingga mendapatkan bentuk perubahan tampilan widget lebih maksimal dan mungkin saja lebih fantastis.

Cara merubah tampilan widget blog's stats blogger

Sebelum memulai perubahan pada widget anda wajib mengaktifkan widget blog's stats blogger terlebih dahulu melalui add a gadget di elemen laman (page elements). Panduan cara mengaktifkan widget bisa anda buka dengan klik di sini ! Setelah widget berhasil di tampilkan di halaman blog, silahkan ikuti panduan berikut.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template dengan cara:
   
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. File yang sudah tersimpan ini berfungsi untuk mengembalikan template ke kondisi sebelum perubahan dilakukan jika terjadi kesalahan yang mengakibatkan kerusakan desain blog. Untuk memulihkan template seperti sebelum perubahan anda bisa klik Browse dan dilanjutkan Upload.
6. Cari kode ]]></b:skin>.
7. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
8. Klik Simpan Template (Save Template).

Kode CSS Widget Blog's Stats (modif):

#Stats1 .widget-content{
       background:#aaa url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-bg-grad-transp-2-50.png) left center repeat-x;
       width:150px;
       padding:4px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
       text-align:center;
       border-radius:6px;  /* by : gubhugreyot, 01 Febuari 2011 */ 
}
#Stats1 .widget-content .counter-wrapper{
       height:30px;
       width:140px;
       padding:0;
       border:1px solid #aaa;
       box-shadow:0 0 6px #000;
       background: url(http://gubhugreyot-images.googlecode.com/files/gubbhugreyot_bg-anima-grad-111-35.gif) center center repeat-x;
       border-radius:4px;
       color:#555;
       font-weight:600 !important;
       font-family:Tahoma;
       letter-spacing:2px;
       font-size:18px;
}

Catatan/Keterangan:

Pilihlah bentuk tampilan widget blog's stats yang hanya berupa teks tanpa background seperti terlihat pada gambar di atas!

Cara Pasang - Mengaktifkan Widget Blog's Stats Blogger

Widget Blog's Stats terhitung sebagai sebuah widget plugin blogger yang baru. Jika sebelumnya untuk monitoring statistik dan perkembangan blog kita harus mencari widget stats ini di berberapa situs penyedia layanan gratis seperti histats.com, red counter atau yang lain, kini blogger dapat langsung menggunakan dan memasang widgetnya hanya dengan beberapa kali klik di page elemen atau elemen laman. Yah... tentu saja ini bagi blogger yang lebih mengutamakan data dibanding penampilan widgetnya. Memang tak dapat dipungkiri bahwa bentuk widget stats blogger plugin sementara ini terlihat sangat sederhana atau bahkan terkesan "kuno dan kurang menarik". Sekalipun demikian meggunakan widget blog's stats blogger akan lebih menguntungkan dibandingkan widget-widget blog's stats lain diluar blogger.

1. Data dan statistik yang diberikan mempunyai akurasi bagus dan dirasa sudah mencukupi untuk monitoring perkembangan blog dari waktu ke waktu.
2. Penggunaan widget tak jadi pengganggu kecepatan loading blog seperti yang biasa terjadi ketika kita gunakan widget blog's stats dari beberapa situs tertentu.

Cara mengaktifkan widget blog's stats blogger.

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Elemen Laman (Page Elements).
5. Klik Add a Gadget sesuai dengan posisi dimana widget ingin di tampilkan (dalam box dg garis putus-putus).
6. Akan tebuka window baru dengan nama "Add a Gadget".
7. Pilih dan klik Blog's Stats. Jika diperlukan lakukan setting sesuai opsi yang tersedia. Anda juga bisa merubah titlenya. Berikan nama yang tepat menurut anda!
8. Klik SAVE (Simpan).

Menampilkan Dua Image (Photo) di Widget Profile

Image profile blogger yang ditampilkan dalam widget Profile Blogger Plugin tak lebih dari sebuah thumbnail berukuran kecil berkisar 100px (width). Melalui trik yang dibuat menggunakan kode css setiap blogger dapat menampilkan gambar (image) profile dengan ukuran yang jauh lebih besar. Agar image blogger profile yang berukuran besar ditampilkan lebih atraktif, kode css3 transition dan opacity telah ditambahkan sehingga hover menciptakan sebuah transisi yang disertai fade efek. Jika pada demo di bawah yang ditampilkan bukan sebuah bentuk image profile blogger, ini hanyalah sekedar improvisasi untuk membuat pengunjung tak bosan sekaligus sebagai sebuah informasi bahwa anda tak harus menggunakan image yang sama dengan image profile yang digunakan dalam widget. Gunakan trik ini untuk menampilkan gambar/image sesuka hati anda. Ya..., mo gambar onta, boleh..., mo, gambar kambing, boleh... atau mungkin foto anda yang lagi "e'ok" juga boleh-boleh saja. Pokoknya suka-suka anda, dah!

D e m o

About Me

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

View my complete profile

Kode CSS

.widget-content .dapurku{
       position:absolute;
       display:block;
       z-index:0;
       left:0;
       top:0;  /* orignal code by: gubhugreyot - http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com */ 
       width:0;
       height:0;
       padding:4px;
       border:2px solid #eee;
       opacity:0;
       filter:alpha(opacity=0);
       border-radius:10px;
       box-shadow:0 0 8px #000;
       background-size:0 0;
       transition:1s;-o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.widget-content:hover .dapurku{
       z-index:9999;
       top:-200px;
       opacity:1.0;
       filter:alpha(opacity=100);
       background:red url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshzCbWKb_XqRUg8v6BralI10oKlfdrX3h7c0VPBrUWpJEvjWU1UwpFUWM90xrfE1_w3-07i4yLpgehZi3jdwOzqZcyf8AChbwBYoRW3VTK9DZvvsecS1veDMPkMC861orktBCoPlwXtkY/s400/img_gubhugreyot-gadisku-004.jpg") center center no-repeat; 
       width:220px;
       height:320px;
       background-size:200px auto;
}

Cara menampilkan 2 Photo Blogger

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Pilih dan Klik Rancangan (Design).
4. Pilih dan klik Edit HTML.
5. Lakukan backup template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC.
   • Berikan nama untuk memudahkan anda saat ingin digunakan kembali. File yang sudah tersimpan ini dapat digunakan untuk mengembalikan template kembali ke keadaan awal (sebelum prubahan atau penambahan kode htl bar) dengan cara klik Browse (Upload sebuah template dari sebuah file pada hard drive Anda) dilanjutkan "Unggah (Upload)'.
6. Klik Expand Widget Template.
7. Cari kode ]]></b:skin>.
8. Copy dan paste-kan kode CSS tepat di atas kode ]]></b:skin>.
9. Cari kode <b:widget id='Profile1'. Di bawah kode tersebut terdapat kode :
   <div class='widget-content'>.
10. Ganti kode <div class='widget-content'> dengan Kode HTML Baru di bawah.
11. Klik Simpan Template (Save Template).
12. Buka blog untuk melihat hasilnya.

Kode HTML Baru

<div class='widget-content'>
<div class='dapurku'/>

Catatan/Keterangan:

Ganti image yang digunakan pada background di kode CSS (berwarna merah) dengan image lain sesuai apa yang ingin ditampilkan pada widget profile.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshzCbWKb_XqRUg8v6BralI10oKlfdrX3h7c0VPBrUWpJEvjWU1UwpFUWM90xrfE1_w3-07i4yLpgehZi3jdwOzqZcyf8AChbwBYoRW3VTK9DZvvsecS1veDMPkMC861orktBCoPlwXtkY/s400/img_gubhugreyot-gadisku-004.jpg

Cara Membuat Scroll Box Widget Recent Posts Blogger Plugins

Sama seperti halnya scroll box lainnya, seperti misalnya scroll box widget popular posts blogger plugins, "Scroll Box Widget Recent Posts Blogger Plugins" dapat dimanfaatkan untuk menciptakan efisiensi dan penataan halaman blog. Dengan digunakannya scroll box maka tinggi (height) widget recent posts (daftar posting terbaru) dapat diatur hingga widget ini tidak terlalu memenuhi kolom blog. Membuatnya bisa hanya menggunakan xHTML atau perpaduan antara kode CSS dan xHTML. Karena untuk membuat scroll box tak ubahnya melakukan modifikasi template (modifikasi blog), maka sebelum pembuatan scroll box backup template harus dilakukan terlebih dahulu agar apabila terjadi kesalahan template (desain dasar blog) bisa dipulihkan seperti sedia kala.

Cara Membuat Scroll Box Widget Recent Posts Blogger Plugins

1. Aktifkan/pasang widget recent posts blogger plugin sebelum membuat scroll box. Panduan membuat/mengaktifkan widget recent posts blogger dapat anda ikuti melalui link berikut.
   Panduan Memasang (mengaktifkan) idget Recent Posts Blogger Plugins
2. Login ke Blogger.
3. Halaman Dasbor (Dasboard).
4. Klik Rancangan (Design).
5. Klik Edit HTML.
6. Klik Expand Widget Template.
7. Lakukan backup template. Panduan backup template dapat anda ikuti melalui link di bawah ini:
   Panduan Cara Backup Template Blogger.
8. Cari kode title='Recent Posts' type='Gadget'>. Gunakan Ctrl + F untuk mempermudah pencarian. Panduan mencari kode HTML di template dapat anda buka melalui link berikut.
   Panduan Cara Cepat Cari Kode HTML Template
9. Dibawah kode di atas akan anda temukan kode seperti di bawah ini.

Kode yang harus diganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <data:gadgetSnippet/>
<b:else/>

10. Ganti kode di atas fdengan kode berikut.

Kode HTML pengganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <div style='height:250px;overflow:auto;'><data:gadgetSnippet/></div>
<b:else/>

11. Klik Simpan Template (Save Template).
12. Klik Expand Widget Template.
13. Buka blog untuk melihat hasilnya.

Jika ingin menggunakan kode CSS ganti kode dengan kode berikut:

Kode HTML pengganti:

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
     <div class='GR_recentposts'><data:gadgetSnippet/></div>
<b:else/>

Tambahkan kode CSS di atas kode ]]></b:skin>

Kode CSS Scroll Box Widget Recent Posts Blogger:

.GR_recentposts{
       height:250px;
       overflow:auto;
}

Cara Membuat - Mengaktifkan Widget Recent Posts Blogger Plugin

Recent Posts Blogger Plugins

Widget Recent Posts pada dasarnya merupakan sebuah fungsi yang digunakan untuk menampilkan daftar posting terbaru dalam sebuah box. Daftar posting terbaru (recent posts) ini berupa buah link yang disertai title posting (judul posting). Widget blogger plugins ini juga menyediakan beberapa pengaturan yang dapat dipilih penggunanya. Mengaturnya juga sangat mudah karena hanya diperlukan beberapa kali "klik" dan semua akan tertampilkan di halaman blog. Di bawah ini beberapa pengaturan widget recent posts yang mungkin dapat digunakan sebagai referensi saat anda mengaktifkannya.

1. Title » Title akan ditampilkan sebagai "nama widget" dan dalam widget ini tertuliskan "Recent Posts". Anda bisa menggantinya dengan teks berbeda seperti misalnya "Daftar Posting Terbaru".
2. Height » Nilai height dlam pixel (px). Semakin besar maka akan semakin tinggi, begitu juga sebaliknya jika semakin kecil maka akan semakin rendah.
3. Number of Posts to Display » Jumlah posting terbaru yang akan ditampilkan dalam widget recent posts. Jumlah maksimal 10 posting. Jika ingin jumlahnya kurang dari 10 posting silahkan ganti angka yang tertera.
4. Display Post Date? » Pilihan untuk menampilkan tanggal posting. Berikan tanda jika ingin menggunakan.
5. Show a summary of your blog posts? » Pilihan untuk menampilkan ringkasan posting.
6. Summary Length » Jika pilihan pada "menampilkan ringkasan posting, maka atur berapa jumlah 'huruf dan/atau angka yang ingin ditampilkan.
7. Preview - Update » Setelah pilihan ditentukan "klik" Update agar kita bisa melihat preview recent posts berdasar pilihan setting yang telah dilakukan.

Setting widget Recent Posts Blogger Plugin

Langkah untuk mengaktifkan widget recent posts:

1. Login ke Blogger.
2. Halaman Dasboard (Dasbor).
3. Klik Rancangan (Design).
4. Elemen Laman - Tambah dan Susun Elemen Laman (Page Elements - Add and Arrange Page Elements).
5. Klik salah satu Add a Gadget.
6. Sebuah window terbuka yang berisi halaman Add a Gadget. Pilih dan klik Featured.
7. Ada banyak widget di sini, cari, pilih dan klik Recent Posts.
8. Silahkan lakukan setting pada widget recent posts berdasar referensi di atas.
9. Klik Simpan (Save).
10. Anda akan kembali di Elemen Laman - Tambah dan Susun Elemen Laman (Page Elements - Add and Arrange Page Elements). Anda bisa memindah posisi widget dengan "men-drag widget ke posisi yang diinginkan.
11. Klik Simpan (Save) yang terletak di kanan atas halaman.
12. Buka blog dan lihat hasilnya.

Cara Menghilangkan Footer (Powered by Blogger) dan Membuat Teks Footer Baru

Diberdayakan oleh Blogger
Powered by blogger

Panduan tentang "Cara menghilangkan footer yang berisikan teks dan link bertuliskan power by: Blogger atau Didukung oleh blogger", hanya dapat diikuti setelah anda membaca tutorial "Cara Membuat Elemen Baru di Footer". Silahkan ikuti panduannya baru kemudian kembali simak tutorial yang ini.

Setelah pembuatan elemen baru di bagian footer selesai, kita langsung akan mencoba "menyulap" widget "Power by Blogger agar segera menghilang dan anda dapat mengisi bagian tersebut dengan widget baru "sesuai selera anda".

Kode CSS

#Attribution1{
       display:none !important;
       visibility:hidden !important;
}

Langkah Menghilangkan "Power by Blogger"

1. Login ke Blogger
2. Halaman Dasbor (Dasboard).
3. Rancangan (Design).
4. Edit HTML
5. Backup Template.
6. Cari kode ]]></b:skin>.
7. Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>
8. Simpan Template (Save Template).

Catatan/Keterangan:

Anda dapat mengikuti panduancara backup template dan cara cepat cari kode HTML template dengan membuka link di bawah ini:

• Panduan Cara Backup Template Blogger
• Panduan Cara Cepat Cari Kode HTML Template

Cara membuat pengganti widget Power by Blogger.

1. Setelah proses Save Template selesai, lanjutkan dengan:
2. Elemen Laman (Page Elements).
3. Add a Gadget di ujung terbawah (footer).
4. Halaman "Add a Gadget"
5. HTML/Javascript
6. Copy dan pastekan xHTML di bawah ini pada box HTML/Javascript.
7. Simpan (Save)
8. Akan lebih baik lanjutkan lagi dengan klik "SAVE" yang terletak di ujung kanan atas halaman.

xHTML

<style type="text/css">
.powerby{
      position:relative;
      height:40px;
      line-height:40px;
      background:#000;
      padding:5px 20px;
      text-align:center;
      margin:0 auto;  
      color:#eee; /* by: http://gubhugreyot.blogspot.com */ 
      font-size:14px;
}
.powerby a{
      color:lightblue;
      text-decoration:none;
      font-weight:bold;
}
.powerby a:hover{
      color:red;
      text-decoration:none;
}
</style>
<div class="powerby">Power by: <a target="_blank" href="http://gubhugreyot.blogspot.com/" title="Hai... hai ... hai ....">gubhugreyot</a>
<div style="float:right;">Template by 'cah Edan</div>
</div>

Demo Hasil penggunaan kode

Seperti inilah hasil akhirya Powered by: 'cah edan!

Catatan/Keterangan:

• Kembangkan kode yang telah tersedia untuk mendapatkan hasil sesuai harapan!
• Tutorial ini berdasarkan kode html dari "Template Blogger Baru (New Blogger Templates) atau Template Designer
• Agar lebih cepat dalam mempelajari semua tutorial sebaiknya buat sebuah blog khusus untuk melakukan berbagai percobaan dan modifikasi.

Cara membuat Scroll Box Widget Popular Posts di Blogger

Scroll Box Widget Popular Posts

Jika anda salah satu pengguna widget popular posts blogger plugin dan setting popular posts dengan jumlah 10 posting maka pasti widget ini akan terlihat sebagai deret meninggi seperti layaknya gedung pencakar langit. Ada beberapa cara untuk membuat tinggi box widget popular posts ini menjadi lebih pendek agar widget popular posts lebih fleksibel penempatannya sekaligus membuat widget ini terlihat lebih rapi. Membuat scroll box adalah salah satu cara yang paling sederhana dan gampang. Kode CSS bisa kita manfaatkan atau dapat juga langsung kita gunakan kode html di bagian body.

Scroll Box Widget Popular Posts Blogger Plugin dg Kode CSS

Jika anda ingin menggunakan kode CSS untuk membuat scroll box, simpan kode CSS di atas kode ]]></b:skin>.

Kode CSS Scroll Box

.popular-posts{
       height:250px;
       overflow:auto;
}

Scroll Box Widget Popular Posts Blogger Plugin dg xHTML

Berbeda dengan ketika kita gunakan kode CSS, saat kita membuat scroll box widget popular posts menggunakan xHTML maka modifikasi/perubahan kode html yang terdapat di antara tag pembuka body (<body>) dan tag penutup body (</body>) harus dilakukan.

Carilah kode berikut ini:

xHTML yang harus dirubah

<div class='widget-content popular-posts'>

Ganti dengan kode berikut:

xHTML Scroll Box Widget Popular Posts

<div class='widget-content popular-posts' style='height:250px;overflow:auto;'>

Catatan/Keterangan:

Jika anda blom mengaktifkan widget popular posts atau mungkin ingin membuat sebuah ticker cantik untuk widget popular posts, silahkan buka tutorialnya melalui link di bawah ini:

• Tutorial Lengkap: Scroll Box Widget Popular Posts
• Cara Mengaktifkan Widget Popular Posts
• Ticker Widget Popular Posts

Cara Menggunakan (mengaktifkan) Widget Popular Post Bolgger Plugins

Add a Gadget di Elemen Laman

Widget Popular Post adalah sebuah widget yang berfungsi untuk menampilkan beberapa posting populer/paling disukai di halaman blog. Setiap popular posts akan ditampilkan dalam bentuk kutipan posting berikut thumbnail (image berukuran kecil) dan title (judul) posting. Prioritas/urutan didasarkan pada tingkat popularitas posting. Jumlah popular post yang ditampilkan dalam widget popular posts blogger plugins dibatasi maksimal 10 popular posts. Anda bisa mengaturnya melalui fitur yang telah disediakan.

Menggunakan/menampilkan widget popular posts blogger plugins dapat dilakukan dengan mudah oleh semua blogger karena widget ini tersedia dalam bentuk siap pakai sebagai sebuah widget plugin. Setelah login ke blogger anda dapat mengaktifkannya melalui Add a Gadget.

Langkah untuk mengaktifkan widget popular posts

1. Login ke Blogger
2. Klik Rancangan (Design).
3. Page Elements » Add and Arrange Page Elements
   Pilih dan klik salah satu Add A Gadget. Pilih saja sembarang karena anda bisa mengatur letak dan posisi widget setelah widget popular post terinstall.
4. Akan terbuka sebuah windows baru Add a Gadget. Cari, pilih dan klik Popular Posts New!
5. Configure Popular Posts
   - Anda bisa merubah title dengan memberi nama lain untuk widget popular posts ini.
   - Ada beberapa pilihan berkaitan dengan tampilan widget silahkan pilih dan beri tanda.
   - Widget ini juga dapat ditampilkan dengan thumbnail (image) atau tanpa thumbnail. Pilih pada pengaturan yang telah tersedia.
6. Klik Save
7. Page Elements » Add and Arrange Page Elements
   Jika posisi/letak widget belum sesuai dengan yang diharapkan, anda bisa klik dan drag ke posisi yang diinginkan.
8. Klik Save di kanan atas!

Selesai!

Catatan/Keterangan:

Untuk membuat widget popular posts lebih menarik atau jika ingin membuat scroll box widget popular posts, anda bisa ikuti tutorialnya melalui link di bawah ini.

• Scroll Box Widget Popular Posts
• Ticker Widget Popular Posts