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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR06VVTTMwTKK_FZ0w9m9aI40uspbJlCkvhHYJqyErsH7ThGFP2NMLbwbtZfkVYcT6OynrMOI1JELT9EptVuAHZZ4Fyf-AT074DNrpf3G2GSw2suDyHvM115kZHesdUg223oSiYWQmECY/);
        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!

Sunday 18 March 2012

CSS3 Hover Tabs with Transparency Effect

Transparency Effect dalam hover tabs css3 ini dibuat dengan memanfaatkan rgba color yang difungsikan sebagai background content tab pertama dan tab kedua. Sebuah image dipasang sebagai background box sehingga efek transparansi semakin nampak. Beberapa background image juga ditambahkan pada masing-masing tab untuk memberi efek berbeda.


First Tab

    Tuliskan teks di sini ! Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

  • Menu Masakan Indonesia
  • Trik Belajar Hipnotis
  • Tutorial Blogdetik
  • Adobe Photoshop
  • Lightbox
  • Trik Tundukkan Wanita
  • Tuliskan teks di sini ! Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Second Tab

    Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

  • Nama Link2a
  • Nama Link2b
  • Nama Link2c
  • Nama Link2d
  • Nama Link2e
  • Nama Link2f
  • Nama Link2g
  • Nama Link2h
  • Nama Link2i
  • Nama Link2j
  • Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!



CSS Floating Menu with CSS3 Effects

Daftar menu tersembunyi yang dibuat dengan kode css ini mempunyai beberapa efek berkat penggunaan kode css3. Menu ditempatkan si sisi kiri halaman blog dan hanya memperlihatkan "sebuah sensor" yang digunakan "sebagai pentriger" menu agar ketika disentuh cursor seluruh bagian menu terlihat. Karena menggunakan css3 maka hanya kompatibel di browser yang sudah mendukung css3.

D E M O

Lihat menu sebelah kiri dan arahkan cursor di atasnya.

Cara membuat berikut kodenya bisa anda dapatkan di gubhugreyot.

Trick Membuat Effek Salju - Snow Effect di blog

Yang dimaksud dengan trik membuat effek salju sebenarnya hanyalah perkara sederhana, dimana hanya menyarankan anda untuk menggunakan javascript snow effect yang sudah terupload di file hosting. Dengan hanya memasang sebuah link javascript maka template anda menjadi lebih bersih alias tidak terlalu semrawut karena dijejali banyak javascript.

Di bawah ini sudah tersedia sebuah link javascript snow effect. Silahkan copy dan pastekan di atas tag </body>.

Javascript Efek Salju :
<script src="http://gubhugreyotprojects.googlecode.com/svn/effects/effek-salju.js" type="text/javascript"></script>

Cara pasang :
  1. Login ke Blogger.
  2. Halaman Dasbor/Dasboard :
    Klik "Design/Rancangan".
  3. Lanjutkan klik "Edit HTML".
  4. Lakukan Backup Template".
  5. Cari kode </body> dan letakkan link javascript tepat di atanya.
  6. Klik "Simpan Template/Save Template".

Saturday 17 March 2012

Trik Termudah Pasang Scroll Up & Scroll Down

Javascript scroll up sekaligus scroll down ini merupakan javascript paling sederhana sebagai sebuah auto scroller. Berfungsi sebagai penggulung ke atas dan ke bawah dengan pengaturan jarak (dalam pixel). Scroller dengan pengaturan jarak memberi keuntungan lebih karena memungkinkan kita memanfaatkan javascript ini dalam dua fungsi.
  1. Sebagai auto scroller dengan jarak pendek/terbatas (lebih kecil dari tinggi halaman blog).
    Anda dapat mengatur jarak up dan scroll down ini dalam radius kecil seperti misalnya 500px, 700px, 900px atau dengan nilai berbeda yang disesuaikan dengan kebutuhan (misalnya dari bab-1 ke bab-2).
  2. Memfungsikan auto scroller sebagai scroll to top contoll dan scroll to bottom controll. Ketika digunakan untuk fungsi seperti ini kita hanya perlu mengatur jarak gulung auto scroller dengan nilai yang sangat besar yang kira-kira pasti akan lebih dari ketinggian halaman blog (misalnya 50000).


