Cara Membuat: How to Create Energy Saving Mode using CSS3 (di blog)

read more...

How to Create Energy Saving Mode using CSS3 (di blog)

Hebohnya Energy Saving Mode yang di release 2009 lalu benar-benar membuat banyak blogger penasaran dan tertarik untuk ikut menggunakannya di blog. Bagi beberapa sobat blogger yang sebelumnya telah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js adalah sebuah keberuntungan karena pemanfaatan jquery.1.3.2.min.js dalam desain energy saving mode sekaligus dapat digunakan untuk meng-cover kebutuhan blog akan jquery.1.3.2.js.

Hal sebaliknya akan terjadi pada blogger yang selama ini blognya sama sekali tidak menggunakan jQuery.1.3.2.min.js atau jquery.1.3.2.js untuk berbagai fungsi/fasilitas blog. Pemaksaan untuk menggunakan Energy Saving Mode justru bukan sebuah tindakan yang menguntungkan sekaligus bukan suatu langkah sebagai cerminan maksud dan tujuan dibuatnya energy saving mode. Ya ..., karena jelas-jelas beban blog akan bertambah dengan sebuah jQuery.1.3.2.min.js. Sekalipun jquery.1.3.2.min.js tidak akan menjadi beban tambahan yang fatal, namun setidaknya beban loading pasti akan cukup meningkat. Diluar hal ini "kemubaziran" akan terjadi. Yah jika memang tak satupun fungsi lain terdukung dengan digunakannya jQuery.1.3.2.min.js yang terdapat di desain Energy Saving Mode, trus apa ya nggak rugi jika jQuery.min.1.3.2.min.js yang jelas-jelas menambah beban dan loading blog ini hanya dimanfaatkan "untuk sekedar bisa menggunakan Energy Saving Mode?"

Menyikapi trend baru yang banyak menghanyutkan "nafsu" dan "keinginan" untuk ikut-ikutan menggunakan Energy Saving Mode tanpa melihat untung ruginya ini (karena bagi yang blognya tidak menggunakan jQuery.1.3.2.min.js jelas bikin kerugian), satu desain menarik Energy Saving Mode yang hanya menggunakan kode CSS telah coba aku buat. Energy Saving Mode hasil produksi anak negeri yang asli dalam negeri ini merupakan wujud kepedulian terhadap sementara blogger yang sebenarnya tidak membutuhkan jQuery.1.3.2.min.js dalam desain blognya, akan tetapi ingin menggunakan dan memasang Energy Saving Mode sebagai upaya mempercantik blog sekaligus untuk ikut mendukung upaya penghematan energy bagi dunia. Jika mungkin sampeyan tertarik dan ingin melihat seperti apa, sih, Energy Saving Mode tanpa jQuery.1.3.2.min.js, cantik atau buruk rupakah dia? Kira-kira cocok atau tidakkah buat blog sampeyan? Silahkan lihat demo-nya dengan klik link DEMO di bawah ini.

D E M O -1

Keterangan sebelum lihat demo!

Untuk melihat aksi saat Energy Saving Mode using CSS3 mulai bekerja, silahkan jangan letakkan cursor di halaman blog selama 10 detik!

Perbandingan Energy Saving Mode Menggunakan JQuery dan CSS3

Energy Saving Mode Menggunakan jQuery.1.3.2.min.js

• Kode yang digunakan: Javascipt: 2 kbyte, jquery.1.3.2.min.js: 56 kbyte, kode CSS: 1 kbyte
• Energy Saving Mode bekerja secara rutin tiap 10000s (bisa di atur). Energy Saving Mode bahkan selalu aktif/bekerja saat pengunjung masih menikmati posting (cenderung mengganggu!).
• Energy Saving Mode bekerja saat pengunjung meninggalkan blog/web selama durasi yang ditentukan (10000s dan bisa diatur durasinya).
• Menggunakan animasi gerak dan opacity.
• Harus memanfaatkan file Hosting (javascript dan jQuery.1.3.2.min.js).
• Efek penggunaan Energy Saving Mode hanya terlihat di halaman blog.
• Bekerja dengan sempurna di semua browser meskipun bentuk animasi terjadi pergeseran tempat (saat mulai aktif).

Energy Saving Mode Menggunakan CSS3

• Kode yang digunakan: Kode CSS: 4 kbyte (super irit).
• Energy Saving Mode bekerja secara rutin tiap 10s (bisa di atur). Energy Saving Mode Using CSS3 hanya bekerja ketika cursor berada di luar halaman blog. Selama cursor di atas halaman blog maka Energy Saving Mode tidak akan aktif sehingga seluruh aktifitas pengunjung/pembaca tidak akan terganggu..
• Menggunakan animasi gerak dan opacity dan beberapa efek lain seperti background color.
• Tidak perlu diupload di file Hosting (langsung simpan di template alias praktis).
• Efek penggunaan Energy Saving Mode akan terlihat di Halaman Blog dan di Page Elemen/Elemen Laman (tidak mengganggu karena saat Elemen Laman tersentuh cursor maka teks yang tertulis dalam Energy Saving Mode akan terbang melenyapkan diri!).
• Bekerja dengan baik di semua browser. Animasi hanya bekerja di browser yang mendukung CSS3 (Opera 1063, Mozilla 4 beta 0 ke atas , Google Chrome dan Safari serta beberapa browser lain).
  nb: mulai sekarang gunakan selalu browser yang sudah mendukung CSS3 karena blog menjadi lebih enak untuk dijelajahi dan dinikmati
