gubhug reyot
Energy Saving Mode Using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

Sunday, 15 April 2012

Create 404 Error Page in Blogger with css3

Klik gambar di bawah ini untuk melihat dalam ukuran lebih normal!


Sesuatu yang jarang terlihat, apalagi tersentuh pasti acap terlupakan. Jika itu menyangkut blog, salah satu diantaranya tentulah halaman error 404 (tak di temukan) atau yang lebih dikenal dengan "404 Error Page" atau "page not Found". Halaman Error 404 muncul ketika sebuah URL tak dapat ditemukan akibat perubahan permalink. Ini banyak terjadi karena posting yang telah dihapus. Hal yang sama juga bisa terjadi akibat pencarian dengan penulisan URL yang tidak tepat. Untuk membuat halaman error 404 yang lebih bersahabat, blogger telah menyediakan sebuah fitur yang dapat anda akses melalui halaman dasbor.

D E M O :

Demo Error 404

Kode CSS :
.status-msg-wrap{
      position:fixed;
      z-index:9999;
      top:0;
      left:0;
      width:100%;
      height:100%;
      padding:0;
      margin:0;
      background: #7d7e7d;
      background: -o-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -moz-linear-gradient(-45deg, #7d7e7d 1%, #6d6d6d 17%, #303030 17%, #6d6d6d 21%, #444444 28%, #6d6d6d 28%, #2b2b2b 30%, #6d6d6d 31%, #333333 35%, #828282 35%, #828282 91%, #333333 91%, #828282 92%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#7d7e7d), color-stop(17%,#6d6d6d), color-stop(17%,#303030), color-stop(21%,#6d6d6d), color-stop(28%,#444444), color-stop(28%,#6d6d6d), color-stop(30%,#2b2b2b), color-stop(31%,#6d6d6d), color-stop(35%,#333333), color-stop(35%,#828282), color-stop(91%,#828282), color-stop(91%,#333333), color-stop(92%,#828282));
      background: -webkit-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -ms-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#828282',GradientType=1);}
.status-msg-body{
      font-size:24px;
      color:#eee;
      text-shadow:2px 2px 2px #000;
      margin:0 auto;
      padding:40px 100px;
      height:550px;
      width:800px;
}
.status-msg-body a{
      color:#FC0;
      text-decoration:none;
}
.status-msg-body a:hover{
      color:#6FF;
      text-decoration:none;
}
.status-msg-body img{
      display:block;
      margin:20px auto;
      text-align:center;
      opacity:0.7;
      filter:alpha(opacity=70);
      width:80%;
      height:400px;
      border-top-left-radius:45%;
      border-top-right-radius:45%;
      border-bottom-right-radius:90%;
      border-bottom-left-radius:90%;
      border:10px solid rgba(255,255,255,0.6);
      box-shadow:-2px -2px 2px #333,5px 5px 5px #000;
}
.status-msg-bg{
      background:transparent;
}
.status-msg-wrap:after{
      position:absolute;
      right:40px;
      top:92%;
      font-size:12px;
      font-family:arial;
      transform:rotate(-45deg);
      -o-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      color:#000;
      content:"gubhugreyot";
      text-shadow:0 0 0 #fff;
}

Cara membuat halaman Error 404 :

  1. Simpan kode css di atas ]]></b:skin>
  2. Login ke Blogger.
  3. Dasbor (Dasboard).
  4. Bagi yang masih menggunakan Antar Muka Blogger Lama (Old Blogger Interface) lakukan Upgrade (Tingkatkan Versi Sekarang.) dan gunakan New Blogger Interface (Try the updated Blogger interface).
  5. Setelah upgrade selesai, klik "Settings/Setelan".
  6. Klik "Search preferences/Preferensi Penelusuran".
  7. Klik "Edit" pada "Kesalahan dan Pengalihan | Pesan Ubahsuaian untuk Laman Tidak Ditemukan" atau "Errors and redirections | Custom Page Not Found".
  8. Copy dan pastekan xHTML di bawah dalam box yang tersedia (setelah klik Edit).
  9. Klik "Simpan perubahan (Save Changes)".
  10. untuk menyimpan kode CSS lanjutkan Klik "Template".
  11. Klik "Edit HTML".
  12. Klik "Proceed"
  13. Cari kode ]]></b:skin>
  14. Letakkan kode CSS di atas ]]></b:skin>.
  15. Klik Save Template".
  16. Selesai!

xHTML :
Cihui... Rupanya anda tersesat! Kecian, deh... Hu ... makanya besok lagi klo mo bepergian bawa peta, dong! <a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... si sono tuh jalannya. Hih... , dasar!">gubhugreyot : demos & tutorials</a>
<img src="https://lh6.googleusercontent.com/-bVNeoiocOiE/T24fY4ic83I/AAAAAAAAAgc/7_uZ-DFjdqI/s400/gubhugreyot_penelopecruz.jpg" />

Catatan/Keterangan :

  1. Ganti "Cihui... Rupanya anda tersesat! ... etc dengan kata yang lebih kejam ...! He .. he ... mangsudnya .. kebih bersahabat!"
  2. Ganti http://gubhugreyot.blogspot.com dengan URL blog anda.
  3. Ganti demos & tutorials dengan teks lain sesuai dengan materi posting.

Cara mencoba :

  1. Pilih salah satu posting dan copy URL posting tersebut.
  2. Rubah URL agar tidak sama/berubah dari alamat sesungguhnya.
    contoh
    http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/tagcloud-cumulus-gaya-baru-flash.html
    menjadi :
    http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/palsu-tagcloud-cumulus-gaya-baru-flash.html
  3. Lakukan pencarian menggunakan alamat (URL) paslsu tersebut.

Tuesday, 3 April 2012

Add Emoticon to Blogger Template Designer Comment Box

