Auto Read More with Animated Post Thumbnail

Membuat dan menggunakan read more otomatis yang dilengkapi dengan thumbnail pada posting adalah pilihan yang sangat menarik. Dengan auto read more (automatic post summaries with thumbnail) anda tak perlu lagi untuk menggunakan fitur read more (insert jump break)yang telah disediakan blogger karena sebuah javascript akan secara otomatis menampilkan setiap posting dalam bentuk "menggunakan readmore" yang disertai sebuah image berukuran kecil (tentu saja jika posting menyertakan gambar). Jumlah teks yang ditampilkan sebelum read more (di halaman blog) dapat diatur melalui javascript, demikian pula dengan ukuran thumbnailnya.

Jika selama ini sebuah auto readmore selalu tampil ala kadarnya, kali ini kita kan buat yang lebih atraktif dengan bantuan kode css3 transition, css3 transformation, border-radius, box-shadow dan text-shadow.

Widget Translator dari Google Translate

Saat ini tak ada lagi widget translator berbentuk bendera (flag translator) karena google hanya mentoleransi penggunaan widget yang sebelumnya banyak digunakan blogger karena bentuk kode yang praktis serta tak menciptakan beban tambahan buat blog ini hanya hingga bulan Desember 2011. Tentu saja ada alasan mengapa google mengambil keputusan drastis yang terbilang banyak membuat kecewa blogger ini. Yah ..., karena dia merasa dirugikan akibat widget ini akhirnya menjadi widget yang sama sekali tak memberi keuntungan secuilpun buat dia.

Demo menggunakan tampilan Dropdown Only

3 bentuk tampilan widget google translator :

1. Dropdown Only :

Kode » Vertical

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

2. Horizontal :

Kode » Horizontal

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

3. Dropdown Only :

Kode » Dropdown Only

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

Tutorial

Klik link di bawah ini untuk mengikuti panduan dan tutorial cara memasangnya di blog.

Tutorial : Cara pasang widget google translator

Cursor: Animasi Text Berputar - Circling Text Trail

Ini hanya sekedar contoh bagaimana cursor yang sisertai teks berputar bekerja. Anda bisa melakukan pengaturan sendiri agar cursor tampil sesuai selera. Kecepatan putar, diameter lingkaran, warna teks, jumlah karakter teks, kecepatan teks mengikuti cursor adalah beberapa variabel yang dapat diset ulang. Jika sebelumnya banyak blogger juga memposting cara membuat cursor ini dan anda pernah mencoba atau bahkan kini menggunakannya, pasti ada yang terlihat berbeda. Perbedaan terletak pada posisi antara cursor dan lingkaran teks. Pada tutorial lain cursor tepat berada ditengah-tengah lingkaran teks, tetapi untuk yang akan kita buat ini cursor akan berada di atas lingkaran teks. Apa yang melatar belakangi perubahan design ini? Jika anda sudah membaca tutorialnya di gubhugreyot pasti telah mengetahui tapi bagi yang belum silahkan baca panduan dan tutorialnya melalui link di bawah ini:

Tutorial

Tutorial: Cursor Circling Text trail

Cursor bintang bertaburan

Cursor bertauran bintang ,cursor bertabur bintang atau cursor bintang bertaburan. Tiga istilah atau kalimat yang sulit dibedakan. Yah ..., untungnya ketiga istilah tersebut mempunyai makna yang sama yang menjelaskan tentang sebuah cursor yang disekitarnya bertaburan titik-titik bagaikan bintang. Cursor ini tersedia dalam berbagai warna, seperti red, green, blue, yellow, white, black, gray, lime, dan orange serta pink. Untuk mengganti warna anda cukup merubah alamat javascriptnya. Jika ingin warna merah tulis saja red atau mungkin warna biru tuliskan blue.

Javascript cursor warna merah:

<script src="https://sites.google.com/site/gitosiminprojects/posting-demo/GRstar-red.js" type="text/javascript"></script>

Untuk warna biru ganti red dengan blue, begitu seterusnya dan berlaku untuk semua warna yang tersedia.

Cara Menggunakan :