•  
•  
  Kode CSS Energi Saving Mode Menggunakan CSS3
  
  

  * { margin:0; padding: 0; }
  #navbar-iframe {
         height: 0;
         opacity: 0.0;
         -o-transition: height 2s linear 8s, opacity 2.5s linear 6s;
         -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s;
         -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s;
  }
  body:hover #navbar-iframe {
         height: 30px;
         opacity: 1.0;
         -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
         -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
         -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
  }
  body .bgsGR_esm {
         position: fixed;
         width: 100%;
         top: 0;
         height: 100%;
         opacity: 0.97;
         filter: alpha(opacity=97);
         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";
         background: #000;
         border-bottom: 3px solid transparent;
         z-index: 99999999;
         -o-transition: all 3s ease-in-out 10s;
         -moz-transition: all 3s ease-in-out 10s;
         -webkit-transition: all 3s ease-in-out 10s;
  }
  body:hover .bgsGR_esm {
         opacity: 0.0;
         height: 0.001%;
         filter: alpha(opacity=0);
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         background: #0a7f01;
         border-bottom: 5px solid #333;
         -o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;
         -moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
         -webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
  }
  body .bgsGR_esm p.esm1 {
         margin: 0;
         padding: 0;
         width: 92%;
         background: transparent;
         font-size: 100px;
         font-family: "Serif", Times New Roman;
         color: #333; /* original code by: gubhugreyot.blogspot.com */ 
         text-shadow: 1px 1px 2px #ccc;
         position: relative;
         margin-top: 200px;
         line-height: 20px;
         font-weight: bold;
         text-align: center;
         border: 30px solid transparent;
         border-radius: 20px;
         -o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;
         -moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;
         -webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;
  }
  body:hover .bgsGR_esm p.esm1{
         font-size: 10px;
         color: red;
         width: 25%;
         margin: 340px 0 0 300px;
         padding: 25px;
         background: #aaa;
         border: 20px solid #888;
         border-radius: 170px;
         -o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);
         -moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);
         -webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);
         -o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;
         -moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;
         -webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;
  }
  .bgsGR_esm p span.esm2 {
         font-size: 18px;
         opacity: 0.5;
         filter: alpha(opacity=50);
         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
         display: block; /* original code by: gubhugreyot.blogspot.com */ 
         text-align: center;
         width: 300px;
         margin: -10px auto;
         font-weight: normal;
         padding: 2px 8px;
         background: #000;
         border: 1px solid #333;
         border-radius: 0;
         color: #0000FF;
         text-shadow: none;
         font-family: Arial, Helvetica, sans-serif;
         -o-transition: 1s ease-out;
         -moz-transition: 1s ease-out;
         -webkit-transition: 1s ease-out;
  }
  .bgsGR_esm:hover p span.esm2{
         font-size: 10px;
         width: 200px; /* original code by: gubhugreyot.blogspot.com */ 
         padding: 0;
  }
  .bgsGR_esm p span.esm3{
         color: #ccc;
         font-family: "Tahoma", Arial, Helvetica;
         display: block;
         margin:10px auto;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png) left center repeat-x;
         background: -moz-linear-gradient(top,#666,#111);
         background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));
         opacity: 0.6;
         filter: alpha(opacity=60);
         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
         width: 250px;
         text-shadow: 1px 1px 1px #000;
         border: 1px solid #333;
         border-radius: 4px;
         padding:2px 10px;
         font-size: 12px;
         font-weight: normal;
         line-height: 16px;
  }
  .bgsGR_esm .by_gubhugreyot {
         margin-left: 30px;
         text-align: left;
         color: #015828;
         font-size: 12px;
         font-weight: normal;
         position: absolute;
         top: 550px; /* original code by: gubhugreyot.blogspot.com */ 
         width: 100%;
         height: 20px;
         left: 0;
  }
  .bgsGR_esm .by_gubhugreyot span.esm4 {
         color: #aaa;
         font-style:italic;
  }

  
  

read more...

Energy Saving Mode CSS3 dg Kode CSS & Efek Lebih Simpel

Energy Saving mode yang dibuat menggunakan css3 ini mempunyai kode sekaligus efek lebih sederhana dibandingkan yang telah kita launcing pada bulan Oktober 2010. Cara membuatnya masih sama persis dengan posting terdahulu, hanya anda perlu mengganti seluruh kode CSS dengan yang baru. Satu lagi yang berbeda adalah pada penggunaan background image. Energy Saving Mode CSS3 kali sama sekali tidak menggunakan background image karena telah kita ganti dengan css3 background gradient.

D E M O

Energy saving mode pada demo menggunakan background gradient berwarna hijau, sedangkan yang akan kita buat berwarna hitam. penggunaan warna background hitam polos dimaksudkan memberi efek transformasi dan transisi warna saat energy saving mode terbuka (tersentuh cursor).

Demo : Energy Saving Mode CSS3 dg Kode dan Efek Lebih Sederhana

Kode CSS:

