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

Monday, 27 February 2012

Lengkapi Blog dg Simple jQuery Tooltip

Menggunakan tooltip disamping berguna untuk membuat tips dalam blog bisa diatur agar terlihat lebih maksimal, di sisi yang lain bermanfaat untuk membuat blog lebih keren serta terlihat profesional. Anda dapat menggunakan tooltip sederhana yang hanya menampilkan teks hingga yang lebih kompleks dengan kemampuan menampilkan teks, URL dan image. Tentu saja azas manfaat harus diperhitungkan. Menggunakan tooltip dengan kode css atau javascript terlalu berlebihan tentu tak akan tak ada untungnya jika penggunaanya tidak maksimal. Ya..., karena semakin banyak javascript atau kode lain digunakan maka beban loading juga akan terus bertambah.

Setelah memperbandingkan dan mempertimbangkan, membuat tooltip dengan jQuery adalah pilihan terbaik yang mungkin dilakukan. Melalui jQuery berbagai desain menarik lainnya (selain tooltip) dapat dengan mudah dibuat tanpa perlu kode atau script tambahan yang berderet-deret dengan beban yang berkilo-kilo. ya..., ini adalah satu nilai lebih jQuery yang hingga detik ini belum mampu ditandingi oleh javascript manapun.

D E M O
Anda bisa melihat bentuk dan tampilan tooltip melalui link demo di bawah ini.
Arahkan cursor pada daftar posting di Arsip blog (sebelah kanan/sidebar kanan)!

Demo Simple jQuery tooltip GRtipz

Cara membuat Simple jQuery Tooltip

  1. Login ke Blogger
  2. Beberapa saat setelah login anda akan menjumpai Halaman Dasbor (Dasboard)
    Pilih dan klik Rancangan (Design).
  3. Pilih dan klik Edit HTML.
  4. Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template), simpan file template di folder PC. Jika terjadi kerusakan tempate akibat beberapa penambahan atau pengurangan kode, gunakan Browse dan Upload yang ada didekatnya, maka template (blog) akan pulih kembali seperti sebelum perubahan dilakukan.
  5. Cari kode ]]></b:skin> (gunakan Ctrl + F). Latakkan kode CSS di atasnya.
  6. Cari kode <head> kemudian letakkan javascript di bawahnya.
  7. Klik Simpan Template (Save Template).
  8. Gunakan class="GRtipz" pada tag a untuk menampilkan tooltip. Lihat contohnya pada box xHTML.

Kode CSS:
#GRtipz{
        min-width:150px;
        max-width:200px;
        border:1px solid #eee;
        border-radius:8px;
        line-height:16px;
        box-shadow:0 0 3px #000;
        background:#5f5e5e url(http://gubhugreyotprojects.googlecode.com/svn/gubhugreyot_bg-GRtipz5.jpg) top right no-repeat;
        padding:8px;
        color:#000;
        font-family:Arial;
        font-size:13px;
        font-weight:600;
        display:none;
        text-shadow:1px 1px 1px #fff;
        position:absolute;
}

Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
this.GRtipz = function(){  
        xOffset = 10;
        yOffset = 20;    
    $("a.GRtipz").hover(function(e){             
        this.t = this.title;
        this.title = "";           
        $("body").append("<p id='GRtipz'>"+ this.t +"</p>");
        $("#GRtipz")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");  
    },
    function(){
        this.title = this.t;  
        $("#GRtipz").remove();
   }); 
    $("a.GRtipz").mousemove(function(e){
        $("#GRtipz")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
   });   
};
$(document).ready(function(){
    GRtipz();
});
</script>

xHTML:
<a class="GRtipz" href="Your URL" title="Write a tooltip text here!">Link Here!</a>

<a class="GRtipz" href="http://gubhugreyot.blogdetik.com" title="Tutorial, Tips, Tricks Blogger & Blogdetik">gubhugreyot - Blogdetik</a>