Kode CSS :
<style type="text/css">
.GRfixed_top,.GRfixed_bottom,.GRtop,.GRbottom{
        font:Arial 12px;
        font-weight:bold;
        background:#CCC;
        color:#900;
        text-shadow:2px 2px 2px #888;
        border:1px solid #888;
        padding:3px 4px;
        cursor:pointer;
        opacity:0.7;
        z-index:20;
        filter:alpha(opacity=70);
        transition:0.7s ease-out;
        -o-transition:0.7s ease-out;
        -moz-transition:0.7s ease-out;
        -webkit-transition:0.7s ease-out;
        -ms-transition:0.7s ease-out;
}
.GRtop,.GRbottom{
        display:block;
        margin:15px auto;
        text-align:center;
}
.GRfixed_top,.GRfixed_bottom{
        position:fixed; 
        bottom:0; 
        left:3px;   
}
.GRfixed_bottom{
        left:130px;
}
.GRfixed_top:hover,.GRfixed_bottom:hover,.GRtop:hover,.GRbottom:hover{
        background:#900;
        color:#ddd;
        opacity:1.0;
        filter:alpha(opacity=100); 
        z-index:99;
}
</style>
Javascript :
<script type="text/javascript">
//<[CDATA[
m = 50000
function fixedScrolldown(){
    for (GR = 1; GR <= m; GR++){
        parent.scroll(1,GR);
    }
}
function fixedScrollup(){
    for (GR = m; GR >= 1; GR--){
        parent.scroll(m,GR);
    }
}
n = 1000 /* atur range scroller */
function GRdown(){
    for (GR = 1; GR <= n; GR++){
        parent.scroll(1,GR);
    }
}
function GRup(){
    for (GR = n; GR >= 1; GR--){
        parent.scroll(n,GR);
    }
}
//]]>
</script>
xHTML-1:
<input class="GRfixed_top" type=button value="Scroll to Bottom" onClick="fixedScrolldown()"/>
<input class="GRfixed_bottom" type=button value="Back to Top" onClick="fixedScrollup()"/>
xHTML-2:
<input class="GRtop" type=button value="Ke Bab-2" onClick="GRdown()"/>
Bab-1
Sebelum membahas lebih lanjut tentang jenis-jenis anjing galak yang suka menggigit manusia, dalam bab pertama akan dibahas terlebih dahulu jenis anjing lokal yang paling dibenci orang karena suka makan uang haram. Anjing lokal pemakan uang haram lebih dikenali sebagai anjing koruptor. Mereka selalu berpakaian rapi dan berharga mahal dengan mulut setiap saat berbuih menyuarakan "perangi dan bersihkan korupsi". Masyarakat lebih banyak yang tertipu dengan penampilan anjing-anjing ini dan setiap pemilu datang akhirnya kembali memilih mereka sebagai anggota DPR atau pejabat negara lainnya seperti bupati, gubernur, presiden ... dan ...

Bab-2

Akhir posting/penutup
<input class="GRbottom" type=button value="Back to TOP" onClick="GRup()"/>
Cara membuat : Menggunakan script sebagai button scroll to top controll dan scroll to bottom controll:
  1. Login ke Blogger.
  2. Klik "Rancangan (Design)".
  3. Klik salah satu "Add a Gadget (Tambah Gadget)".
  4. Pilih dan klik "HTML/Javascript"
  5. Simpan seluruh kode kecuali xHTML-2 dalam "Box HTML/Javascript".
  6. Klik "SAVE/SIMPAN"
  7. Buka Blog dan lihat hasilnya.
Menggunakan script sebagai scroller dengan controll jarak (range controll).
  1. Gunakan saat posting dan gunakan seperti terlihat pada xHTML-2
  2. Atur range auto scroller pada javascript (n = 1000) untuk mendapat jarak yang sesuai.

 

Cara Buat DivTab View dengan Javascript

Javascript tab view ini sangat simple dan dapat digunakan secara langsung di blog tanpa perlu menambah lagi dengan script yang lain. Anda juga tak perlu menyimpan di file hosting. Bersama beberapa kode css, javascript membentuk sebuah fungsi tab view. Tab view juga dibuat tanpa melibatkan satupun background image, sehingga beban loadingnya akan semakin cepat. Dalam desain ini digunakan 5 buah tab, namun demikian jika dikehendaki anda dapat menambah atau mengurangi.

D E M O Tab View:


Javascript-1 :
<script type="text/javascript">
//<[CDATA[
function GRtab_view_aux(m, k) {
    var l = document.getElementById(m);
    var n = l.firstChild;
    while (n.className != "tabs") {
        n = n.nextSibling
    }
    var i = n.firstChild;
    var o = 0;
    do {
        if (i.tagName == "A") {
            o++;
            i.href = "javascript:GRtab_view_switch('" + m + "', " + o + ");";
            i.className = (o == k) ? "Active": "";
            i.blur()
        }
    } while (i = i.nextSibling);
    var p = l.firstChild;
    while (p.className != "FTs") {
        p = p.nextSibling
    }
    var j = p.firstChild;
    var o = 0;
    do {
        if (j.className == "FT") {
            o++;
            if (p.offsetHeight) {
                j.style.height = (p.offsetHeight - 2) + "px"
            }
            j.style.overflow = "auto";
            j.style.display = (o == k) ? "block": "none"
        }
    } while (j = j.nextSibling)
}
function GRtab_view_switch(d, c) {
    GRtab_view_aux(d, c)
}
function GRtab_view_initialize(b) {
    GRtab_view_aux(b, 1)
};
//]]>
</script>
Javascript-2 :
<script type="text/javascript">
GRtab_view_initialize('GRtab_view');
</script>
Kode CSS :
.GRtab_view{
        margin:20px auto;
        text-align:center;
        float:none;
        background:#eee;
        width:356px;
}
div.GRtab_view div.tabs{
        cursor:pointer;
        height:30px;
        overflow:hidden;
        border:4px solid #999;
        float:left;
        width:350px;
        background:#666;
}
div.GRtab_view div.tabs a{
        float: left;
        display: block;
        text-align:center;
        padding:8px;
        vertical-align: middle;
        border: 1px solid #444;
        font-family:Arial;
        font-weight:700;
        font-size:11px;
        text-transform:uppercase;
        color:#eee;
        background:#666;
}
div.GRtab_view div.tabs a:hover{
        background:#900;
        color:#fff;
} 
div.GRtab_view div.tabs a.Active{
        background:#444;
        color:#FF0000;
}
div.GRtab_view div.tabs a.Active:hover{
        background:#555;
        color:#ffff99;
} 
div.GRtab_view div.FTs{
        clear: both;
        text-align:left;
        border:3px solid #888;
        border-bottom-width:10px;
        overflow: hidden;
        background:#888;
        width:350px;
        height:250px;
        margin-top:0;
        font-size:11px;
        font-family:verdana;
        color:#CCC;
        line-height:18px;
        padding:1px;
        background:rgba(0,0,0,0.1);
}
div.GRtab_view div.FTs ul{
        list-style-type:square;
        margin:0;
        padding:0;
        padding-left:15px;
}
div.GRtab_view div.FTs li p{
        margin:0 0 0 4px;
}
div.GRtab_view div.FTs div.FT{
        background:rgba(0,0,0,0.6);
        height:100%;
        padding:10px;
        overflow:hidden;
}
div.GRtab_view div.FTs div.FT div.Fs{}
div.GRtab_view a{
        cursor:pointer;
        color:#F90;
        text-decoration:none;
        padding:2px 4px;
        margin:0;
        text-shadow:1px 1px 1px #000;
}
div.GRtab_view a:hover{
        color:#6FF;
        text-decoration:none;
        background:#F90;
}
div.GRtab_view a.GRview_img img{padding:2px;background:#777;}
div.GRtab_view a.GRview_img:hover{background:none;}
div.GRtab_view a.GRview_img img:hover{
        background:#F90;
}

xHTML :
<div class="GRtab_view" id="GRtab_view">
    <div class="tabs">
        <a>CSS</a>
        <a>Javascript</a>
        <a>Animasi gif</a>
        <a>Music</a>
        <a>Gallery</a>
    </div>             
<!-- ======== Start content ========== -->
<div class="FTs">
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com/2010/01/tab-view.html" target="_blank">Drop Down Menu</a><p>Dropdown menu css3 ...</p></li>
            <li><a href="http://gubhugreyot.blogdetik.com" target="_blank">Tab View Script</a></li>
            <li><a href="http://tantytm.blogspot.com" target="_blank">Hoizontal Menu</a></li>
            <li><a href="http://lightbox-demo-tutorial.blogspot.com" target="_blank">Opacity Effect Script</a></li><a class="GRview_img" href="http://bgsgr.blogspot.com" target="_blank"><img class="opa" src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/hidden-text-sizer.htmlhtml" target="_blank">Hidden Tex Sizer/a></li>
            <li><a href="Link Text Animation.html" target="_blank">Text Animation</a></li>
            <li><a href="Link Top Bar Script.html" target="_blank">Top Bar Script</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Memotong Gambar.html" target="_blank">Memotong Gambar</a></li>
            <li><a href="Link Photo dari Layar PC.html" target="_blank">Photo dari Layar PC</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Mp3 Barat.html" target="_blank">Mp3 Barat</a></li>
            <li><a href="Link Mp3 Indonesia.html" target="_blank">Mp3 Indonesia</a></li>
            <li><a href="LinkReggae.html" target="_blank">Reggae</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Photo Artis.html" target="_blank">Photo Artis Telanjang</a></li>
<a class="GRview_img" href="Link Photo Artis.html" target="_blank"><img src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
            <li><a href="Link Photo Pemandangan.html" target="_blank">Photo Pemandangan </a></li>
            <li><a href="Link Pakaian Adat Afrika.html" target="_blank">3.Pakaian Adat Afrika</a></li>
        </ul>
    </div>
</div>
<!-- ======== End content ========== -->
</div>

Catatan/Keterangan :
  1. Simpan kode css di atas ]]></b:skin>
  2. Simpan Javascript-1 di bawah kode ]]></b:skin>
  3. Simpan Javascript-2 di atas kode </body>
  4. Gunakan xHTML melalui :
    Dasboard » Design (Rancangan) » Page Elements (Elemen Laman) » Add a Gadget
  5. Anda bisa juga menyimpan kode css dan javascript-1 di atas xHTML dan Javascript-2 di bawah xHTMl. Semua dilakukan melalui Add a Gadget.
  6. Panduan lebih detail dapatkan di sini!