1. Login ke Blogger.
2. Setelah anda lihat halaman Dasbor (Dasboard), cari dan klik Rancangan (Design).
3. Cari dan klik Edit HTML.
4. Box Edit Template akan terlihat. Box ini penuh dengan kode html penyusun template/blog. Lakukan Backup template terlebih dahulu sebelum memasang dan menyimpan javascript cursor bintang bertaburan.
5. Cari Kode </body> dan letakkan javascript di atasnya.
6. Klik Simpan Template (Save Template).
7. Buka blog dan lihat hasilnya!

Catatan/Keterangan:

Jika ingin lebih jelas tentang cara backup template dan cari kode di template, silahkan buka gubhugreyot.

Carilah Special Tutorials yang terdapat di menu sebelah kiri halaman.

Cursor Waruabangijo

Cursor ini merupakan hasil modifikasi dari cursor bertabunr bintang yang telah diposting oleh begitu banyak blogger. Sekalipun anda pernah mencoba atau menggunakan cursor bertabur bintang, namun ketika anda mencoba yang ini pasti terasa sekali perbedaannya. Jika yang telah anda coba hanya bertabur titik-titik kecil, namun cursor hasil modifikasi ini akan menaburkan begitu banyak cinta (waru abang waru ijo) berukuran sekitar 2 hingga 3 pixel. Anehnya, ketika cursor digerakkan ke kanan atau ke kiri maka cinta yang bertaburan tersebut akan berubah menjadi semakin besar dan pada akhirnya kembali menjadi butiran-butiran kecil yang semakin jatuh ke ujung terbawah halaman blog. Hai ... gimana ... terlalu banyak ngomong akan terlalu banyak membuat kesalahan, dus .... banyak kata tak tentu memperjelas maksud dan tujuan. Ha ... terlebih anda juga sudah melihat cursornya. Silahkan saja simpan javascriptnya di antara tag body. Anda bisa menyimpan di bawah <body> atau di atas </body>

<script src="https://sites.google.com/site/gitosiminprojects/posting-demo/GRlovestar-red.js" type="text/javascript"></script>

Cursor Waruabangijo tersedia dalam berbagai warna:
red, green, blue, yellow, white, gray, lime, black, orange dan pink.

Untuk merubah warna cursor anda tinggal merubah red yang terdapat dalam javascript sesuai warna yang tersedia.

Contoh kode warna hijau:

<script src="https://sites.google.com/site/gitosiminprojects/posting-demo/GRlovestar-green.js" type="text/javascript"></script>

Tutorial

Klik link tutorial di bawah ini untuk mendapatkan tutorialnya:

Tutorial: Cursor bertabur bintang cinta

DEMO & Tutorial Vertical Menu jQuery - CSS3

Menggabungkan 2 kekuatan besar antara jQuery dan CSS3 menjadi inti desain vertical menu ini. Menu vertical animatif dengan tampilan yang sangat atraktif ini masih dilengkapi juga dengan sebuah background animasi gif untuk membuat jQuery vertical menu bertambah ciamik. Anda tinggal copy javascript dan kode CSS-nya melalui tutorial yang sudah tersedia di gubhugreyot. Ada baiknya jika menu ini ditempat disebelah kiri halaman karena penggunaan efek hover pada link list akan memperlebar ruang link sebesar 50%. Sekalipun demikian jika tetap digunakan di kolom sebelah kanan juga tak terlalu menjadi masalah, cuma efek yang dibuat akan sedikit terkurangi keindahannya.

• Artis Terkenal Foto Bugil di ...
• Benda langit sangat besar diduga akan jatuh di wilayah Indonesia
• Reformasi mandeg, rakyat siap bergerak
• Renungan bagi kaum miskin
• Link Title-5
• Link Title-6
• Link Title-7
• Link Title-8
• Link Title-9
• Link Title-10
• Link Title-11
• Link Title-12

Tutorial :

jQuery Animated Vertical Menu

Membuat Cursor Animasi Mulur Mungkret di Blogger