Catatan/Keterangan:

  1. Untuk merubah ukuran font dan tebal font, lakukan perubahan nilai pada font-size:13px; dan font-weight:600;.
    Nilai font-size: 10px, 11px, 12px, 13px atau 14px;
    Nilai font-weight: normal, bold, bolder, 400, 500, 600, 700 atau 900
  2. Anda ingin cara yang lebih praktis dan tinggal pasang? Kode yang sudah terupload di file hosting? Jika ini yang anda mau, silahkan gunakan yang ini!
    Kode Siap Pakai:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="http://gubhugreyotprojects.googlecode.com/svn/GR_jQuerytooltiptip.js" type="text/javascript"></script>
  3. Dengan javascript di atas, anda tak perlu lagi menggunakan kode CSS. Langsung saja tulis xHTML anda agar tooltip segera terlihat!
  4. Jika dalam blog anda sudah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js maka anda tak perlu lagi menambah jQuery yang sama dari tutorial ini!

Sunday, 26 February 2012

How to Create Blogger Header with 2 Elements

Ini bukan sekedar membagi box header blogger menjadi 2 kolom, namun jauh lebih dari hal tersebut. Kita akan memecah elemen header menjadi 2 elemen di kanan dan kiri. Masing-masing akan berfungsi sebagaimana mestinya sebuah elemen dimana berbagai teks, kode html atau gadget (widget) bisa ditambahkan ke dalamnya.

Jika selama ini di bagian header elemen blogger hanya bisa digunakan untuk box bagi blog title dan blog description, maka dengan memecahnya menjadi 2 elemen maka siapapun dapat mengembangkan satu elemen yang baru tersebut untuk berbagai hal yang sebelumnya tak mungkin ditambahkan. pengguna hanya perlu memperhitungkan kira-kira berapa lebar elemen baru yang dibutuhkan. Pengaturan lebar header element yang lama (default) dan element yang baru dapat dengan mudah dilakukan. Pembagian kolom dilakukan dengan menggunakan nilai persen sehingga tinggal membagi nilai 100% menjadi 2 bagian. Klik ke dua screenshoot di atas agar ditampilkan dalam ukuran sesungguhnya!

D E M O

Klik link demo di bawah ini untuk melihat bentuk header blog setelah penambahan elemen baru:

Demo header blogger dengan 2 elemen

Cara membuat 2 Elemen di Header Blogger Template Designer

  1. Login ke Blogger.
  2. Setelah Halaman Dasbor (Dasboard) terbuka, klik Rancangan (Design).
  3. Cari dan klik Edit HTML
  4. Lakukan Backup Template untuk berjaga-jaga jika saat penambahan elemen baru terjadi kesalahan yang menyebabkan kerusakan template. Panduan dan tutorial Backup template dapat dibuka di sini !
  5. Cari kode ]]></b:skin>, kemudian copy dan paste-kan kode CSS berikut tepat di atas kode ]]></b:skin>. Gunakan Ctrl + F untuk mempercepat pencarian kode.
    Kode CSS
    .GRnewHeader .widget h2.title, .GRnewHeader .widget h2{
           font-size:14px;
           text-transform:uppercase;
           font-weight:600;
           margin:10px;
    }
    .GRnewHeader .widget{
           padding:10px;
           font-size:12px;
           background:rgba(0,0,0,0.2);
           margin:5px;
    }
  6. Cari kode:
    ]]>
    </b:template-skin>
  7. Letakkan kode CSS di bawah ini tepat di atasnya
    Kode CSS
    #header {
           float:left;
           width:70%;
           margin:0;
           padding:0; 
    }
    #GR_headerRight {
           float: right;
           width: 30%; 
           padding:0;
           margin:0;
    }
  8. Cari kode <div class='region-inner header-inner'>
    Di bawah kode di atas akan terlihat kode seperti yang terlihat di bawh ini:
    xHTML
    <div class='region-inner header-inner'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
          </b:section>
  9. Rubah kode di atas menjadi seperti di bawah ini:
    xHTML
    <div class='region-inner header-inner'>
          <b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
          </b:section>
  10. Klik Save template (Simpan Template)
  11. Klik Elemen Laman (Page Elemens).
  12. Lihat di bagian Header sudah ada penambahan elemen baru di sebelah kanan hingga elemen header default berdampingan dengan elemen baru right header.
  13. Coba gunakan untuk menambah gadget kemudian lihat hasilnya dengan membuka blog!
  14. Selesai!