Komunikasi antar blogger, pembaca atau pengunjung blog memang seringkali terasa tak cukup jika hanya menggunakan kata-kata. Sebuah gambar dalam bentuk emoticon, yang diikut sertakan dalam sebuah komentar, sekalipun hanya berupa sebuah gambar yang tak seberapa besar (icon), namun justru bisa menjadi "ungkapan bagi sebuah ekspresi jiwa/perasaan" yang jika dituliskan perlu begitu banyak kata atau kalimat.

Agar pengunjung atau siapapun pemberi komentar dapat dengan mudah menyisipkan satu atau beberapa buah emoticon, seorang pemilik blog dapat menambahkan sebuah javascript yang disertai kode css dan xHTML. Ketiga elemen kode HTML ini akan membentuk sebuah fungsi yang memberi layanan berupa kemudahan bagi pengunjung untuk menambahkan emoticon pada sebuah komentar. Dengan menuliskan kode yang telah ditentukan, sebuah gambar emoticon akan ditampilkan bersamaan dengan diterbitkanya komentar.

Kode CSS :
img.myGRemo{width:24px;height:18px;padding:2px;border:1px solid #666;background:#ddd;float:left;box-shadow:2px 2px 2px #000;margin:2px;}
#GRemobox{border:2px solid #777;background:#aaa;padding:2px;float:left;width:760px;height:104px;}
.comments{position:relative;}
.comments #GRfloatico{position:fixed;bottom:10px;left:-820px;}
.comments:hover #GRfloatico{left:20%;z-index:999;}
.GRemokode{display:inline-block;width:36px;height:50px;font-size:12px;font-weight:bold;color:#000;line-height:20px;text-align:center;border:1px solid #555;float:left;}
Javascript-1 :
<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment.js' type='text/javascript'></script>
Javascript-2 :
<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment-thumb.js' type='text/javascript'></script>

Cara menggunakan kode :

  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)". Tunggu beberapa saat hingga sebuah halaman baru terbuka.
  3. Cari dan klik "Edit HTML". Halaman baru yang berisi sebuah box "Edit Template" terlihat.
  4. Lakukan backup template.
    • Klik "Download Template Lengkap (Download Full Template)".
    • Simpan file template dio folder PC.
    • Kembali ke box "Edit Template".
  5. Cari kode ]]></b:skin>.
  6. Copy dan paste kode CSS di atas ]]></b:skin>.
  7. Cari kode </body>.
  8. Copy dan paste javascript-1 di atas </body>.
  9. Klik "Simpan Template/Save Template".
  10. Klik "Expand Widget Template".
  11. Cari kode :
    <div class='comment-form'>. Kode seperti ini ada 2 buah.
  12. Copy dan paste javascript-2 di bawah <div class='comment-form'> (kedua-duanya!).
  13. Klik "Simpan Template/Save Template".
  14. Buka blog dan coba hasilnya dengan membuat komentar yang menyertakan emoticon.
  15. Selesai !!!

Sunday, 1 April 2012

Pasang Widget Google Flag Translate -Translator

EnglishArabicChinese SimplyfiedFilipinoFrenchGermanHindiItalianJapaneseKoreanMalayPortugueseRussianSpanishThaiVietnamese
Saat anda dalam tahap awal ngeblog, mungkin saja sebuah "Google Translate Widget" baik yang berupa translator biasa (hanya berupa teks) maupun yang berbentuk google flag translate (disertai icon bendera negara) belum terasa begitu penting. Google translator baru akan terasa manfaatnya saat blog mulai dikenal dan diakses tidak saja oleh blogger Indonesia, namun juga oleh beberapa blogger mancanegara. Sekalipun "Widget Google Translate" masih mempunyai banyak kelemahan dalam penterjemahan, setidaknya bisa sedikit membantu pengunjung yang tidak mengerti bahasa yang kita gunakan untuk "mencoba memahami posting" melalui hasil terjemahan yang dilakukan blogger.

Setelah beberapa waktu lalu mencoba menggunakan google flag translator tak memberikan hasil sesuai harapan, tetapi ternyata semenjak akhir bulan Maret 2012 ini, google flag translate widget kembali bisa berfungsi dengan baik. Semoga saja translator yang disertai icon bendera ini akan tetap bisa dipergunakan sebagai mana mestinya seperti tahun-tahun yang telah lewat.

Selain dimanfaatkan dalam fungsi utamanya sebagai widget perubah bahasa, menggunakan google flag translate widget memang berbeda dengan google translate widget biasa yang hanya menampilkan teks. Dengan penambahan icon bendera membuat widget terasa lebih menarik dan blog juga bertambah lebih indah. Jika anda tertarik untuk menggunakan widget ini, silahkan gunakan kode di bawah ini dan pasang widget melalui penambahan gadget.