*, body .bgsGR_esm{
      margin:0;
      padding:0;
}
body .bgsGR_esm{
      position:fixed;
      width:98%;
      top:0;
      left:0; /* original code by: gubhugreyot.blogspot.com */
      height:97%;
      opacity:.99;
      filter:alpha(opacity=99);
      -ms-filter:alpha(opacity=99);
      background:#000;
      border:10px solid #666;
      border-bottom:30px solid #666;
      z-index:99999999;
      transition:all 6s ease-in-out 60s;
      -o-transition:all 6s ease-in-out 60s;
      -moz-transition:all 6s ease-in-out 60s;
      -webkit-transition:all 6s ease-in-out 60s;
      -ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsGR_esm{
      border-color:#F00;
      background:#930;
      width:50%;
      height:3%;
      left:25%;
      top:40%; /* original code by: gubhugreyot.blogdetik.com */
      transition:3.5s ease-out;
      -o-transition:3.5s ease-out;
      -moz-transition:3.5s ease-out;
      -webkit-transition:3.5s ease-out;
      -ms-transition:3.5s ease-out;
}
body:hover .bgsGR_esm,body:hover .bgsGR_esm p.esm1,body:hover .bgsGR_esm p span.esm2,body:hover .bgsGR_esm p span.esm3,body:hover .bgsGR_esm .by_gubhugreyot{
      transition:3s;
      -o-transition:3s;
      -moz-transition:3s;
      -webkit-transition:3s;
      -ms-transition:3s;
      z-index:-10;
      opacity:.0;
      filter:alpha(opacity=0);
      -ms-filter:alpha(opacity=0);
}
body .bgsGR_esm p.esm1{
      margin:0; /* original code by: gubhugreyot */
      padding:0;
      width:92%;
      height:100%;
      background:transparent;
      font-size:100px;
      font-family:Serif,Times New Roman;
      color:#333;
      text-shadow:1px 1px 2px #ccc;
      position:relative;
      margin-top:200px;
      line-height:20px;
      font-weight:bold;
      text-align:center;
      display:block;
      margin-left:auto;
      margin-right:auto;
}
.bgsGR_esm p span.esm2{
      font-size:18px;
      opacity:.5;
      filter:alpha(opacity=50);
      -ms-filter:alpha(opacity=50);
      display:block;
      text-align:center;
      margin:-10px auto;
      font-weight:normal;
      padding:2px 8px;
      background:#000;
      border:1px solid #333;
      color:#00f;
      text-shadow:none;
      font-family:Arial,Helvetica,sans-serif;
}
.bgsGR_esm p span.esm3{
      color:#ccc;
      font-family:Tahoma,Arial,Helvetica;
      display:block;
      margin:10px auto;
      background:#111;
      background:-moz-linear-gradient(top,#111 0,#666 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
      background:-webkit-linear-gradient(top,#111 0,#666 100%);
      background:-o-linear-gradient(top,#111 0,#666 100%);
      background:-ms-linear-gradient(top,#111 0,#666 100%);
      background:linear-gradient(top,#111 0,#666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
      opacity:.6;
      filter:alpha(opacity=60);
      -ms-filter:alpha(opacity=60);
      width:250px;
      text-shadow:1px 1px 1px #000;
      border:1px solid #333;
      border-radius:4px;
      padding:2px 10px;
      font-size:12px;
      font-weight:normal;
      line-height:16px;
}
.bgsGR_esm .by_gubhugreyot{
      margin-left:30px;
      text-align:left;
      color:#015828;
      font-size:12px;
      font-weight:normal;
      position:absolute;
      top:550px;
      width:100%;
      height:20px;
      left:0;
}
.bgsGR_esm .by_gubhugreyot span.esm4{
      color:#aaa;
      font-style:italic;
}

xHTML

<div class='bgsGR_esm'><p class='esm1'>gubhug reyot<br/><span class='esm2'>Energy Saving Mode Using CSS3</span><br/><br/><span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p><div class='by_gubhugreyot'>Copyright * Feb 2012 * <span class='esm4'>gubhugreyot.blogspot.com</span> - All rights reserved</div></div>

Catatan/Keterangan

1. Simpan kode CSS di atas kode ]]></b:skin>
2. Simpan xHTML di bawah kode <body> , atau
   <body expr:class='"loading" + data:blog.mobileClass'>
3. Untuk mengatur durasi waktu Energy Saving Mode lakukan perubahan nilai (60s) pada syntax body .bgsGR_esm(kode paling atas!):
   

   all 6s ease-in-out 60s;

   nilai 60s; menciptakan durasi 60 detik energy saving secara rutin bekerja menutup layar dengan background hitam. Untuk merubah durasi menjadi 5 menit maka nilai menjadi 5x60 = 300s. Untuk durasi yang berbeda silahkan hitung sendiri.
4. Ganti Teks gubhug reyot yang ber-warna merah dengan nama blog anda atau teks lain.
5. Panduan yang lebih detail untuk memasang dan menyimpan kode Energy Saving Mode dapat dibuka melalui link di bawah ini:

read more...

Tabs menu Horizontal dg Background Aneka Warna

Ada dua cara untuk membuat tabs menu horizontal blogger dengan background beraneka warna, dan ini adalah cara yang pertama. Agar setiap tab menu mempunya warna background berbeda dengan warna background menu yang lain, setiap link dibuat mempunyai class berbeda yang masing-masing mempunyai background berbeda warna. Jika anda menginginkan warna teks link berbeda disetiap menu, andapun bisa menambahkannya.

Mengaktifkan Tabs Menu Horizontal Blogger

Agar tabs menu horizontal dengan aneka warna background dapat dibuat, anda harus menggunakan tabs menu horizontal dalam blog dengan cara mengaktifkan fitur "Laman/Pages yang dapat ditemukan di dasbor. Fitur ini berisi link posting halaman statis dan/atau link alamat web/blog lain atau bisa juga link posting tertentu, baik di dalam blog atau yang berasal dari luar blog. Anda bisa mengisi setiap link menu di tabs menu horizontal blogger sesuai dengan apa yang diinginkan untuk ditampilkan.

Cara mengaktifkan fitur "Laman/Pages"

1. Login ke Blogger
2. Halaman Dasbor/Dasboard
3. Laman/Pages
4. Buatlah link tabs menu horizontal dengan cara :
   
   • Membuat Posting di halaman statis. Untuk membuat posting di halaman statis, pilih "Laman Kosong" kemudian buat posting lengkap dengan judul postingnya. Judul posting hendaknya singkat saja karena nantinya digunakan di tabs menu sebagai teks link tabs menu horizontal.
   • menampilkan alamat web/blog lain di tabs menu horizontal blogger. Untuk membuat link seperti ini silahkan pilih "Alamat Web".
     Tuliskan secara singkat titlenya kemudian tuliskan juga alamat web-nya. Alamat web bisa juga diganti dengan alamat sebuah posting.
5. Lanjutkan dengan pilih "Tab atas".
6. Setelah daftar menu di tabs horizontal selesai dibuat dengan langkah di atas, lanjutkan dengan proses membuat background aneka warna untuk masing-masing menu.

Menambah kode css & menambah class

1. Lanjutkan dengan klik "Template" yang letaknya di bawah fitur "Laman/Pages".
2. Lakukan proses "Cadangkan/Pulihkan" atau "Backup/Restore" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.
3. Klik "Edit HTML".
4. Template › Edit HTML
   
   • Klik "Lanjutkan/Proceed".
   • Klik "Expand Templates Widget".
   • Cari kode <li class='selected' expr:id='data:link.title'>
     Gunakan Ctrl + F untuk mempercepat dan mempermudah pencarian kode.
   • Di bawah kode tersebut masih ada beberapa kode lain seperti terlihat di bawah ini:
     

     xHTML tabs menu default blogger

     <li class='selected' expr:id='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>
               <b:else/>
                 <li expr:class='data:link.title'><a expr:href='data:link.href'><data:link.title/></a></li>

   • Ganti kode dengan kode berikut:
     

     xHTML pengganti kode default tabs menu blogger

     <li class='selected'><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>
               <b:else/>
                 <li><a expr:class='data:link.title' expr:href='data:link.href'><data:link.title/></a></li>

   • Klik "Simpan Template/Save Template".
5. Lanjutkan dengan membuat class pada kode css sesuai kode xHTML tab menu

Membuat class dan background pada kode css

Kode CSS dan contoh class link tab menu

li a.Beranda{background:green;}
li a.gubhugreyot{background:blue;}
li a.Belajar{background:orange;}
li a.Hacks{background:brown;}
.tabs .widget-content ul li a{
      color:yellow;
      text-shadow:1px 1px 1px #000;
      transition:background-color 0.6s,color 1s;
      -o-transition:background-color 0.6s,color 1s;
      -ms-transition:background-color 0.6s,color 1s;
      -moz-transition:background-color 0.6s,color 1s; 
      -webkit-transition:background-color 0.6s,color 1s;
}
.tabs .widget-content ul li:hover a{
      background:#000;
      color:#02e7fb;
}

Keterangan :

1. li a.Beranda » class "Beranda" diperoleh dari menu pertama yang title-nya "Beranda". Nama berbeda yang biasa dipakai adalah "Home".
2. li a.gubhugreyot » class "gubhugreyot" diperoleh dari title tab menu "gubhugreyot.
3. li a.Belajar » class "Belajar" diperoleh dari title tab menu "Belajar Kode CSS. Anda bisa mengambil salah satu dari "Belajar, Kode dan CSS" sebagai class.
4. li a.Hacks » class "Hacks" diperoleh dari title tab menu "Best Blogger Hacks. Anda bisa mengambil salah satu dari "Best, Blogger dan Hacks" sebagai class.
5. Setelah mendapatkan class sesuai title link tabs menu yang telah anda buat melalui "fitur Laman" dan digunakan di kode CSS untuk menggantikan class yang ada di contoh css, silahkan simpan kode css di bawah kode ]]></b:skin>
6. Klik "Simpan Template/Save Template"
7. Buka blog dan lihat hasilnya.
8. Anda bisa menambah class baru sesuai jumlah tab yang dibuat. Warna juga bisa dirubah disesuaikan dengan selera!

read more...

CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.

Kode CSS :

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com  */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block .icon.blog-author{
      position:absolute;
      right:0;  /* original code by: http://gubhugreyot.blogspot.com  - April, 08, 2012*/
      bottom:0; 
      background:rgba(174,212,251,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFekTi4GzVCr392NnGRfzeF6gwxozONzcB2JIyGzUEU6JtJzdeAERgh-j1jkNV8fm80PY8qJzyn9HBAJLzTiwMADaq7J9WANt6of-W6Ggk7QuLvTHum2G2GsRdbGUQdpyYzkATCCAjHY/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover{background:rgba(139,139,139,0.1);
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;
}
.comment-block:hover .icon.blog-author{
      width:60px !important;
      height:22px !important;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFekTi4GzVCr392NnGRfzeF6gwxozONzcB2JIyGzUEU6JtJzdeAERgh-j1jkNV8fm80PY8qJzyn9HBAJLzTiwMADaq7J9WANt6of-W6Ggk7QuLvTHum2G2GsRdbGUQdpyYzkATCCAjHY/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;
      background-size:60px 22px !important;
}

Cara menggunakan kode css :

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. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin>.
6. Copy kode css dan letakkan di atas ]]></b:skin>
   Keterangan :
   Pilih salah satu kode css. Anda bisa gunakan yang menggunakan opacity effect atau yang menggunakan background rgba.
7. Klik "Simpan Template (Save Template)".
8. Buka blog dan coba hasilnya dengan membuat komentar.

Catatan/Keterangan :

1. Untuk menampilkan tanda tangan author (signature), ganti background image (yang berwarna orange dan red):
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFekTi4GzVCr392NnGRfzeF6gwxozONzcB2JIyGzUEU6JtJzdeAERgh-j1jkNV8fm80PY8qJzyn9HBAJLzTiwMADaq7J9WANt6of-W6Ggk7QuLvTHum2G2GsRdbGUQdpyYzkATCCAjHY/s128/gubhugreyot-admin-6transp.gif
   dengan background image baru yang berupa image bergambar tanda tangan (signature):
   
2. Untuk membuat background image berupa tanda tangan Author, silahkan ikuti panduannya melalui link di bawah ini:
   Cara membuat tanda tangan di blog
3. Jika ingin menampilkan tanda tangan dan "Admin" secara bersamaan, ganti background image pada syntax : .comment-block .icon.blog-author (berwarna orange) :
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFekTi4GzVCr392NnGRfzeF6gwxozONzcB2JIyGzUEU6JtJzdeAERgh-j1jkNV8fm80PY8qJzyn9HBAJLzTiwMADaq7J9WANt6of-W6Ggk7QuLvTHum2G2GsRdbGUQdpyYzkATCCAjHY/s128/gubhugreyot-admin-6transp.gif
4. Untuk anda yang tak ingin menampilkan "Admin dan tanda tangan" karena hanya ingin membuat warna background Author Comment berbeda, dapatkan tutorialnya di bawah ini:
   CSS only: Highlight Author Comment
5. Panduan cara backup template, cara cari kode dan berbagai cara menyimpan kode css dapat anda buka di Special Tutorials yang terdapat di menu sebelah kiri halaman.
6. Tutorial cara pasang teks Admin atau tanda tangan Author ini hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.
7. Untuk merubah warna background dapat dilakukan dengan merubah background rgba.
8. Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :
   Cara membuat blog menjadi Threaded Comments

read more...

Playing with Animated Flying Twitter Bird » with css3 effects & animated .gif

 
Dengan widget Animated Flying Twitter Bird yang telah mengalami modifikasi melalui penambahan kode css3 ini anda dapat sedikit bermain-main menangkap si burung twitter terbang. Si burung twitter terbang akan tetap seperti biasanya dengan terbang mengelilingi halaman blog, hanya anda dapat mencoba menangkapnya kemudian mempertahankan agar tetap bersama cursor hingga si burung manis berhenti. Atau cobalah tangkap tepat saat berhenti. Ketika burung twitter masih terbang dan tangkapan anda tepat maka burung twitter akan berhenti dan berusaha lepas disertai effek zoom serta munculnya burung twitter berbeda berbentuk animasi gif.

Javascriptnya silahkan anda copy melalui link di bawah ini dan segera simpan melalui add a gadget atau bisa juga diletakkan di bawah ]]></b:skin> atau di atas <head> atau di atas </body>

