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.

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

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.

Auto Hide Navbar dengan CSS3

Auto Hide Navbar merupakan pengembangan Cara Membuat Show Hide Navbar, Cara Membuat Navbar Otomatis ataupun Cara Membuat Efek Transparansi di Navbar Blogger dengan memanfaatkan kemajuan yang telah di capai CSS3. Meskipun saat ini belum semua browser mendukung CSS3 secara total, namun masalah ini hanya tinggal menunggu waktu serta kesiapan browser dalam melengkapi diri dengan software yang support CSS3. Beberapa browser kuat seperti Mozila Firefox secara simultan terus berpacu diri melakukan penyempurnaan dukungannya terhadap CSS3 yang terbukti dengan telah diluncurkannya Mozilla Firefox 4.0 beta 1 hingga saat ini telah direlease versi beta 6. Tampaknya Mozilla juga tak mau kehilangan pasar besarnya akibat mengabaikan CSS3. Terlebih kini Google Chrome begitu gencar melakukan berbagai promosi hingga tampak kemajuan pesat yang terbukti dengan semakin meningkatnya jumlah pengguna browser yang sebelumnya amat jarang dilirik ini. Opera bahkan sudah lepas dari versi betanya. Opera 1063 sudah banyak dipersenjatai dengan beberapa dukungan CSS3 hingga yang terakhir berupa CSS3 transition. Jika Anda menggunakan Google Crhome dan Safari maka banyak hal lain yang lebih spektakuler dapat dibuat dengan CCS3. Ke dua browser ini sudah support terhadap CSS3 animation yang mampu memberikan berbagai efek animasi terhadap desain blog tanpa perlu penambahan javascript. Ya..., dimasa ke depan kode CSS ini memang akan menjadi pilar pembangunan website/blog.

Jika anda melihat kode CSS dalam tutorial di

Cara Membuat dan Memasang Widget SMS Gratis dengan Auto Scroller CSS3

Widget SMS gratis merupakan widget yang amat tepat untuk blogger dan pengunjung di tanah air. Semua yang serba gratisan selalu mempunyai pasar dan penggemar ngudubilah banyaknya. Hal yang benar-benar amat wajar untuk bangsa yang tak kunjung lepas dari kemiskinan. Widget SMS Gratis yang pada saat ini banyak digunakan di blog mempunyai dua lebar yang berbeda. Widget dengan ukuran kecil mempunyai lebar berkisar 200px sedang yang berukuran besar lebarnya tak lebih dari 300px. Memperbaiki penampilan widget ini adalah sebuah kewajiban jika tak ingin wajah blog terlihat awut-awutan. Sebuah auto scroller cantik akan mampu mengubah segalanya. Dari sebuah widget dengan wajah kocar-kacir menjadi widget dengan tampilan super menarik yang terlihat sangat profesional. Hooo hooo bagaimana caranya? Sangat mudah, cepat dan super luar biasa detail tutorialnya. Silahkan baca kembali di tutorial dengan KLIK link di bawah ini. O ..., ya... Silahkan sampeyan coba berkirim SMS melalui widget SMS Gratis di ujung kanan bawah!

Keterangan:

• Aku sudah mencoba beberapa kali. Kadang langsung terkirim dan kadang juga harus menunggu cukup lama.
• Demo dan tutorial sama sekali tak berkaitan dengan si empunya layanan widget gratis sms.

Tutorial: Auto Scrolling Widget SMS Gratis

Tutorial by: http://gubhugreyot.blogspot.com