Catatan/Keterangan:
  1. Anda bisa menambahkan bebrapa elemen CSS yang lain dalam kode CSS yang di atas kode ]]>/b:skin>
  2. Background bisa disesuaikan dengan warna teks. Anda dapat menambahkan variable color atau mungkin saja menghapus/menghilangkan background.
  3. Untuk merubah ukuran header kanan dan kiri gunakan perubahan nilai prosentase lebar di antara keduanya.
  4. Jika tertarik untuk membuat header blogger dengan 3 elemen anda bisa membuka panduannya di link berikut:

    Cara membuat header blogger dengan 3 elemen

Friday, 24 February 2012

Simple jQuery Show Hide DIV with UI Effect

Jika hanya menggunakan jQuery-1.3.2.js maka "Spoiler" atau "Show/Hide DIV" hanya mempunyai efek tertentu. Agar beberapa efek lain bisa digunakan kita perlu tambahkan jQuery UI. Script ini juga tidak terlalu banyak, bahkan jika anda ingin membuatnya lebih ringan bisa gunakan compress javascript (UI.min.js). Berbagai efek baru yang dapat digunakan setelah kita gunakan jQuery UI adalah: linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce dan easeInOutBounce.

D E M O
Demo ini menggunakan salah satu efek yang tersedia dalam jQuery UI (easeOutBounce). Anda dapat mengganti dengan efek yang lain seperti yang terlihat dalam daftar efek di atas.

Title Here
Tuliskan teks, kode html image, widget atau kode html lainnya di antara tag <div class="GRshuibox"> dan tag penutupnya (</div>)


Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.GRuishowhideDIV = function (a) {
        a = jQuery.extend({
                speed: 1200,
                easing: "easeOutBounce"
        }, a);
        caller = this;
        if ($(caller).css("display") == "none") {
                $(caller).animate({
                        opacity: 1,
                        height: "toggle"
                }, a.speed, a.easing)
        } else {
                $(caller).animate({
                        opacity: 0,
                        height: "toggle"
                }, a.speed, a.easing)
        }
};
$(document).ready(function () {
        $(".GRshcontroll").click(function () {
                $(this).next().GRuishowhideDIV();
                return false
        })
});
//]]>
</script>

Kode CSS:
.GRshowhideui{
       border:1px solid #666;
       background: rgb(28,28,28);
       backgrund:linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
       background:-o-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
       background:-moz-linear-gradient(top, rgb(28,28,28) 0%, rgb(73,73,73) 17%, rgb(48,48,48) 62%, rgb(19,19,19) 100%); 
       background:-webkit-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%); 
       background:-ms-linear-gradient(top, rgb(28,28,28) 0%,rgb(73,73,73) 17%,rgb(48,48,48) 62%,rgb(19,19,19) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#131313',GradientType=0 ); 
       padding:2px;
       margin:20px auto;
       width:400px;
}
.GRshowhideui a.GRshcontroll{
       color:#eee;
       display:block;
       padding:0;
       text-align:center;
       margin:0 auto;
       font-size:16px;
       font-family:Serif;
       padding:4px 10px;
       border:1px solid #888;
       margin:0;
}
.GRshowhideui a.GRshcontroll:hover{color:#F00;}
.GRshowhideui a.GRshcontroll:active{outline:none;}
.GRshowhideui .GRshuibox{
       display:none;
       padding:10px 15px;
       border:1px solid #888;
       text-align:left;
       line-height:18px;
       font-size:12px;
       color:#eee; /* code by: gubhugreyot */
       text-shadow:1px 1px 1px #000;
}

xHTML:
<div class="GRshowhideui">
<a href="#" class="GRshcontroll">Title Here<br /><img src="http://gubhugreyotprojects.googlecode.com/svn/gubhugreyot_Show-HideH115V34.jpg" width="115" height="36" style="margin:2px auto;" /></a><div class="GRshuibox">
Tuliskan teks, kode html image, widget atau kode html lainnya di antara tag <div class="GRshuibox"> dan tag penutupnya (</div>). <br /><br /><div align="center">
<a href="http://jQueryprojects.blogdetik.com/" title="Teks title"><img height="221" width="190" src="http://3.bp.blogspot.com/-t6_DNBrfsqI/T0ftg76-mhI/AAAAAAAABxI/43kIn6H3Vp8/s320/gubhugreyot-my-profile.jpg" /></a></div>
</div>
</div>

Cara Menggunakan kode

  1. Simpan javascript di bawah kode <head>
  2. Simpan kode css di atas kode ]]></b:skin>
  3. Gunakan xHTML di box posting atau Add a Gadget | HTML/Javascript atau bagian yang lain dari blog di antara tag pembuka body (<body>) dan penutupnya (</body>).
  4. Anda bisa mengganti lebar show/hide DIV dengan merubah nilai width:400px; dengan nilai yang sesuai dengan lebar kolom yang tersedia.