Javascript animasi burung twitter terbang

<script src="http://gubhugreyot-blogdetik.googlecode.com/svn/widget/GRanimaflytwittbird.js" type="text/javascript"></script>
<script type="text/javascript">
var twitterAccount = "http://twitter.com/gubhugreyot";
var tweetThisText = "Tips, tricks dan tutorial blogdetik - blogger";
tripleflapInit();
</script>

Keterangan :

• Widget Animasi burung twitter terbang dapat digunakan sebagai widget di blogdetik.
• Ganti http://twitter.com/gubhugreyot dengan alamat twitter anda.
• Ganti Tips, tricks dan tutorial blogdetik - blogger ganti dengan teks lain yang sesuai.
• Simpan javascript melalui widgetize Any HTML. Panduan menggunakan widgetize Any HTML dapat sampeyan klik di sini
• Jika anda blom punya akun twitter, anda dapat mengganti alamat twitter dengan alamat blog, alamat blog anda yang lain atau alamat posting.
• Widget ini juga bisa anda gunakan di blogger dan berbagai blog lainnya!

read more...

Create Animation on Blog Title with css3 Animation

Create Animation on Blog Title with css3 Animation

Posted by cah ndeso kluthuk

Menganimasikan blog title di template blogger dengan memanfaatkan css3 animation adalah proyek selanjutnya setelah kita buat efek warna pelangi pada hover link yang juga hanya menggunakan kode css3 animation. Yang kita maksudkan dengan posting kali ini adalah Cara membuat animasi pada blog title (nama blog) dengan menggunakan css3 animation" atau "Create Animation on Blog Title". Ada beberapa variasi animasi yang akan kita buat, silahkan anda pilih yang dirasa cocok. Animasi pertama hanya berupa pergerakan blog title kearah kanan & kiri, yang kedua disertai perubahan warna teks, yang ketiga disertai animasi membentuk sudut & perubahan warna, sedang yang ke empat ada penambahan animasi berupa gerak memutar (rotasi).
Ada 2 buah demo yang dapat anda lihat, dimana demo ini sekedar sebagai sebuah bukti bahwa tutorial ini sudah melalui uji coba pada blog. Anda jangan menggunakan kode di halaman demo karena ada perbadaan kode yang berkaitan dengan enggunaan syntax.