Sebuah cursor animasi yang sangat cantik dan bisa mentul-mentul. Kita hanya butuh 1 buah image tetapi image tersebut digandakan melalui javascript. Berbagai pengaturan sudah tersedia di dalamnya. Anda bisa merubah jumlah penggandaan image cursor, jarak tiap image, efek mentulnya dll hingga mendapatkan cursor terindah. O, ya... anda bisa juga merubah ukuran image cursornya. Jika suka blognya penuh image cursor anda bisa membuatnya dalam ukuran jumbo biar yang kelihatan cuma cursornya doang ... He ... pasti aneh jadinya klo dibuat begitu, ya?!

Tutorial

Tutorial: Cursor animasi ndul gondal-gandul

Floating Menu with show hide effect

Arahkan cursor di menu sebelah kiri!

Floating menu yang juga sebagai menu tersembunyi ini dibuat menggunakan javascript dan hanya beberapa deret kode CSS. CSS3 telah ditambahkan juga untuk memberi sedikit sentuhan pemanis hover link, sehingga ketika cursor berada di atas link menu maka ada sebuah icon kecil yang meluncur dari sisi kiri. CSS3 transition menggerakkan icon ini dengan surasi transisi 1s. Sebuah menu cantik yang kompatibel di semua browser. Untuk membuatnyapun tidaklah sulit karena javascript utamanya telah terupload di google code. Anda cukup menyimpannya di antara tag body. Javascript juga sudah di compress sedemikian rupa sehingga bebannya menjadi sangat ringan. Hanya 9,81 kbyte! Sangat ringan untuk sebuah javascript yang mampu menciptakan vertical menu melayang sekaligus dilengkapi efek "sembunyi-nongol" serta "sebuah link Back to top". Gimana, broer? Lengkap sekaligus oye!

Tutorial

Tutorial: Floating Menu with show hide effect

Zoom Image Using Script

Zoom image bekerja menggunakan javascript dan dipadukan dengan kode css. Fungsi utama javascript sebagai zoomer, sedang kode css membantu mengatur fungsi image dan zoom agar ketika image bertambah besar posisi seluruh elemen disekitarnya tidak terpengaruh. Kode CSS juga berfungsi untuk mengatur posisi image selalu disebelah kiri. Ini akan sama fungsinya dengan pengaturan yang dilakukan saat anda upload di halaman posting blogger. Jika anda menggunakan ini sebagai kelengkapan posting, maka anda tak perlu lagi menggunakan kode hasil upload. Gunakan saja URL hasil anda mengupload dan pasang URLnya di image zoom ini.

Arahkan saja cursor anda ke arah image maka image akan bertambah besar dengan sendirinya. Jangan kuatir bahwa elemen lain akan terganggu karena semua telah diatur dengan cukup baik melalui kode css. Anda juga tak perlu menyertakan kode selain URL seperti misalnya width dan height. Image ini dipatok dengan ukuran 200 x 150 pixel (width x height). Sebuah ukuran yang aku kira tak terlalu besar atau terlalu kecil sebagai sebuah image posting. Tentang image yang digunakan di image zoom? Gunakan saja gambar dengan ukuran tak lebih lebar dari halaman posting agar ketika zoom bekerja gambar tidak melebar hingga sidebar kanan.

Penggunaan kode html <div style="clear;both;"></div> kadang-kadang diperlukan untuk sebuah elemen yang menggunakan floating position (float-left; dan float:right;) seperti yang digunakan di image zoom ini. Gunakan saja kode tersebut saat anda akan menggunakan image zoom lebih dari satu kali dan benar-benar diperlukan.

Bagaimana membuatnya?

Tutorial

Klik link tutorial di bawah ini untuk mendapatkan tutorialnya:

Tutorial: Zoom Image dg Javascript

Auto Image Slider - Onmouseover Image Slider

Image slider dibuat menggunakan javascript dengan beberapa css3 seperti css3 border-radius, css3 transition dan css3 box shadow. Slider akan secara otomatis bekerja pada saat awal terbuka. Anda dapat juga mengontrol slider dengan mengarahkan cursor di atas thumbnail (gambar kecil) yang berada dalam box slider.

Tutorial:

Dapatkan tutorialnya dengan membuka link di bawah ini:

Tutorial : Image Slider

Buat dan Pasang Digital Clock dg Efek CSS3