Thursday, 23 February 2012

Add icon in front of a link with CSS3 effect

Beberapa template memang sudah melengkapi linknya dengan icon tepat sebelum teks link, namun lebih banyak di antaranya yang "masih polos" tanpa embel-embel icon. Ada beberapa cara untuk menampilkan icon sebelum dan sesudah link (teks link).
  1. Hanya menggunakan kode html.
  2. Menggunakan kode html dan kode CSS.
  3. Menggunakan javacript dan kode html.
Menggunakan bantuan kode CSS merupakan cara paling efisien karena memungkinkan berbagai inovasi untuk dikembangkan. Dengan kode css juga membuat kode html menjadi lebih sederhana. Agar link yang dilengkapi icon terlihat berbeda dari yang biasa kita gunakan, kita perlu menambahkan kode css3. CSS3 dapat memberikan berbagai efek menarik tanpa melibatkan javascript. Demo di bawah ini adalah efek yang dihasilkan melalui css3 pada sebuah link yang dilengkapi icon.
DEMO : Menampilkan atau menambah icon di depan link dengan efek css3 Efek tidak akan mempengaruhi posisi link terhadap teks lain di sekitarnya.
Kode CSS
.GRiconlinkcss3{
      padding-left:18px;
      padding-right:10px;
      display:inline-block;
      background:url(http://gubhugreyot-icon.googlecode.com/svn/GRworld-16x16.png) no-repeat;
      background-position:4px 6px;
      background-size:10px 10px;
      text-decoration:none;
      color: #FCE6D6; /*code by: gubhugreyot */ 
      font-weight:500;
      text-shadow:1px 1px 1px #000;
      transition:0.6s ease-in;
      -o-transition:0.6s ease-in;
      -moz-transition:0.6s ease-in;
      -webkit-transition:0.6s ease-in;
      -ms-transition:0.6s ease-in;
}
.GRiconlinkcss3:hover{
      background:url(http://gubhugreyot-icon.googlecode.com/svn/GRtricolor-16x16.png) no-epeat;
      background-position:2px 3px;
      background-size:15px 15px;
      color:#F00;
      padding-left:22px;
      padding-right:6px;
}
xHTML
<a class="GRiconlinkcss3" href="http://gubhugreyot.blogspot.com/" title="Panduan & Tutorial Blogger terlengkap">Tutorial Blogger</a>

Catatan/Keterangan
  1. Simpan kode CSS di atas kode ]]></b:skin>
  2. Gunakan xHTML di halaman posting atau bagian yang lain dari blog.
  3. Anda dapat mengganti background image (icon) yang digunakan. Buatlah icon dengan ukuran maksimal 16x16 (pixel).

Bagi yang membutuhkan panduan cara menyimpan kode CSS di template blogger silahkan buka link berikut:

Tutorial : Tips & Trick menambah atau menyimpan kode CSS

Sunday, 19 February 2012

Cara Mengaktifkan & Menampilkan Widget Label Blogger

Dengan mengaktifkan widget atau gadget Label maka akan ada sebuah box yang berisi data posting berdasar label atau kategori yang sudah dibuat pada setiap posting. Anda dapat melakukan pengaturan pada fitur widget label untuk meniadakan atau menampilkan jumlah posting berdasar label. Jika posting sudah cukup banyak dan pada setiap label berisi posting dengan jumlah cukup besar akan lebih bagus jika jumlah posting pada widget label disertakan karena akan berpengaruh besar terhadap keinginan pengunjung untuk membuka.