Tutorial animasi blog title ini dapat dipergunakan pada template blogger baru/new blogger template/blogger template designer dan template tata letak/lyout template. Setelah klik demo-1 dan demo-2, silahkan lihat animasi yang berhasil terbentuk pada blog title (nama blog) yang terletak di halaman teratas.D E M O-1D E M O-2

4 Macam Animasi Blog Title:

1. Ada 4 kode css yang masing-masing mempunyai bentuk animasi berbeda.
2. Anda bisa menggunakan salah satu kode css untuk membuat animasi blog title.
3. Kode css dapat dikembangkan lagi untuk mendapatkan bentuk animasi berbeda.
4. Gunakan browser terbaru karena css3 hanya berfungsi dengan baik di browser terbaru yang sudah mendukung css3 animation. Anda bisa download melalui menu disebelah kiri halaman blog (Download browser).

Kode CSS Animasi Blog Title-1:

@keyframes GRbt_anima{0%{transform:translate(-50px,0);}50%{transform:translate(0,0);}100%{transform:translate(50px,0);}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);}50%{-o-transform:translate(0,0);}100%{-o-transform:translate(50px,0);}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);}50%{-ms-transform:translate(0,0);}100%{-ms-transform:translate(50px,0);}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);}50%{-moz-transform:translate(0,0);}100%{-moz-transform:translate(50px,0);}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);}50%{-webkit-transform:translate(0,0);}100%{-webkit-transform:translate(50px,0);}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}

Kode CSS Animasi Blog Title-2:

@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-o-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-ms-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-moz-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-webkit-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}

Kode CSS Animasi Blog Title-3:

@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;transform:rotate(-10deg) scale(0.2);}50%{transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-o-transform:rotate(-10deg) scale(0.2);}50%{-o-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-o-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-ms-transform:rotate(-10deg) scale(0.2);}50%{-ms-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-ms-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-moz-transform:rotate(-10deg) scale(0.2);}50%{-moz-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-moz-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-webkit-transform:rotate(-10deg) scale(0.2);}50%{-webkit-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-webkit-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 12s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 12s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 12s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 12s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 12s infinite linear alternate; /* Safari and Chrome */  
}

Kode CSS Animasi Blog Title-4:

@keyframes GRbt_anima{0%{color:black;transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;transform:scale(0.3) rotate(375deg);}100%{color:black;transform:translate(0,0) scale(1.0);}}
@-o-keyframes GRbt_anima{0%{color:black;-o-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-o-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-o-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-o-transform:scale(0.3) rotate(375deg);}100%{color:black;-o-transform:translate(0,0) scale(1.0);}}
@-ms-keyframes GRbt_anima{0%{color:black;-ms-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-ms-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-ms-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-ms-transform:scale(0.3) rotate(375deg);}100%{color:black;-ms-transform:translate(0,0) scale(1.0);}}
@-moz-keyframes GRbt_anima{0%{color:black;-moz-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-moz-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-moz-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-moz-transform:scale(0.3) rotate(375deg);}100%{color:black;-moz-transform:translate(0,0) scale(1.0);}}
@-webkit-keyframes GRbt_anima{0%{color:black;-webkit-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-webkit-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-webkit-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-webkit-transform:scale(0.3) rotate(375deg);}100%{color:black;-webkit-transform:translate(0,0) scale(1.0);}}
h1.title a,h1.title{ /* original code by : http://gubhugreyot.blogspot.com - 30 Juni 2012 */
    animation:GRbt_anima 8s infinite linear alternate;  /* Standart */
    -o-animation:GRbt_anima 8s infinite linear alternate;  /* Opera */ 
    -ms-animation:GRbt_anima 8s infinite linear alternate; /* IE */ 
    -moz-animation:GRbt_anima 8s infinite linear alternate; /* Firefox */ 
    -webkit-animation:GRbt_anima 8s infinite linear alternate; /* Safari and Chrome */  
}

Cara menyimpan Kode CSS Animasi blog title yang dibuat dengan css3 animation:

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. Design (Rancangan).
4. Edit HTML.
5. Backup Template.
6. Cari Kode ]]></b:skin>, kemudian letakkan kode css tepat di atasnya.
7. Klik Simpan Template (Save Template)

Catatan/keterangan:

1. Untuk merubah warna agar sesuai dengan keinginan, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
2. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
3. Jika anda menggunakan Antarmuka Blogger Baru (New Bloogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
   Cara simpan kode html di New Blogger Interface
4. Anda dapat mencoba setiap bentuk animasi blog title dengan menggunakan 4 macam kode css yang telah disediakan.

read more...

Membuat Efek Teks Berjalan - Marquee Effect dg css3 Animation

Selama ini untuk membuat teks berjalan kita selalu menggunakan javascript atau efek marquee, kali ini kita akan membuat dengan cara berbeda. CSS3 animation yang kini telah didukung secara merata oleh hampir semua browser akan kita manfaatkan untuk membuat sebuah efek teks berjalan yang cukup menarik. Kode css juga telah dilengkapi dengan css3 transition untuk membentuk hover efek yang lebih menarik ketika cursor diarahkan diatasnya. Agar efek teks berjalan ini juga bisa dimanfaatkan sebagai teks link, maka disertakan juga sebuah fungsi yang bertujuan untuk membuat teks berhenti berjalan saat cursor berada di atas teks. Anda bisa menggunakan kode css ini dalam blog dengan menyimpan melalui "Dasboard - Page Elements - Add a Gadget - HTML/Javascript" atau di atas kode ]]></b:skin> yang dapat dilakukan melalui box Edit Template "Dasboard - Design/Rancangan - Edit HTML". Jika kode css disimpan di atas kode ]]></b:skin> silahkan hilangkan tag pembuka & penutup style-nya (<style type="text/css"> dan </style>).

Kode CSS efek teks berjalan - Marquee Effect

<style type="text/css">
.boxwadahteks{
     padding:5px 10px;
     width:400px; /* rubah ukuran lebar bos jika diperlukan */
     background:#aaa;
     margin:10px auto; /* rubah ukuran margin jika diperlukan */
     border:2px solid #555;
     overflow:hidden;
}
.GRwadahteks{
     float:left;
}
@keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-o-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-ms-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-moz-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-webkit-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
.GRwadahteks .GRmlaku{
     animation:GRanima_teks 20s infinite linear; /* semakin besar waktunya maka semakin lambat */
     -o-animation:GRanima_teks 20s infinite linear; /* ganti semua dengan nilai yg sama (angka 20s) */
     -ms-animation:GRanima_teks 20s infinite linear; /* o untuk opera, ms = IE, moz = Mozilla, webkit = Safari, Chrome */
     -moz-animation:GRanima_teks 20s infinite linear;
     -webkit-animation:GRanima_teks 20s infinite linear;
     font-size:24px; /* ukran teks */
     font-family:arial; /* jenis font */
     margin-left:100px;   
     font-weight:normal; /* bisa ganti normal dengan bold untuk teks tebal  */
     text-shadow:1px 1px 1px #000;
     color:red; /* rubah warna teks jika dikehendaki */
     white-space:nowrap;
     display:inline-block;
     position:relative;
}
.GRwadahteks .GRmlaku span{
     color:magenta; /* warna teks ke dua - ganti warna jika diperlukan */
     font-style:italic; /* style huruf miring */
     font-family:Serif; /* jenis font */
}
.GRwadahteks .GRmlaku a{
     color:lime;
     text-decoration:none;
}
.GRwadahteks .GRmlaku,.GRwadahteks .GRmlaku span,.GRwadahteks .GRmlaku a{
     transition:color 1s;
     -o-transition:color 1s;
     -ms-transition:color 1s;
     -moz-transition:color 1s;
     -webkit-transition:color 1s;
}
.GRwadahteks:hover .GRmlaku,.GRwadahteks:hover .GRmlaku span{
      color:#fff; /* warna hover teks - saat disorot cursor */
}
.GRwadahteks:hover .GRmlaku a{
      color:blue; /* warna hover link - saat disorot cursor */
}
.GRwadahteks:hover .GRmlaku{
     animation-play-state:paused;
     -o-animation-play-state:paused;
     -ms-animation-play-state:paused;
     -moz-animation-play-state:paused;
     -webkit-animation-play-state:paused;
}
</style>