Kode CSS dan xHTML-1
<style type="text/css">
.myGRtranslate{margin:0 auto;text-align:center;position:relative;}
.myGRtranslate:hover:before{position:absolute;right:0;top:-20px;content:"Visit me on gubhugreyot";font-size:10px;color:#888;text-decoration:blink;}
.GRgoogtrans{padding:0;margin:0;cursor:pointer;}
.GRgoogtrans .myGRflag{width:24px;height:24px;padding:0;background:#555;border:1px solid #888;opacity:0.6;filter:alpha(opacity=60);padding:0;margin:2px 2px 0 0;box-shadow:2px 2px 2px #000;}
.GRgoogtrans:hover .myGRflag{border:1px solid #f00;background:#ccc;opacity:1.0;filter:alpha(opacity=100);}
</style>
<div class="myGRtranslate">
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cen&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'><img class="myGRflag" alt='English' src='https://lh6.googleusercontent.com/-6o0Zml22e54/T3i5JUK8xHI/AAAAAAAACEk/55YyDHFo9DM/s128/English.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Car&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Arabic'><img class="myGRflag" alt='Arabic' src='https://lh4.googleusercontent.com/-nNYiPXrp9UA/T3i45ujhrKI/AAAAAAAACCs/Fpxyel2kbHc/s128/Saudi-Arabia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7zh-CN&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Chinese Simplyfied'><img class="myGRflag" alt='Chinese Simplyfied' src='https://lh4.googleusercontent.com/-c1e-UO2ojTw/T3i48bxaUaI/AAAAAAAACC8/cTPZtzSTIdk/s128/Viet-Nam.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ctl&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Filipino'><img class="myGRflag" alt='Filipino' src='https://lh4.googleusercontent.com/-SukYp1QZ8XI/T3i5Akjx8zI/AAAAAAAACDc/54AOAEX2Re4/s128/Philippines.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cfr&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='French'><img class="myGRflag" alt='French' src='https://lh3.googleusercontent.com/-wjqj1wJZRgA/T3i5GDs2v3I/AAAAAAAACEY/sRtfI0tO8mQ/s128/France.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cde&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='German'><img class="myGRflag" alt='German' src='https://lh5.googleusercontent.com/-tOYFuwqANJI/T3i5D_9dXAI/AAAAAAAACEI/8BozfDrSKOk/s128/Germany.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Chi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Hindi'><img class="myGRflag" alt='Hindi' src='https://lh5.googleusercontent.com/-gjKMu4Y4ERM/T3i5DNPIAOI/AAAAAAAACEA/zR12DZCcjs8/s128/India.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cit&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Italian'><img class="myGRflag" alt='Italian' src='https://lh4.googleusercontent.com/-0PHQwJfhKQo/T3i5CvIxXyI/AAAAAAAACD0/8s3odDAwRf4/s128/Italy.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cja&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Japanese'><img class="myGRflag" alt='Japanese' src='https://lh4.googleusercontent.com/-Apt3baNjfMo/T3i5B7dks-I/AAAAAAAACDs/OLv-kKOrDjA/s128/Japan.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cko&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Korean'><img class="myGRflag" alt='Korean' src='https://lh6.googleusercontent.com/-qD7VTqE5DwM/T3i4_Aud4KI/AAAAAAAACDM/ZVIKQ8sfFWQ/s128/South-Korea.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cms&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Malay'><img class="myGRflag" alt='Malay' src='https://lh3.googleusercontent.com/-vdNbBIxUMAg/T3i5BgC0S7I/AAAAAAAACDw/xZRvdQySIHE/s128/Malaysia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cpt&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Portuguese'><img class="myGRflag" alt='Portuguese' src='https://lh5.googleusercontent.com/-PoxFzxfvXBA/T3i5AK5gyTI/AAAAAAAACDU/LgazYAZ_oN0/s128/Portugal.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cru&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Russian'><img class="myGRflag" alt='Russian' src='https://lh6.googleusercontent.com/-8yDqR9CH2Eg/T3i4_6V6ccI/AAAAAAAACDQ/rSdd01lDJhs/s128/Russian.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ces&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Spanish'><img class="myGRflag" alt='Spanish' src='https://lh6.googleusercontent.com/-Sz9uAPhm1yw/T3i48kSH03I/AAAAAAAACC4/9nBgbHSAEyY/s128/Spain.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cth&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Thai'><img class="myGRflag" alt='Thai' src='https://lh4.googleusercontent.com/-hEPjjg7y9O4/T3i48a2GJHI/AAAAAAAACC0/jcMEIRtHAsc/s128/Thailand.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cvi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Vietnamese'><img class="myGRflag" alt='Vietnamese' src='https://lh3.googleusercontent.com/-09vSjOQsdlc/T3i5GPbCNXI/AAAAAAAACEU/QXSo8DmQ5T0/s128/China.png' /></a>
</div>

Jika pada kode di atas, ukuran box widget menggunakan lebar sesuai lebar kolom gadget, untuk kode berikut menggunakan ukuran box sebesar 224px yang berfungsi untuk membentuk icon bendera dalam 2 deret memanjang dengan masing-masing deret berjumlah 8 icon bendera.
Kode CSS dan xHTML-2
<style type="text/css">
.myGRtranslate{padding:5px;margin-left:0px;background:#555;width:224px;float:left;border:2px solid #aaa;border-radius:6px;position:relative;}
.myGRtranslate:hover:before{position:absolute;right:0;top:-20px;content:"Visit me on gubhugreyot";font-size:10px;color:#888;text-decoration:blink;}
.GRgoogtrans{float:left;border:1px solid #888;opacity:0.6;filter:alpha(opacity=60);padding:0;margin:2px 2px 2px 0;cursor:pointer;box-shadow:2px 2px 2px #000;}
.GRgoogtrans .myGRflag{float:left;width:24px;height:24px;padding:0;margin:0;border:0 solid;background:transparent;box-shadow:0 0 0 #fff;}
.GRgoogtrans:hover{border:1px solid #f00;background:#ccc;opacity:1.0;filter:alpha(opacity=100);}
</style>
<div class="myGRtranslate">
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cen&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'><img class="myGRflag" alt='English' src='https://lh6.googleusercontent.com/-6o0Zml22e54/T3i5JUK8xHI/AAAAAAAACEk/55YyDHFo9DM/s128/English.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Car&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Arabic'><img class="myGRflag" alt='Arabic' src='https://lh4.googleusercontent.com/-nNYiPXrp9UA/T3i45ujhrKI/AAAAAAAACCs/Fpxyel2kbHc/s128/Saudi-Arabia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7zh-CN&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Chinese Simplyfied'><img class="myGRflag" alt='Chinese Simplyfied' src='https://lh4.googleusercontent.com/-c1e-UO2ojTw/T3i48bxaUaI/AAAAAAAACC8/cTPZtzSTIdk/s128/Viet-Nam.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ctl&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Filipino'><img class="myGRflag" alt='Filipino' src='https://lh4.googleusercontent.com/-SukYp1QZ8XI/T3i5Akjx8zI/AAAAAAAACDc/54AOAEX2Re4/s128/Philippines.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cfr&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='French'><img class="myGRflag" alt='French' src='https://lh3.googleusercontent.com/-wjqj1wJZRgA/T3i5GDs2v3I/AAAAAAAACEY/sRtfI0tO8mQ/s128/France.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cde&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='German'><img class="myGRflag" alt='German' src='https://lh5.googleusercontent.com/-tOYFuwqANJI/T3i5D_9dXAI/AAAAAAAACEI/8BozfDrSKOk/s128/Germany.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Chi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Hindi'><img class="myGRflag" alt='Hindi' src='https://lh5.googleusercontent.com/-gjKMu4Y4ERM/T3i5DNPIAOI/AAAAAAAACEA/zR12DZCcjs8/s128/India.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cit&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Italian'><img class="myGRflag" alt='Italian' src='https://lh4.googleusercontent.com/-0PHQwJfhKQo/T3i5CvIxXyI/AAAAAAAACD0/8s3odDAwRf4/s128/Italy.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cja&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Japanese'><img class="myGRflag" alt='Japanese' src='https://lh4.googleusercontent.com/-Apt3baNjfMo/T3i5B7dks-I/AAAAAAAACDs/OLv-kKOrDjA/s128/Japan.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cko&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Korean'><img class="myGRflag" alt='Korean' src='https://lh6.googleusercontent.com/-qD7VTqE5DwM/T3i4_Aud4KI/AAAAAAAACDM/ZVIKQ8sfFWQ/s128/South-Korea.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cms&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Malay'><img class="myGRflag" alt='Malay' src='https://lh3.googleusercontent.com/-vdNbBIxUMAg/T3i5BgC0S7I/AAAAAAAACDw/xZRvdQySIHE/s128/Malaysia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cpt&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Portuguese'><img class="myGRflag" alt='Portuguese' src='https://lh5.googleusercontent.com/-PoxFzxfvXBA/T3i5AK5gyTI/AAAAAAAACDU/LgazYAZ_oN0/s128/Portugal.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cru&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Russian'><img class="myGRflag" alt='Russian' src='https://lh6.googleusercontent.com/-8yDqR9CH2Eg/T3i4_6V6ccI/AAAAAAAACDQ/rSdd01lDJhs/s128/Russian.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ces&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Spanish'><img class="myGRflag" alt='Spanish' src='https://lh6.googleusercontent.com/-Sz9uAPhm1yw/T3i48kSH03I/AAAAAAAACC4/9nBgbHSAEyY/s128/Spain.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cth&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Thai'><img class="myGRflag" alt='Thai' src='https://lh4.googleusercontent.com/-hEPjjg7y9O4/T3i48a2GJHI/AAAAAAAACC0/jcMEIRtHAsc/s128/Thailand.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cvi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Vietnamese'><img class="myGRflag" alt='Vietnamese' src='https://lh3.googleusercontent.com/-09vSjOQsdlc/T3i5GPbCNXI/AAAAAAAACEU/QXSo8DmQ5T0/s128/China.png' /></a>
</div>
<div style="clear:both;"></div>

Cara menggunakan widget

  1. Login ke blogger
  2. Setelah halaman dasbor terbuka, klik "Rancangan/Design".
  3. Sebuah halaman baru berupa "Halaman Tata Letak (Layout)" akan anda lihat. Ada beberapa elemen yang dilengkapi dengan fungsi penambah gadget. Klik salah satu "Add a Gadget (Tambah Gadget)" dalam box bergaris putus2 dan tunggu beberapa saat hingga window baru terbuka.
  4. Ada beberapa pilihan gadget. Pilih dan klik Gadget "HTML/Javascript".
  5. Copy dan pastekan "Kode CSS dan xHTML-1" atau "Kode CSS dan xHTML-2" ke dalam box HTML/Javascript.
  6. Klik "SIMPAN/SAVE"
  7. Buka blog dan coba untuk menggunakan Widget Google Flag Translate.
  8. Selesai!

Catatan/Keterangan :

  1. Anda dapat menambah atau mengurangi jumlah bahasa yang dipergunakan dalam widget sesuai kebutuhan.
  2. Panduan yang lebih lengkap tentang cara menambah gadget dapat dibuka melali link di bawah ini:
    Panduan lengkap cara menambah gadget

Saturday, 31 March 2012

Tagcloud Cumulus Gaya Baru - Flash Animated Label Cloud

Widget Tagcloud Flash Animasi ini sepertinya trinspirasi dan mengadopsi kemampuan dan kinerja tagcloud cumulus. Dibuat lebih praktis dalam penggunaan. Pengguna widget tak lagi perlu memasukkan link menu yang akan ditampilkan satu persatu seperti yang harus dilakukan ketika menggunakan tagcloud cumulus. Anda hanya perlu memasukkan alamat blog dan secara otomatis tagcloud animasi flash ini akan bekerja memanfaatkan data label posting blogger anda. Dengan model baru seperti ini, tagcloud flash animasi yang mirip tagcloud cumulus ini menjadi pilihab alternatif yang cukup menarik bagi siapapun.

Flash Labels by Way2Blogging


Javascript dan xHTML Tagcloud Flash Animasi:
<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl       : "http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com/", /* ganti dg alamat blog anda */
color          : "000000", /* warna link menu  */
hoverColor     : "f00f00", /* hover link menu */
backgroundColor: "FFFFFF", /*  background */
size           : 10, /* ukuran font */
speed         : 100, /* kecepatan animasi */
width          : 300, /* lebar label cloud animasi */
height         : 300 /* tinggi label cloud animasi */
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

Cara menggunakan label cloud animasi

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

Catatan/Keterangan :

  1. Sesuaikan lebar kolom yang tersedia dengan mengatur lebar widget label cloud (pengaturan lebar di javascript!).
  2. Pengaturan warna teks, hover dan beberapa yang lain juga terdapat di javascript.
Sumber :
http://www.way2blogging.org

Friday, 30 March 2012

Recent Comments dg Thumbnail (Avatar) u Blogger Template Designer

Widget Recent Comments ini sangat jauh berbeda dengan gadget recent comments dari blogger yang dapat anda install melalui "Add a Gadget". Jika gadget recent comment default blogger hanya menampilkan recent comments berupa teks, widget recent comments yang satu ini mampu menampilkan thumbnail/avatar si pemberi komentar seperti yang biasa kita lihat di kolom komentar yang terletak di bawah posting. Dengan bantuan effek opacity, widget recent comments yang hanya menggunakan sedikit javascript ini tak hanya bermanfaat sebagai salah satu penyedia informasi tercepat tentang komentar saja, namun di sisi yang lain juga memberi wajah dan penampilan berbeda pada blog. Menggunakan widget ini juga membuat berbagai modifikasi recent comments jauh lebih mudah dibandingkan jika menggunakan gadget recent comments bawaan blogger. Kode css disertakan sekaligus dalam widget sehingga mempermudah pengguna untuk melakukan berbagai perubahan wajah dan tampilan, seperti misalnya untuk penyesuaian dengan warna blog. Sebuah scrollbox sederhana juga telah ditambahkan dengan tinggi scrollbox max=300px. Untuk merubah tingginya anda hanya perlu merubah nilainya, dimana semakin besar maka box akan semakin tinggi.

Kode CSS, Javascript dan xHTML widget Recent Comments dg thumbnail

Kode CSS, Javascript dan xHTML :
<style type="text/css">
ul.GRrecentCom{list-style:none;margin:0;padding:0;}
.GRrecentCom li{background:none;margin:0 0 6px !important;padding:4px 6px;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px dotted #555;}
.GRrecentCom li .GRavatar{padding:1px;background:#fefefe;box-shadow:1px 2px 2px #000;float:left;margin:2px 10px 0 0;position:relative;overflow:hidden;opacity:0.4;filter:alpha(opacity=40);}
.GRrecentCom li:hover .GRavatar{opacity:1.0;filter:alpha(opacity=100);}
.GRrounded{border-radius:3px;}
.GRcircle{border-radius:50%;}
.GRrecentCom li:hover{text-shadow:2px 2px 2px #888 !important;background:#bbb;border-bottom:1px dotted #888;border-radius:4px;}
.GRrecentCom li img{padding:0px;position:relative;overflow:hidden;display:block;}
.GRrecentCom li span{margin-top:4px;color:#666;display:block;font-size:12px;font-style:italic;line-height:1.4;}
.GRrecentCom li:hover span{color:#000;}
</style>
<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/GRrCommentsAvatar.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var
numComments = 25, /* jumlah komentar */
showAvatar = true, /* false untuk tanpa avatar */
avatarSize = 30, /* ukuran avatar (pixel) */
roundAvatar = false, /* true untuk avatar bulat */
characters = 100, /* jumlah karakter komentar */
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false; /* true untuk menampilkan link widget */
//]]>
</script>
<div style="max-height:300px;overflow:auto;padding:5px 15px 5px 0;border-top:3px double #888;border-bottom:3px double #888;">
<script type="text/javascript" src="http://lightbox-demo-tutorial.blogspot.com/feeds/comments/default?alt=json&callback=GRrecentCom&max-results=25"></script>
</div>

Cara menggunakan dan membuat widget recent comments:

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

D E M O

Lihat recent comments dalam blog ini!

Catatan :

  1. Dalam demo ini widget telah mengalami banyak modifikasi. Jika anda ingin membuat yang seperti terlihat dalam demo, silahkan tunggu tutorialnya di http://gubhugreyot.blogspot.com
  2. Kode berwarna merah (2 kode) untuk merubah jumlah komentar yang ditampilkan.
  3. Kode berwarna kuning untuk merubah ukuran avatar.
  4. Kode berwarna biru muda untuk merubah jumlah karakter komentar.

Sumber :

http://www.way2blogging.org

Monday, 26 March 2012

Create heading style with effect using CSS3

Lightbox demo dan tutorial


Link di atas adalah salah satu contoh penggunaan heading style with effect yang dimanfaatkan sebagai sebuah link. Jika anda mengarahkan cursor pada link di atas maka akan terlihat effek yang tercipta berupa opacity effect yang digabungkan dengan css3 transition. Pada dasarnya heading style with effect dapat digunakan tidak hanya sebagai sebuah pembentuk/box bagi judul/title sebuah paragraf saja namun bisa dimanfaatkan untuk banyak hal dalam blog. Termasuk di bawah ini, yang digunakan sebagai sebuah judul/title.

Kode CSS Heading Style with Effect

Kode CSS :
h4.GRheading{
        font-family:Times New Roman; 
        font-size:18px; 
        font-weight:bold; 
        padding:5px  0; 
        border-bottom:1px solid #aaa; 
        border-left:30px solid #aaa; 
        opacity:0.7;
        filter:alpha(opacity=70);
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
}
h4.GRheading:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        border-color:#900;
}
h4.GRheading,h4.GRheading span{
        transition:0.8s linear;
        -o-transition:0.8s linear;
        -moz-transition:0.8s linear;
        -webkit-transition:0.8s linear;
        -ms-transition:0.8s linear;
}
h4.GRheading span{
        border-top-right-radius:5px;
        padding:3px 10px;
        margin-left:3px;
        margin-top:-5px;
        display:block;
        color:#900;
        border-top:3px solid #888;
        border-right:2px silid #888;
        background:#555;
}
h4.GRheading:hover span{
        color:#orange;
        background:#aaa;
}
Tutorial :

Back to tutorial » Heading style with effect

Effek Hujan Dhuwit

Effek hujan uang sebenarnya merupakan pengembangan dari effek hujan salju atau snow effect. Untuk merubah salju menjadi bentuk uang anda hanya perlu membuat sebuah gambar baru berbentuk uang kemudian upload melalui boks posting blogger. Gunakan URL hasil upload tadi dengan menempatkannya di javascript. Anda dapat mengganti image dengan berbagai image yang lain dan sebutlah effeknya sesuka anda sesuai dengan image yang digunakan.

Tutorial :
Back to tutorial

Create body background using javascript

Umumnya, membuat atau menambah sebuah background image pada body dilakukan menggunakan kode CSS, namun kali ini kita akan membuatnya menggunakan javascript. Sangat simple dan amat mudah menggunakannya. Letakkan dan simpan javascript di atas kode </body> dan segera buka blog untuk melihat bagaimana javascript ini bekerja. Jika anda tak merubah image yang digunakan sebagai background pada javascript, maka halaman blog anda akan terlihat seperti di blog ini (lihat di sisi kanan dan kiri halaman yang background-nya terlihat seperti dari bahan serat kayu/wood.

Template Tata Letak :
Javascript :
<script type="text/javascript">
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') center repeat"
</script>
Blogger Template Designer :
Javascript :
<script type="text/javascript">
document.write("<style>.body-fauxcolumn-outer .cap-top{z-index:0;opacity:0.0;filter:alpha(opacity=0);</style>");
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') white center repeat"
</script>

Tutorial :
Back to tutorial

Display Menu Icon on hover with javascript & css3


Javascript berfungsi untuk menampilkan icon yang berkaitan dengan menu yang ditampilkan. Animasi yang terjadi ketika cursor diarahkan diatas link menu tercipta berkat digunakannya css3 transition. Sangat jarang menu yang didesain dengan menampilkan icon seperti dalam javascript ini sehingga mungkin saja ini bisa menjadi sebuah pilihan menarik buat anda! Gunakan icon dengan ukuran secukupnya agar daftar menu tetap selalu dapat terlihat dengan sempurna tanpa terganggu penggunaan menu icon.

Sunday, 25 March 2012

jQuery Auto Hide Box with Controll

jQuery auto hide box with controll merupakan sebuah desain yang berfungsi menampilkan box yang didalamnya berisi berbagai informasi dalam bentuk teks, image atau kode html. Box ini akan terlihat selama beberapa saat setelah blog dibuka. Lama waktu box terlihat serta posisi box dapat diatur melalui javascript, sedang ukuran box diatur dengan kode CSS. Jika dalam blog anda sudah menggunakan jQuery versi 1.3.2 hingga versi 1.7.1, maka anda cuma perlu menambah javascript dan kode css saja, karena dalam satu blog hanya memerlukan 1 buah jQuery. Untuk menghilangkan box dari halaman blog secara manual, jQuery auto hide box with controll dilengkapi dengan sebuah controll. Conroll tersebut terletak di ujung kanan-bawah box. Dengan sekali klik maka box akan menghilang tanpa perlu menunggu auto hide bekerja.

Tutorial :
Back to tutorial
 
Box ini akan menghilang setelah 50 detik, sesuai dengan hideafter yang disertakan senilai 50000 ( 50000 equivalen dengan 50 detik karena setiap 1000= 1 detik). Lama waktu bisa kamu ubah dengan merubah nilai hideafter. Semakin kecil nilainya maka box akan semakin cepat menghilang.
Apabila ingin menghilangkannya secara manual silahkan
CLOSE

gubhugreyot Auto Hide Box bisa di gunakan untuk menyampaikan pesan, iklan atau bentuk yang lain, dimana materi di dalamnya bisa berupa gabungan teks dan image.
Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan:
CLOSE

Friday, 23 March 2012

Image Slider with Fade Effect Transition

Slider dengan fade effect transition ini menggunakan sebuah javascript yang sangat sederhana. Slider memuat 3 buah image dengan sebuah background image yang akan terlihat hanya di saat gallery dibuka. Background image ditampilkan dalam bentuk transparan melalui opacity effect. Dibalik background image disertakan juga satu background animasi gif yang berfungsi membuat efek terang-gelap hingga seakan yang memiliki effek terang gelap adalah image dalam slider.
Javascript :
<script type="text/javascript">
//<![CDATA[
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function BGS_GR_blor(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :
span.controllmu{width:60px;display:inline-block;padding:4px 6px;background:#333 url(http://www.abchoes.com/images/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.controllmu:hover{background:#900;color:#fff;}

xHTML :
<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh3.googleusercontent.com/-9w_Fiv-PJeQ/T20GncsIQgI/AAAAAAAAAfw/33z3Uc0Vwwg/h340/gubhugreyot_cah-ayu-14.jpg',500)"><span class="controllmu">Image-1</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh5.googleusercontent.com/-8xr4NI5qRSA/T20GlkCNnGI/AAAAAAAAAfo/_dDUGLuVXQc/h340/gubhugreyot_cah-ayu-13.jpg',500)"><span class="controllmu">Image-2</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh6.googleusercontent.com/-lHhUrUcz0ew/T20Gp3gV7WI/AAAAAAAAAf4/zQXIWpv4DQs/h420/gubhugreyot_cah-ayu-11.jpg',500)"><span class="controllmu">Image-3</span></a>
<div id="pics" style="background:url(https://lh4.googleusercontent.com/-Stz6oRyVlgA/T2z8v9rMwdI/AAAAAAAAAfg/LWZluvASP-8/h340/anima-80x10.gif);border:4px ridge orange;width:224px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="BGS_GR_blor" src="https://lh3.googleusercontent.com/-z4E25hU20KU/T20GrTS8ytI/AAAAAAAAAgI/X9a3-tkr07k/h340/gubhugreyot_cah-ayu-10.jpg"/>
</div>
</div>

Cara membuat :

  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) melalui "Box Edit Template".
    • 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> pada "Box Edit Template".
  6. Copy javascript dan letakkan di bawah ]]></b:skin>
  7. Copy kode CSS dan letakkan di atas ]]></b:skin>
  8. Klik "Simpan Template (Save Template)".
  9. Gunakan xHTML di box posting atau "Add a Gadget | HTML/Javascript".

Keterangan/Catatan :
  1. Gunakan image dengan ukuran sama. Lebar image 224px.
  2. Jika ingin merubah ukuran image, rubah pula lebar image pada xHTML:
    width:224px;
  3. Posisi image slider dapat diatur dengan merubah nilai margin pada xHTML :
    margin:5px 15px 5px 0;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Posting » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «


Hover Image with Effect

CSS hover image dimaksudkan untuk membuat penggunaan image dalam blog bisa lebih diperkecil sehingga penataan posting juga menjadi lebih mudah. Dengan hover image with effect maka image hanya akan ditampilkan dalam bentuk thumbnail dengan tinggi 100px dan lebar secara otomatis menyesuaikan diri sebanding dengan ukuran image sesungguhnya. Image dalam ukuran lebih besar hanya akan ditampilkan ketika cursor diarahkan di atas thumbnail. Dengan memanfaatkan properti css3 transition, penampakan image akan berjalan melalui transisi waktu yang disertai effek opacity. Waktu transisi ini dapat diperbesar atau diperkecil dengan mengatur nilai (value) css3 transition property.

CSS3 hover image dapat diterapkan untuk membentuk sebuah image gallery sekaligus dapat juga digunakan gambar tunggal seperti yang biasa digunakan untuk posting. Untuk membuat fungsi seperti di atas, pengaturan/setting dilakukan melalui penggunaan floating position pada kode css.

D E M O :

Arahkan cursor di atas thumbnail untuk menampilkan image yang berukuran lebih besar.

Kode CSS :
.GRflying_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.GRflying,.GRflying_kiri,.GRflying_kanan{
        position:relative;
        cursor:pointer;
}
a.GRflying,a.GRflying span,a.GRflying_kiri,a.GRflying_kiri span,a.GRflying_kanan,a.GRflying_kanan span{
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
a.GRflying img,a.GRflying_kiri img,a.GRflying_kanan img{
        height:100px;
        width:auto;
        margin:2px;
        padding:4px;
        background:#666;
        border:2px solid #eee;
        border-radius:5px;
        box-shadow:0 0 6px #999;
        opacity:0.7;
        filter:alpha(opacity=70);
}
a.GRflying_kiri{margin:5px 12px 5px 0;float:left;}
a.GRflying_kanan{margin:5px 0 5px 12px;float:right;}
a.GRflying:hover img,a.GRflying_kiri:hover img,a.GRflying_kanan:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span,a.GRflying_kiri span,a.GRflying_kanan span{
        display:block;
        position:absolute;
        top:-400px;
        z-index:-10;
        opacity:0;
        filter:alpha(opacity=0);
}
a.GRflying_kiri span,a.GRflying_kanan span{top:-300px;}
a.GRflying span{left:-90%;}
a.GRflying_kiri span{left:0;}
a.GRflying_kanan span{right:0;}
a.GRflying:hover span,a.GRflying_kiri:hover span,a.GRflying_kanan:hover span{
        z-index:999;
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span img,a.GRflying_kiri span img,a.GRflying_kanan span img{
        background:rgba(0,0,0,0.4);
}
a.GRflying:hover span img,a.GRflying_kiri:hover span img,a.GRflying_kanan:hover span img{
        width:auto;
        height:300px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}

Kode CSS image di sebelah kiri:
<a class="GRflying_kiri" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS image di sebelah kanan:
<a class="GRflying_kanan" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS Image Gallery:
<div class="GRflying_gallery">
<a class="GRflying" href="URL-1"><img src="thumb-1.jpg" /><span><img src="image-1.jpg" /></span></a>
<a class="GRflying" href="URL-2"><img src="thumb-2.jpg" /><span><img src="image-2.jpg" /></span></a>
<a class="GRflying" href="URL-3"><img src="thumb-3.jpg" /><span><img src="image-3.jpg" /></span></a>
<a class="GRflying" href="URL-4"><img src="thumb-4.jpg" /><span><img src="image-4.jpg" /></span></a>
</div>

Trick Buat Box Posting dg Background Transparan

Anda dapat menggunakan berbagai ukuran image sebagai background. Pengaturan dilakukan melalui properti css background position dan background repeat serta background size. Dengan dilibatkannya properti background size, bahkan anda dapat ememaksa sebuah image dengan ukuran yang tak sesuai dengan box bisa menjadi selebar box.

Background image with transparency effect for blog posts, dibuat menggunakan 3 buah tag DIV dalam posisi relatif dan absolute serta menyisipkan opacity effect untuk meghasilkan transparansi. Anda dapat mengatur tingkat transparansi dengan mengatur nilai opacity. Warna background juga dapat anda rubah, dimana perubahan juga harus disertai dengan perubahan warna font. Perubahan warna font bertujuan membuat teks dapat terbaca dengan mudah.

Kode CSS :
#GRkolomku{
        background:url(https://lh6.googleusercontent.com/-8zXzDhV-sx0/TyVe8t4qFLI/AAAAAAAAASY/3kppL9_quOk/img_gubhugreyot-macan-ciblon.jpg);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y; /* berulang secara vertikal */
        background-size:100% auto; /* mengatur ukuran background */
        position:relative;
        width:100%; 
        padding:10px;
        margin:-10px;
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background-color:#000; /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :
<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Content here!
</div>
</div>
</div>

Cara Membuat :
  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) melalui "Box Edit Template".
    • 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> pada "Box Edit Template".
  6. Copy kode CSS dan letakkan di atas ]]></b:skin>
  7. Klik "Simpan Template (Save Template)".
  8. Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :
  1. Sebagian keterangan sudah tertulis dalam kode CSS.
  2. Jika menggunakan background image dengan ukuran kecil, rubah :
    - background-size:100% auto; menjadi » background-size:(image-width)px auto;
    - background-repeat:repeat-y; menjadi » background-repeat:repeat;
  3. Warna background dan warna teks dapat diganti dengan merubah :
    - background-color:#000;
    - color:#eee;

Thursday, 22 March 2012

Gandam CSS3 Horizontal Dropdown Menu


Gandam css3 dropdown menu adalah sebuah horizontal dropdown menu yang dibuat secara khusus hanya menggunakan kode css dan css3. Sekalipun tanpa menggunakan javascript, penampilan animatif gandam css3 horizontal dropdown menu tidak sesederhana kodenya. Anda bisa melihat dan mencoba mengarahkan cursor ke "demo" di atas. Animasi dropdown yang disertai transparency effect tak ubahnya seperti sebuah menu yang dibuat menggunakan javascript yang cukup komplex, atau bahkan menggunakan jQuery. Permainan effek di atas hanyalah pengembangan dari css3 transition property, opacity effect serta height pada DIV.

CSS3 Vertical menu with Descriptions

Menu vertival yang dilengkapi dengan deskripsi menu ini dibuat hanya menggunakan kode css dan css3. beberapa kode css3 yang digunakan antara lain border radius (effek rounded corners), css3 text shadow serta css3 transition. CSS3 transition bekerja sebagai kode utama pencipta effek, baik pada link menu maupun ketika deskripsi menu ditampilkan. Anda bisa merubah tempo/durasi bekerjanya effek pada menu dengan merubah nilai css3 transition.

Menggunakan vertival menu with descriptions sangat mudah karena semua kode, baik kode css maupun xHTML dapat disimpan bersama-sama melalui "Add a Gadget". Penggunaan tag span dalam link menu yang berfungsi menciptakan deskripsi menu juga membuat anda dapat melibatkan satu atau beberapa image di dalamnya. Hal ini akan sangat bermanfaat karena deskripsi bisa lebih diperjelas melalui visualisasi dalam bentuk image.


Wednesday, 21 March 2012

Simple Larva Menu


Larva menu dengan script yang sangat sederhana ini dapat anda gunakan di blogger dengan menyimpan xHTML-nya melalui "Tambah Gadget (Add a Gadget)" yang dpat di akses melalui "Elemen Laman (Page Elemen)". Simpan xHTML pada elemen yang terletak di atas elemen "Blog Post" atau di bawah elemen "header blog". Sesuaikan lebar menu (dengan merubah width) agar menu terlihat rapi. Lebar menu berkaitan dengan jumlah menu yang ditampilkan dan jumlah teks setiap menu. Anda sebaiknya menggunakan nama menu (menu title) yang pendek agar menu yang tertampilkan lebih banyak. Untuk memperpendek setiap menu dapat juga melakukan perubahan pada jenis dan ukuran serta tebal font yang digunakan serta merapatkan spasi setiap menu.

Tutorial :
Back to tutorial

Monday, 19 March 2012

jQuery Scoll to top plus CSS3 Effects

jQuery Scroll to top Controll ini tak berbeda dengan yang selama ini sudah terpostingkan di banyak blog. Hampir semuanya bersumber dari dinamicdrive.com. Yang membedakan posting ini dengan semua posting lain tentang "jQuery Scroll to Top Controll" adalah pada penggunaan css3 yang berfungsi untuk menampilkan beberapa effek baru agar terlihat lebih dinamis. Jika scroll to top yang lain menggunakan bentuk "tips/tooltips" default browser, yang inipun berbeda juga karena melibatkan css2 yang dipadu dengan css3. Agar lebih jelas bagaimana "bentuk penampilan beda" dari jQuery scroll to top controll yang telah dipadukan dengan css3 ini silahkan anda coba dengan mengarahkan sekaligus klik scroll to top contoll di ujung kanan bawah halaman. Anda juga bisa mencobanya pada controll back to top yang berupa teks link di bawah kode css.

Javascript :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyotprojects.googlecode.com/svn/tools/jqGRscrolltop.js" type="text/javascript"></script>

Kode CSS :
.jqGRscrolltop{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
        color:#eee;
        background:#900;
        margin:20px;
        display:inline-block;
        opacity:0.5;
        filter:alpha(opacity=50);      
}
.jqGRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100); 
}
.jqGRscrolltop:after{
        font-size:16px;
        font-weight:bold;
        font-family:Courier, monospace;
        text-align:center;
        position:absolute;
        right:-200px;
        top:-50px;
        content:"Scroll Back to Top";
        line-height:30px;
        width:30px;overflow:hidden;
        height:30px;
        background:#888;
        border-radius:4px;
        border:3px double #aaa;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:-10;
}
.GRscrolltop,.jqGRscrolltop:after{
        transition:0.6s linear;
        -o-transition:0.6s linear;
        -moz-transition:0.6s linear;
        -webkit-transition:0.6s linear;
        -ms-transition:0.6s linear;
}
.jqGRscrolltop:hover:after{
        width:190px;
        right:0;
        z-index:12;
        opacity:1.0;
        filter:alpha(opacity=100);
        box-shadow:2px 2px 4px #000;
}
.GRscrolltop{
        width:37px;
        height:40px;
        opacity:0.4;
        background:transparent url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        filter:alpha(opacity=40);
        border:3px double transparent;
        padding:5px;
        border-radius:10%; 
} 
.GRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        background:rgba(0,0,0,.4) url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        border:3px double #930;
        border-radius:50%;
}

Back to TOP
  1. Login ke Blogger.
  2. Halaman Dasbor/Dasboard :
    Klik "Rancangan/Design".
  3. Klik "Edit HTML".
  4. Lakukan Backup Template.
  5. Cari Kode ]]></b:skin>
  6. Copy javascript dan letakkan di bawah ]]></b:skin>
  7. Copy kode CSS dan letakkan di atas ]]></b:skin>
  8. Klik "Simpan Template/Save Template".
Jika anda ingin menggunakan sebuah ling controll untuk back to top seperti yang terletak di atas kode css, gunakan xHTML berikut:

xHTML link scroll to top controll :
<a class="jqGRscrolltop" href="#GRtop">Back to TOP</a>

Catatan/Keteoangan :
  1. Untuk mengganti image yang digunakan sebagai contoll, ganti 2 background dengan alamat:
    https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png.
  2. Jika ingin merubah ukuran image contoll, lakukan perubahan pada :
    background-size:35px 38px;
  3. Panduan lebih lengkap dengan kode css yang sedikit berbeda dapat anda buka di sini!