Cara Menambah Gadget Label di Blogger
Klik setiap gambar untuk memperbesar!
  1. Langkah pertama yang harus dilakukan tentunya adalah login di blogger karena semua penambahan gadget hanya bisa dilakukan setelah kita masuk di halaman dasbor. Untuk login ke blogger anda bisa klik di sini. Tuliskan alamat email secara lengkap jika anda menggunakan email selain dari google mail (yahoo mail, dll) dan cukup tuliskan user name jika anda gunakan email dari gmail. Tuliskan juga password anda di box yang kedua. Buatlah password yang sama seperti yang digunakan di email agar tak mudah lupa. Setelah semua lengkap dan benar, klik "Sign in".
  2. Dasbor (Dasboard).
    Halaman ini akan anda jumpai setelah login. Beberapa fitur blogger tersedia di sini, diantaranya Posting, Comments, Settings, Design, Monetize, Stats, dll. Cari dan klik "Rancangan (Design)".
  3. Add and Arrange Page Elements:
    Disinilah semua penambahan gadget/widget bermula. Halaman ini terdiri atas beberapa elemen penyusun blog. Anda bebas untuk menentukan sendiri dimana gadget akan di tambahkan. Elemen yang paling sering digunakan adalah pada bagian sidebar (kiri dan/atau kanan.
  4. Tambahkan gadget (Add a Gadget):
    Banyak pilihan gadget yang tersedia, salah satu di antaranya Gadget Label. Klik gadget ini dan tunggu kembali beberapa saat.
  5. Jika diperlukan lakukan pengaturan pada gadget label. Beberapa fitur pengaturan sudah tersedia dan anda hanya perlu "menandai" pengaturan yang sesuai. Secara umum para blogger banyak menggunakan pengaturan seperti yang terdapat dalam gambar. Beberapa memilih bentuk Cloud.
  6. Setelah pengaturan widget Label selesai, lanjutkan dengan klik SIMPAN (SAVE).

Catatan/Keterangan:

Mungkin ada baiknya jika anda juga membaca tutorial tentang cara mebuat label (kategori) di boks posting agar pemahaman tentang widget (gadget) label ini lebih lengkap.
Trick dan cara membuat label (kategori) posting di Blogger

Trick dan cara membuat label (kategori) posting di Blogger

Label atau kategori posting adalah sebuah kata atau beberapa kata yang digunakan untuk membagi (memisahkan) posting dalam beberapa kelompok tertentu dengan berdasarkan klasifikasi materi posting. Setiap label dibuat dan ditentukan sendiri oleh pembuat posting dengan berdasarkan isi posting dan bertujuan untuk mempermudah pengunjung untuk mendapatkan posting berdasarkan kelompok. Agar dalam blog bisa dimunculkan sebagai label, tuliskan kata atau teks yang akan digunakan untuk pengelompokkan posting ini pada "boks Label" yang terletak di "boks Posting". Gunakan "tanda koma" setiap akan dimulai label baru!
Contoh:
Tutorial Blogger, Panduan Blogger, Tips - Tricks Blogger, Widget, ....dst
Dengan memberi label atau kategori pada posting maka setiap posting akan mempunyai kelompok berdasar kategori tersebut hingga ketika pengunjung klik pada kategori tertentu seluruh posting yang "termasuk dalam kategori tersebut" akan ditampilkan blogger.
Satu posting juga tak harus hanya menggunakan 1 (satu) buah label. Anda bisa menggunakan beberapa label sekaligus dengan tujuan tertentu. Sebagai contoh misalnya posting "tentang Matematika". Anda bisa gunakan beberapa kategori sekaligus seperti: Kelas 7, Kelas 8, Kelas 9, Pustaka Gila, SD, SMP, SMU dll. Setelah label posting cukup lengkap, untuk memberi label tak perlu dengan menulis kembali di box label. Cukup dengan klik Show All, kemudian klik teks label yang dikehendaki. Label terpilih secara otomatis akan tertuliskan di box label.

Langkah Membuat Label (Kategori)

  1. Login ke Blogger
  2. Halaman Dasbor (Dasboard).
    Pilih dan klik "New Post (Posting Baru)".
  3. Tentukan materi posting, judul posting dan tuliskan "label (kategori)" dalam box Labels yang terletak di bagian bawah box posting (lihat gambar dan klik untuk perbesar!).
  4. Terbitkan Posting

Catatan/Keterangan:

  1. Label (kategori) akan ditampilkan tepat di bawah posting.
  2. Menampilkan daftar posting berdasarkan kategori atau label, dapat dilakukan dengan cara mengaktifkan gadget labels (widget Labels). Widget Labels secara otomatis akan memuat semua data posting berdasarkan label (lihat gambar paling atas!). Angka-angka di sebelah kanan label menunjukkan jumlah posting yang menggunakan label (kategori) tersebut.
  3. Anda dapat menggunakan lebih dari satu label pada setiap posting.
  4. Untuk menghapus salah satu atau beberapa label yang sudah tertulis dalam daftar label yang terdapat di bawah box label( All Labels:) dapat dilakukan dengan menghapus "teks label yang akan dimusnahkan" pada setiap posting yang menggunakan "label yang akan dimusnahkan tersebut". Jadi misalnya sebuah label "Racun Tikus" digunakan pada 5 buah posting, maka anda harus menghapus "teks (label) Racun Tikus" di ke-5 posting. Jika masih ada "satu saja" label yang belum terhapus dari posting, maka label terebut masih akan terlihat di daftar label posting.
  5. Biasanya semakin banyak posting dibuat maka akan semakin banyak pula label yang harus dibuat.

Catatan/Keterangan:

Setelah mengetahui cara membuat label di box posting, selanjutnya anda harus menggunakan widget Labels agar seluruh label posting ditampilkan di halaman posting secara terpisah dalam sebuah box widget. Tutorialnya silahkan buka di sini!

Cara mengaktifkan dan menampilkan Widget Labels di Blogger

Saturday, 18 February 2012

Cara Buat dan Pasang Page peel di Blogger Template Designer

Sekalipun page peel dapat dibuat dengan beberapa javascript, namun kali ini kita akan membuatnya dengan javascript yang paling sederhana. Bukan tanpa sebab jika javascript ini menjadi sangat simpel. Dua buah file flash (.swf) membuat semuanya menjadi terasa lebih praktis dan mudah. Anda hanya perlu membuat semua elemen pendukung page peel dalam ukuran yang tepat agar page peel yang didalamnya menggunakan fungsi iframe ini dapat ditampilkan secara sempurna.

Javascript page peel

Javascript:
var GRppeel = new Object();
GRppeel.ad_url = escape('http://gubhugreyot.blogspot.com');
GRppeel.small_path = 'https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-small-path.swf';
GRppeel.small_image = escape('https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot-75x75.gif');
GRppeel.small_width = '195';
GRppeel.small_height = '195';
GRppeel.small_params = 'ico=' + GRppeel.small_image;
GRppeel.big_path = 'https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-big-path.swf';
GRppeel.big_image = escape('https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot.jpg');
GRppeel.big_width = '650';
GRppeel.big_height = '650';
GRppeel.big_params = 'big=' + GRppeel.big_image + '&ad_url=' + GRppeel.ad_url;
function sizeup987(){
document.getElementById('GRbigpeel').style.top = '0px';
document.getElementById('GRsmallpeel').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("GRsmallpeel").style.top = "0px";
document.getElementById("GRbigpeel").style.top = "-1000px";
}
GRppeel.putObjects = function () {
document.write('<div id="GRsmallpeel" style="position:absolute;width:'+ GRppeel.small_width +'px;height:'+ GRppeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="GRsmallpeelObject" width="'+GRppeel.small_width+'" height="'+GRppeel.small_height+'">');
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ GRppeel.small_path +'?'+ GRppeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+GRppeel.small_params+'"/>');
document.write('<embed src="'+ GRppeel.small_path + '?' + GRppeel.small_params +'" name="GRsmallpeelObject" wmode="transparent" quality="high" width="'+ GRppeel.small_width +'" height="'+ GRppeel.small_height +'" flashvars="'+ GRppeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
document.write('<div id="GRbigpeel" style="position:absolute;width:'+ GRppeel.big_width +'px;height:'+ GRppeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="GRbigpeelObject" width="'+ GRppeel.big_width +'" height="'+ GRppeel.big_height +'">');
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ GRppeel.big_path +'?'+ GRppeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ GRppeel.big_params +'"/>');
document.write('<embed src="'+ GRppeel.big_path + '?' + GRppeel.big_params +'" id="GRbigpeelEmbed" name="GRbigpeelObject" wmode="transparent" quality="high" width="'+ GRppeel.big_width +'" height="'+ GRppeel.big_height +'" flashvars="'+ GRppeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
setTimeout('document.getElementById("GRbigpeel").style.top = "-1000px";',1000);
}
GRppeel.putObjects();

Anda dapat melakukan percobaan terlebih dahulu dengan javascript yang sudah dilengkapi dengan 2 (dua) buah file flash (.swf) dan 2 (dua) buah image ini dengan cara mengupload terlebih dahulu di file hosting (di google sites atau google code). Bentuk javascript setelah diupload akan menjadi seperti berikut:

Link Javascript Page peel:
<script src="page-peel.js" type="text/javascript"></script>

Data file flash dan image yang harus diupload:

- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-small-path.swf
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-big-path.swf
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot-75x75.gif
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot.jpg

Catatan/Keterangan:
  1. Jika diperlukan anda dapat membuat gambar page peel sendiri berdasarkan ukuran image gubhugreyot-img-whynot-75x75.gif dan gubhugreyot-img-whynot.jpg.
  2. Buat image dengan ukuran yang sama dengan kedua gambar di atas.
  3. Simpan link javascript page-peel.js di atas tag </head> atau di bawah tag <body>

Tutorial lengkap cara membuat Page peel

Thursday, 16 February 2012

Cara menambah gadget BloGGeR

Ini adalah sebuah tutorial blogger sederhana tentang cara menambah gadget blogger. Diharapkan panduan dan tutorial blogger ini dapat memberi manfaat bagi blogger-blogger yang baru memulai menerjuni dunia blogging. Tak terlalu banyak memang yang bisa diberikan melalui tulisan ini, hanya sekedar penambah informasi dan pengenalan blogger baru terhadap blog dan elemen-elemen pembentuknya.

Sebelum membahas lebih lanjut tentang cara menambah sebuah gadget (add a gadget) di blogger, rasanya akan lebih menarik seandainya kita sedikit mendalami apa yang dimaksud dengan gadget. Ini menjadi sangat menarik karena membicarakan tentang gadget tentu tak akan lepas dari istilah lain yang hampir serupa, yaitu "Widget". Beberapa kali penulis telah mencoba untuk memastikan "apakah gadget dan widget ini sama?", namun hingga saat ini tak satupun sebuah panduan atau tutorial yang menjelaskan "gadget dan widget" ini secara gamblang.

Karena berbagai keterbatasan informasi tentang dua istilah ini, penulis akhirnya mencoba untuk menterjemahkan pengertian keduanya berdasarkan apa yang selama ini ketahui.

Widget adalah sekumpulan kode html yang terdiri dari kode CSS, javascript dan xHTML atau slah satu dari ketiga elemen html di atas yang mempunyai fungsi khusus (tertentu) dan diperuntukkan untuk melengkapi fungsi blog/web yang sebelumnya belum ada (terpasang). Ini akan berbeda dengan gadget karena sebuah gadget sekalipun tersusun atas elemen yang sama namum belum tentu menjalankan sebuah fungsi khusus yang sebelumnya belum ada di blog/web. Pemahaman ini didasari atas ketersediaan gadget di blogger, dimana salah satu di antaranya adalah "gadget HTML/Javascript". Gadget ini adalah sebuah kenyataan bahwa "sebuah gadget" belum tentu merupakan kumpulan terpadu kode html dengan fungsi yang langsung dapat bekerja, karena bahkan setiap pemilik blog dapat menambahkan atau menyimpan sembarang kode html di dalam "Add a Gadget HTML/Javascript". Termasuk di dalamnya bahkan kode html yang sama sekali tak berkaitan dengan fungsi-fungsi blog (kode yang tak berguna).

Gadget dan widget banyak yang disediakan oleh blogger (blogger plugin) dan dapat anda akses melalui fitur "Rancangan (Design) | Elemen Laman (Page Elements) | Tambah Gadget (Add a Gadget). Anda dapat memilih dan memasang salah satu atau beberapa gadget sekaligus yang memang dibutuhkan untuk memberikan kenyamanan bagi pengunjung untuk menjelajahi dan menikmati semua posting. Beberapa situs juga menyediakan berbagai widget berbayar atau gratis. Tentu saja banyak diantaranya yang terlihat lebih menarik dan lebih baik jika dibandingkan dengan yang telah disediakan oleh blogger. Jika anda tertarik dan ingin menggunakan widget dari luar yang sudah disediakan blogger, anda bisa memanfaatkan "Gadget HTML/Javascript".

Cara Menambah Gadget Blogger
Klik setiap gambar untuk memperbesar!
  1. Langkah pertama yang harus dilakukan tentunya adalah login di blogger karena semua penambahan gadget hanya bisa dilakukan setelah kita masuk di halaman dasbor. Untuk login ke blogger anda bisa klik di sini. Tuliskan alamat email secara lengkap jika anda menggunakan email selain dari google mail (yahoo mail, dll) dan cukup tuliskan user name jika anda gunakan email dari gmail. Tuliskan juga password anda di box yang kedua. Buatlah password yang sama seperti yang digunakan di email agar tak mudah lupa. Setelah semua lengkap dan benar, klik "Sign in".
  2. Dasbor (Dasboard).
    Halaman ini akan anda jumpai setelah login. Beberapa fitur blogger tersedia di sini, diantaranya Posting, Comments, Settings, Design, Monetize, Stats, dll. Cari dan klik "Rancangan (Design)".
  3. Add and Arrange Page Elements:
    Disinilah semua penambahan gadget/widget bermula. Halaman ini terdiri atas beberapa elemen penyusun blog. Anda bebas untuk menentukan sendiri dimana gadget akan di tambahkan. Elemen yang paling sering digunakan adalah pada bagian sidebar (kiri dan/atau kanan. Untuk gadget yang berfungsi sebagai tab menu horizontal (Link List, Blog List dan Pages) secara khusus ditempatkan di bawah header. Cobalah untuk klik salah satu "Add a Gadget" dan tunggu beberapa saat hingga window baru terbuka.
  4. Tambahkan sebuah gadget (Add a Gadget):
    Banyak pilihan gadget yang tersedia, salah satu di antaranya HTML/Javascript. Cobalah dulu dengan gadget yang lain karena "Gadget HTML/Javascript" hanya digunakan untuk menambahkan widget atau kode html yang berasal dari luar blogger. Anda bisa mencobanya dengan menambahkan gadget "Label", kenudian untuk selanjutnya anda bisa mencoba yang lain. Cobalah sebanyak-banyaknya karena anda bisa menghapus widget ini kembali.
  5. Klik "SIMPAN (SAVE)".
  6. Lihat hasil penambahan gadget dengan membuka blog!

Wednesday, 15 February 2012

Background Image di Header Blog dg Kode CSS

Contoh Kode CSS untuk Background Header Blogger Template Designer
Anda bisa mencoba contoh ini menggunakan Dreamwaver, Adobe Dreamweaver CS5 dan CS5.5 atau memasang di blog. Apabila digunakan untuk blog, gunakan kode CSS yang telah diberi tanda. Anda dapat mengatur ukuran background image dengan merubah nilai pada properti CSS background-size:808px 160px;, dimana 808px adalah lebar background image sedang 160px merupakan tinggi background image.
DEMO Background Header dg Kode CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a Background Image in Blog Header with CSS Code</title>

<style type="text/css">
#header-inner{
       margin:50px auto;
       padding:4px;
       width:808px;
       height:160px;
       border:2px solid #000;
       background:#999;
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - START */
#header-inner{
       position:relative;
       background:#666 url('http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_bridge-900-200.jpg') center no-repeat;
       background-size:808px 160px;
}
#header-inner:before{
       position:absolute;
       display:block;
       width:58px;
       height:50px;
       left:60px;  /* code by: http://gubhugreyot.blogspot.com */
       top:0px;
       content:url('https://lh5.googleusercontent.com/-WVnUd2BO_UQ/TzvcQeXo4XI/AAAAAAAAAL8/av3xRaGcXjw/h120/gubhugreyot-animasi-pesawat-terbang-02.gif');
}
#header-inner:after{
       position:absolute;
       display:block;
       font-size:27px;
       color:red; /* code by: http://gubhugreyot.blogdetik.com */
       text-shadow:1px 1px 1px #000;
       right:20px;
       bottom:10px;
       content:"http://gubhugreyot.blogspot.com";
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - END */
</style>

</head>

<body>

   <div id="header-inner"></div>
 
</body>
</html>