Gunakan xHTML seperti berikut untuk menuliskan teks yang akan di tampilkan.

xHTML efek teks berjalan - Marquee Effect:

<div class="boxwadahteks">
<div class="GRwadahteks">
<div class="GRmlaku">Silahkan tuliskan di sini teks yang ingin anda tampilkan sebagai <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik untuk dapat lebih banyak tutorial!">teks berjalan</a>. <span>Pada bagian ini teks akan berbentuk miring dengan warna dan jenis font berbeda.</span></div>
</div>
</div>

read more...

Trick Membuat Scrollbars di Sebelah Kiri

mengagung-agungkan dan menjunjung tinggi keberbedaan. "Bhinneka Tunggal Ika! Sekalipun betbeda-beda tetapi tetap satu jua. He... he ... ini berlaku juga untuk scrollbars. Sekalipun berbeda dengan posisi di sebelah kiri, namun fungsinya tetap satu jua! Ho... ho ... iya, nggak? Bukankah yang penting fungsinya tetap normal-normal saja?! Klo diseret ke atas dia ikutan naik begitu pula klo di seret ke bawah dianya ikutan turun ke bawah?
Membuat scollbars di posisi sebelah kiri bisa dilakukan dengan 2 cara:

1. Hanya menggunakan kode html (xHTYML).
2. Menggunakan xHTML dan kode CSS.

Membuat Scrollbars di Sisi Kiri dg xHTML

Gunakan kode berikut untuk membuat scrollbars berada di kiri:

xHTMl scrollbars Kiri:

<div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;overflow:auto;height:200px;width:400px;padding:15px 10px;margin:15px 0;border:1px solid #000;font-size:12px;font-family:Tahoma;">
<div dir="ltr">

Letakkan semua teks, kode html atau barang anda di sini!

</div>
</div>

Membuat Scrollbars di Sisi Kiri dg xHTML

Dengan bantuan kode css maka membuat xHTML yang digunakan menjadi sangat simple.

xHTMl scrollbars Kiri:

<div class="GRscrollbars">
      <div>

Letakkan semua teks, kode html atau barang anda di sini!

      </div>
</div>

read more...

Auto Read More with Animated Post Thumbnail

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. Untuk menggunakannya anda perlu melakukan sedikit modifikasi pada template melalui penambahan kode css dan javascript serta perubahan xHTML. Penggantian xHTML dilakukan di antara tag pembuka dan penutup body (<body> & </body>) sedang penambahan kode css dan javascript di antara tag pembuka dan penutup head (<head> & </head>).

Kode CSS :

