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

Cara Membuat Scrollbars di Sisi Kiri Box

Scrollbars tak harus selalu disebelah kanan. Anda bisa juga membuatnya berpindah di sebelah kiri box. Dengan bantuan kode CSS hal yang sepertinya tak mungkin dan hampir tak pernah tersentuh ini dengan mudah dapat dibuat. Anda cukup gunakan satu deret kode css dan dua tag untuk xHTML-nya.

Seperti ini scrollbars yang telah berpindah di sisi sebelah kiri blog.

Kode CSS & xHTML:

Kode CSS:

.GRscrollbars{       
        height:200px;
        width:400px;
        text-align:left;
        overflow:auto;
        padding:15px 10px;
        margin:15px 0;
        border:1px solid #666;
        unicode-bidi:
        bidi-override;direction:rtl; 
        font-size:12px;
        font-family:Tahoma;
}
.GRscrollbars div{direction:ltr;}

xHTML

<div class="GRscrollbars">
     <div>
Tuliskan teks atau apapun yang akan disimpan dalam scrollbars di sini!
     </div>
</div>

Cara Menggunakan kode:

1. Login ke Blogger. Tuliskan User Name atau Alamat Email dan Password anda kemudian klik Sign in.
2. Setelah login anda akan masuk di halaman Dasbor (Dasboard).
3. Cari dan klik "Rancangan (Design)".
4. Cari dan klik "Edit HTML".
5. Setelah box Edit HTML yang berisi kode-kode html template terlihat, cari kode ]]></b:skin>.
6. Copy dan paste-kan kode CSS di atas kode ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML di halaman posting atau bagian blog yang lain.
9. Anda bisa membuang kode yang mungkin tidak diperlukan seperti misalnya:
   font-family:Tahoma; dan font-size:12px;.
10. Berberapa kode bisa juga dirubah nilainya seperti:
    height:200px;, width:400px;, padding:15px 10px;, margin:15px 0; dan border:1px solid #666;.
11. text-align:left; dapat juga diganti dengan text-align:justify; (rata tengah).
12. Jika digunakan di halaman posting gunakan mode posting "Edit HTML".
13. Jika anda membutuhkan panduan yang lebih detail tentang cara menyimpan kode CSS di template, silahkan buka pada menu sebelah kiri halaman blog di http://gubhugreyot.blogspot.com (Special Tutorials)
14. Selesai!

Teks Shadow & CSS-3 Transition beri Efek Fantastis

Membuat blog menjadi lebih indah tak selalu harus menggunakan javascript atau kode css yang banyak. Kali ini kita akan mencoba sebuah trik memanfaatkan efek teks shadow dan efek css3 transition. Dua buah CSS 3 property dalam 2 buah syntax akan memberi perubahan secara drastis di keseluruhan blog. Tentu saja perubahan ini bertujuan membuat blog semakin cantik.

Jika anda cermati dengan seksama, dalam blog ini anda akan melihat ada sesuatu yang berbeda pada teks dan semua link. Semuanya berubah dan terasa blog menjadi lebih hidup, lebih dinamis.

Mungkin saja sampeyan bingung untuk memahami perubahan yang sebenarnya terjadi. Cobalah anda cermati teks dan link yang terdapat dalam box di bawah ini dan bandingkan dengan keseluruhan yang ada di blog. Pasti anda akan tahu apa yang sebenarnya telah berubah.

Bentuk teks dan link sebelum penambahan css3 text-shadow property dan css3 transition property:

Bandingkan dengan yang di luar box

Seperti inilah teks sebelum dilakukan penambahan css3 text shadow property dan css3 transition property. Anda akan melihat betapa teks yang diluar box terlihat seperti menonjol (spt 3D) sedang yang ini terlihat datar-datar saja. Penggunaan warna shadow sangat berpengaruh, oleh karena itu pilihlah warna shadow dengan ukuran shadow yang tepat. Bandingkan juga link di bawh ini dengan link-link lain di blog, terutama saat cursor di arahkan di atasnya (disorot).

Link tanpa efek css3 transition dan text-shadow

Kode CSS:

body{text-shadow:2px 2px 2px #999;}
a:link,a{
      text-decoration:none;
      transition:color 0.7s linier;
      -o-transition:color 0.7s linier;
      -moz-transition:color 0.7s linier;
      -webkit-transition:color 0.7s linier;
      -ms-transition:color 0.7s linier;
}

Simpan kode css di atas tepat di atas kode ]]></b:skin>

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.