Dengan memanfaatkan beberapa properti CSS3 kita akan membuat sebuah jam digital yang dapat berpindah tempat secara animatif ketika tersentuh cursor. Jam digital ini juga tanpa satupun background image. Semua mengandalkan kemampuan kode CSS3. Background gradient memberi sentuhan warna gradient seperti layaknya background image, sedang css3 transition, css3 transition delay, css3 transform, opacity effect memberi efek animatif yang sangat cantik. Desain yang kita buat ini sedikit berbeda dengan yang terlihat di bagian header blog ini (lihat digital clock yang ada di header dan arahkan cursor di atas header blog). Ada satu efek transformasi dengan delay disertai rotate effect untuk membuat pergerakan digital clock agar lebih atraktif.

Tutorial ini hanya akan menyertakan kode CSS yang telah dlengkapi dengan css3. Anda dapat mengcopy script dan xHTMLnya serta membaca tutorial cara menggunakannya melalui link di bawah ini.

Pasang Jam Digital di Header Blogger

Kode CSS digital Clock dg Efek CSS3

.header-inner{position:relative;}
.header-inner .GRdigit{
      position:absolute;
      top:50%; /* code by: gubhugreyot */
      right:3%;
      float:left;
      padding:5px;
      border:4px solid #666;
      background:#333;
      z-index:99;
      opacity:0.6;
      filter:alpha(opacity=60);
      transition:top 1s, right 1s 1s, opacity 2s;
      -o-transition:top 1s, right 1s 1s, opacity 2s;
      -moz-transition:top 1s, right 1s 1s, opacity 2s;
      -webkit-transition:top 1s, right 1s 1s, opacity 2s;
      -ms-transition:top 1s, right 1s 1s, opacity 2s;
      transform:scale(0.8);
      -o-transform:scale(0.8);
      -moz-transform:scale(0.8);
      -webkit-transform:scale(0.8);
      -ms-transform:scale(0.8);
}
.header-inner:hover .GRdigit{
      opacity:1.0;
      filter:alpha(opacity=100);
      top:10%;
      right:60%; 
}
.header-inner .GRdigit .GRdigi{
      font-family:MS Sans serif;
      font-size:28px;
      color:#00FFFF;
      font-weight:bolder;
      border:2px dotted red;
      padding:5px 0;
      display:block;
      float:right;
      text-align:center;
      width:125px;
      background: #003fa6;
      background:-moz-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#003fa6),color-stop(6%,#0454c5),color-stop(32%,#08327c),color-stop(53%,#021035),color-stop(76%,#021035),color-stop(96%,#043b72));
      background:-webkit-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:-o-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:-ms-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      background:linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003fa6',endColorstr='#043b72',GradientType=0); 
      text-shadow:2px 2px 2px #000;
      box-shadow:0 0 5px #000;
      transition:0.3s 1s;
      -o-transition:0.3s 1s;
      -moz-transition:0.3s 1s;
      -webkit-transition:0.3s 1s;
      -ms-transition:0.3s 1s;
      transform:scale(1.0) rotate(-360deg);
      -o-transform:scale(1.0) rotate(-360deg);
      -moz-transform:scale(1.0) rotate(-360deg);
      -webkit-transform:scale(1.0) rotate(-360deg);
      -ms-transform:scale(1.0) rotate(-360deg);
}
.header-inner:hover .GRdigit .GRdigi{
      transform:scale(2.0) rotate(720deg);
      -o-transform:scale(2.0) rotate(720deg);
      -moz-transform:scale(2.0) rotate(720deg);
      -webkit-transform:scale(2.0) rotate(720deg);
 ms-transform:scale(2.0) rotate(720deg);
}

Catatan/Keterangan:

1. Dalam tutorial yang di gubhugreyot telah disertakan kode css untuk digital clock. Ganti kode css tersebut dengan kode css di atas.
2. Pengaturan posisi jam digital dapat diatur dengan merubah nilai top dan right yang terdapat pada syntax .header-inner .GRdigit (nilai dalam %).
3. Untuk mengatur posisi jam digital saat tersentuh cursor (hover effect), rubah nilai pada top dan right pada syntax .header-inner:hover .GRdigit.
4. Efek transparansi di atur dengan merubah nilai opacity.