.GRbacayo a{
       float:right;
       font-size:14px;
       color:red !important;
       font-weight:bold;
       text-transform:uppercase;
       font-family:Arial;
       background:rgba(255,255,255,0.8);
       text-shadow:2px 2px 2px #888;
       padding:4px 8px;border:1px solid #555;
       text-decoration:none;
       transition:1s;
       -o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.GRbacayo a:hover{
       background:red;
       color:#fff !important;
       text-decoration:underline;
}
.GRmorethumb{
       box-shadow:0 0 6px #aaa;
       border:1px solid #eee;
       border-radius:6px;
       padding:6px 6px 2px 6px;
       margin:5px 12px 5px 0;
       background:#ccc;
}
.GRmorethumb img{
       padding:0;
       margin:0;
       border:1px solid #555;
       border-radius:4px;
}
.GRbacayo a,.GRmorethumb img{
       transition:1.2s;
       -o-transition:1.2s;
       -moz-transition:1.2s;
       -webkit-transition:1.2s;
       -ms-transition:1.2s;
}
.GRmorethumb{
       transition:2.5s 1s;
       -o-transition:2.5s 1s;
       -moz-transition:2.5s 1s;
       -webkit-transition:2.5s 1s;
       -ms-transition:2.5s 1s;
}
.GRmorethumb:hover{
       transform:scale(2) translate(27px,0);
       -o-transform:scale(2) translate(27px,0);
       -moz-transform:scale(2) translate(27px,0);
       -webkit-transform:scale(2) translate(27px,0);
       -ms-transform:scale(2) translate(27px,0);
       z-index:10;
}
.GRmorethumb img:hover{
       transform:scale(0.7);
       -o-transform:scale(0.7);
       -moz-transform:scale(0.7);
       -webkit-transform:scale(0.7);
       -ms-transform:scale(0.7);
       border-radius:8px;
}

Javascript :

<script type='text/javascript'>
summary_noimg = 530; /* jumlah teks tanpa thumbnail */
summary_img = 440;  /* Jumlah teks dengan auto thumbnail */
img_thumb_height ='auto';
img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */
</script>
<script src='http://gubhugreyotprojects.googlecode.com/svn/GRauto-readmore.js' type='text/javascript'></script>

xHTML Baru :

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' style='text-align:justify;'>
       <b:if cond='data:blog.pageType == "item"'>
          <data:post.body/>
          <b:else/>
          <b:if cond='data:blog.pageType == "static_page"'>
             <data:post.body/>
             <b:else/>
             <div expr:id='"summary" + data:post.id'>
                <data:post.body/>
             </div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='GRbacayo'><a expr:href='data:post.url' expr:title='data:post.title'>Read More</a></span>
           </b:if>
        </b:if>
              <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

Cara menggunakan kode :

Untuk menggunakan kode ini silahkan anda baca melalui link di bawah ini. Jika anda sudah mengikuti panduan sebelumnya (Auto Post Thumbnail - Auto Readmore with CSS3 Effects), maka hanya perlu mengganti kode CSS dan Javascriptnya saja karena xHTML Baru tak ada perubahan (sama persis).

read more...

Membuat Related Posts Blogger dengan Efek CSS3

11

Mar 2012

Jika mungkin anda telah menggunakan atau memasang widget (script) related post untuk blogger seperti yang sudah banyak terposting di beberapa blog lainnya, pasti akan terlihat sedikit berbeda dengan yang ada di blog ini. Cobalah untuk menggulung halaman ini turun hingga di bawah posting. Arahkan cursor ke setiap link dan akan terlihat sebuah animasi saat tersentuh cursor. Untuk membuat related posts yang seperti ini anda perlu menambahkan css3 transition serta mengatur padding dan background position yang terpasang pada setiap link.

Kode yang diperlukan untuk membuat related posts blogger dengan animasi yang tercipta melalui css3 transition dapat anda lihat dalam beberapa box berikut:

Kode CSS :

#GRrelated-posts{
      padding:10px;
      display:block;
      clear:both;
      border-top:5px double #444;
      border-bottom:5px double #333;
      margin:15px 0;
}
h3.GRrelated-post{
      border-bottom:3px double #666;
      font-weight:bold;
      line-height: 1.2;
      margin:25px 15px 5px;
      padding:0 6px;
      text-transform:uppercase;
      font-size:14px;
}
#GRrelated-posts a:hover{
      text-decoration:none;
}
#GRrelated-posts ul{
      list-style-type:none;
      margin:10px 0;
      padding:0;
}
#GRrelated-posts li{
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQSyseIz7M9OOhJlkkl7zXMSYljoUkfbhS39-aDdjxz59wUYqW0xvrP_Uc0zhfog6sPcXPRbiIeKyhgCMdLQBrM1n1tIBKdF_9A7C7Ggd9o5ifchUCHBt0DXurONptPjKWb_wgbq9R_ag/s128/ball.red.png') no-repeat scroll 12px 0 transparent;
      background-size:auto 18px;
      display:block;
      list-style-type:none;
      padding:0 0 0 35px;
      line-height:20px;
      margin:0;
      transition:all 0.8s ease;
      -o-transition:all 0.8s ease;
      -moz-transition:all 0.8s ease;
      -webkit-transition:all 0.8s ease;
      -ms-transition:all 0.8s ease;
}
#GRrelated-posts li:hover{
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcMFoYVKi4hRLH7LvlT_eKkhgAngNXU5fQd8HMt-tXxJ43mtM8XdG1C1tayPMqfow-Cr7Q6fZT6m4flJDiWSbJhRWEj9lhPAFstCCM4gmd9n_lpDSqgRgQl2oNjwgHi_-7qsxb62LyqOv/s128/arrow-gold.png') no-repeat scroll 3px 0 transparent;
      padding-left:45px;
}

Javascript :

<script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script>

xHTML :

<b:if cond='data:blog.pageType == "item"'>
<h3 class='GRrelated-post'>Related Posts</h3>
<div id='GRrelated-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Cara menggunakan kode related posts :

• Login ke Blogger.
• Halaman Dasbor (Dasboard):
  KLik Design (Rancangan)
• Klik Edit HTML
• Backup template.
  Karena melakukan perubahan xHTML di bagian body mempunyai resiko terjadi kegagalan yang mungkin menimbulkan kerusakan template, anda harus melakukan proses backup template terlebih dahulu demi keamanan.
  • Klik Download Template Lengkap (Download Full Template)
  • Simpan file template di folder PC.
  • File yang tersimpan ini bisa digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara menguploadnya kembali ke blogger dengan cara :
    Klik browse kemudian temukan file yang sebelumnya yelah tersimpan dan lanjutkan dengan klik upload.
• Kembali di halaman Edit HTML :
  Cari kode ]]></b:skin>
• Letakkan kode CSS tepat di atas kode tersebut sedang javascript di bawahnya sehingga kode ]]></b:skin> akan berada diantara kode css dan javascript.
• Klik Simpan Template (Save Template).
• Jika sudah berhasil tersimpan, lanjutkan kembali dengan klik Expand Widget Template.
• Cari kode <data:top.authorLabel/>
  Di atas kode ini terdapat beberapa kode lain dengan bentuk seperti berikut:
  
  

  <div class='post-footer'>
      <div class='post-footer-line post-footer-line-1'>
        <span class='post-author vcard'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/>

  
  Letakkan xHTML tepat di atasnya.
  
  

  <b:if cond='data:blog.pageType == "item"'>
  <h3 class='GRrelated-post'>Related Posts</h3>
  <div id='GRrelated-posts'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast != "true"'>
  </b:if>
  <b:if cond='data:blog.pageType == "item"'>
  <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if>
  </b:loop>
  <script type='text/javascript'>
  var currentposturl="<data:post.url/>";
  var maxresults=10;
  removeRelatedDuplicates(); printRelatedLabels();
  </script>
  </div>
  </b:if>
  
      <div class='post-footer'>
      <div class='post-footer-line post-footer-line-1'>
        <span class='post-author vcard'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/>

  
  
  
• Klik Simpan Template (Save Template).

read more...