gubhug reyot

Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting

2012-03-10T13:04:00.005-07:00

Widget Related Post bekerja berdasarkan label yang dibuat blogger saat posting, sehingga ketika sebuah label digunakan pada banyak posting maka "related posts" akan memuat semakin banyak daftar posting terkait. Hal seperti ini membuat sebuah widget related posts menjadi terasa "sangat pantas dan layak" karena dapat "menjadi salah satu sumber dibukanya lebih banyak posting oleh pengunjung". Jika banyak posting anda mempunyai kwalitas yang baik, dapat dipastikan salah satu atau beberapa link yang terdapat di boks related posts akan "di klik". Menggunakan widget related posts juga memberi nilai lebh sepanjang posting terkait yang ditampilkan tidak terlalu banyak karena akan semakin memudahkan pengunjung memilih posting.

Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:

O..., ya ..., sebelum dilanjut silahkan buka demonya terlebih dahulu. Lihat di kolom posting bagian terbawah (di atas box komentar!

D E M O - 1 D E M O - 2

Login ke Blogger
Beberapa saat setelah login anda akan masuk di halaman "Dasbor (Dasboard)". Silahkan cari dan klik "Rancangan (Design)". Tunggu beberapa saat hingga halaman baru terbuka!
Klik "Edit HTML".
Lakukan "Backup Template" terlebih dahulu agar bila terjadi kesalahan template bisa dipulihkan kembali seperti sedia kala.
Cari kode ]]></b:skin>

Copy dan kode css berikut tepat di atas kode ]]></b:skin>.

Kode CSS :

#GRrelated-posts{
        padding:10px;
        display:block;
        clear:both;
        border-top:5px double #444;
        border-bottom:5px double #333;
        margin:15px 0;
}
h3.GRrelated-post{
        border-bottom:3px double #666;
        font-weight:bold;
        line-height: 1.2;
        margin:25px 15px 5px;
        padding:0 6px;
        text-transform:uppercase;
        font-size:14px;
}
#GRrelated-posts a:hover{
        text-decoration:none;
}
#GRrelated-posts ul{
        list-style-type:none;
        margin:10px 0;
        padding:0;
}
#GRrelated-posts li{
        background: url('https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png') no-repeat scroll 3px 50% transparent;
        display:block;
        list-style-type:none;
        padding:0 0 0 30px;
        line-height:20px;
        margin:0;
}
#GRrelated-posts li:hover{
        background-position:20px 50%;
        padding-left:35px;
}

]]></b:skin>

Copy dan pastekan javascript berikut di bawah ]]></b:skin>

Javascript :

]]></b:skin>

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

Klik "Simpan Template (Save Template)".
Lanjutkan dengan klik "Expan Widget Template"
Cari kode <div class='post-footer'>. Kode ini ada 2 (dua). Gunakan yang posisinya di atas. Sebagai tambahan imformasi, di atas kode tersebut terdapat kode </b:if>.

Copy dan paste-kan xHTML berikut di antara </b:if> dan <div class='post-footer'>

xHTML :

</b:if>

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

<div class='post-footer'>

Keterangan: pada beberapa template kode berbentuk spt ini:
<p class='post-footer'>

Klik "Simpan Template (Save Template)".
Buka blog dan lihat hasilnya yang letaknya di atas kolom komentar atau di bawah posting.
Seeee...le....saiiiiiiiii.....iiiii!!!!

Catatan/Keterangan :

Box Related Posts akan terletak di bawah posting.
Untuk merubah jumlah jumlah posting yang ditampilkan dlam widget related posts, rubah nila (angka) 10 yang terdapat di xHTML sesuai jumlah yang diinginkan.

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

Posting » Ngahad WAGE, Maret, 11, 2012

» Happy Blogging - gubhugreyot «

Pasang icon di post-author, post-labels, post-timestamp dan post-comment-link

2012-03-09T08:51:00.008-07:00

Jika anda mencermati di dalam box yang terletak di bawah posting maka akan kita lihat bahwa disana terdapat beberapa data yang berkaitan dengan posting.

Data post autor :
Berisi nama si penulis posting atau pemilik blog.
Data penerbitan posting:
Berisi data waktu dan/atau tanggal posting.
Komentar (Comments) :
Berisi data jumlah komentar posting.
Labels :
Label berisikan data label yang ditentukan penulis sebelumnya ketika posting dibuat dan diterbitkan.

Seluruh item data inilah yang akan kita tambah dengan 4 buah icon dengan posisi icon tepat di depan teks. Silahkan anda arahkan cursor ke screenshoot di atas untuk memperbesar gambar. Atau mungkin akan lebih jelas lagi apabila anda buka demo melalui link di bawah ini:

D E M O

Kode CSS :

.post-author{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/user.png);
}
.post-labels{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1-label.png);
}
.post-timestamp{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/grdt-1b-clock.png);
}
.post-comment-link a.comment-link{
      background:transparent url(https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/komen.png);
}
.post-author,.post-labels,.post-timestamp,.post-comment-link a.comment-link{
      background-size:auto 16px;
      padding-left:22px;
      background-repeat:no-repeat;
      background-attachment:scroll;
      background-position:left center;
}
.post-author,.post-labels,.post-timestamp,.post-comment-link{
      margin-left:auto !important;
      margin-right:8px !important;
}

Cara menggunakan kode css :

Login ke Blogger.
Klik "Design (Rancangan)".
Klik "Edit HTML".
Lakukan "Backup template".
Cari kode ]]></b:skin>
Letakkan kode CSS tepat di atasnya.
Klik Simpan "Template (Save Template)".
Selesai dan lihat hasilnya di halaman blog.

Catatan/Keterangan :

Upload semua icon melalui halaman posting untuk mengganti 4 icon dalam kode css agar loading blog anda tetap terjaga baik!
Jika ingin mengganti icon sebaiknya gunakan ukuran 14 x 14 pixel (px) atau 16 x 16 pixel (px) sekalipun background telah disetting pada ukuran 16px (height) dan auto pada width melalui background-size:auto 16px;

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

Posting » Jemuah LEGI, Maret, 09, 2012

» Happy Blogging - gubhugreyot «

Membuat Icon dg Efek css3 di Link List Label Blogger

2012-03-08T15:05:00.002-07:00

Link pada widget label blogger biasanya ditampilkan apa adanya dengan penanda link hanya berupa sebuah penada default yang dihasilkan dari sebuah kode css "list style". Penanda ini biasanya berbentuk cyrcle, disc atau square. Ada cara untuk memberi penanda setiap link list widget label agar berbeda dan bisa dibuat seasuai selera. Sebuah background image dapat kita manfaatkan dan anda dapat secara bebas membuatnya dalam rupa apapun. Icon kecil ini sebaiknya berukuran 10px (height) hingga 16px (height) dengan perhitungan font yang digunakan sebesar 12px atau 11px.

D E M O

Sekalipun dengan merubah penanda link dalam bentuk icon sudah mampu memberi citarasa berbeda, namun apabila kita sedikit menambah kode css3 ke dalamnya tentunya kan menjadi lebih menarik lagi. Efek gerak serupa animasi yang tercipta melalui css3 transition akan membuat icon bergeser ke arah kanan ketika cursor diarahkan di atasnya dan kemudian kembali lagi ketempat semula ketika cursor dipindahkan. Gerak animasi icon link list seperi ini dihasilkan dengan mempermainkan padding atau margin dan css3 transition. Kode css yang digunakan sebagai berikut:

Kode CSS :

#Label1 ul{
       list-style:none outside none;
       margin:0 auto;
       padding:0;
       width:98%;
}
#Label1 ul li{
       padding:5px 0;
}
#Label1 ul li a{
       background:url('https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/flag-icon-label.png') no-repeat scroll left center transparent;
       display: inline-block;
       padding-left: 20px;
       transition:0.5s ease;
       -o-transition:0.5s ease;
       -ms-transition:0.5s ease;
       -moz-transition:0.5s ease;
       -webkit-transition:0.5s ease;
}
#Label1 ul li a:hover{
       margin-left:20px;
}

Login ke Blogger.
Setelah halaman "Dasbor (Dasboard)" terbuka, klik "Rancangan (Design)".
Klik "Edit HTML".
Lakukan "Backup Template".
Cari kode "]]></b:skin>"
Simpan kode css tepat di atas kode ]]></b:skin>
Klik "Simpan Template".
Selesai dan silahkan lihat hasilnya dengan membuka blog.

Catatan/Keterangan :

Untuk melakukan semua proses di atas satu syarat utamanya adalah anda sudah menggunakan/mengaktifkan "Widget Label" blogger.
Dalam kode css di atas telah disertak sebuah icon bendera merah putih. Jika ingin menggunakan icon tersebut sebaiknya upload icon tersebut melalui halaman posting untuk mengganti icon dalam sample kode css.
Jika membutuhkan panduan backup template, cara mencari kode dan berbagai cara menyimpan kode baru di template, silahkan buka Special Tutorial di kolom bagian kiri.

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

Posting » Jemuah LEGI, Maret, 09, 2012

» Happy Blogging - gubhugreyot «

Menampilkan Profil Pengunjung dg Hover Effect

2012-03-08T09:11:00.000-07:00

Hoo... ho.... sobat2 blogger tercinta. Kali ini kita akan bermain dengan kode css. Beberapa properti css akan kita manfaatkan dalam sebuah efek hover. Efek yang akan kita dapat cukup mengejutkan sekaligus menghibur, Javascript tidak kita butuhkan, hanya kode css saja bersama beberapa xHTML. Pada intinya, melalui hover effect kita mencoba mengubah atau menukar sebuah image agar ditampilkan sebuah image berbeda. Ya ... ini sangat menarik dan pasti membuat kalian suka atau mungkin saja tertawa sambil geleng-geleng kepala. Ya ... mungkin saja ... atau he ... he ... bisa jadi kalian justru malahan mengumpat nggak karuan. Yahh ... memang bisa2 saja karena segala kemungkinan bisa terjadi.

Sebelum lihat demo berikut kode css dan xhtml serta satu sampel xhtml yang sudah lengkap dengan imagenya, sebaiknya persiapkan dulu cara menyimpan kode css atau xhtml-nya dengan membuka Spesial Tutorials yang terletak disebelah kiri halaman. Anda bisa mempelajari cara backup template, cara cepat cari kode html ataupun berbagai cara menyimpan kode di template. O ... ya ..., setelah buka demo dan mencoba hover effeknya, sampeyan jangan kaget jika image profil sampeyan terpampang dengan cantiknya di halaman blog. Yaaahh... pokoknya jangan marah klo lihat photo sampeyan hilang satu gara-gara tercuri dan tiba-tiba saja bisa muncul melalui efek hover. He ... jangan marah, ya?! Ha.... ha .... ha ...

D E M O

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

Posting » Kamis KLIWON, Maret, 08, 2012

» Happy Blogging - gubhugreyot «

Auto Post Thumbnail - Auto Readmore with CSS3 Effects

2012-03-06T07:19:00.004-07:00

Auto read more pastinya akan sangan bermanfaat bagi semuanya. Dengan auto readmore yang berfungsi secara otomatis menciptakan read more berdasarkan jumlah karakter ini, maka tak perlu lagi ada kata, Aduh ...., read more-nya kelupaan!" Kata yang paling sering terdengar saat posting selesai dan diterbitkan.

Readmore otomatis ini juga tak sekedar read more biasa karena mengikut sertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana read more berada. Anda dapat mengatur ukuran thumbnail dengan merubah nilai width pada javascript. Jika anda menghendaki pengaturan ini sebaiknya lakukan pada desain yang pertama (standart). O,...ya,.. perlu diketahui bahwa kita akan buat 3 macam tampilan thumbnail yang berbeda.

Pilihan tampilan auto post thumbnail:

Tampilan thumbnail standar:
Tanpa menggunakan efek css3. Thumbnail dilengkapi dengan border, background, border-radius dan box-shadow.
Tampilan thumbnail dg effek css3:
Thumbnail sudah dilengkapi dengan efek css3, dimana ketika mouse beada di atasnya thumbnail akan bertambah besar 1,5 kali lipat.
Tampilan thumbnail dengan efek css3 plus :
Dilengkapi pacity effect dan background rgba serta css3 transform dengan efek rotate serta zoom image 2x.

Ketiga pilihan tampilan auto post thumbnail yang dilengkapi dengan readmore otomatis ini memungkinkan anda mempunyai cukup pilihan. Silahkan gunakan yang cocok dihati. Yah ..., karena beberapa sobat blogger ada yang suka tampilan simple namun ada pula yang pilih tampilan atraktif.

Tampilan Standar:

Kode CSS :

.GRbacayo{
        font-size:16px;
        font-family:Arial;
        display:inline-block;
        float:right;
        margin:0 0 0 20px;
        padding:3px;
}
.GRbacayo a{
        padding:2px 6px 3px;
        text-decoration:none;
        background:#ccc;
        color:red;
        text-shadow:2px 2px 2px #888;
        border:1px solid #444;
        border-left-color:#888;
        border-bottom-color:#888;
}
.GRbacayo a:hover{
        background:red;
        color:#eee;
        text-decoration:underline;
}

Javascript :

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

xHTML Baru:

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

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

Cara Menggunakan :

Login ke Blogger. Gunakan user name (jika mengunakan gmail) dan password kemudian klik "Sign in".
Bagi yang menggunakan yahoo atau lainnya tuliskan alamat email lengkap.
Setekah klik "Sign in", beberapa saat kemudian anda akan melihat halaman dasboard (Dasbor).
Klik Design (Rancangan)"
Lanjutkan dengan Klik "Edit HTMl". Tunggu hingga halaman "Backup / Restore Template (Edit HTML)" terbuka. Di halaman ini anda bisa melihat kode penyusun template dalam box "Edit Template".
Ini penting untuk dilakukan! Segera "Backup Template Terlebih dahulu sebelum proses penambahan kode baru dimulai.

Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya, sedangkan javascript di bawahnya. Panduan untuk backup template dan cara mencari kode html di template maupun berbagai cara menyimpan kode bisa dibuka di Special Tutorials yang ada di menu sebelah kiri halaman blog.

Contoh cara peletakkan kode CSS dan javascript:

.GRbacayo{
        font-size:16px;
        ..... etc
}
.GRbacayo a{
        padding:2px 6px 3px;
        .... etc
}
.GRbacayo a:hover{
        background:red;
        color:#eee;
        text-decoration:underline;
}

]]></b:skin>

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

Klik "Simpan Template (Save Template).
Lanjutkan dengan pemasangan xHTML.
Klik Expand Widget Template.

Cari kode :

<b:includable id='post' var='post'>

Di bawah kode tersebut, sekitar 19 deret kode di bawahnya terdapat kode seperti ini:

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

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'>
          <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
       </div>
    </b:if>

Ganti seluruh kode di atas dengan xHTML Baru.
Klik Simpan Template (Save Template).
Lihat hasilnya dengan membuat posting atau jika menggunakan blog yang sudah ada postingnya maka bisa langsung dicek di halaman utama atau melalui label posting

Catatan/Keterangan :

Selain model standart ini anda dapat membuat yang sudah dilengkapi dengan efek css3. Anda bisa ikuti tutorial beserta kode yang digunakan sekaligus di halaman demo.
Untuk merubah tinggi dan lebar thumbnail lakukan perubahan nilai pada javascript. Semakin besar nilai maka ukuran thumbnail semakin besar.
Tampilan dg css3 Effects:
Klik link berikut melihat demoberikut kodenya (javascript, kode css dan xHTML).
Demo berikut kode : Auto Read More - Tampilan dg css3 Effects.
Tampilan dg css3 Effects-plus:
Silahkan tunggu demo selesai terlebih dahulu!

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

Posting » Selasa WAGE, Maret, 06, 2012

» Happy Blogging - gubhugreyot «

Cursor Circling Text Trail Teks Berputar

2012-03-04T04:08:00.002-07:00

Cursor ini sebenarnya sangat menarik karena animasinya yang cantik serta mudahnya pengguna melakukan beberapa pengaturan ulang agar circling text trail dapat ditampilkan sesuai keinginan. Hanya satu hal yang terasa amat mengganggu, bahwa circling text trail yang berputar mengitari cursor terlalu sering jadi pengganggu ketika pengunjung mecoba melakukan aktivitas penting seperti copy atau membuka link.

Dalam posting ini kita telah lakukan sedikit perubahan pada javascript agar animasi yang tercipta tidak terlalu berlebihan sekaligus kita juga telah rubah posisi teks terhadap cursor agar sekalipun teks berputar ini selalu setia mengikuti cursor namun tidak lagi menjadi pengganggu yang merugikan. Anda bisa melihat dalam demo dimana terlihat animasi teks berputar sudah berpindah di bawah cursor.

D E M O

Kode CSS :

#outerCircleText {
       font-weight:500;
       color:red;
       text-shadow:1px 1px 1px #000;
       font-family: "MS Serif", "New York", serif;
       position:absolute;
       top:0;
       left:0;
       z-index:3000;
       cursor:default;
}
#outerCircleText div{position:relative;}
#outerCircleText div div{position:absolute;top:0;left:0;text-align: center;}

Javascript :

<script type="text/javascript">
//<![CDATA[
/* by Tim Tilton * http://www.tempermedia.com/ * http://www.dynamicdrive.com/ * modif by: gubhugreyot */ 
;
(function () {
        var msg = "gubhugreyot * Tutorial * "; /* teks cursor */
        var size = 22; /* font size */
        var circleY = 0.75; /* lebar diameter arah vertikal (y) */
        var circleX = 2;  /* lebar diameter arah horizontal (x) */
        var letter_spacing = 4; /* spasi texs semakin besar semakin rapat */
        var diameter = 18; /* diameter lingkaran standart max 20 */
        var rotation = 0.1; /* kecepatan putaran --> gunakan 0.1 s/d 0.2 */
        var speed = 0.8; /* kecepatan text mengikuti cursor semakin kecil semakin lambat */
        if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
        msg = msg.split('');
        var n = msg.length - 1,
        a = Math.round(size * diameter * 0.208333),
        currStep = 20,
        ymouse = a * circleY + 20,
        xmouse = a * circleX + 20,
        y = [],
        x = [],
        Y = [],
        X = [],
        o = document.createElement('div'),
        oi = document.createElement('div'),
        b = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement: document.body,
        mouse = function (e) {
                e = e || window.event;
                ymouse = !isNaN(e.pageY) ? e.pageY: e.clientY;
                xmouse = !isNaN(e.pageX) ? e.pageX: e.clientX;
        },

        makecircle = function () {
                if (init.nopy) {
                        o.style.top = (b || document.body).scrollTop + 'px';
                        o.style.left = (b || document.body).scrollLeft + 'px';
                };
                currStep -= rotation;
                for (var d, i = n; i > -1; --i) { // makes the circle
                        d = document.getElementById('iemsg' + i).style;
                        d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY + 85) + 'px';
                        d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
                };
        },

        drag = function () {
                y[0] = Y[0] += (ymouse - Y[0]) * speed;
                x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
  for (var i = n; i > 0; --i) {
                        y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
                        x[i] = X[i] += (x[i - 1] - X[i]) * speed;
                };
                makecircle();
        },

        init = function () { 
                if (!isNaN(window.pageYOffset)) {
                        ymouse += window.pageYOffset;
                        xmouse += window.pageXOffset;
                } else init.nopy = true;
                for (var d, i = n; i > -1; --i) {
                        d = document.createElement('div');
                        d.id = 'iemsg' + i;
                        d.style.height = d.style.width = a + 'px';
                        d.appendChild(document.createTextNode(msg[i]));
                        oi.appendChild(d);
                        y[i] = x[i] = Y[i] = X[i] = 0;
                };
                o.appendChild(oi);
                document.body.appendChild(o);
                setInterval(drag, 25);
        },

        ascroll = function () {
                ymouse += window.pageYOffset;
                xmouse += window.pageXOffset;
                window.removeEventListener('scroll', ascroll, false);
        };

        o.id = 'outerCircleText';
        o.style.fontSize = size + 'px';

        if (window.addEventListener) {
                window.addEventListener('load', init, false);
                document.addEventListener('mouseover', mouse, false);
                document.addEventListener('mousemove', mouse, false);
                if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false);
        }
        else if (window.attachEvent) {
                window.attachEvent('onload', init);
                document.attachEvent('onmousemove', mouse);
        };

})();
//]]>
</script>

Cara Menggunakan :

Simpan kode CSS di atas ]]></b:skin>
Simpan javascript di atas </head> atau di atas </body>
Ganti teks gubhugreyot * Tutorial * (di javascript) dengan teks yang ingin anda tampikan di cursor.
Beberapa pengaturan telah ada petunjuknya di javascript.
Warna font dapat dirubah melalui kode CSS (color).
Agar cara pasang dan cari kode lebih jelas anda bisa baca Cara Backup Template dan Cara Cepat Cari Kode di Special Tutorials pada menu sebelah kiri!

Sumber :

http://www.dynamicdrive.com/

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

Posting » Ngahad PAHING, Maret, 04, 2012

» Happy Blogging - gubhugreyot «

Jozz.. Buat Cursor Animasi ndul Gondal Gandul

2012-03-03T01:10:00.004-07:00

He... masih blom puas dengan persediaan cursor yang sudah terposting? Cihu... Don't worry! Nih satu lagi cursor "antik-cantik" bisa kalian pakai di blogger ato yang lain. Ho.... kompatible lhoh buat semua browser. He... nggak percaya. Buih ... udah cakep, kompabilitasnya bagus, animasi, javascript nggak banyak n..... bisa gondal-gandul seperti "punya sampeyan". Ha .... ha .... ha ... clguk ... glegh .... glegh...

Jika image cursor nggak cocock atau sesuai selera, silahkan ganti imagenya dengan mengganti URL image yang ada di javascript (lihat javascript di bawah!). Beberapa variabel juga bisa diatur untuk memperoleh bentuk paling ideal. Ya,... selera orang khan macam-macam. Ada yang suka kurus kecil hitam, ada yang suka kurus tinggi rambut warna pink dan ada pula yang suka badan tinggi besar plus suka kasih pukulan! He ... he ... iya, nggak?!

Pengaturan dapat dilakukan pada ukuran cursor (image), jarak setiap image cursor, jumlah image cursor, efek pantul cursor serta beberapa yang lain. He ... lengkap banget, ya?!

DEMO : Cursor Animasi

Kode CSS :

.dot{
       position:fixed;
       padding:0;
       margin:0;
       border:0 solid;
       border-radius:6px;
       box-shadow:0 0 0 #fff;
       z-index:10;
}
#dot0{visibility: hidden;}

Kode CSS :

<script type="text/javascript">
//<![CDATA[
function elastic_trail() {
 var f = 8;  /* atur jumlah cursor image */
 var g = "http://gubhugreyot-icon.googlecode.com/svn/100.gif"; /* cursor image */
 var h = 0.01;
 var k = 35; /* jarak tiap cursor image */
 var l = 10;
 var m = 1;
 var o = 0;
 var p = 50;
 var q = 10;
 var r = 0.1;
 var s = 0.1;
 var t = 12; /* ukuran cursor image */
 var u = 0.75;
 var v = 0; /* setting yang lain silahkan lakukan percobaan sendiri, he ... he .... */
 var w = 0;
 for (var i = f - 1; i > -1; --i) {
  with(document) {
   write('<div class="dot" id="dot' + i + '">\n');
   write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
   write("</div>\n")
  }
 }
 /*@cc_on@*/
 /*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.dot {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
 var y = function () {
  return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
 };
 var z = document.layers ? "": "px";
 elastic_trail.prototype.dot = function (i) {
  this.X = v;
  this.Y = w;
  this.dx = 0;
  this.dy = 0;
  if (document.layers) {
   this.obj = document["dot" + i]
  } else {
   if (document.all) {
    this.obj = document.all["dot" + i].style
   } else {
    if (document.getElementById) {
     this.obj = document.getElementById("dot" + i).style
    } else {
     return
    }
   }
  }
 };
 var A = new Array();
 for (var i = 0; i < f; i++) {
  A[i] = new this.dot(i)
 }
 for (i = 0; i < f; i++) {
  A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
  A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
 }
 var B = this;
 setInterval(function () {
  B.animate()
 },
 20);
 function MoveHandler(e) {
  v = e.pageX - pageXOffset;
  w = e.pageY - pageYOffset;
  return true
 }
 function MoveHandlerIE() {
  v = window.event.x;
  w = window.event.y
 }
 if (document.addEventListener) {
  document.addEventListener("mousemove", MoveHandler, false)
 } else {
  if (document.attachEvent) {
   document.attachEvent("onmousemove", MoveHandlerIE)
  } else {
   if (document.captureEvents) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = MoveHandler
   }
  }
 }
 elastic_trail.prototype.vec = function (X, Y) {
  this.X = X;
  this.Y = Y
 };
 elastic_trail.prototype.springForce = function (i, j, a) {
  var b = (A[i].X - A[j].X);
  var c = (A[i].Y - A[j].Y);
  var d = Math.sqrt(b * b + c * c);
  if (d > k) {
   var e = l * (d - k);
   a.X += (b / d) * e;
   a.Y += (c / d) * e
  }
 };
 elastic_trail.prototype.animate = function () {
  var a = 0;
  A[0].X = v;
  A[0].Y = w;
  a = 1;
  for (var i = a; i < f; i++) {
   var b = new this.vec(0, 0);
   if (i > 0) {
    this.springForce(i - 1, i, b)
   }
   if (i < (f - 1)) {
    this.springForce(i + 1, i, b)
   }
   var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
   var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
   A[i].dx += (h * d.X);
   A[i].dy += (h * d.Y);
   if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
    A[i].dx = 0;
    A[i].dy = 0
   }
   A[i].X += A[i].dx;
   A[i].Y += A[i].dy;
   var e, width;
   if (window.innerWidth) {
    e = window.innerHeight;
    width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
   } else {
    e = y().clientHeight - Math.ceil(t / 2);
    width = y().clientWidth
   }
   if (A[i].Y >= e - t - 1) {
    if (A[i].dy > 0) {
     A[i].dy = u * -A[i].dy
    }
    A[i].Y = e - t - 1
   }
   if (A[i].X >= width - t) {
    if (A[i].dx > 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = width - t - 1
   }
   if (A[i].X < 0) {
    if (A[i].dx < 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = 0
   }
   A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
   A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
  }
 }
}
new elastic_trail();
//]]>
</script>

Cara Membuat :

Login ke Blogger.
Halaman Dasbor (Dasboard) » Klik "Rancangan (Design)".
Klik "Edit HTML".
Halaman Edit HTML :
- Lakukan Backup template.
- Cari kode ]]></b:skin>
- Simpan kode CSS tepat di atas kode tersebut.
- Cari kode <body>.
- Simpan Javascript di bawah kode <body>.
Klik "Simpan Template (Save Template)".
Selesai!!!
Ndul gondal-gandul mulur mungkret! Hayo punya siapa, tuh?

Catatan/Keterangan:

Anda dapat menyimpan javascriptnya dalam bentuk link dengan upload di:
- http://sites.google.com
- http://code.google.com
- http://yourjavascript.com
Panduan untuk Backup tenmplate dan menyimpan kode css tau javascript dapat dibuka di Special Tutorials yang ada di menu sebelah kiri.
Anda bisa mengatur z-index agar cursor dapat terlihat di keseluruhan bagian blog. Semakin besar z-index maka akan semakin kuat daya tembusnya. Biasanya beberapa widget menggunakan z-index. Agar cursor tidak tertutup maka z-index cursor harus dibuat lebih besar.

Sumber:

Dynamicdrive : Elastic Trail Script

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

Posting » Ngahad Pahing, Maret, 04, 2012

» Happy Blogging - gubhugreyot «

Trick Membuat Scrollbars di Sebelah Kiri

2012-03-01T13:18:00.003-07:00

Sampeyan semua pasti tahu kalau scrollbars posisinya selalu di kanan box. Scrollbars ini bukan sesuatu yang tabu untuk dipindah tempatnya agar berbeda dari biasanya. Ya ... bukankah membuat sesuatu terlihat berbeda itu cukup penting. Sampeyan juga sudah pada tahu, toh, bangsa kita selalu mengagung-agungkan dan menjunjung tinggi keberbedaan. "Bhinneka Tunggal Ika! Sekalipun betbeda-beda tetapi tetap satu jua. He... he ... ini berlaku juga untuk scrollbars. Sekalipun berbeda dengan posisi di sebelah kiri, namun fungsinya tetap satu jua! Ho... ho ... iya, nggak? Bukankah yang penting fungsinya tetap normal-normal saja?! Klo diseret ke atas dia ikutan naik begitu pula klo di seret ke bawah dianya ikutan turun ke bawah?

Membuat scollbars di posisi sebelah kiri bisa dilakukan dengan 2 cara:

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

Membuat Scrollbars di Sisi Kiri dg xHTML

Gunakan kode berikut untuk membuat scrollbars berada di kiri:

xHTMl scrollbars Kiri:

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

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

</div>
</div>

Membuat Scrollbars di Sisi Kiri dg xHTML

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

xHTMl scrollbars Kiri:

<div class="GRscrollbars">
      <div>

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

      </div>
</div>

Anda bisa mendapatkan tutorial beserta kode css-nya melalui link di bawah ini:

Buat scrollbars di sbl kiri dg kode CSS

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

Update » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «

Cara Membuat Pengunjung Tekun Membaca Posting

2012-03-01T10:53:00.011-07:00

Sekali kali membuat pengunjung blog bingung dan pusing atau bahkan hingga mau muntah-muntah bukanlah hal yang tabu. Ya..., sekali-kali sebagai hiburan bagi gubhugreyot sekaligus anda juga. Bukankah saat ini anda sedang mencoba bertekun untuk membaca kata-demi kata sambil kepala di gelengkan ke kanan dan ke kiri serta mata memicingkan mata dan dahi berkerut-kerut? Ha ... tak apa ... lanjutkan saja saja sambil meringis atau mengumpat sepuas-puasnya.

Membuat posting seperti ini hanya sekedar intermezo ditengah kelelahan akibat keracunan ngeblog. Penyakit yang terasa membelenggu aktivitas lain sehari-hari. Lha, gimana tidak orang klo sehari blom buat posting pantat rasanya jadi gatal-gatal. Yah... daripada kukur-kukur lebih baik pencet keyboard trus beri anda sebuah tablet pemusing kepala. He ... posting ini ibarat tablet yang bikin penasaran sekaligus juga bikin jengkel. Buh..., ya, nggak?

Kode yang digunakan untuk membuat posting seperti ini:

<div style="unicode-bidi:bidi-override;direction:rtl;text-align:left;">Tulis teks di sini !</div>

Sebaiknya anda tidak tidak berlama-lama karena dikuatirkan perut akan menjadi terasa mual hingga kepala semakin berat ... berat .... berat ... kemudian lolongan panjang akan segera keluar dari rumah tetangga. Ha .... Nggak tau tuh lolongan apa. Lolongan anjing kayaknya juga nggak. Lolongan penuh kemikmatan kali, ya?!

Jika pingin baca dengan gampang tanpa perlu mata melotot bekedip-kedip, silahkan copy dan pastekan di manapun anda suka! He .... he .... gampang, ya, ternyata?!!! Ha .. ha ... yo kita ketawa bareng! Satu, dua, tiga .... ha ... ha ... ha ...

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

Update » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «

Tambahkan 2 CSS 3 property dan Wow .... Keren....!!!!

2012-03-01T10:26:00.000-07:00

Ya... hanya 2 (dua) css3 property dan semua berubah dengan luar biasa. Kita hanya akan gunakan css3 text-shadow property dan css3 transition property. Text shadow berfungsi memberi efek bayangan pada teks dan css3 transition akan kita gunakan pada setiap link blog agar menampilkan transisi warna ketika cursor berada di atasnya (disorot, kang! He... pakai senter, lagi... ha... ha...).

D E M O

Silahkan buka link di bawah ini dan lihat efek yang terjadi pada blog setelah 2 property css 3 digunakan.

D E M O

Kode CSS yang digunakan:

body{text-shadow:2px 2px 2px #999;}
a:link,a{
       text-decoration:none;
       transition:color 0.7s linier;
       -o-transition:color 0.7s linier;
       -moz-transition:color 0.7s linier;
       -webkit-transition:color 0.7s linier;
       -ms-transition:color 0.7s linier;
}

Cara Menggunakan Kode:

Simpan kode css di atas kode ]]></b:skin>
Lihat cara menyimpan kode di menu sebelah kiri halaman blog Special Tutorials. Dalam daftar di dalamnya terdapat link untuk tutorial tentang cara menyimpan kode CSS atau kode lain dalam template/blog.
Baca juga "Cara Backup" Template yang juga ada di sana!
Tricks ini akan memberi hasil maksimal ketika blog yang anda gunakan menggunakan backkground warna terang.

Jika blog anda menggunakan background warna gelap sebaiknya gunakan syntax yang ke-2 saja.

a:link,a{
       text-decoration:none;
       transition:color 0.7s linier;
       -o-transition:color 0.7s linier;
       -moz-transition:color 0.7s linier;
       -webkit-transition:color 0.7s linier;
       -ms-transition:color 0.7s linier;
}

Kode css di atas akan memberi efek transisi perubahan warna teks link saat cursor disentuhkan.

Selesai dan semoga bermanfaat bagi sampeyan semua!

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

Posting » Jemuah (KLIWON), February, 29, 2012

» Happy Blogging - gubhugreyot «

Trik Percantik Image Posting dg CSS3 Border Radius Property

2012-03-01T04:36:00.009-07:00

Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di gubhugreyot saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!

Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).

D E M O

Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.

Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:

DEMO: Klik untuk lihat demo lain beserta xHTML-nya!

Kode CSS

.GRphotokuL,.GRphotokuR,.GRphotoku{
      padding:1%; /* code by: gubhugreyot */
      background:#eee;
      box-shadow:0 0 10px #555;
}
.GRphotokuL{
      float:left;
      margin:5px 15px 5px 0;
}
.GRphotokuR{
      float:right;
      margin:5px 0 5px 15px;
}
.GRphotoku{
      margin:15px auto;
      display:block;
      text-align:center;
}

Cara menggunakan:

Simpan kode css di atas kode ]]></b:skin>
Untuk menampilkan image/gambar di blog gunakan kode html seperti yang terlihat di demo.
Untuk gambar di sebelah kiri (float:left;} gunakan class="GRphotokuL"
Untuk gambar di sebelah kanan (float:right;} gunakan class="GRphotokuR"
Untuk gambar di tengah gunakan class="GRphotoku"
Untuk merubah berbagai bentuk lengkungan image beserta sudut lengkungnya, rubah nilai border-radius dengan memperbesar atau memperkecil (dalam %).
Nilai persen (%) harus dengan kelipatan 10 karena diluar nilai tersebut tak akan bekerja (10%, 20%, 30% ... s/d 100%).
Jika background berwarna gelap, lakukan beberapa perubahan warna pada box-shadow, background dan border.
Panduan menyimpan kode css dapat anda buka di deret menu sebelah kiri blog (Special Tutorials).

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

Update » Kemis WAGE, February, 29, 2012

» Happy Blogging - gubhugreyot «

Energy Saving Mode CSS3 dg Kode CSS & Efek Lebih Simpel

2012-02-28T23:17:00.003-07:00

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

D E M O

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

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

Kode CSS:

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

xHTML

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

Catatan/Keterangan

Simpan kode CSS di atas kode ]]></b:skin>
Simpan xHTML di bawah kode <body> , atau
<body expr:class='"loading" + data:blog.mobileClass'>
Untuk mengatur durasi waktu Energy Saving Mode lakukan perubahan nilai (60s) pada syntax body .bgsGR_esm(kode paling atas!):
```
all 6s ease-in-out 60s;
```
nilai 60s; menciptakan durasi 60 detik energy saving secara rutin bekerja menutup layar dengan background hitam. Untuk merubah durasi menjadi 5 menit maka nilai menjadi 5x60 = 300s. Untuk durasi yang berbeda silahkan hitung sendiri.
Ganti Teks gubhug reyot yang ber-warna merah dengan nama blog anda atau teks lain.
Panduan yang lebih detail untuk memasang dan menyimpan kode Energy Saving Mode dapat dibuka melalui link di bawah ini:
Cara Pasang Kode Energy Saving Mode CSS3

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

Posting » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «

Trick Pasang Jam Digital di Header Blogger Template Designer

2012-02-28T01:38:00.003-07:00

Jika pada beberapa saat yang lalu telah dibahas "Cara buat dan pasang jam digital di header blog" pada "Template Tata Letak", namun karena pada saat ini hampir semua blogger menggunakan "Blogger Template Designer (Perancang Template Blogger)", oleh karena itu agar lebih mudah dan cepat dipahami serta dapat segera terpasang di blog sampeyan, kita membahasnya sekali lagi.

D E M O

Buka link demo di bawah ini agar anda dapat melihat bagaimana jam digital ini mampu memberikan sensasi yang cukup menarik untuk sebuah blog.

Demo Jam digital di header blog

Javascript:

<script type="text/javascript">
/* Jam Digital - by: gubhugreyot */
//<![CDATA[
var pewaktuID = null;
var pewaktuJalan = false;
function jammati() {
        if (pewaktuJalan) {
                  clearTimeout(pewaktuID)
        }
        pewaktuJalan = false
}
function tunjukkanwaktu() {
        var b = new Date();
        var a = b.getHours();
        var c = b.getMinutes();
        var e = b.getSeconds();
        var d = a;
        d += ((c < 10) ? ":0": ":") + c;
        d += ((e < 10) ? ":0": ":") + e;
        document.clock.GRjamdigital.value = d;
        pewaktuID = setTimeout("tunjukkanwaktu()", 1000);
        pewaktuJalan = true
}
function jamhidup(){
        jammati();
        tunjukkanwaktu()
}; //]]>
</script>

Kode CSS:

.header-inner{position:relative;}
.header-inner .GRdigit{
       position:absolute;
       top:20px;
       right:10px;
       padding:5px;
       border:4px solid #666;
       background:#333;
       z-index:99;
}
.GRdigi{
       font-family:MS Sans serif;
       font-size:28px;
       color:#00FFFF;
       font-weight:bolder;
       border:2px dotted red;
       padding:5px 0;
       display:block;
       float:right;
       text-align:center;
       width:125px;
       background: #003fa6;
       background:-moz-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
       background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#003fa6),color-stop(6%,#0454c5),color-stop(32%,#08327c),color-stop(53%,#021035),color-stop(76%,#021035),color-stop(96%,#043b72));
       background:-webkit-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
       background:-o-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
       background:-ms-linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
       background:linear-gradient(top,#003fa6 0%,#0454c5 6%,#08327c 32%,#021035 53%,#021035 76%,#043b72 96%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003fa6',endColorstr='#043b72',GradientType=0); 
       text-shadow:2px 2px 2px #000;
       box-shadow:0 0 5px #000;
}

xHTML Digital Clock:

<form class='GRdigit' name='clock'><input class='GRdigi' name='GRjamdigital'/></form>

Cara Pasang Jam

Login ke Blogger.
beberapa saat setelah login halaman baru akan terbuka (Dasbor/Dasboard).
Klik Rancangan/Design.
Klik Edit HTML.
Lakukan Backup Template. Buka Panduan Backup Template di sini.
Klik Expand Widget Template.
Cari kode:
```
<div class='region-inner header-inner'>
```
Gunakan Ctrl+F untuk mempermudah dan mempercepat pencarian kode. Panduan mencari kode dapat di buka di sini.

Copy dan paste-kan xHTML digital clock di bawah kode tersebut. Bentuk kode akan menjadi seperti ini:

<div class='region-inner header-inner'>
<form class='GRdigit' name='clock'><input class='GRdigi' name='GRjamdigital'/></form>

Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya.
Cari kode </head>, kemudian copy dan pastekan Javascript di atasnya.
Cari kode <body>, atau
```
<body expr:class='"loading" + data:blog.mobileClass'>
```
Tambahkan kode onLoad='jamhidup()' pada tag pembuka body tersebut hingga kodenya menjadi seperti ini:
```
<body expr:class='"loading" + data:blog.mobileClass' onLoad='jamhidup()'>
```
Jika kode tak sama persis yang terpenting lakukan penambahan kode sesuai petunjuk!
Klik Simpan Template (Save Template) dan lanjutkan membuka blog untuk lihat hasilnya.

Catatan/Keterangan:

Untuk mengatur posisi Digital Clock anda dapat melakukan pengaturan pada nilai top dan right. Anda bisa juga mengganti dengan bottom dan left. Sesuaikan dengan rencana penempatan Digital Clock (sisi kanan atau kiri header blog):
```
.header-inner .GRdigit{
       position:absolute;
       top:20px;
       right:10px;
       padding:5px;
       border:4px solid #666;
       background:#333;
       z-index:99;
}
```
Tutorial tentang menggabungkan jam digital ini dengan efek CSS3 dapat anda ikuti melalui link di bawah ini:
Digital Clock Animatif dg Efek CSS3!

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

Posting » Seloso PAHING, February, 28, 2012

» Happy Blogging - gubhugreyot «

Menampilkan tips (tooltip) di widget Blog Archive - Blogger

2012-02-27T07:19:00.005-07:00

Jika blog anda mempunyai lebar sidebar terlalu sempit dan widget Blog Archive terletak di situ maka teks link arsip blog akan bertumpuk-tumpuk karena lebar tak tercukupi. Atau mungkin teks link arsip blog menggunakan font berukuran kecil hingga untuk membaca setiap link harus memelototkan mata? Mengapa tidak anda coba menggunakan tooltip agar semua daftar posting di arsip blog terbaca dengan mudah?! Banyak keuntungan yang diperoleh dengan menampilkan tips di arsip blog. Selain pengunjung merasa lebih nyaman, andapun akan lebih mudah melakukan penataan widget archive. Mungkin saja widget tersebut dapat anda tambahkan properti css white-space:nowrap; agar teks link tidak bertumpuk ketika ruang archive sempit? Atau mungkin saja memang anda perlu memperkecil ukuran font-nya agar terlihat rapi?! Dalam gambar disamping (letakkan cursor di atas gambar untuk perbesar!) kita bisa lihat salah satu masalah yang terjadi saat widget blog arhive mempunyai lebar terlalu sempit. Setiap daftar posting menjadi bertumpuk sehingga daftar arsip tampak berderet begitu tinggi.

Ada dua kemungkinan berkaitan dengan upaya menampilkan tips di widget Blog Archive:

Menggunakan tootip defaul browser.
Tooltip akan ditampilkan sesuai browser yang digunakan untuk membuka blog. Jika menggunakan cara ini anda hanya perlu melakukan sedikit modifikasi di widget Blog Archive dan tooltip langsung bisa terlihat.
Menggunakan jQuery Simple Tooltip atau tooltip yang lain.
Cara ke dua memungkinkan kita untuk melakukan berbagai perubahan pada tampilan tooltip. Anda bisa rubah ukuran font, ketebalan font, warna font (color), mengatur ukuran box tooltip, memberi warna atau menampilkan berbagai variasi pada background tooltip. Cara ini juga akan memberi keindahan pada blog dan memberi kesan eksklusif.

D E M O

Setelah demo terlihat, arahkan cursor anda pada setiap link daftar arsip blog yang terletak di sidebar kanan (Blog Archive).

Demo Tooltip Arsip Blog

Kita akan buat terlebih dahulu agar Blog Archive mampu menampilkan tips di setisp daftar link-nya, setelah itu anda bisa menentukan pilihan terbaik yang cocok menurut anda!

Cara membuat tooltip di widget Blog Archive

Login ke Blogger.
Setelah halaman Dasbor (Dasboard) terbuka, cari dan klik Rancangan (Design).
Pilih dan klik Edit HTML.
Lakukan Backup Template.
Klik Expand Widget Template.

Cari kode :

<li><a expr:href='data:i.url'><data:i.title/></a></li>

Ganti dengan kode berikut:

<li><a expr:href='data:i.url' expr:title='data:i.title'><data:i.title/></a></li>

Klik Simpan Template (Save Template).
Buka Blog dan lihat hasilnya.

Tooltip Blog Archive dg Simple jQuery Tooltip

Jika anda menggunakan metode kedua ini untuk menampilkan tooltip di widget Blog Archive, maka disamping terlihat lebih cantik, menarik serta bebas untuk melakukan pengaturan tampilan tooltip, andapun bisa memanfaatkan tooltipnya pada link-link lain di luar widget Blog Archive. Yah ...., tentu saja akan jauh lebih menarik dan blog semakin cantik.

Cara membuat

Tambahkan class="GRtipz" pada kode perubahan yang terlihat di atas, sehingga kode perubahan bentuknya seperti berikut:
```
<li><a class='GRtipz' expr:href='data:i.url' expr:title='data:i.title'><data:i.title/></a></li>
```
Buat Simple jQuery Tooltip. Panduan dan tutorialnya bisa anda buka melalui link tutorial di bawah ini:
Panduan membuat Simple jQuery Tooltip

Catatan/Keterangan:

Anda bisa mengikuti panduan cara backup template dan cara mencari kode html di template dengan membuka "Special Tutorials" yang terletak di deret menu sebelah kiri.
Bagi yang blognya sudah menggunakan tooltip, anda bisa lakukan sedikit perubahan kode agar tooltip dapat berfungsi pada widget Blog Archive.

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

Posting » Senin LEGI, February, 27, 2012

» Happy Blogging - gubhugreyot «

Membuat Header Blog dengan 3 Elemen

2012-02-25T18:51:00.010-07:00

Header blog dengan 3 elemen akan lebih mempermudah pengguna saat ingin menampilkan berbagai widget (gadget), iklan, teks, image atau kode html lain ke dalam box header. 3 elemen header terdiri atas elemen header default yang berisi blog title dan blog description, elemen header kiri (baru) serta elemen header kanan (baru). Lebar elemen dapat dibuat sesuai selera dan kebutuhan dan diperhitungkan dalam persen. Elemen header baru kanan dan kiri akan mempunyai fungsi dan kegunaan tak berbeda seperti elemen-elemen yang telah tersedia sebelumnya, seperti elemen sidebar, main, crosscol atau footer.

Arahkan cursor ke arah screenshoot di atas maka akan terlihat 2 widget (slideshow dan profil) yang berada disamping kiri dan kanan header default blogger yang berisi blog title dan description title. Ke-2 buah widget (gadget) berhasil ditampilkan dengan sangat mudah setelah 2 elemen baru header kita buat. Bentuk penambahan elemen baru yang terdapat di Page Elements (Elemen Laman) bisa terlihat dalam screenshoot di samping!

Demo Penggunaan Elemen Baru di Header Blog

Dalam demo akan bisa dilihat sebuah gadget blogger (Tampilan slide - Album web Picasa) berhasil ditambahkan di header berkat elemen baru yang dibuat di bagian header. Blog demo ini menggunakan 1 buah elemen header baru di sebelah kanan!

Kode CSS-1:

.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: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(153,151,151,0.1) 100%);
       background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a999797',GradientType=0 );
       margin:5px;
}

Kode CSS-2:

#header{
        float:right;
        width:50%;
        margin:0;
        padding:0;
}
#GR_headerRight{
        float: right;
        width: 25%;
        margin:0;
        padding:0; 
}
#GR_headerLeft{
        float: left;
        width: 25%;
        margin:0;
        padding:0;
}

xHTML

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='CSS3 Blogger Tutorial (Header)' type='Header'/>
      </b:section>
<div style='clear:both;'/>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

Cara Membuat Header 3 Elemen

Login ke Blogger.
Setelah login dan halaman Dasbor (Dasboard) terbuka, cari dan klik Rancangan (Design).
Lanjutkan klik Edit HTML.
Lakukan Backup Template. Panduanya bisa dibuka di Special Tutorials yang ada di deret vertical menu sebelah kiri halaman blog.
Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode. Buka panduan mencari kode HTML di Special Tutorials
Copy dan pastekan Kode CSS-1 di atas kode ]]></b:skin>
Cari kode
```
]]>
</b:template-skin>
```
Kode ini letaknya beberapa kode di atas kode </head>
Copy dan pastekan Kode CSS-2 di atas kode
```
]]>
</b:template-skin>
```
Cari kode:
<div class='region-inner header-inner'>

Tambahkan kode xHTML baru hingga menjadi seperti kode xHTML di atas. Kode yang perlu di tambahkan adalah :

<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
       .......
       .......
<div style='clear:both;'/>

Klik Simpan Template (Save Template)
Klik Elemen Laman (Page Elements)
Coba gunakan elemen baru untuk menambah gadget!
Buka blog dan lihat hasilnya.
Selesai dan monggo silahkan bungkus widget-widget tercantik sampeyan di tempat baru yang indah ini.

Catatan/Keterangan:

Pada Kode CSS-1 menggunakan background rgba. Background bisa diganti sesuai selera seperti misalnya background transparent atau yang lain.
Untuk merubah lebar elemen header, lakukan perubahan pada persentase lebar header kiri, header (default) dan header kanan. Jumlah lebar ke-3 elemen header sebesar 100%.
Membuat elemen baru di header blogger template designer tidak dibatasi untuk 1, 2 atau tiga elemen saja. Jika dikehendaki kita dapat membuat sesuai jumlah yang diinginkan. Di bawah ini ada sebuah link yang di dalamnya berisi panduan untuk membuat header blogger dengan 2 elemen. Silahkan klik untuk mengikuti panduannya:
Cara membuat header blogger dengan 2 elemen

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

Posting » Minggu KLIWON, February, 26, 2012

» Happy Blogging - gubhugreyot «

Trick Buat & Ciptakan Page peel di Blogger

2012-02-18T22:22:00.004-07:00

Mengapa aku katakan sebagai tips atau trik buat & ciptakan page peel? Mengapa tidak kita sebut saja "Tutorial Blogger cara membuat page peel di Blogger Template Designer?" atau mungkin "Panduan cara membuat dan memasang page peel?" He... he.. sampeyan tak perlu memikirkannya terlalu dalam. Ini hanyalah sekedar tips dan trick saja agar lebih banyak "teks" yang dapat dibaca mesin pencari. Bukankah lebih banyak diantara sampeyan semua yang menggunakan kata atau kalimat seperti "tutorial", "cara membuat" , "cara pasang" dan "panduan ....." saat melakukan pencarian (browsing)? Diluar itu ...? Ha... ha... tentu saja memang ada trick yang harus dipatuhi untuk membuat page peel.

Page peel yang pada dasarnya merupakan sebuah halaman berisi link dan biasa diletakkan pada pojok blog (atas, kanan, bawah, kiri) disertai animasi gerak melalui image dan file flash ini memang tak sekedar desain biasa. Desain page peel yang dibuat dalam bentuk iframe seperti yang akan kita buat ini memang membutuhkan penanganan khusus.

Harus menggunakan image dengan ukuran yang tepat.
Semua file flash (.swf) dan image harus diupload di file hosting. Anda bisa gunakan google sites (untuk file flash) dan di halaman posting blogger (file image).
Javascript yang digunakan harus dalam bentuk link sehingga sampeyan harus mengupload javascriptnya terlebih dahulu di file hosting (dapat dilakukan di google code atau google sites ).

D E M O

Agar lebih jelas bagaimana sebenarnya page peel yang akan kita buat, sampeyan bisa lihat demo-nya. Dalam demo telah disertakan juga javascript beserta link file flash dan image yang diperlukan untuk membangun page peel secara lengkap. Silahkan download file-file teersebut kemudian upload untuk digunakan di blog.

DEMO Page peel

Langkah membuat page peel

Copy javascript yang disertakan dalam demo.
Download file flash (swf) dan image yang digunakan.
Upload file-file tersebut di file hosting. File flash bisa nada upload di google sites dan file image sebaiknya upload di halaman posting blogger.
Pastekan file hasil upload dalam javascript.
Upload javascript (di google sites atau google code) dan gunakan linknya, hingga kita dapatkan kode javascript page peel dalam bentuk seperti ini:
Link javascript page peel
```
<script src="page-peel.js" type="text/javascript">
```
Bersamaan dengan mempersiapkan javascript page peel, silahkan lakukan login ke blogger.
Setelah masuk di Halaman Dasbor (Dasboard), klik Rancangan (Design).
Beberapa elemen akan terlihat di halaman "Elemen Laman (Page Elements)".
Klik Edit HTML.
Setelah halaman Edit html terlihat, lakukan backup template terlebih dahulu
Cari kode:
<body> atau
<body expr:class='"loading" + data:blog.mobileClass'>
Letakkan dan simpan javascript di bawah kode tersebut.
Klik "Simpan Template (SAVE Template)".
Buka blog dan lihat hasilnya.

Catatan/Keterangan:

Untuk mengikuti panduan cara backup template dan cara mencari kode html silahkan buka Special Tutorials di deret menu vertical sebelah kiri.
Anda dapat melakukan percobaan terlebih dahulu dengan semua file yang tersedia di javascript. Setelah selesai dan berhasil menampilkan page peel dengan baik, segera lakukan upload terhadap file flash (di google sites) dan file image (di halaman posting blog). Menggunakan file yang diupload sendiri akan lebih aman dan mempunyai kecepatan loading lebih baik.
Panduan upload file di google site dapat anda buka di sini.
Jika ingin menggunakan gambar (image) yang dibuat sendiri, gunakan ukuran yang sesuai dengan file gambar yang telah disertakan.
Ganti URL :
http://gubhugreyot.blogspot.com yang terdapat dalam javascript dengan URL yang ingin dipasang sebagai link page peel.

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

Posting » Ngahad PON, February, 19, 2012

» Happy Blogging - gubhugreyot «

Trick Spesial Buat Tab Menu Horizontal di Atas Header Blog

2012-02-16T10:57:00.004-07:00

Selama ini jika sampeyan menggunakan widget blogger yang berfungsi sebagai tab menu horizontal (seperti widget Blog List, Link List dan Pages) letaknya pasti di antara header blog dan box posting serta sidebar. Memindahkannya ke bagian lain, seperti di atas header memang bisa dilakukan setelah elemen header dirubah menjadi maxwidgets='2' showaddelement='yes', namun hasil yang didapatkan tak akan sama dengan ketika widget tetap berada ditempat semestinya, yaitu di bawah header. Memaksakan pemindahan widget tab menu horizontal di atas header blog justru akan membuat tab menu terlihat dalam bentuk deret vertical dengan tampilan yang jauh dari semestinya. Hal seperti ini terjadi karena pada elemen header tidak menyertakan beberapa kode css yang berfungsi membangun sebuah horizontal tab menu.

Ada sebuah cara untuk membuat widget yang berfungsi sebagai tab menu horizontal tersebut agar bisa ditempatkan di atas header blog. Satu-satunya jalan adalah dengan membuat sebuah elemen baru yang dilengkapi dengan komponen pembangun tab dengan posisi di atas header. Dengan elemen baru ini nantinya di dalam elemen laman (page elemen) blog anda akan bertambah satu elemen baru tepat di atas header blog dengan kemampuan untuk mendefinisikan kode html yang terdapat pada widget blogger yang berupa horizontal tab menu, seperti halnya elemen yang terdapat di bawah header. Screenshoot disamping memperlihatkan pada elemen laman telah bertambah dengan 1 (satu) elemen baru di atas header.

D E MO

Tanpa melihat demo beberapa sobat blogger mungkin masih kurang memahami apa yang tersampaikan di atas. Agar lebih jelas bagaimana bentuk tab menu horizontal hasil penambahan widget Blog List blogger yang dibuat melalui Add a Gadget dengan posisi di atas header, silahkan buka dengan klik link demo di bawah ini.

D E M O widget Blog List di atas Header Blog

Cara membuat Elemen di atas header yang berfungsi sebagai pembangun tab horizontal

Login ke Blogger
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Backup template. Buka panduan backup template di sini !.
Cari kode <header>. Panuduan cara mencari kode html di template dapat anda buka di sini !.

Copy dan paste-kan kode HTML berikut tepat di atas kode <header>. Kode HTML dan tag <header> akan berbentuk seperti ini:

Kode HTML Elemen Baru

<div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left tabs-fauxborder-left'>
    <div class='fauxborder-right tabs-fauxborder-right'/>
    <div class='region-inner tabs-inner'>
      <b:section class='tabs' id='GRaboveheader' maxwidgets='2' showaddelement='yes'/>
      <b:section class='tabs' id='GRaboveheader-overflow' showaddelement='no'/>
    </div>
    </div>
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>


<header>

Klik Simpan Template (Save Template).
Klik Elemen Laman (Page Elemen).
lihat "Elemen Baru di atas Elemen Header.
Silahkan gunakan untuk membuat Widget baru yang berupa horizontal tab menu. dengan Klik Add a Gadget.
Selesai.

Catatan/Keterangan:

Buatlah menu horizontal menggunakan gadget blogger Link List atau Blog List.
Jika anda membuat halaman blog statis, setiap judul akan ditampilkan sebagai "Pages" gadget dan membentuk tab menu horizontal di bawah header. Drag ke atas elemen header agar bisa ditampilkan di atas header blog.
Anda bisa memanfaatkan elemen baru ini untuk penambahan gadget/widget lainnya.
Semoga bermanfaat dan menambah kekayaan modifikasi serta semangat untuk terus menuangkan semua kreatifitas anda melalui blog!

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

Posting » Kemis KLIWON, February, 16, 2012

» Happy Blogging - gubhugreyot «

Trick Ampuh Pastikan Ukuran Background Header Blogger Template Designer

2012-02-13T01:52:00.006-07:00

Membuat background image di header blog "gampang-gampang susah", tetapi juga "susah-susah gampang". Memilih dan menentukan "image (gambar)" yang akan dijadikan background header jelas-jelas adalah awal "munculnya penyakit bingung" yang bikin kepala mot-mot-an. Banyak memang gambar yang dapat kita cari dan temukan. He.... bagus-bagus lagi! Tapi, begitu saatnya harus menentukan satu yang dirasa cocok dan pas...., uah.... bingun (he..he... bingung, broer!). Mo yang bentuk gambar pemandangan, bunga nyang bru mo mekar, lukisan abstrak, photo monyet menari, kerbau lagi berak atau ..... gambar ayam jago ma betina nyang lagi main-kejar-kejaran? He... kalian ... nggak usah terlalu njelimet mikirnya. Ambil satu gambar, buat ukurannya yang pas lalu upload di blogger dan ... segera lihat hasilnya! And .... klo bosan ... he ... buat lagi yang baru! Hiii... gampang, toh. Satu persoalan nyang bikin bingun (e...eh ... kok bingun lagi, sory ... sory ...!!) teratasi sudah. Kemudian masih ada lagi persoalan baru. Gimana, ya, cara pasangnya?! Hoo... ini mah gampang. Login aja ke blogger kemudian lakukan "Edit pada elemen header di Page Elements (Elemen Laman)". Habis ini baru satu lagi persoalan baru muncul dan benar-benar bikin kepala sedikit "mo pecah". Berapa sih sebenarnya ukuran width dan height yang diperlukan untuk "si background header blog?".

Bagi kalian yang sudah terbiasa pakai "Adobe Photoshop" memang bukan lagi jadi persoalan serius (meski mungkin tetap nggak bakalan sekali jadi membuatnya) namun bagi beberapa sobat blogger yang lain pasti ini akan jadi persoalan besar yang "akhirnya lebih sering jadi pembangkit keputusasaan". Satu yang terpenting ketika akan membuat background image di header Blogger Template Designer (Perancang Template Blogger) adalah "Jangan sekali-kali gunakan tool Susutkan agar sesuai atau dalam bahasa londo-nya Shrink to fit". Menggunakan tool ini hampir tak ada manfaatnya karena background header tak akan pernah sesuai dengan lebar dan tinggi header sesungguhnya. Jika sampeyan pernah mencobanya pasti akan tahu betapa justru blog jadi kacau balau nggak karuan.

Mengatasi persoalan menentukan width dan height background header "dengan tingkat akurasi 99,99% dapat kita lakukan dengan bantuan jQuery dan sedikit script. Sampeyan tak perlu menyimpan kodenya secara permanen karena hanya dibutuhkan untuk sekali penggunaan. Cukup copy seluruh kode kemudian simpan melalui widget HTML/Javascript (Elemen Laman | Add a Gadget | HTML/Javascript). Lanjukan dengan buka blog dan yang terakhir cari serta klik button pencari lebar dan tinggi header blog. Lha.... setelah ketemu tinggi dan lebar header-inner yang dibutuhkan untuk membuat background image, segera hapus kembali jQuery dan scriptnya.

Cara menggunakan kode

Agar lebih cepat dalam membuat background image di header blog, silahkan buka yang ini terlebih dahulu.

Tips & Trick membuat background image header blog

Setelah tuntas dengan tutorial dari link di atas, silahkan lanjutkan dengan langkah-langkah berikut ini.

Login ke Blogger
Halaman Dasbor (dasboard).
Pilih dan klik Rancangan (Design).
Page Elements. Pilih salah satu Add a Gadget (sembarang) kemudian klik
Setelah window baru terbuka (Add a Gadget - Tambahkan sebuah Gadget), pilih dan klik HTML/Javascript.
Copy dan Pastekan semua script dan xHTML ke dalam box HTML/Javascript.
Klik SIMPAN (SAVE).
Buka Blog kemudian cari dan klik button yang bertuliskan Blog Header Width. Catat berapa width header blog dan gunakan sebagai ukuran lebar (width) background image header blog.
Refresh blog dan lanjutkan dengan klik button yang bertuliskan Blog Header height.
Gunakan ukuran yang ditampilkan sebagai ukuran tinggi background header blog.
Segera buat background image untuk header blog sesuai ukuran width dan height yang didapatkan menggunakan software yang sampeyan punya kemudian upload melalui elemen header blog yang terdapat di Elemen Laman (Page Elemen).
Selesai! Dengan selesainya pembuatan bakground header bloggger template designer ini maka artinya sampeyan benar-benar sudah merasakan ampuhnya trik sederhana yang mujarab khasiatnya!

Javascript dan xHTML Pengukur Lebar dan Tinggi Header

Javascript dan xHTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<button class="geta">Header Blog Width</button>
<button class="getb">Header Blog Height</button>
<script type="text/javascript">
//<![CDATA[
function showWidth(b,a){
$("div").text("The width for the Blog "+ b+" is "+a+"px.")}
$(".geta").click(
function(){
showWidth("Header",$("#header-inner").width())
});
function showHeight(b,a){
$("div").text("The height for the Blog "+b+" is "+a+"px.")}
$(".getb").click(
function(){
showHeight("Header",$("#header-inner").height())
});
//]]>
</script>

Catatan/Keterangan

Semua proses di atas harus dilakukan dalam blog yang belum menggunakan background image pada header. Jika anda telah memasang background image di header silahkan dihapus terlebih dahulu karena background image yang anda gunakan akan membuat hasil yang diperoleh tidak valid!.
Lakukan klik button "Blog Header Width" terlebih dahulu baru kemudian refresh (reload) halaman blog anda. Setelah blog kembali terlihat klik "Blog Header Height".
Setelah selesai hapus kembali seluruh kode yang digunakan di widget HTML/Javascript melalui Elemen Laman.
Jika blog anda sudah menggunakan jQuery-1.3.2.js atau yang setara dengan fungsi jQuery tersebut, silahkan gunakan script dan xHTMLnya saja.
Jika anda ingin mengikuti tutorial lengkap tentang cara membuat background image pada header Bloger Template Designer, silahkan buka panduan berikut:
Tips & Trick membuat background image header blog
Trick ini sudah dicoba di template Blogger "Mudah (Simple)" yang dibuat oleh Josh Peterson.
Bagi yang kode templatenya tak sama anda harus mencari bentuk kode header-inner nya dan sedikit mengubah script.
Semoga bisa mengatasi persoalan membuat ukuran background image di blogger Template Designer (Perancang Template Blogger).

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

Posting » Ngahad LEGI, February, 12, 2012

» Happy Blogging - gubhugreyot «

Cara Kilat Tingkatkan Jumlah Pengunjung dengan Widget Blog's Stats Blogger

2012-01-31T22:54:00.003-07:00

Bersamaan sampeyan mulai membaca posting ini, perkenankan saya mohon maaf yang sesesar-besarnya karena sebenarnyalah sampeyan telah termakan sebuah tipuan "blogger gila si gubhugreyot". "Apa-apaan, nich? Tipuan yang mana, ya? Apa, sich maksudnya?", pasti tersembul pertanyaan seperti ini di hati sampeyan sambil pikiran berputar mencoba menganalisa tipuan seperti apa yang sebenarnya sudah berlaku. Yah..., posting kali ini memang benar-benar sebuah panduan khusus yang bertujuan untuk membuat sampeyan semua supaya jadi penipu bagi pengunjung blog. Karena aku yakin bahwa diantara sampeyan pasti ada yang mau menerapkan tutorial ini di blog, oleh karena itu sebelum pengunjung tertipu oleh sampeyan semua, akan lebih afdol jika sampeyan duluan yang aku tipu. He... he... gimana? Masih bingung?!

Jika sampeyan orang yang cukup jeli, membaca judul di atas (silahkan baca baca lagi dengan cermat!) pasti akan timbul pertanyaan, "masa iya, sich widget blog's stats bisa mempercepat peningkatan jumlah pengunjung blog?". Hui.... pasti sampeyan jadi lebih bingung karena "menyangsikan judul di atas adalah sama saja dengan menyangkal kebenaran mutlak yang sudah aku buktikan". Hanya dalam tempo sesingkat-singkatnya pengunjung blog yang terdata melalui widget blogger plugin ini bisa mencapai jumlah ribuan! Gila, nggak? Hiiii... ini baru hebat. Mana ada tips dan trik dari blogger lain yang bisa membuat ilmu pelarisan blog seperti ini?! Hu..., nggak percaya? Klo nggak percaya silahkan sampeyan ikuti panduan di bawah ini. He... he ..., ampe lupa. Silahkan sampeyan lihat dulu demonya biar percaya klo omongan aku benar-benar nyata dan bukan kibulan semata. Sss....sstt dalam demo ini posting baru beberapa gelintir tapi, sssttttssststttttttt....sstttt hiiii, .... pengunjungnya udah lebih dari 1 juta. Lha sampeyan jadi satu pengunjung tambahan yang baru!!

D E M O

Yang ini namanya tipuan read more! Ihik... setelah read more nggak ada apa-apa lagi, wek.....!!
Orang kode dan panduan lengkapnya ada di demo sekalian, ha....ha...ha....

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

Posting » RABO, February, 01, 2012

» Happy Blogging - gubhugreyot «

Membuat Kode Posting Lightbox Lebih Simple

2012-01-28T08:31:00.005-07:00

Posting dengan kode yang berderet terlalu panjang dan rumit pasti membuat siapapun kesulitan untuk melakukan cek ulang, baik saat terjadi kesalahan penulisan ataupun saat harus dilakukan update ulang posting. Posting image, terlebih dalam bentuk gallery adalah salah satunya. Saat banyak image diperlukan untuk melengkapi posting kita akan melihat deretan kode html (di posting mode Edit HTML) yang begitu bejibun bikin kepala pening. Persoalan seperti ini memang perlu penanganan khusus hingga kode html di halaman posting bisa banyak terkurangi. Kode CSS adalah solusi paling tepat yang bisa kita andalkan. Dengan bantuan kode CSS maka bisa jadi kode html di box posting akan terkurangi hingga 50% lebih saat banyak image kita libatkan. Meskipun pada intinya tutorial tentang efisiensi penggunaan kode diposting image ini diperuntukkan pada penggunaan lightbox image viewer di blogger, namun demikian karena kode yang kita buat ini juga berlaku secara umum pada keseluruhan fungsi posting image, maka bisa saja dengan mudah digunakan untuk berbagai posting lain yang tidak bersentuhan dengan lightbox.

Contoh bentuk dasar kode posting lightbox

Di bawah ini ada 2 (dua) macam contoh kode yang digunakan untuk posting menggunakan lightbox. Kode pertama adalah kode html yang dibuat tanpa bantuan penambahan kode css penyederhana posting image, sedang contoh yang kedua telah menggunakan fungsi baru hasil penambahan kode css.

Kode posting lightbox yg tanpa bantuan css:

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img height="..px" src="thumbnail.jpg" width="..px" style="float:left;margin:5px 15px 5px 0;padding:10px;border-radius:6px;box-shadow:0 0 8px #000;border:1px solid #aaa;" /></a>

Kode posting lightbox yg lebih simple (dg css):

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Dari contoh di atas bisa dilihat betapa dengan bantuan kode css jumlah kode html yang digunakan menjadi sangat jauh terkurangi. Itu hanya untuk sebuah image. Silahkan perkirakan berapa persen kira-kira efisiensi kode yang tercipta jika kita postingkan 10 buah image. Yah ... pasti jauh lebih besar dari yang terbayangkan.

Untuk mendapatkan tutorial cara mengefektifkan dan meminimalisasi penggunaan kode html untuk posting image, silahkan klik link di bawah ini:

Tips dan trik membuat kode posting image lebih simpel

Setelah memahami bagaimana cara membuat bentuk kode posting image yang paling ringkas dengan hasil yang super melalui panduan yang dibuka melalui link di atas, kini kita tinggal menambahkan kode untuk lightbox. Jika pakai lightbox yang umumnya digunakan blogger kita hanya perlu tambahkan kode rel="lightbox[gallery-1]" pada tag "a", sehingga bentuk kodenya menjadi seperti berikut:

Contoh kode pada lightbox (umum)

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Jika menggunakan lightbox berdasar kode dan panduan di gubhugreyot, kode htmlnya sbb:

Lightbox Image Viewer for Blogger

Contoh kode pada lightbox image viewer:

<a href="big-image.jpg" rel="GRlightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Lightbox slideshow

Contoh kode pada lightbox slideshow

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Penggunaan kode posting image dengan menggunakan lightbox berdasarkan penempatan (poisisi) image.

Image di posisi sebelah kiri (left)

Image di sbl kiri (left):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Image di posisi sebelah kanan (right)

Image di sbl kanan (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfr" src="thumbnail.jpg" /></a>

Image di tengah (centre)

Image di tengah (centre):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfc" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Image poisis Tak satupun (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfn" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Gallery:

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></div>
<div style="clear:both"></div>

Catatan/Keterangan:

rel="GRlightbox[gallery-1]" diperuntukkan untuk lightbox image viewer for blogger. Panduan membuat lightbox ini bisa dibuka melalui link di bawah ini:
Panduan Membuat Lightbox Image Viewer for Blogger
rel="grsslightbox[gallery-1]" diperuntukkan untuk lightbox slideshow. Panduan membuat lightbox slideshow bisa dibuka melalui link di bawah ini:
Panduan Membuat Lightbox slideshow

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

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - gubhugreyot «

Membuat Slideshow CSS3 u Image Gallery Lightbox

2012-01-27T12:28:00.003-07:00

Slideshow ini hanya dibuat dengan css3, namun demikian anda boleh bandingkan dengan yang dibuat menggunakan javascript. CSS3 transition, CSS3 transform, box-shadow, text-shadow dan border-radius mampu menciptakan slideshow yang sangat indah dan takkan mengecewakan untuk digunakan di blog. Dengan hanya menggunakan kode css tentu saja slideshow css3 ini menjadi sangat enteng bebannya. Membuatnyapun terhitung sangat mudah hingga dalam waktu singkat bisa menjadi salah satu bagian dari blog sampeyan. Seperti kata pepatah, tak kenal maka tak sayang, tak makan maka perut keroncongan (he.. he...ngawur, ya?!), kita langsung saja menuju tkp untuk menyaksikan demo css3 slideshow yang telah digabungkan dengan lightbox.

D E M O Slideshow CSS3

Sekalipun slideshow ini didesain untuk menjadi sebuah gallery bagi lightbox, namun anda tetap bisa menggunakannya secara bebas tanpa harus menggunakan lightbox. Untuk menghilangkan fungsi lightbox cukup dengan membuang kode rel="GRlightbox[mygallery-1]". Jika pada demo hanya digunakan untuk menampilkan 6 (enam) buah image, namun demikian anda bisa menambahnya hingga sebanyak yang anda mau. Tentu saja penambahan image ini harus dipertimbangkan dengan controll yang digunakan. Semakin banyak image maka akan semakin bertambah pula controllnya hingga mungkin saja akan membuat terlalu penuh box slideshow-nya. Hal lain yang harus dipertimbangkan adalah kecepatan loading. Semakin banyak image maka loading akan semakin lama yang kadang membuat pengunjung bosan menunggu.

Cara Membuat Slideshow CSS3

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan backup template. Buka panduannya di sini!
Cari kode ]]></b:skin>. Panduan cara cepat mencari kode html di template bisa dibuka di sini!
Copy dan pastekan kode CSS tepat di atasnya.
Klik Simpan Template (Save Template).

Kode CSS Slideshow CSS3

#GRslideshow{
       margin:20px auto;
       text-align:center;
       position:relative;
       width:300px;
       height:225px;
       background:#ddd url(http://gubhugreyot.googlecode.com/files/bg_gubhugreyot-slideshow-css3.jpg) center no-repeat;
       background-size:300px 225px;
       border-radius:8px; 
       border:2px solid #555;
       padding:10px;
       box-shadow:0 0 4px #000; 
}
#GRslideshow:hover{box-shadow:-2px -2px 2px #555, 5px 5px 8px #222;}
#GRslideshow ul,#GRslideshow li,#GRcontroll,#GRcontroll li,#GRcontroll li a{list-style:none;margin:0;padding:0;border:0 solid;}
#GRpreview li{position:absolute;top:0;left:0;z-index:0;}
#GRpreview li a img{
       opacity:0;
       filter:alpha(opacity=0);
       transition:2s;
       -o-transition:2s;
       -moz-transition:2s;
       -webkit-transition:2s;
       -ms-transition:2s;
       border-radius:4px;
       width:300px;
       height:225px;
       margin:8px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
}
#GRpreview li:target{z-index:5;}
#GRpreview li:target a img{opacity:0.6;filter:alpha(opacity=60);}
#GRslideshow:hover li:target a img{opacity:1.0;filter:alpha(opacity=100);}
#GRslideshow #GRcontroll{
       position:absolute;
       bottom:100px;
       left:0;
       width:95%;
       z-index:10;
       text-align:center;
       opacity:0;
       filter:alpha(opacity=0); 
}
#GRslideshow #GRcontroll,#GRcontroll li a{transition:0.6s;-o-transition:0.6s;-moz-transition:0.6s;-webkit-transition:0.6s;-ms-transition:0.6s;}
#GRslideshow:hover #GRcontroll{bottom:12px;opacity:1.0;filter:alpha(opacity=100); }
#GRcontroll li{display:inline-block;}
#GRcontroll li a{
       padding:1px 6px;
       margin:0;
       text-align:center;
       border-top:1px solid #aaa;
       border-bottom:1px solid #aaa;
       border-radius:2px;
       font-weight:500;
       font-size:12px;
       text-decoration:none;
       color:#fff;
       background:#555;
       text-shadow:1px 1px 1px #000;
}
#GRcontroll li a:hover, #GRcontroll li a:focus {
       box-shadow:0 0 6px #000;
       border-color:#00F;
       outline:none;
       color:#FF0;
       background:#333;
       transform:scale(1.2);
       -o-transform:scale(1.2);
       -moz-transform:scale(1.2);
       -webkit-transform:scale(1.2);
       -ms-transform:scale(1.2); 
}
#GRcontroll li a:active{
       transform:scale(0.8);
       -o-transform:scale(0.8);
       -moz-transform:scale(0.8);
       -webkit-transform:scale(0.8);
       -ms-transform:scale(0.8);
}
#GRcontroll li a:visited{color:red;}
#GRview1 a img,#GRview2 a img,#GRview3 a img,#GRview4 a img,#GRview5 a img,#GRview6 a img,#GRview7 a img,#GRview8 a img,#GRview9 a img,#GRview10 a img,#GRview11 a img,#GRview12 a img{margin:0;padding:0;border:0 solid;}

Gunakan kode berikut di halaman posting

xHTML Slideshow CSS3

<div id="GRslideshow"> 
    <ul id="GRcontroll"> 
        <li><a href="#GRview1">1</a></li> 
        <li><a href="#GRview2">2</a></li> 
        <li><a href="#GRview3">3</a></li>
        <li><a href="#GRview4">4</a></li> 
        <li><a href="#GRview5">5</a></li> 
        <li><a href="#GRview6">6</a></li> 
    </ul> 
    <ul id="GRpreview">
        <li id="GRview1"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[mygallery-1]"><img alt="img1" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a></li>
        <li id="GRview2"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img2" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a></li> 
        <li id="GRview3"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[mygallery-1]"><img alt="img3" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a></li>
        <li id="GRview4"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img4" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></li> 
        <li id="GRview5"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bwbunga-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img5" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bwbunga-01.jpg" /></a></li>
        <li id="GRview6"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot_burungku-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img6" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot_burungku-01.jpg" /></a></li> 
    </ul>
</div>

Catatan/Keterangan:

Untuk membuat lightbox agar bisa dipadukan dengan slideshow css3, buka panduan cara membuatnya di sini
Gunakan image (thumbnail) slideshow dengan ukuran 300px(width)x225px(height).

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

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - gubhugreyot «

Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

2012-01-26T11:46:00.005-07:00

Meninggalkan kode CSS3 saat membuat widget atau kelengkapan blog yang lain rasanya seperti memasak sayur tanpa garam. Kurang lengkap hingga sedikit hambar rasanya! Begitu pula dengan lightbox slideshow yang telah terpostingkan beberapa waktu berselang. Tanpa penambahan kode css3, lightbox slideshow ini memang sudah cukup menarik, namun jika kita berikan sentuhan box shadow, text shadow, border radius, dan sedikit animasi melalui css3 transition dan css3 transform tentunya akan jadi terlihat lebih fantastis. Kejelian menambahkan kode css3 dan memilih bagian yang harus di modifikasi menjadi bahian yang sebenarnya sangat bergantung kepada selera. Oleh karena itu pengembangan lighbox slideshow melalui css3 ini semoga bisa menjadi sumber referensi yang bermanfaat.

D E M O

D E M O Lightbox Slideshow

Beberapa bagian penting yang harus dirubah:

Sekalipun pada dasarnya penambahan kode css3 lightbox hanya dilakukan pada kode css, namun sedikit perubahan juga perlu dilakukan pada javascriptnya. Pengontrol lightbox seperti next, previous, play slideshow, stop slideshow, dan close yang sebelumnya berupa teks (dalam javascript) dihilangkan dan diganti dengan beberapa image yang berfungsi sebagai button pengontrol. Silahkan download kode CSS-nya untuk mengetahui apa saja kode css3 yang ditambahkan hingga lightbox slideshow ini terlihat berbeda.

Kode CSS dan Javascript Lightbox Slideshow plus CSS3

Link javascript & kode CSS Lightbox Slideshow

<link href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/css/gubhugreyot-lightbox-ss-css3.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://gubhugreyot-lightbox-ss1.googlecode.com/files/gubhugreyot_lightbox-ss-1.2.js"></script>

Cara menggunakan lightbox slideshow

Simpan seluruh kode (link kode css dan javascript) di atas kode </head>, kemudian lakukan posting menggunakan lightbox.

Kode Posting Lightbox Single Image

<a href="image.jpg" rel="grsslightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Kode Posting Lightbox-Gallery

<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Panduan Lengkap

Panduan menggunakan lightbox slideshow plus css3 ini tak berbeda dengan lightbox sldeshow yang telah terpostingkan sebelumnya. Yang berbeda hanya pada link kode CSS dan link javascript lightbox slideshow. Silahkan buka panduannya melalui link di bawah ini.
Cara menggunakan lightbox slideshow
Jika tertarik untuk membuat lightbox yang tanpa slideshow, silahkan buka link berikut:

Lightbox image viewer for blogger

Membuat lightbox mengharuskan blogger untuk bisa membuat image gallery lightbox. Ikuti panduan cara membuatnya disini:
Cara membuat Image Gallery u Lightbox

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

Posting » Kemis WAGE, January, 26, 2012

» Happy Blogging - gubhugreyot «

Tips & Trik Membuat & Menggunakan Lightbox di blogger

2012-01-23T07:58:00.001-07:00

Membicarakan tentang lightbox yang berfungsi sebagai image viewer di blogger tentu tak akan lepas dari lightbox blogger plugins yang sudah terinstall di template. Perlu diketahui bahwa lightbox blogger plugins ini memang telah menjadi satu bagian terintegrasi dalam blog dan akan aktif bersamaan dengan saat kita mulai menggunakan template blogger dan memulai blogging.

Menilik penerapan plugins dengan metode seperti yang dikembangkan blogger (lightbox) sesungguhnya dalam beberapa hal dapat menimbulkan masalah baru apabila pengguna tidak menyadarinya. Pengintegrasian secara langsung menimbulkan masalah baru ketika seorang blogger mencoba menggunakan widget lightbox yang bersumber dari luar blogger dimana sumber kinerja preview image pada lightbox baru tersebut menggunakan kode rel="lightbox". Kode html ini ternyata identik dengan kode yang digunakan pada lightbox blogger plugins sehingga ketika fungsi lightbox dijalankan maka lightbox baru akan bekerja berbarengan dengan lightbox blogger plugins. Agar masalah seperti ini bisa dihindarkan, ada 2 ( dua) cara yang dapat digunakan.

Matikan terlebih dahulu fungsi lightbox blogger plugins sebelum menggunakan lightbox baru.
Gunakan lightbox (image viewer) yang menggunakan kode berbeda dengan yang digunakan pada lightbox blogger plugins (kode lightbox plugin » rel="lightbox")

Dari ke-2 hal yang tersampaikan di atas, cara pertama merupakan solusi yang paling banyak digunakan blogger agar dapat membuat lightbox baru yang jauh lebih menarik jika dibandingkan dengan lightbox blogger plugins. Untuk menonaktifkan lightbox blogger plugins ikuti langkah berikut:

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Setelan (Settings).
Klik Format (Formatting).
Cari Tampilkan gambar dengan Lightbox (Showcase images with Lightbox). Ada dua pilihan berkaitan dengan lightbox. Set pengaturan pada posisi "No".
Klik Simpan Setelan (Save Settings).
Selesai.

Dengan perubahan setting pada posisi "No" maka secara otomatis lightbox blogger plugins tak lagi difungsikan sehingga lightbox baru dapat segera dibuat dan digunakan.

Jika pada cara pertama kita harus menonaktifkan terlebih dahulu fungsi lightbox blogger plugins, untuk cara ke-2 kita bebas untuk menonaktifkan atau tetap membiarkan lightbox plugins. Jika kita tetap membiarkan lightbox dalam keadaan aktif maka hal ini berarti dalam blog, ada dua buah lightbox yang berbeda yang dapat dipergunakan secara bersamaan. Agar lightbox baru bisa difungsikan maka kode pengaaktifan lighbox baru harus dibuat berbeda dengan kode yang telah digunakan lightbox blogger plugin (rel="lightbox"). Bagaimana caranya? Tentu saja harus mencari lightbox baru yang sesuai dengan syarat yang telah disebutkan di atas. Dimana kita harus mencari? He... he... ya ..., segra saja browsing dan temukan yang sesuai atau ..... he... he ...., yah... daripada posing silahkan sampeyan buka saja di sini! (Lightbox Spesial untuk Blogger) dan di sini! (Lightbox Slideshow), serta di sini! (Lightbox : Demo & Tutorial).

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

Posting » Selasa LEGI, January, 23, 2012

» Happy Blogging - gubhugreyot «

Cara membuat Elemen Baru di Footer Blogger Baru (Template Designer)

2012-01-14T13:39:00.005-07:00

Elemen di bagian footer blogger baru atau dikenali templatenya sebagai "Template Designer" memang tak dapat di dilihat oleh siapapun tanpa melakukan perubahan pada beberapa kode html yang letaknya tak seberapa jauh dari tag penutup body (</body>). Elemen footer yang pada "Page Elements - Add and Arrange Page Elements" terlihat sebagai "Attribution memang sengaja dibuat tidak seperti elemen yang lain oleh blogger. Selain hanya dibuat sebagai elemen tunggal dan sekaligus "dikunci" sehingga ridak dapat digeser posisinya (dengan cara "drag"), elemen yang di dalamnya berisikan teks "nama template" dan "powered by blogger atau dalam bahasa Indonesia Diberdayakan oleh Blogger ini juga dibuat "patent" atau "tak dapat diothak-athik" kode htmlnya. Agar kita bisa memanfaatkan bagian footer untuk diisi dengan widget baru sedikit perubahan harus dilakukan. Sebagai contoh hasil penambahan elemen baru di bagian footer sampeyan bisa melihat gambar di atas. Adapun hasil yang diperoleh dan berhasil ditampilkan di halaman blog bisa dilihat melalui link demo. Setelah demo berhasil dibuka, lihat pada ujung terbawah halaman blog. Agar lebih mudah untuk melakukan proses penambahan elemen baru, silahkan ikuti panduan berikut ini.

D E M O

Login ke Blogger.
Halaman Dasbor (Dasboard)
Rancangan (Design)
Edit HTML
Backup Templates. Untuk melakukan Backup Template buka Special Tutorials yang terletak di menu sebelah kiri.
Cari kode:
```
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
```
Gunakan Ctrl + F untuk mempermudah pencarian. Panduan cara cepat cari kode html template dapat dibuka di Special Tutorials.
Ganti kode di atas dengan kode berikut:

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

Di atas kode kode tadi terdapat kode seperti berikut:

<b:section class='foot' id='footer-3' showaddelement='no'>

<b:section class='foot' id='footer-3' showaddelement='yes'>

Simpan Template (Save Template).
Elemen Laman (Page Elements).
Setelah Page Element terbuka akan terlihat Elemen Baru Footer yang lengkap dengan Add a Gadget. Coba dengan fungsi "drag" yang sekarang sudah bisa digunakan.
Selesai. Silahkan gunakan semaksimal mungkin!

Contoh hasil penggunaan elemen baru footer:

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

Update » Setu Pahing, January, 14, 2012

» Happy Blogging - gubhugreyot «

Membuat - Memasang Scroll Box Widget Popular Posts Blogger

2012-01-14T09:46:00.001-07:00

Ada dua cara untuk membuat atau memasang scroll box pada widget popular posts blogger plugins.

Menggunakan kode CSS
Menggunakan kode html di bagian body.

Ke dua cara di atas menghasilkan fungsi yang sama, hanya cara yang digunakan berbeda. Jika kita gunakan kode CSS maka kode bisa kita simpan dalam template melalui add a gadget atau disimpan di atas kode ]]></b:skin>, sedangkan untuk xHTML kita harus menyimpan di antara tag pembuka body (<body>) dan tag penutup </body> melalui halaman "Edit HTML".

D E M O

Bentuk Scroll Box Widget Popular Posts Blogger Plugins dapat sampeyan lihat dengan membuka link demo di bawah ini.

D E M O

Cara membuat Scroll Box Popular Posts dg Kode CSS

Login ke Blogger.
Halaman Dasbor (Dasboard).
Rancangan (Design).
Edit HTML
Backup Template.
Cari kode ]]></b:skin>. Letakkan kode CSS di atas kode tersebut.
Simpan Temlate (Save Template).
Selesai (Finish).

Kode CSS

.popular-posts{
       overflow:auto;
       height:250px;
}

]]></b:skin>

Cara membuat Scroll Box Popular Posts dg xHTML

Login ke Blogger.
Halaman Dasbor (Dasboard).
Rancangan (Design).
Edit HTML
Klik Expand Widget Template.
Backup Template.
Cari kode <div class='widget-content popular-posts'>.
Ganti kode di atas dengan kode berikut

<div class='widget-content popular-posts' style='height:250px;overflow:auto;'>

Simpan Temlate (Save Template).
Selesai (Finish).

Catatan/Keterangan:

Buka Special Tutorials yang terletak di menu sebelah kiri jika membutuhkan "Panduan Backup Templates dan Panduan Cara Cepat Cari Kode HTML"
Untuk menambah tinggi box bisa dilakukan perubahan nilai pada height:250px. Semakin besar nilai maka box akan semakin tinggi.
Lakukan perubahan pada beberapa kode css atau xHTML jika menginginkan tampilan yang lebih menarik.
Panduan Cara mengaktifkan/install widget popular posts dapat dibaca di sini!

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

Update » Setu Pahing, January, 14, 2012

» Happy Blogging - gubhugreyot «

Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

2012-01-12T20:41:00.003-07:00

Pilihan lain untuk membuat Ticker Popular Posts Blogger Plugins Widget dapat dibuat juga dengan menggunakan javascript. Tak banyak berbeda dengan ketika kita menggunakan kode html marquee hanya jika kita menggunakan javascript tag marquee tak lagi digunakan. Javascript dalam bentuk link sudah tersedia hingga jika tak mau terlalu repot bisa langsung kalian pakai. Hanya sekedar saran, jika ingin lebih aman dan lancar javascript ini bisa kalian upload di file hosting sehingga tak ada orang lain yang menggunakan link-nya. Kode CSS dalam ticker ini sudah dilengkapi dengan kode CSS yang berkaitan dengan widget popular post hingga memungkinkan ticker popular posts blogger plugin ditampilkan lebih sempurna. Jika ingin penampilan berbeda silahkan tambah dengan css lain atau bisa juga modif dibeberapa kode css yang sudah disertakan.

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Untuk membuat special ticker Popular Posts Blogger Widget Plugins ini widget Popular Posts harus diaktifkan terlebih dahulu lewat Add a Gadget.

Login ke Blogger.
Dasbor/Dasboard.
Pilih dan klik fitur Rancangan/Design.
Klik Edit HTML.
Lakukan Backup Template. Buka tutorialnya di sini.
Klik Expand Widget Template/Expand Widget Templates.
Copy dan pastekan kode CSS di atas kode </head>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Cari kode <b:if cond='data:title'><h2><data:title/></h2></b:if>.
Sampeyan bisa gunakan Ctrl + F untuk memudahkan mencari kode. Panduan menggunakan Ctrl + F untuk mencari kode html template bisa di baca di sini.
Di sekitar kode di atas kode lengkapnya seperti di bawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Rubah/hapus kode di atas dan ganti dengan kode baru berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div id='GR_popularposts' onMouseout='copyspeed=marqueespeed' onMouseover='copyspeed=pausespeed'>
<div id='vmarquee' style='position: absolute; width: 98%;'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</div>
</div>
</b:includable>
</b:widget>

SAVE Templates/Simpan Template
Klik kembali Expand Widget Template

Javascript

<script src="http://gubhugreyot-ticker-popularposts.googlecode.com/files/GR_tickerpopularposts.js" type="text/javascript"></script>

Kode CSS

.popular-posts ul{
      margin:0;
      padding:0 5px 0 5px;
}
.popular-posts li{
      margin:0;
      padding:0;
}
.popular-posts .item-thumbnail a img{
      width:70px !important;
      height:70px !important;
      border:1px solid #eee;
      padding:4px;
      background:#aaa;
      border-radius:5px;
      box-shadow:2px 2px 2px #000;
      margin:0 6px 5px 0;
}
#GR_popularposts{
 position: relative;
 width:100%;
 height:250px;
        background:#b1bfb9;
        background:-o-linear-gradient(top, #b1bfb9 0%,#efefef 100%);
        background:-moz-linear-gradient(top, #b1bfb9 0%, #efefef 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1bfb9), color-stop(100%,#efefef));
        background:-webkit-linear-gradient(top, #b1bfb9 0%,#efefef 100%);
        background:-ms-linear-gradient(top, #b1bfb9 0%,#efefef 100%); 
        background:linear-gradient(top, #b1bfb9 0%,#efefef 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1bfb9', endColorstr='#efefef',GradientType=0 );
        overflow: hidden;
        border: 2px solid rgba(0,0,0,0.7);
        border-top-width:12px;
        border-bottom-width:12px;
        border-radius:6px;
        padding:10px 0;
        box-shadow:0 0 8px #444;
}

Catatan/keterangan:

perhatikan Kode CSS yang seperti ini:
```
.popular-posts .item-thumbnail a img
      width:70px !important;
      height:70px !important; 
      ...
      ...
}
```
Jika kolom widget terlalu sempit image pada widget popular posts bisa diperkecil dengan merubah nilai 70px menjadi 40px atau 50px.
Panduan cara mengaktifkan widget popular posts blogger dapat diikuti melalui link di bawah ini:
Cara Mengaktifkan Widget Popular Posts
Demo dan kode menggunakan "New Blogger Template"

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

Update » Jemuah LEGI, January, 13, 2012

» Happy Blogging - gubhugreyot «

Creating a special ticker Popular Posts Blogger Widget Plugins

2012-01-12T10:01:00.003-07:00

Tak perlu harus pakai javascript atau kode html yang njelimet tetapi sebuah ticker spesial dapat kita buat pada widget popular posts blogger plugin. Ticker yang memanfaatkan efek marquee ini berfungsi untuk membuat seluruh popular post berputar ke arah atas dimulai dari popular post pertama hingga yang terakhir dan selalu berulang seperti itu. Dengan efek yang seperti ini tentu saja kita tak perlu sebuah box yang besar atau tinggi. Dengan box ticker berukuran 200px atau mungkin lebih sedikit maka berapapun jumlah popullar post semuanya akan dapat ditampilkan satu semi satu secara sempurna. Dengan bantuan sedikit script yang menyatu dengan tag marquee, pergerakan memutar popular post dapat dihentikan dengan mengarahkan cursor ke dalam box popular posts blogger plugin. Agar lebih jelas, silahkan lihat di demo berikut:

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Untuk membuat special ticker Popular Posts Blogger Widget Plugins ini widget Popular Posts harus diaktifkan terlebih dahulu lewat Add a Gadget.

Login ke Blogger.
Dasbor/Dasboard.
Pilih dan klik fitur Rancangan/Design.
Klik Edit HTML.
Lakukan Backup Template. Buka tutorialnya di sini.
Klik Expand Widget Template/Expand Widget Templates.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Cari kode <b:if cond='data:title'><h2><data:title/></h2></b:if>.
Sampeyan bisa gunakan Ctrl + F untuk memudahkan mencari kode. Panduan menggunakan Ctrl + F untuk mencari kode html template bisa di baca di sini.
Di sekitar kode di atas kode lengkapnya seperti di bawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Rubah/hapus kode di atas dan ganti dengan kode baru berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div style='height:225px;width:98%;border:1px solid #666;border-top-width:15px;border-bottom-width:15px;border-radius:5px;box-shadow:0 0 8px #000;margin:10px auto;padding-top:10px;'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</div>
</b:includable>
</b:widget>

SAVE Templates/Simpan Template

Kode CSS

.popular-posts ul{
      margin:0;
      padding:0 5px 0 5px;
}
.popular-posts li{
      margin:0;
      padding:0;
}
.popular-posts .item-thumbnail a img{
      width:70px !important;
      height:70px !important;
      border:1px solid #eee;
      padding:4px;
      background:#aaa;
      border-radius:5px;
      box-shadow:2px 2px 2px #000;
      margin:0 6px 5px 0;
}

Catatan/keterangan:

perhatikan Kode CSS yang seperti ini:
```
.popular-posts .item-thumbnail a img
      width:70px !important;
      height:70px !important; 
      ...
      ...
}
```
Jika kolom widget terlalu sempit image pada widget popular posts bisa diperkecil dengan merubah nilai 70px menjadi 40px atau 50px.
Demo dan kode menggunakan "New Blogger Template"

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

Update » Kemis KLIWON, January, 12, 2012

» Happy Blogging - gubhugreyot «

Membuat Animasi Background Berjalan (Bergerak)

2012-01-10T02:36:00.005-07:00

Yang ini juga asli product dalam negeri. Dengan hanya secuil javascript sebuah background animasi yang selalu bergerak bisa menjadi bagian dari blog sampeyan. Menempatkannya sebagai background header menjadi sebuah pilihan tepat hingga terlihat sangat atraktif. Membuatnya juga sangat simple karena hanya perlu menyimpan script pertama di bagian header di bawah tag pembuka header (<head>) dan script kedua di atas tag penutup body (</body>). Perlukah kode css untuk animasi background bergerak ini? Yah, tentu saja jika dipandang perlu sampeyan bisa buat tambahan kode css agar bisa ditampilkan lebih cantik di blogger atau blogdetik sekaligus penyesuaian dengan kode html di template. O..., ya ... xHTML yang nantinya dipergunakan bisa sampeyan lihat di bawah ini.

<div id="digerakin" style="width:100%;height:150px;background:url('bg-animasi.jpg') repeat 0px 0px"></div>

Keterangan/Catatan

Ganti bg-animasi.jpg dengan URL image yang akan digunakan sebagai background bergerak.
Sebagai sample sampeyan bisa gunakan URL background image berikut untuk melakukan percobaan.
https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/zhen-bg-sample-001.jpg
Silahkan ikuti panduan dan tutorialnya di Membuat Animasi Background
Silahkan berikan komentar dan jika ada kesulitan aplikasi di blog bisa sampaikan langsung ke si-empunya blog!
Background Animasi bergerak bisa diterapkan di blogdetik yang notabene sedikit terbatasi dalam modifikasi dan improvisasi kode html, oleh sebab itu jika kita gunakan di blogger pasti jauh lebih mudah!

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

Posting: Selasa PON, » January, 10, 2012

» Happy Blogging - gubhugreyot «

Hidden Calendar-Clock Using CSS3-Javascript

2012-01-08T20:55:00.006-07:00

Hidden Calendar-Clock adalah sebuah gabungan kerja antara kode CSS3 yang membentuk fungsi hide & show serta sebuah javascript sederhana pembangun Calendar-Clock. Posisi/letak Hidden Calendar-Clock dapat diatur di kanan-atas, kanan-bawah, kiri-atas atau di kiri-bawah blog. Calendar-Clock menampilkan secara lengkap hari, tanggal, bulan, tahun serta am/pm serta digital clock di ujung paling kanan. Pada demo akan diperlihatkan dimana calendar clock hanya akan terlihat ketika cursor berada di halaman blog. Hidden Calendar-Clock akan menghilang lagi saat anda berpindah ke halaman web/blog yang lain. Muncul dan menghilangnya Calendar-clock mempunyai jeda waktu 1 (satu) detik setelah cursor anda aktif ataupun meninggalkan halaman blog. Hmmm... seperti halnya kata pepatah, tong kosong nyaring bunyinya yang artinya banyak berkata-kata banyak pula muncrat air ludahnya, jadinya aku rasa lebih baik segera lihat saja demonya.
NB: Harap diperhatikan, karena keternatasan dhuwit dan tak mampu bayar hosting atau beli domain sndiri maka jika demo-1 tak bekerja sampeyan dipersilahkan buka demo yang ke-2! Oye?!

D E M O - 1

D E M O - 2

Javascript Hidden Calendar-Clock

<script src="http://gubhugreyot-hidden-calendar-clock.googlecode.com/files/gubhugreyot_calendar-clock2.js" type="text/javascript" ></script>

Kode CSS Hidden Calendar-Clock

body span#GR_calendarclock{
      font-size:16px;
      font-weight:normal;
      text-shadow:1px 1px 1px #000;
      color:red;
      opacity:0.2;
      filter:alpha(opacity=20);
      position:fixed;
      right:10px;
      top:-20px;
      transition:1s 1s;
      -o-transition:1s 1s;
      -moz-transition:1s 1s;
      -webkit-transition:1s 1s;
}
body:hover span#GR_calendarclock{
      opacity:1.0;
      filter:alpha(opacity=100);
      top:5px;
      z-index:999999;  
}

xHTML Hidden Calendar-Clock

<span id="GR_calendarclock"></span>

Cara membuat Hidden Calendar-Clock

Login ke blogger
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan Backup Template.
Cari kode </head> kemudian letakkan javascript di atasnya.
Cari kode ]]></b:skin>. Letakkan kode CSS di atasnya.
Cari kode <body>. Letakkan xHTML di bawahnya
Tetap di kode <body> dan ganti kode tersebut menjadi seperti ini:
<body onLoad='calendarclock()'>
Klik Simpan Template (Save Template).
Buka blog dan lihat hasilnya!

Catatan/Keterangan:

Untuk mengamankan template (Backup Template) dan care cepat Cari Kode HTML dg Ctrl + F buka Special Tutorials yang terletak di menu vertikal sbelah kiri!
Letak Hidden Calender-Clock dapat dirubah di kanan-atas, kanan-bawah, kiri-atas, atau kiri-bawah dengan merubah kode css pada right dan top.
Untuk yang menggunakan New Blogger Templates gunakan tag pembuka body dalam bentuk sepertu di bawah ini.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onLoad='calendarclock()'>

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

Posting » January, 09, 2012

» Happy Blogging - gubhugreyot «

jQuery Simple Image Zoomer

2012-01-08T01:50:00.003-07:00

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

D E M O

D E M O

D E M O

Javascript Simple Image Zoomer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyot-simple-zoomer.googlecode.com/files/gubhugreyot-simple-zoomer.pack.js" type="text/javascript"></script>

xHTML Simple Image Zoomer

<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-001.jpg" width="150" height="225" />

<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-002.jpg" style="width:200px;height:auto;" />   

<img class="gRzoom" data-gRzoomto="700"    src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-003.jpg" width="150" height="130" />

Cara menggunakan Simple Image Zoomer

Login ke blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
Copy dan pastekan javascript di bawah kode <head>.
Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Klik Simpan Template (Save Template).
Gunakan xHTML untuk melakukan posting.
Buka halaman posting untuk melihat hasilnya.

Kode CSS Simple Image Zoomer

.gRzoom{
        border:2px solid #eee;
        margin:6px;
        background:#aaa;
        border-radius:10px;
        padding:10px;
        box-shadow:0 0 8px #000;
}

Keterangan/Catatan

Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
Besaran zoom bisa diatur dengan menambahkan kode data-gRzoomto="700". Nilai 700 dalam satuan pixel (width).
Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.

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

» Happy Blogging - gubhugreyot «

Cara buat Box dg Efek Gelap-Terang (Fade Effect) CSS3

2012-01-05T18:13:00.001-07:00

Panduan atau tutorial (blogger & blogdetik) membuat box dengan efek gelap terang ini bisa digunakan tidak hanya di blogger, namun bisa juga digunakan di blogdetik.

Fade Effect yang tercipta melalui opacity effect sekalipun merupakan efek yang sangat sederhana namun hingga saat ini memang merupakan sebuah efek yang banyak dilibatkan dalam berbagai desain/fungsi. Selain membuatnya cukup mudah, tak dapat dipungkiri bahwa fade effect mampu memberi pengaruh yang luar biasa menarik, terlebih bila dipadukan dengan efek-efek yang lain.

CSS3 sebagai sebuah pengembangan baru kode css memberi andil yang cukup besar bagi blogger untuk mengembangkan efek terang gelap atau fade efect ini. Berbagai efek yang sebelumnya harus dibangun melalui javascript kini bahkan tak perlu lagi dilakukan. Tentang kompabilitas css3? Kita tak lagi perlu lagi kuwatir. Berbagai browser besar setiap detiknya juga selalu meningkatkan kompabilitas mereka terhadap css3. Yah... karena kode css3 tak boleh tidak akhirnya akan menjadi kode utama pembangun desain blog/website karena kesederhanaannya dan kemampuannya untuk membangun berbagai desain animatif. Diwaktu ke depan kita akan lebih merasakannya ketika semua browser sudah kompatible dengan css3 animation.

Kode CSS Box Terang Gelap

.mybox{
        position:relative;
        display:block;
        width:200px;
        max-height:400px;
        background:#fff;
        color:#000;
        overflow:auto;
        padding:20px 15px;
        margin:20px 5px;
        border:2px solid #777;
        border-radius:6px;
        opacity:0.2;
        filter:alpha(opacity=20);
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}

xHTML

<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</div>

xHTML dengan tag p

<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</p>

Contoh xHTML

<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="my photo"><img src="http://1.bp.blogspot.com/-YoVmuudK6W4/TwZIpVtTnFI/AAAAAAAABDQ/BA6tnFyFbCM/s320/myphoto.jpg" width="200" height="150" style="float:left;margin:5px 10px 5px 0;padding:3px;border:2px solid #222;border-radius:6px;" /></a>Photo masa kecilku ketika main petak umpet kemudian tiba-tiba kebelet e'ok!
</div>

Cara membuat Box dengan Efek Terang - Gelap

Login ke Blogger
Dasboard
Design (Rancangan)
Edit HTML
Cari kode ]]></b:skin>
Letakkan kode CSS di atas kode ]]></b:skin>
Klik Save Template
Gunakan xHTML di halaman posting atau di sidebar blog.

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

» Happy Blogging - gubhugreyot «

Cara Memodifikasi Search Form Blogger Plugins

2012-01-05T05:12:00.003-07:00

Tutorial blogger ini mencoba memberikan sebuah trick bagi blogger untuk merubah bentuk dan tampilan search form (orang sering juga menyebutnya sebagai search engine atau dikenal juga sebagai kotak penelusuran) agar terlihat lebih cantik dan menarik. Tak banyak kode css yang diperlukan. Kita hanya butuh satu deret kode CSS saja dan siapapun dapat membuat berbagai gaya yang berbeda. Hal yang penting setelah sampeyan mencoba menggunakan kode CSS ini, segeralah upload background imagenya di blogger agar loading selalu dalam keadaan terjaga. Atau mungkin jika ingin menyesuaikan background search form dengan background halaman blog, cobalah untuk merubah background-nya dengan image berbeda.

Kode CSS

#CustomSearch1_form{
        width:95%;
        background:#333 url('https://sites.google.com/site/gubhugreyot/postimages/bg_hor-grad-brown.gif') bottom repeat-x;
        background-position:0 25px;
        padding:8px;
        border:1px solid #888;
        margin:20px auto;
        color:#aaa;
        border:1px solid #aaa;
        box-shadow:0 0 8px #444;
        border-radius:5px;
}

Cara Merubah Tampilan Search Form

Login ke Blogger.
Halaman Dasbor/Dasboard.
Jika Wudget Search Form belum diaktifkan, silahkan install terlebih dahulu melalui Page Elements » Add a Gadget » Kotak Penelusuran(search Box).
Klik Rancangan/Design.
Klik Edit HTML.
Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempercepat pencarian!
Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>
Klik Save Template.
Buka blog dan lihat hasilnya.

Catatan/Keterangan:

Untuk merubah lebar search form lakukan perubahan pada width:95%;
background-position:0 25px;: 0 = posisi background dalam arah horizontal (x) dan 25px = posisi background dalam arah vertical (y). Jika tak diperlukan kode ini dapat dihilangkan.
Upload image (https://sites.google.com/site/gubhugreyot/postimages/bg_hor-grad-brown.gif) di blogger melalui halaman posting baru kemudian gunakan sebagai background. Langkah ini diperlukan agar background hanya digunakan secara pribadi.
Background dapat dirubah untuk penyesuaian dengan background blog.
Silahkan buka Special Tutorials yang ada di vertical accordion menu (halaman sebelah kiri) apabila membutuhkan panduan tentang cara menyimpan kode dan cara cepat mencari kode HTMl.

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

» Happy Blogging - gubhugreyot «

jQuery Loader: Preload your blog

2012-01-04T20:55:00.003-07:00

jQyery Loader bekerja di awal blog mulai di buka. Animasi menyertai desain loader ini dalam rupa fade effect yang disertai gerak membuka pada layar secara vertical. Yang sangat perlu diperhatikan ketika menggunakan jQuery loader adalah kondisi "ready to use" pada keseluruhan file, baik yang berupa image, javascript, css atau bentuk file lain seperti misalnya video (jika menggunakan). Jika salah satu saja file dalam blog dalam kondisi "mati/tidak dapat diakses" maka halaman blog tak akan mungkin terbuka. Jadi kesimpulannya sebelum menggunakan jQuery loader sebaiknya pastikan bahwa semua data blog benar-benar dalam kondisi "ready to use".

Cara Membuat jQuery Loader

Login ke Blogger
Halaman Dasbor (Dasboard)
Klik Rancangan (Design)
Klik Edit HTML
Cari kode <head>
Copy-Paste: Copy dan pastekan javascript dan kode CSS berikut di bawah kode <head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='http://jquery-loader.googlecode.com/files/jQuery-GR_loader.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
.QOverlay{background:#000;z-index:9999999;}
.QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
.QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!"; }
.QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
.QLoader{background:#ccc;height:1px;}
</style>

Cari kode </body>
Copy-Paste: Copy dan pastekan javascript berikut di atas kode </body>

<script type="text/javascript">
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

Klik kode Save Template
Cek hasilnya dengan membuka blog!

Keterangan/Catatan:

Buka menu Special Tutorials di deret menu sebelah kiri jika membutuhkan panduan tentang cara menyimpan kode HTML dan cara cepat mencari kode HTML menggunakan Ctrl + F
Jika sebelumnya blog telah menggunakan jQuery-1.3.2.min.js atau jQuery yang setara dengan fungsi jQuery-1.3.2.min.js, cukup gunakan satu buah jQuery saja.
Loader blog kompatibel untuk jQuery v1.2.3 s/d v.1.5.2
Loader blog tidak kompatibel untuk jQuery v1.6.0.s/d v1.7.1

Apabila menginginkan loader terlihat lebih awal (secepatnya setelah buka blog), pindahkan kode css-nya di atas </body> sehingga bentuk penataan kodenya (yang di atas </body>) menjadi seperti berikut:

Model Penyimpanan yg lain

<style type="text/css" media="screen">
.QOverlay{background:#000;z-index:9999999;}
.QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
.QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!"; }
.QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
.QLoader{background:#ccc;height:1px;}
</style>

<script type="text/javascript">
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

untuk menampilkan gambar (image) pada loader, tentukan gambar dan ukuran tinggi gambar, kemudian tambahkan di kode CSS. Contoh perubahannya seperti berikut:

Menambah image di loader blog script:

<style type="text/css" media="screen">
.QOverlay{background:#000;z-index:9999999;}
.QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
.QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!"; }
.QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
.QLoader{background:#000 url(backround-image.jpg) center no-repeat;height:200px;}
</style>

Sumber: http://www.gayadesign.com/

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

Update » Jemuah PON, February, 24, 2012

» Happy Blogging - gubhugreyot «

Simple No Right Click Image - Disable Right Click Image

2012-01-04T16:47:00.003-07:00

Daripada harus dipostingkan dikemudian hari yang paling juga bisa lupa,juga agar sampeyan punya pilihan dalam menggunakan kode anti copy image, maka setelah pada posting sebelumnya kita coba membuat sebuah anti copy image "yang sedikit menipu pengunjung" melalui CSS3, untuk kali ini kita tak sekedar membuat anti copy saja, namun benar-benar sebuah fungsi "no right click atau disable right click" karena setelah script digunakan maka "klik kanan mouse" benar-benar tak akan bekerja sama sekali. Sangat sederhana dan teramat mudah digunakan serta compatible dibeberapa browser besar seperti Mozilla Firefox, Opera dan Google Crhome.

D E M O

Cara menggunakan Kode

Tambahkan sedikit script seperti berikut pada tag img.
onContextMenu="return false;"

Cara menambahkan kode dapat dilihat seperti contoh di bawah ini:

<img src="image.jpg" width="..." height="..." style="float:...;margin:..px;padding:..px;" onContextMenu="return false;"/>

No Right Click Image dapat digunakan di semua bagian blog seperti halaman posting ataupun sidebar.

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

» Happy Blogging - gubhugreyot «

Membuat Daftar Posting di Halaman Statis Blogger

2012-01-03T21:12:00.007-07:00

Berbagai hal bisa kita tuliskan sebagai posting di halaman statis blogger yang berjumlah 20 halaman (maksimal). Judul (title) posting dihalaman statis nantinya ditampilkan sebagai link menu yang letaknya bisa kita pilih antara sidebar dan di atas halaman posting (di bawah header). Karena terbatasnya lebar, baik di bawah header ataupun sidebar, sebaiknya title halaman statis dibuat sependek mungkin. Title yang pendek nantinya bisa diperjelas melalui deskripsi di halaman statis tersebut.

Mengisi halaman statis blogger dengan daftar berbagai posting yang telah kita buat juga menjadi salah satu hal yang akan sangat bermanfaat. Halaman statis membuat kita bisa lebih memaksimalkan tampilan daftar posting tersebut karena halaman yang cukup luas. Beberapa kode CSS dan xHTML mungkin akan dapat membantu hingga daftar posting dapat dibuat lebih tertata rapi. Di bawah ini telah tersedia kode CSS dan xHTML yang mungkin sampeyan butuhkan. Untuk lebih memaksimalkan hasilnya atau mungkin juga untuk penyesuaian dengan halaman blog silahkan lakukan beberapa modisikasi melalui perubahan pada kode CSS atu xHTML. O ... ya ... kita telah sediakan dalam dua bentuk box. Box besar digunakan apababila daftar posting dibuat dalam ukuran selebar halaman posting dan kode css dan xHTML ke-2 membagi halaman posting menjadi 2 kolom hingga mampu memuat 2 box daftar posting di kanan dan kiri.

Kode CSS Daftar Posting Box Besar

.boks-daftar-posting-1{
     width:95%; /* by: http://gubhugreyot.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     margin:20px auto;
     padding:20px 15px;
     border-radius:6px;
}
.boks-daftar-posting-1 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 10px 20px;
}
.daftar-posting-1{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-1 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-1 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-1 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111;
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-1 li a:hover{
     color:red; /* by: http://gubhugreyot.blogdetik.com */ 
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar Posting Box Besar

<div class="boks-daftar-posting-1">
        <h3>Panduan Blogger</h3>
    <div class="daftar-posting-1">
        <ul>
            <li><a href="panduan-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-1</a></li>
            <li><a href="panduan-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-2</a></li>
            <li><a href="panduan-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-3</a></li>
            <li><a href="panduan-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-4</a></li>
            <li><a href="panduan-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-5</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML-1</a></li>
            <li><a href="panduan-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-6</a></li>
            <li><a href="panduan-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-7</a></li>
            <li><a href="panduan-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-8</a></li>
            <li><a href="panduan-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-9</a></li>
            <li><a href="panduan-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-10</a></li>
            <li><a href="panduan-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-11</a></li>
            <li><a href="panduan-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-12</a></li>
            <li><a href="panduan-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-13</a></li>
            <li><a href="panduan-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-14</a></li>
            <li><a href="panduan-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-15</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML-2</a></li>
            <li><a href="panduan-blogger-16.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-16</a></li>
            <li><a href="panduan-blogger-17.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-17</a></li>
            <li><a href="panduan-blogger-18.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-18</a></li>
            <li><a href="panduan-blogger-19.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-19</a></li>
            <li><a href="panduan-blogger-20.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-20</a></li>
            <li><a href="panduan-blogger-21.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-21</a></li>
            <li><a href="panduan-blogger-22.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-22</a></li>
            <li><a href="panduan-blogger-23.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-23</a></li>
            <li><a href="panduan-blogger-24.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-24</a></li>
            <li><a href="panduan-blogger-25.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-25</a></li>
         </ul>
    </div>
</div>

Kode CSS Daftar posting Box Kecil

.boks-daftar-posting-2{
     width:45%; /* by: http://gubhugreyot.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     padding:10px;
     border-radius:6px;
}
.boks-daftar-posting-2 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 15px 10px;
}
.daftar-posting-2{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-2 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-2 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-2 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111; /* by: http://gubhugreyot.blogdetik.com */ 
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-2 li a:hover{
     color:red;
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar posting Box Kecil

<div class="boks-daftar-posting-2" style="float:left;">
            <h3>Panduan Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="panduan-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-1</a></li>
            <li><a href="panduan-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-2</a></li>
            <li><a href="panduan-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-3</a></li>
            <li><a href="panduan-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-4</a></li>
            <li><a href="panduan-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-5</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html.html" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML</a></li>
            <li><a href="panduan-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-6</a></li>
            <li><a href="panduan-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-7</a></li>
            <li><a href="panduan-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-8</a></li>
            <li><a href="panduan-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-9</a></li>
            <li><a href="panduan-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-10</a></li>
            <li><a href="panduan-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-11</a></li>
            <li><a href="panduan-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-12</a></li>
            <li><a href="panduan-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-13</a></li>
            <li><a href="panduan-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-14</a></li>
            <li><a href="panduan-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-15</a></li>
        </ul>
    </div>
</div>


<div class="boks-daftar-posting-2" style="float:right;">
            <h3>Tutorial Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="tutorial-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-1</a></li>
            <li><a href="tutorial-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-2</a></li>
            <li><a href="tutorial-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-3</a></li>
            <li><a href="tutorial-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-4</a></li>
            <li><a href="tutorial-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-5</a></li>
            <li><a href="tutorial-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-6</a></li>
            <li><a href="tutorial-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-7</a></li>
            <li><a href="tutorial-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-8</a></li>
            <li><a href="tutorial-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-9</a></li>
            <li><a href="tutorial-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-10</a></li>
            <li><a href="tutorial-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-11</a></li>
            <li><a href="tutorial-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-12</a></li>
            <li><a href="tutorial-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-13</a></li>
            <li><a href="tutorial-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-14</a></li>
            <li><a href="tutorial-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-15</a></li>
            <li><a href="tutorial-blogger-16.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-16</a></li>
        </ul>
    </div>
</div>

<div class="clear"></div>

Cara Menggunakan Kode Daftar Posting

Login ke Blogger
Halaman Dasbor (Dasboard)
Klik Rancangan (Design)
Klik Edit HTML
Cari kode ]]></b:skin>
Letakkan kode CSS tepat di atas kode ]]></b:skin>
Klik Save Template
Buat Daftar Posting di halaman statis sesuai contoh xHTML
Beri Judul yang singkat (misalnya : Daftar Posting)
Terbitkan posting
Buka halaman blog kemudian KLIK Link Menu Daftar Posting (jika sama dengan contoh!)

Catatan/Keterangan

Ke dua kode CSS dan xHTML dapat digunakan secara terpisah (hanya box besar atau box kecil).
Ke dua kode (box) dapat digunakan secara bersamaan.
max-height:500px; berfungsi untuk membatasi tinggi box. Rubah nilainya jika dikehendaki, dimana semakin besar nilainya maka semakin tinggi.
Ini yang sangat penting: Jika anda menggunakan kode yang ke-2 (box kecil), perhatikan pada akhir xhtml box pertama (berwarna merah) dan awal xHTML box kedua (berwarna merah). Agar kedua box di kiri dan kanan dalam posisi sejajar maka kode xHTML akhir box pertama dan xHTML box kedua harus dubuat rapat!
Bukalah menu Sprecial Tutorials yang terletak di deret menu sebelah kiri jika membutuhkan beberapa panduan penting tentang cara menyimpan kode CSS, javascript dan xHTML serta cara cepat mencari kode HTML dengan Ctrl + F.

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

» Happy Blogging - gubhugreyot «

Pasang Widget TV Streaming Online

2012-01-02T14:51:00.001-07:00

Sorry berat, ini sebenarnya posting lama yang saat itu lupa aku terbitkan. Lihat saja apa yang sampaikan dalam teks juga pasti akan terlihat kuno (hanya aku edit di bagian ini!) . Apa boleh buat karena draft yang lupa aku terbitkan ini sudah aku buat beberapa bulan lalu. "He... biar jadinya sedikit lucu tak apalah...! Yah..., biarlah sekalipun jadi posting lucu dan aneh di awal tahun 2012, namun tetap konstektual dan bermanfaat bagi semua."

Nih..., yang baru jadi trend dikalangan blogger. Widget TV online multi channel. Yah ..., blogger dan para netter kini semakin dimanjakan oleh berbagai widget baru yang bersifat menghibur dan memberi banyak kemudahan untuk mengakses info-info terbaru, termasuk melalui TV online yang langsung bisa dinikmati melalui halaman blog. Blog kini tak lagi hanya sekedar berisi teks atau gambar hasil perasan otak dan lelehan keringat yang dibarengi kepulan asap rokok semata. Selain TV online telah banyak widget lain yang bisa memberi banyak hal positif dan gratis bagi para penjelajah blog. Widget SMS gratis, misalnya.

Pingin ngeblog atau blogwalking sembari menikmati tayangan TV online yang terdiri dari beberapa channel? Yah ..., kini blogger ataupun netter "mungkin" tak perlu lagi beli TV-Tuner atau harus menghidupkan TV saat asyik menjelajah web demi web atau blog demi blog. Aktifkan saja salah satu blog yang memberi fasilitas TV online dan kita bisa browsing dengan channel TV yang tetap menyala. Beberapa channel yang tersedia bisa menjadi pilihan saat menikmati TV online ini. Sampeyan bisa pilih AN TV, TV one, Trans 7, Trans TV, SCTV atau beberapa yang lain.

Bagaimana cara menggunakan widget ini?

Tak berbeda dengan pemasangan widget yang lain, widget TV online bisa dipasang melaui halaman posting atau Add a Gadget (Tambah Gadget). Jika ingin menggunakan di halaman posting, sampeyan bisa selipkan xHTML TV online di salah satu bagian dari posting. Apabila ingin menggunakan melalui Tambah Gadget, maka kita harus masuk melalui Page Elements (Elemen Laman).

xHTML TV online Multi Channel

<div style="position:relative;width:540px;height:532px;padding:10px;background:#000;border:4px solid #666;border-radius:8px;overflow:hidden;">
<div style="position:absolute;top:-230px;left:5px;">
<embed id="MivoTV" type="application/x-shockwave-flash" src="http://id.imediabiz.com/MivoTV.swf?r=84674" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" seamlesstabbing="false" quality="high" scale="noscale" menu="true" devicefont="false" pluginspage="http://www.macromedia.com/go/getflashplayer" width="550" height="759"></embed>
</div>
</div>

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

» Happy Blogging - gubhugreyot «

Anti Copy/ No Copy Image using CSS3

2012-01-02T03:37:00.005-07:00

Sebuah fungsi anti copy yang sering juga disebut sebagai no right click, disable right click tidak hanya dapat difungsikan secara total pada sebuah blog ataupun web, namun juga dapat difungsikan pada bagian-bagian terkecil dari blog atupun web, seperti halnya image/gambar. Fungsi anti copy/no right click/disable right click dapat dibangun menggunakan javascript atau kode CSS. Sekalipun sebuah fungsi anti copy tak mungkin seratus persen dapat menjamin blog/web atau image tak dapat dicopy atau dibongkar kode html-nya, namun setidak-tidaknya bisa sedikit menjaga agar beberapa bagian yang yang ingin dirahasiakan tetap aman.

Jika dibanyak panduan dan tutorial ataupun tips & trick blogger sebuah anti copy lebih banyak dibuat menggunakan javascript, namun untuk kali ini kita akan buat menggunakan kode CSS3. Tak banyak kode CSS yang akan kita gunakan, namun anti copy ini cukup mampu memberi sedikit kejutan karena akan terlihat sebagai sebuah tipuan kecil bagi pengunjung. Mengapa kita sebut sebagai sebuah tipuan kecil? Yah ... karena klik kanan akan tetap berfungsi namun bukan lagi fungsi yang berkaitan dengan image atau apa yang sebelumnya diharapkan pengunjung. Bagaimana ini bisa terjadi dan apa maksud sebenarnya? He ... he ... silahkan saja coba dengan klik pada demo yang dapat dibuka melalui link di bawah ini:

D e m o

D E M O

Cara membuat anti copy pada image/gambar
Untuk membuat fungsi anti copy image/gambar menggunakan css3 kita hanya memerlukan kode css yang nantinya harus disimpan di atas kode ]]></b:skin> yang letaknya di atas tag penutup </head>.

Login ke blogger
Halaman Dasbor (Dasboard)
Klik Rancangan (Design)
Klik Edit HTML
Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode. Bagi yang belum jelas buka Special Tutorials yang ada di deret menu sebelah kiri.
Latakkan kode CSS tepat di atasnya
Klik Save Template

Kode CSS dan posisinya thd ]]></b:skin>

/* gubhugreyot * 02 januari 2012 */
.anticopy_left, .anticopy_center{
     position:relative;
     float:left; /* original code by: gubhugreyot.blogspot.com */
     padding:0;
}
.anticopy_center{
     float:none;
     margin:0 auto;
     text-align:center;
}
.anticopy_left:before, .anticopy_center:before{
     content:"";
     padding:5px;
     height:100%;
     margin-top:-5px;
     margin-left:-5px;
     width:100%;
     left:0;
     top:0; /* original code by: gubhugreyot.blogdetik.com */
     position:absolute;
}

]]></b:skin>

Kode HTML posting anti copy: Image di kiri

<div class="anticopy_left">
<img src="image.jpg" style="float:left;margin:5px 15px 5px 0;width:...px;height:...px;" />
</div>

Kode HTML posting anti copy: Image di Tengah

<div class="anticopy_center">
<img src="image.jpg" style="float:none;margin:10px auto;text-align:center;width:...px;height:...px;" />
</div>

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

» Happy Blogging - gubhugreyot «

Cara membuat Reply Comment di Blogger

2011-12-31T12:57:00.007-07:00

Posting ini dimaksudkan untuk semakin melengkapi posting yang sudah ada. Kita akan membuat sebuah fungsi reply comment atau sebuah text link yang difungsikan untuk membalas komentar. Letak teks link dengan bentuk [Reply] ini nantinya berapa diujung terbawah sebuah komentar, tepatnya berada di bawah tanggal saat komentar diterima. Jika sampeyan tak begitu suka dengan link dalam bentuk teks, silahkan ganti teks link tersebut dengan image. Menggantinya cukup mudah karena tinggal hapus [Reply] kemudian tempatkan sebuah link image dalam bentuk kode : <img src="image-reply.jpg" width=".." height=".." border="0" /> pada kode yang dihapus tersebut.

Untuk membuat Reply Comment kita harus membongkar kode html template dengan melakukan "Expand Widget Templates" karena disinilah posisi kode harus ditambahkan. Sebagai tindakan preventif agar template tak rusak ketika terjadi kesalahan saat penambahan kode baru dilakukan, maka sebelum menambahkan kode baru proses backup template wajib/harus dilakukan. Silahkan buka tutorial tentang backup templates dan cara cepat mencari kode html yang terletak di "Special Tutorials" (menu sebelah kiri!) baru lemudian melanjutkan membuat reply comment.

Langkah membuat fungsi reply comment

Login ke blogger
Dasbor
Design/Rancangan
Expand Widget Templates
Backup templates
Cari kode :
<b:include data='comment' name='commentDeleteIcon'/>
Gunakan Ctrl + F untuk mempercepat pencarian kode!
Perhatikan di bawh kode tersebut ada beberapa kode lain yang seperti terlihat di bawah ini!

<b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

Copy kode html berikut!

<span><a expr:href='"https://www.blogger.com/comment.g?blogID=BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Reply]</a></span>

Ganti Blog-ID dengan ID blog Anda. ID blog bisa dicopy dari address bar tepat di atas halaman blog. Lihat kode yang terletak di address bar dan copy ID Blog kemudian pastekan pada kode html reply comment! Lihat contoh ID berikut:

http://www.blogger.com/html?blogID=3579245116022780252&tpl=true

Setelah ID blog dipastekan pada kode html reply comment dan kode html template akan terlihat seperti berikut:

<b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=3579245116022780252&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Reply]</a></span>
          </b:loop>
        </dl>
      </div>

Save Templates
Buka blog yang ada postingnya kemudian buatlah komentar.
Coba gunakan reply comment

Mengganti text link replay comment dengan image
Link image pengganti terlihat bercetak tebal.

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

» Happy Blogging - gubhugreyot «

Lightbox » Blogger Plugins : Cara Mengaktifkan dan Menggunakan

2011-12-29T04:13:00.008-07:00

Ada lightbox yang tak perlu repot-repot kita buat. Lightbox ini merupakan blogger plugins. Sampeyan hanya perlu mengaktifkan lightbox-nya, kemudian gunakan untuk posting. Lighbox Blogger plugins dilengkapi dengan button Close, mini gallery yang berfungsi sebagai image selector sekaligus juga dillengkapi dengan javascript mousewheel yang memungkinkan pengguna untuk menggeser gallery lightbox dengan memanfaatkan scroller (mouse).

Cara mengaktifkan lightbox blogger plugins

Login ke Blogger.
Dasboard
Setelan (Settings)
Format (Formatting)
Tampilkan gambar dengan Lightbox (Showcase images with Lightbox)
Ya (Yes)
Simpan Setelan (Save Settings)

D E M O

Buka link demo di bawah ini untuk melihat hasil penggunaan lightbox dan contoh kode html posting lightbox:

D E M O Lightbox

Cara menggunakan kode

Kode yang digunakan untuk membuat lightbox bekerja sangat sederhana karena kita tak perlu menambahkan kode khusus. Penambahan yang terpenting hanyalah menentukan ukuran width dan height thumnail.

Buatlah image dalam ukuran besar (image.jpg). Sampeyan sebaiknya menggunakan ukuran berkisar 400px (width) hingga 900px (width) dan 200px (height) hingga 500px (height).
Catatan: Preview image dalam lightbox blogger berukuran sekitar 800px (width) dan 500px (height).
Buat Posting dalam Mode Compose
Klik toolbar insert Image untuk upload gambar (image) yang telah dipersiapkan sebelumnya. Tunggu proses upload selesai.
Klik image di kolom (box) posting.
Atur Ukuran image:
- Small : untuk image (thumbnail) berukuran kecil.
- Medium : untuk image (thumbnail) berukuran sedang.
- Large : untuk image (thumbnail) berukuran besar.
Karena image akan dipreviewkan melalui lighbox dalam ukuran besar sebaiknya gunakan small atau medium.
Atur Posisi Image:
- Left: untuk image di posisi sebelah kiri.
- Center: untuk image di posisi tengah.
- Right: untuk image di posisi sebelah kanan.
Menambah Teks: Klik Caption kemudian tuliskan teks yang berhubungan dengan image.
Terbitkan posting.

Gambar Tunggal (Single Image)

Bentuk kode posting lightbox dengan image pada posisi sebelah kiri (Bisa dilihat dengan klik mode Edit HTML).

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-CczUMoPrwg4/TxiFs_RCMwI/AAAAAAAAAA8/yPwMS72vZwg/s1600/.....jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="..." src="http://1.bp.blogspot.com/-CczUMoPrwg4/TxiFs_RCMwI/AAAAAAAAAA8/yPwMS72vZwg/s200/.....jpg" width="..." /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Teks di sini</td></tr>
</tbody></table>

Dalam bentuk sederhana dapat dituliskan sbb:

Image Gallery

Catatan/Keterangan:

Untuk membuat image gallery buatlah kode tanpa terputus (bersambung) antara image pertama hingga terakhir seperti yang terlihat pada contoh kode di atas!

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

» Happy Blogging - gubhugreyot «

Lightbox Slideshow dengan prototype.js dan scriptaculous.js

2011-12-27T18:33:00.012-07:00

Sekalipun lightbox ini sama seperti yang telah terpostingkan sebelumnya, namun satu nilai lebih dari lightbox slideshow ini adalah telah dengan ditambahkannya sebuah fungsi slideshow di dalamnya. Ketika sebuah gallery diaktifkan dengan membuka (klik) salah satu thumbnail maka secara otomatis slideshow akan bekerja. Untuk menghentikan slideshow cukup dengan meng-klik button text yang bertuliskan stop slideshow. Untuk menggunakan lightbox slideshow sampeyan harus upload javascript dan css lightbox-slideshow ke file hosting. Agar lebih praktis dan mudah lakukan saja di Google Sites. Tentang bagaimana cara melakukannya, silahkan bula link di bawah ini:

Panduan cara menyimpan file di Google Sites

Jika deno -1 tidak bekerja silahkan buka demo - 2

D E M O - 1

D E M O - 2

D E M O - Blogger

Cara Membuat Lightbox Slideshow

Karena cara membuat lightbox slideshow tak berbeda dengan lightbox sebelumnya, maka silahkan sampeyan buka tutorialnya dengan klik di sini

Catatan/Keterangan:

Gunakan javascript dan kode CSS yang disertakan di bawah ini!
Sebaiknya gunakan image dengan ukuran lebar di bawah 900px dan tinggi dibawah 500px karena image hanya akan ditampilkan dengan ukuran terbatas.
Untuk thumbnail sampeyan dapat gunakan ukuran dibawah 250px (width) karena thumbnail yang terlalu besar akan memperlambat loading blog. Thimbail yang terlalu besar juga tak akan bermanfaat karena image (gambar) sebenarnya yang berukuran besar akan dipreviewkan melalui lightbox.
Dengan menggunakan lightbox ataupun lightbox slideshow sebenarnya akan banyak menguntungkan blogger karena tak perlu lagi menampilkan image (gambar) dalam ukuran besar dalam posting yang tentu saja akan semakin memperlancar loading blog.
Jumlah image dan thumbnail dalam setiap kelompok (gallery) tidak dibatasi, jadi silahkan tampilkan sebanyak sampeyan suka, hanya perlu sebuah pertimbangan agar tidak terlalu membuat beban loading terlalu besar/berat.
Thumbnail dapat juga diganti dalam bentuk teks
Ada lima buah background image yang terdapat dalam kode CSS lightbox-slideshow yang harus sampeyan upload di file hosting sebelum upload css.
- http://lightbox-slideshow.googlecode.com/files/JQ-loadingLightBox.gif
- http://lightbox-slideshow.googlecode.com/files/blank.gif
- http://lightbox-slideshow.googlecode.com/files/prevlabel.gif
- http://lightbox-slideshow.googlecode.com/files/nextlabel.gif
- http://lightbox-slideshow.googlecode.com/files/closelabel.gif
Upload atau penyimpanan ke-5 background image di atas bisa dilakukan di blogger atau di Google Sites.
Ganti semua background image dalam kode CSS dengan yang telah diupload kemudian baru lakukan upload kode css di Google Sites.

Link Javascript dan Kode CSS Lightbox-slideshow:

<link rel="stylesheet" href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/GR_lightbox-slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://lightbox-slideshow.googlecode.com/files/gubhugreyot_lightbox-slideshow-1.2.js"></script>

Cara menggunakan kode lightbox-slideshow

Single Image

<a href="image.jpg" rel="grsslightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Image Gallery

<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="grsslightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Test/Percobaan:

Sebagai bahan untuk melakukan percobaan silahkan menggunakan kode berikut:

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="grsslightbox[album-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="grsslightbox[album-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="grsslightbox[album-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....<a href="http://gubhugreyot.blogdetik.com" target="_blank">gubhugreyot.blogdetik.com</a>" rel="grsslightbox[album-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>

Catatan/Keterangan:

Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

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

Update » Jemuah PON, January, 20, 2012

» Happy Blogging - gubhugreyot «

Lightbox for Blogger : Beautifull Blogger Image Viewer

2011-12-27T14:00:00.016-07:00

Nggak perlu panjang lebar, semua pasti 'dah pada tahu apa tuh lightbox. Image Viewer yang akan kita buat kali ini nggak pakai jQuery namun menggunakan prototype.js dan scriptaculous.js. Semua javascript dan kode CSS-nya dah lengakap n tinggal pasang di bawah tag pembuka header (<head>). Hanya, ... ini sekedar saran tapi cukup penting : setelah di coba dan berhasil, javascript lightbox dan css lightbox-nya sebaiknya sampeyan upload secara pribadi di file hosting agar bisa digunakan secara pribadi pula. mengapa hal seperti ini penting dilakukan? Ya... tentu saja berkaitan dengan bandwidth. Jika sampeyan upload sendiri pastinya yang akan pakai juga hanya sampeyan sendiri juga, so ... dengan begitu loading bisa cepat dan blog sampeyan tetap car .... lancar ...nggak pakai lelet! He .... he ... You, know?!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!

D E M O: Blogger D E M O

Cara Membuat Lightbox

Login : Login ke Blogger dengan cara:
- Tulis Alamat Email.
- Tulis Password.
- KLIK "Login".
Dasboard/Dasbor : Akan dijumpai sesaat setelah KLIK "Login". Banyak link atau teks link terdapat di halaman ini. Cari dan klik link "Design/Rancangan".
Kembali lanjutkan dengan klik link "Edit HTML".
Back-up Templates :
- KLIK Download template Lengkap/Download Full Templates.
- Simpan file template di folder PC.
- Kembali di halaman Edit HTML.
Cari kode : <head> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode! (lihat menu sebelah kiri: special tutorials.
Letakkan Link kode CSS dan javascript lightbox tepat di bawahnya.
Klik Save Template.

Link Javascript dan Kode CSS Lightbox:

<link href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/01/GR_lightbox-2.04.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script src="http://lightbox-image-viewer.googlecode.com/files/gubhugreyot-lightbox-2.04.js" type="text/javascript"></script>

Cara Penulisan kode Lightbox:

Single Image

<a href="image.jpg" rel="GRlightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Image Gallery

<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Catatan/Keterangan:

Seperti yang sudah tersampaikan di atas, agar loading blog sampeyan tidak terganggu karena "tidak boleh tidak" link javascript dan link CSS lightbox yang ada di posting ini pasti akan digunakan oleh banyak pengguna, maka sebaiknya GR_lightbox-2.04.min.js dan GR_lightbox-2.04.css di upload sendiri di file hosting.
Dalam CSS dan javascript ada 4 buah image yang digunakan sebagai background. Upload juga background-image ini dan ganti yang sebelumnya sudah disertakan.
- http://lightbox-image-viewer.googlecode.com/files/prevlabel.gif (GR_lightbox.css)
- http://lightbox-image-viewer.googlecode.com/files/nextlabel.gif (GR_lightbox.css)
- http://lightbox-image-viewer.googlecode.com/files/loadingAnimation.gif (GR_lightbox.min.js)
- http://lightbox-image-viewer.googlecode.com/files/closelabel.gif (GR_lightbox.min.js)
Untuk upload javascript dan kode CSS silahkan lakukan di Google Sites atau Google Code.
Bagi yang membutuhkan panduan upload dan simpan file (javascript, css dll) di Google Sites, silahkan klik di sini!.
Image.jpg = image dalam ukuran besar.
thumbnail.jpg = image dalam ukuran kecil.
gallery-1 = gallery pertama. Jika ada beberapa kelompok buatlah perbedaan gallery dengan gallery-2, galler-3 ... dsb. Gallery bisa diganti dengan nama yang lain!
Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

Cara Membuat link pada caption

Membuat link pada caption dilakukan dengan cara membuat link pada title dimana symbol atau caracter-nya dituliskan dalam bentuk kode html. Perhatikan contoh di bawah ini disekitar teks yang bercetak tebal (lihat demo single image!).

Penulisan kode secara umum

Menambahkan link pada caption lightbox (dituliskan pada title):

<a href="image.jpg" rel="GRlightbox[gallery]" title="<a href="http://gubhugreyot.blogdetik.com">gubhugreyot.blogdetik.com</a>"><img src="thumbnail.jpg" width="200" height="150" /></a>

Test/Percobaan:

Gunakan kode berikut di halaman posting untuk melakukan percobaan:

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="GRlightbox[gallery-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="GRlightbox[gallery-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="GRlightbox[gallery-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....<a href="http://gubhugreyot.blogdetik.com" target="_blank">gubhugreyot.blogdetik.com</a>" rel="GRlightbox[gallery-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>

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

Update » Jemuah PON, January, 20, 2012

» Happy Blogging - gubhugreyot «

CSS & Javascript Hosting: Simpan file di Google Sites Ditanggung Aman & Tahan Lama

2011-12-26T01:14:00.004-07:00

Kepala jadi pusing klo mikirin dimana harus simpan javascript dan CSS. Hampir semua file hosting, terutama javascript dan CSS hosting telah mati ditelan minimnya dana. Dus..., pada akhirnya Google Sites dan Google Code jadi pilihan yang terbaik karena ditanggung aman dan awet. Jaminan seperti itu sangat penting karena ketika sebuah hosting bangkrut dan javascript atau CSS kita tersimpan di sana, sementara beberapa waktu kita lagi "non aktif" ngeblog, maka .... hancur leburlah blog yang selama ini kita bangun dengan susah payah, telaten hingga mengorbankan banyak waktu dan pikiran, seperti yang telah beberapa kali terjadi di blog ini. Hosting javascript dan CSS di Google Sites maupun Google Code terutama dapat dimanfaatkan secara maksimal oleh sobat2 yang eksis di blogspot/blogger, sedang bagi yang di Blogdetik harap sabar-sabar saja karena apa yng tersimpan di sini tak dapat digunakan di Blogdetik sampeyan. Yah ...., aku sudah coba beberapa kali dengan berbagai cara dan strategi ternyata tetap nggak nembus juga.

Cara SimpanJavascript dan CSS di Google Sites

Untuk memudahkan proses buatlah sebuah account google dengan membuat email di google mail.
Setelah mengaktifkan account google melalui gmail, Buka google sites.
Tulis Alamat Email (contoh: orgil@gmail.com).
Tulis Password.
Klik CREATE
Ada beberapa pilihan template, sementara sebaiknya gunakan saja Blank template. Silahkan klik Blank template.
Isi Your Sites Name dengan nama yang diinginkan. Sampeyan bisa berikan nama sesuai blog yang sampeyan pakai saat ini. (contoh : gubhugreyot).
Tuliskan Captcha pada box yang tersedia.
Klik CREATE SITE. Tunggu beberapa saat!
Klik New page (c) yang terletak di bagian atas-kanan halaman (lihat gambar di atas!).
Isi pada bagian Name your page sesuai dengan apa yang akan disimpan. Jika berupa file javascript maka tuliskan saja javascript.
Select a template to use (Learn more):
Klik pada Web page, kemudian pilih File Cabinet.
Klik CREATE.
Lakukan upload dengan Klik Add File
Setelah file terupload, untuk mendapatkan link hasil upload-nya silahkan klik kanan - copy link (location) pada link download yang terlihat di bawah nama file.
contoh : https://sites.google.com/site/gubhugreyot/javascript/kenyang-otomatis.js?attredirects=0&d=1.
Gunakan kode hingga sebelum kode "?...", seperti contoh di bawah ini :
https://sites.google.com/site/gubhugreyot/javascript/kenyang-otomatis.js
Selesai!
Jika ingin melakukan upload kode CSS, silahkan mulai lagi dari langkah ke-10 (New page (c)). Berikan nama css pada box Name your page:.

Catatan/Keterangan:

Javascript dan kode CSS yang tersimpan di google sites sangat bagus digunakan di blogger/blogspot, namun tidak dapat digunakan untuk blogdetik.
Selain untuk hosting javascript dan CSS berbagai bentuk file yang lain seperti video/movie, music/audio, flash (.swf, .flv) dan image dapat juga sampeyan simpan.
Untuk memudahkan saat cek data file tersimpan, sebaiknya setiap filedikelompokkan sesuai dengan jenis (format) masing-masing. (pemisahan pada langkah ke-10).

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

» Happy Blogging - gubhugreyot «

yourjavascript : Javascript hosting yang masih tersisa

2011-12-25T22:24:00.000-07:00

Berbagai kendala yang dihadapi file hosting gratisan, terutama akibat minimnya sponsor, akhirnya memang benar-benar tak teratasi lagi. Hingga awal akhir tahun 2011 ini satu demi satu file hosting yang menyediakan hosting gratis kode css dan javascript mulai menghilang dari jagad maya. Ada yang lebih mempersempit aktifitasnya dengan hanya membuka hosting image, namun lebih banyak diantaranya memang benar-benar tak lagi mampu eksis karena beban dana operasional yang tak tertanggung lagi. Jika saat ini sampeyan ingin menyimpan javascript, maka selain google group hanya ada satu javascript hosting yang masih bisa dimanfaatkan jasanya, yaitu yourjavascript.com

Cara Menyimpan Javascript di Yourjavascript.com

Menyimpan javascript di yourjavascript.com sedikit berbeda dari biasanya. Anda diharuskan menyertakan alamat email karena link javascriptnya akan dikirimkan melaui email.

Buka yourjavascript.com
Tentukan dan Upload javascript dengan klik Browse.
Tuliskan alamat email.
Klik Upload.
Buka Email dan copy link javascriptnya.

Catatan/Keterangan :

Agar lebih mudah mengambil link javascriptnya sebaiknya gunakan Opera
Yourjavascript.com hanya melayani hosting javascript, sehingga jika ingin upload kode CSS sebaiknya gunakan file hosting yang lain.
Bagi yang aktif ngeblog di Blogdetik javascript hosting satu-satunya yang masih tersisa ini akan sangat bermanfaat sekali karena untuk Blogdetik sampeyan tidak bisa memanfaatkan hasil penyimpanan yang dilakukan di google sites dan google code.

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

» Happy Blogging - gubhugreyot «

Trik Menyimpan Link Javascript dan Kode CSS di Header BlogDETIK

2011-12-25T20:10:00.002-07:00

Tempat paling ideal menyimpan link javascript dan link kode CSS di blog atau web adalah di antara tag pembuka dan tag penutup header. Jika mungkin sampeyan yang suka ngeblog di blogdetik blom tahu bagaimana cara menyimpan kode CSS, javascript, link CSS ataupun link javascript agar bisa berada di header blog, mungkin cara ini bisa menjadi salah satu solusi. He ...he ... mengapa aku sebut sebagai salah satu cara? Yah... karena memang masih ada beberapa cara yang lain yang dapat digunakan. Yap.., mungkin saja akan kita posting di lain waktu.

Cara Simpan Kode CSS & javascript di header blogdetik

Karena blogdetik memang tidak menyediakan ruang khusus penambahan javascript dan kode CSS baru di antara tag pembuka dan penutup header blog (<head> dan </head>), maka agar terbuka sebuah celah (ruang) baru yang memungkinkan kita menyimpan kode CSS dan javascript dalam segala bentuk (kode ataupun link), maka salah satu widget plugin harus diaktifkan terlebih dahulu. Bagimana detail langkahnya? Silahkan ikuti urutan langkahnya di bawah ini!

Login ke Blogdetik melalui lin login berikut Login-Blogdetik.
Setelah halaman Dasbor terbuka, arahkan cursor di atas menu Plugins yang terletak pada deret fitur bagian kiri atau atas halaman dasbor (keduanya punya fungsi sama!). Klik Installed.
Halaman kelola Plugin

Cari WP-Highslide, kemudian klik Aktifkan.
Arahkan cursor ke menu Settings kemudian KLIK WP-Highslide.

Halaman Highslide Options

Pada halaman ini sampeyan akan nelihat sederet link javascript dan link kode CSS dengan bentuk seperti di bawah ini.

<link href='http://URL Blogdetik Anda/wp-content/plugins/highslide/highslide.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://URL Blogdetik Anda/wp-content/plugins/highslide/highslide.js'></script>
<script type='text/javascript'>
    hs.showCredits = false;
     hs.graphicsDir = 'URL Blogdetik Anda/wp-content/plugins/highslide/graphics/';
       hs.outlineType = 'rounded-white';
</script>

Letakkan kode CSS, javascript, link kode CSS, link javascript yang ingin sampeyan simpan tepat di bawahnya, sehingga bentuknya menjadui seperti di bawah ini:

<link href='http://URL Blogdetik Anda/wp-content/plugins/highslide/highslide.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://URL Blogdetik Anda/wp-content/plugins/highslide/highslide.js'></script>
<script type='text/javascript'>
    hs.showCredits = false;
     hs.graphicsDir = 'URL Blogdetik Anda/wp-content/plugins/highslide/graphics/';
       hs.outlineType = 'rounded-white';
</script>

<link href='kode-css-baru.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='javascript-baru.js'></script>

<style type="text/css">
#myCSS{
 width: 400px;
    height: 200px;
    margin:0 auto;
    padding:10px;
    border:2px solid rgba(0,0,0,0.7);
}
</style>

<script type="text/javascript">
letakkan javascript anda di sini!
</script>

Klik Update Options ».
Anda bisa cek letak kode css dan javascript baru yang telah tersimpan di header blog dengan membuka blog kemudian klik kanan pd mouse utnuk membuka source code.

Tutorial berikutnya: Dimana kini kita dapat menyimpan javascript & kode CSS?

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

» Happy Blogging - gubhugreyot «

Berapapun Ukurannya, Background Selalu Pas di Blog: Background Size Property

2011-09-01T20:51:00.002-06:00

Penasaran dan rasa kecewa menggerogoti hati tatkala background blog nggak sesuai dengan lebar halaman blog? Background blog kebesaran? He ...he ... atau mungkin justru kekecilan? Pssssstttt ... nggak perlu marah-marah atau kecewa! Atasi saja dengan menambah sedikit kode CSS background-size property. Nggak percaya? Ho ... ho ... coba saja! Eit... tapi jangan lupa update terus browser-nya dengan yang terbaru. CSS3 tabu untuk dibuka dengan browser-browser yang sudah ketinggalan "sepur". Haiya... Oke?!

Kode CSS background-size property sangat tepat bila digunakan sobat-sobat blogger yang menggunakan background image sebagai latar-belakang/background blog, terlebih bagi yang saat ini menggunakan template blogger dari "New Blogger Templates" ((NBT). Yah..., karena sebagin besar NBT menggunakan image sebagai background body, yang bahkan kebetulan semua background image yang digunakan berukuran jumbo dan berakibat tidak seluruh bagian gambar terlihat di halaman blog. Sebagai perumpamaan, jika misalnya background image yang digunakan berupa gambar sampeyan sendiri yang lagi makan jengkol, maka mungkin yang terlihat hanya berupa muka sampeyan "yang mirip jengkol", sedang jengkolnya sendiri hilang karena background yang kebesaran. Perlu diketahui bahwa background image yang ada di NBT rata-rata menggunakan ukuran lebar sebesar 1800px, sedang sebenarnya yang dibutuhkan 1024px (sesuai lebar layar dan coba bayangkan apabila gambar yang tersedia lebarnya 1800px, maka berapa bagian gambar yang akan hilang?).

Kode CSS Background Size Property

Kode CSS background size property di sini berfungsi untuk merubah ukuran background image secara otomatis agar sesuai dengan ruang yang tersedia. Jadi ketika kita gunakan di bagian body (sebagai background body) maka biar selebar apapun ukuran gambarnya, maka akan terlihat dihalaman blog sesuai lebar body yang digunakan (:sesuai lebar halaman blog!). Ada dua Kode CSS yang bisa digunakan, silahkan pilih salah satu!

Kose CSS yang ini digunakan untuk NBT

Kode CSS I

body{

      background-attachment:fixed;

      background-size:cover;

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Kode CSS II

body{

     background-attachment:fixed;

     background-size:1024px auto;

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Jika diperhatikan di NBT kode CSS syntax body adalah seperti ini (ini hanya satu contoh dari "Travel" NBT)

body {

     font: $(body.font);

     color: $(body.text.color);

     background: $(body.background);

}

Letakkan CSS I atau CSS II tepat di bawahnya sehingga menjadi seperti berikut:

body {

     font: $(body.font);

     color: $(body.text.color);

     background: $(body.background);

}

body{

     background-attachment:fixed;

     background-size:cover;

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Atau bisa juga digabungkan sekalian menjadi seperti berikut:

body {

     font: $(body.font);

     color: $(body.text.color);

     background: $(body.background);

     background-attachment:fixed;

     background-size:cover;

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Silahkan lakukan cara yang sama untuk penggunaan kode CSS II.

Cara menyimpan kode css

Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN
Setelah DASBOARD (Dasbor) terbuka, klik "DESIGN" (Rancangan).
KLIK "Edit HTML" kemudian lanjutkan klik "DOWNLOAD FULL TEMPLATE" (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.
Setelah file template tersimpan dengan aman, silahkan lihat kembali kode-kode di "Edit HTML" kemudian cari syntax body
Contoh:
```
body {

     font: $(body.font);

     color: $(body.text.color);

     background: $(body.background);

}
```
Tambahkan kode baru di bawahnya atau sesuai contoh di atas.
KLIK "SAVE TEMPLATE".

Catatan - Keterangan

Kode CSS I akan membuat lebar background image secara otomatis selebar body/halaman blog.
Kode CSS II diset pada width=1024px. Untuk lebar yang berbeda bisa dilakukan perubahan nilai guna penyesuaian.
Jika kode background size dari IE 8 mau diabaikan, silahkan buang kode :

filter: progid:DXImage .... dan -ms-filter: "progid:DXImage ....
Jika menghendaki kode background size untuk IE 8 dan digunakan di NBT, anda bisa mencari URL background body-nya di Variable definitions yang terletak di bagian atas template. Untuk lebih jelasnya bisa membaca panduan yang berkaitan dengan hal tersebut melalui link di bawah ini :

Panduan Merubah Background Lewat Variable Definitions
Penggunaan pada desain blog/template secara umum menggunakan kode seperti di bawah ini:

body{

     background:#fff url(.../images/bg_body.jpg);

     background-position:left top;

     background-repeat:no-repeat;

     background-attachment:fixed;

     background-size:cover; /* atau background-size:1024px auto; */

     margin:0; /* in IE */

     padding:0; /* in IE */

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Atau dalam bentuk berbeda:

body{

     background:#fff url(.../images/bg_body.jpg) center center no-repeat fixed;

     background-size:cover; /* atau background-size:1024px auto; */

     margin:0; /* in IE */

     padding:0; /* in IE */

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

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

» Happy Blogging - gubhugreyot «

Cara Ganti Background New Blogger Template Lewat "variable definitions"

2011-09-01T15:43:00.003-06:00

Hampir bisa dikatakan "99,9 % blog/web pasti menggunakan minimal 1 (satu) buah gambar/image sebagai background" atau dengan kata yang lain, "99,9 % desain blog selalu menggunakan background-image". Beberapa hal tentunya menjadi bahan pertimbangan yang cukup penting mengapa satu atau beberapa buah background image digunakan untuk melengkapi desain blog, diantaranya tentu saja untuk membuat blog mnenjadi lebih menarik. Bahkan jika kita melihat pada beberapa template dari "New Blogger Template", maka kita bisa melihat betapa background image digunakan secara maksimal pada keseluruhan bagian body dengan melibatkan efek transparansi sehingga background cantiknya selalu terlihat karena bagian-bagian dalam blog dibuat transparan. Ini memperlihatkan bahwa ada sebuah upaya untuk menciptakan daya tarik dan kecantikan blog melalui sebuah gambar atau background image. Agar pengguna bisa mendapatkan background image yang sesuai selera, tak ketinggalan bloggerpun telah menyediakan puluhan gambar yang bisa dipilih sesuka hati dan dapat sampeyan peroleh melalui link "Template Designer" yang terletak di halaman dashboard. Tapi ... sekali lagi .... tapi ...! Namanya juga manusia, sekalipun banyak yang telah disediakan, namun beberapa blogger mungkin merasa belom ada yang cocok dengan seleranya sehingga perburuan mencari backgroundpun dimulai. Lha ... setelah background yang cocok dan sesuai selera telah ditemukan, bagaimana cara pasangnya yang paling mudah dan "cespleng" tanpa merubah banyak kode?

Merubah background image pada body paling mudah kita lakukan lewat :"Variable definitions" yang terletak di template bagian atas. Ketika background kita rubah melalui "variable definitions", maka struktur desain sama sekali tak akan berubah, sehingga ketika kita akan mengganti kembali dengan background bawaan blogger, maka bisa langsung melalui link "Template Designer".

Cara Mengganti Background Image Body

Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN
Setelah DASBOARD (Dasbor) terbuka, klik DESIGN (Rancangan).
KLIK Edit HTML kemudian lanjutkan klik DOWNLOAD FULL TEMPLATE (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.

Setelah file template tersimpan dengan aman, silahkan lihat kembali kode-kode di "Edit HTML" kemudian cari kode "Variable definitions".
Contoh:

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     Travel

Designer: Sookhee Lee

URL:      www.plyfly.net

----------------------------------------------- */



/* Variable definitions

   ====================

   <Variable name="keycolor" description="Main Color" type="color" default="#539bcd" value="#000000"/>

..... dst

....dst

Lanjutkan dengan mencari kode :
<Variable name="body.background" ... dst
Posisi kode tersebut teletak di bawah teks "Variable definitions". Dibeberapa template sangat dekat di bawahnya tetapi bererapa yang lain agak jauh!

Salah satu contoh kode lengkapnya sebagai berikut:

<Variable name="body.background" description="Body Background" type="background"

       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#000000 url(http://themes.googleusercontent.com/image?id=138nRoL9nnp3cpYZSFDboqkpZRjABppHx9mblsjLzm5iheWroBRtOkzISbanbAe9WPshv) no-repeat scroll top center /* Credit: jacomstephens (http://www.istockphoto.com/googleimages.php?id=6278539&platform=blogger) */"/>

Ganti kode yang tercetak miring dengan url image baru yang akan digunakan sebagai background body.
KLIK "SAVE TEMPLATE".

Catatan - Keterangan

Selalu gunakan "Ctrl + F" untuk mempermudah pencarian kode.
Upayakan menggunakan background dengan ukuran tepat (sebaiknya berukuran 1024px(tinggi) dan 683px (lebar)).
Kualitas gambar tidak harus dalam format terbaik, yang penting tetap cukup terlihat bagus agar beban tak terlalu berat.
Agar aman upload dan simpan gambar background baru di blogger saja melalui halaman posting.

Contoh hasil perubahan kode : Background sudah diganti dengan url baru

<Variable name="body.background" description="Body Background" type="background"

       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#000000 url(http://4.bp.blogspot.com/-LFB-hI1KpbU/Tl_rGi88GvI/AAAAAAAAADg/oM95zEG75S4/s1600/wisata_pantai.jpg) no-repeat scroll top center /* Credit: jacomstephens (http://www.istockphoto.com/googleimages.php?id=6278539&platform=blogger) */"/>

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

» Happy Blogging - gubhugreyot «

Panduan BlogDETIK: Mengatur Jumlah Posting di Halaman Utama BlogDETIK

2011-01-12T09:19:00.002-07:00

Pengaturan jumlah posting di halaman utama blog biasanya dilandasi berbagai pertimbangan dengan setiap blogger mempunyai alasan dan kepentingan berbeda. Beberapa blog menampilkan posting di halaman utama dalam jumlah yang sangat besar tetapi beberapa yang lain hanya beberapa saja atau bahkan hanya satu posting. Bagaimana cara mengatur jumlah posting di halaman utama blogdetik?

Sebelum kita lanjutkan mungkin ada yang masih merasa bingung dengan maksud yang tersampaikan lewat judul dan sedikit keterangan di atas. Yang di maksud halaman utama blog adalah halaman yang terlihat ketika URL blog dibuka pada sebuah browser (contoh: http://gubhugreyot.blogdetik.com). Saat blog terbuka maka dihadapan pengunjung akan tersaji posting dalam bentuk utuh atau hanya terlihat sebagian karena posting telah dilengkapi read more. Posting yang terlihat ini jumlahnya bervariasi tergantung pengaturan yang dilakukan pemilik blog.

Cara Mengatur Jumlah Posting di Halaman Utama BlogDETIK

Login ke blogdetik dengan menuliskan User Name dan Password kemudian KLIK "LOGIN".
Setelah halaman Dasbor terbuka, silahkan arahkan cursor ke menu "SETTINGS" yang terletak di sebelah kiri halaman, kemudian KLIK "Membaca".
Akan terlihat halaman baru dengan tulisan "Reading Settings" dan di bawahnya terdapat box pengaturan jumlah posting. Tuliskan jumlah posting yang ingin di tampilkan di halaman utama pada setting "Blog pages show at most".
KLIK "Save Changes".
Buka halaman blogdetik sampeyan dan lihat berapa jumlah posting yang ditampilkan.

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

» Happy Blogging - gubhugreyot «

Panduan blogdetik: Cara Memasang, Menyimpan Kode CSS, Javascript dan xHTML di Template BlogDETIK

2011-01-12T07:56:00.001-07:00

Khabar gembira ini kiranya patut untuk diketahui semua blogger dan khususnya d'blogger. Yah ...., meski sedikit terlambat tak apalah. Eee ...mungkin saja beberapa sobat ngeblog ada yang blom dengar beritanya.

Sejak beberapa waktu belakangan ini banyak sesuatu yang baru terjadi di blogdetik, seperti halnya tampilan dasbor yang baru serta kebijakan baru yang telah diberikan kepada seluruh d'blogger dimana masing-masing kini bebas untuk memasang, menambah atau menyimpan kode HTML baru yang berupa kode CSS, javascript ataupun xHTML. Banyak hal kini bisa kita lakukan terhadap template. Beberapa perubahan dan penambahan kode HTML baru memungkinkan d'blogger untuk merubah desain blogdetiknya hingga wajah yang terlihat baru dan sama sekali berbeda dengan blog bawaan blogdetik bisa kita ciptakan. Jika selama ini sampeyan tak mungkin merubah cursor default menjadi cursor image atau animasi yang dibangun dengan javascript, kini semua itu bisa kita lakukan dengan mudah. Yah ... semudah kita membuatnya di blogspot atau blog yang lain. Jika mungkin sampeyan ingin menampilkan tag cloud animasi cumulus full color seperti yang biasa kita lihat atau mungkin ingin menampilkan tooltip seperti yang terlihat di blog ini ...., he ... he ... sampeyan juga dengan mudah bisa membuatnya. Nggak percaya? Ho ... ho ... silahkan coba saja dan nikmati gaya baru blogdetik sampeyan!

Bagaimana Cara memasang atau menyimpan kode HTML di blogdetik?

Memang ada sedikit perbedaan dalam memasang atau menyimpan kode HTML baru jika kita membandingkan dengan cara yang selama ini kita gunakan di blogspot. Di blogdetik kita harus menyimpannya melalui penambahan widget dan tidak bisa kita lakukan secara langsung di antara tag pembuka <head> dan tag penutup </head> , sekalipun demikian dengan beberapa trik dan penambahan kode khusus (seperti !important - kode CSS), maka berbagai desain dan bahkan modifikasi besar-besaran dapat dilakukan. Dengan berbagai pertimbangan, setelah sekian lama posting yang berkaitan dengan tutorial dan panduan serta tips-trik blogdetik mandeg dari peredaran, maka mulai detik ini kita akan kembali coba postingkan berbagai panduan dan tutorial untuk melakukan berbagai perubahan desain dan modifikasi blogdetik agar blog kebanggaan nasional ini semakin tersupport dan mampu memberikan banyak hal baru kepada blogger dan d'blogger khususnya.

Cara Memasang Javascript, Kode CSS dan xHTML Baru di BlogDETIK

Lakukan login di blogdetik dengan menuliskan USER NAME dan PASSWORD.
Setelah halaman DASBOR terbuka, arahkan cursor pada menu "APPEARANCE" di sebelah kiri halaman.
KLIK pada "WIDGET"
Jika blog mempunyai sidebar lebih dari satu (template 3 kolom atau 4 kolom), pilih di sidebar mana box penambahan kode HTML hendak ditemplatkan dengan KLIK pilihan pada "SIDEBAR" (sidebar 1, 2 atau 3) yang terletak di sebelah kanan atas halaman.
Setelah pilihan sidebar ditentukan, KLIK "SHOW".
Tunggu beberapa saat hingga setting sidebar selesai, kemudian lanjutkan dengan KLIK "TAMBAH" pada Widgetize Any HTML (di sebelah kiri atas halaman).
Widgetize Any HTML akan segera berpindah ke kolom sidebar yang sebelumnya telah kita tentukan. Lanjutkan kembali dengan KLIK "SUNTING" pada Widgetize Any HTML untuk membuka box penambahan kode HTML tersebut.
Pastekan kode HTML (bisa berupa kode CSS, javascript atau xHTML) yang telah dipersiapkan sebelumnya ke dalam box Widgetize Any HTML.
KLIK "SAVE CHANGES" dan bukalah halaman blog untuk melihat hasil perubahan yang berkaitan dengan penambahan kode HTML baru tersebut.

Penambahan Widgetize Any HTML baru di sidebar berbeda

Penggunaan Widgetize Any HTML di blogdetik dibatasi dalam jumlah 10 (sepuluh), meskipun demikian hal ini tak akan banyak membatasi blogger dalam usahanya untuk menampilkan banyak desain baru dan berbagai perubahan atau modifikasi. Dalam 1 (satu) Widgetize Any HTML berbagai kode dapat disimpan di dalamnya tanpa batasan. Sampeyan bisa mencampurnya antara kode CSS, javascript sekaligus xHTML dalam 1 box. Sekalipun demikian penambahan Widgetize Any HTML kadang diperlukan untuk membuat sebuah desain bisa tertampilkan. Saat ingin menambahkan box Widgetize Any HTML baru, silahkan ikuti panduan di bawah ini.

Arahkan cursor ke menu "SETTINGS" (sebelah kiri bawah halaman), kemudian KLIK "Widgetize Any HTML".
Akan terlihat sebuah pertanyaan "berapa widgets?". Tuliskan Jumlah Widgetize Any HTML yang diinginkan. Sebagai catatan: Akan lebih baik jika penambahan dilakukan satu demi satu sesuai kebutuhan saja supaya halaman dasbor tidak terlalu penuh sesak.
KLIK "Update Options" dan lanjtkan dengan mengarahkan cursor ke menu "Appearance". KLIK "Widget" kemudian tentukan di sidebar mana "Widgetize Any HTML" mau ditempatkan (seperti langkah yang di atas-sidebar 1, 2 atau 3).
KLIK Tambah pada Widgetize Any HTML dan selanjutnya tinggal gunakan boxnya untuk menyimpan kode HTML baru yang berbeda.

Selamat mencoba, berkarya, memmbuat dan menampilkan desain baru dan melakukan berbagai modifikasi di blogdetik!

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

» Happy Blogging - gubhugreyot «

Tips-Trik Upload dan Menyimpan Gambar Berukuran Super Besar di Blogger-Blogspot

2010-12-19T11:06:00.004-07:00

Bagi beberapa sobat blogger mungkin masih ada yang belum tahu secara persis bahwa sebenarnya semua gambar, baik berukuran besar atau kecil bisa kita upload dan menyimpannya di blogger. Jika biasanya kita hanya melihat tampilan gambar yang hanya berukuran kecil di halaman posting sebenarnya itu hanyalah untuk penyesuaian dengan ukuran ruang halaman posting saja. Dibalik gambar yang terlihat kecil itu tersimpan sebuah gambar berukuran besar yang sesuai dengan ukuran gambar yang terupload. URL gambar (yang berukuran besar) tersimpan dalam kode HTML-nya dan terdapat pada tag a. URL gambar ukuran riil dapat kita ambil dan digunakan dengan mengambil dengan klik posting MODE EDIT HTML. Agar lebih jelas silahkan ikuti panduan di bawah ini. O ..., ya ..., jika sampeyan ingin melihat seberapa besar gambar yang bisa diupload dan disimpan di blogger silahkan klik gambar di atas. Ada dua gambar berukuran besar hasil upload di blogger lengkap dengan URL-nya. Silahkan klik saja maka dua gambar tersebut akan terlihat secara bersamaan!

Cara upload dan ambil kode HTML gambar

Login ke Blogger.
- Tulis Email Address.
- Tulis Password.
- KLIK LOGIN.
Setelah halaman DASBOARD (Dasbor) terbuka, cari dan klik link POSTING.
KLIK NEW ENTRI.
Pilih pada posting Mode Compose atau EDIT HTML.
Upload gambar sebuah gambar dengan ukuran besar dengan cara klik fitur INSERT IMAGE (fitur bergambar pemandangan) kemudian klik CHOOSE FILE.
Pilih dan tentukan gambar yang akan di upoload (di folder PC) kemudian "OK".
Setelah gambar terupload dan terlihat atau tersimpan di halaman posting. Lanjutkan dengan klik MODE EDIT HTML hingga kode HTML gambar hasil upload terlihat.
Ambil URL gambar dari kode terdepan (tag a) dan jangan yang di tag img karena gambar besarnya ada di tag a tersebut. Sebagai contoh silahkan lihat kode di bawah ini (yang digunakan URL yang berwarna oranye!).

Atau dalam bentuk kode yang berbeda seperti ini:

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

» Happy Blogging - gubhugreyot «

Tips dan Trik Cara Upload Gambar Animasi gif di Blogspot - Blogger

2010-12-17T10:42:00.012-07:00

Gambar di bawah ini adalah file gambar animasi gif yang merupakan hasil upload di blogger/blogspot, dengan URL gambar:

http://4.bp.blogspot.com/_550XeJhg_o8/TQufJObIgrI/AAAAAAAAAxE/xm6ToG4edy8/s1600/ManusiaPurba.gif

Trik untuk upload gambar animasi gif di blogspot ini adalah sebagai salah satu solusi yang wajib kita ketahui agar kita tak terlalu bergantung pada image hosting gratisan yang sering jadi sumber petaka (karena banned). Bagi sobat-sobat blogger yang masih menggunakan Template Lama atau Template Tata Letak (layout Tempaltes) mungkin beberapa masih belum mengetahui tentang layanan upload dan simpan file animasi gif di blogger/blogspot karena mungkin pengaturan atau setting blognya masih menggunakan setting lama seperti di bawah ini:

English: SETTING pada Select post editor - Old editor, atau:
Indonesia: PENGATURAN pada Pilih editor entri - Editor lama .

Dengan SETTING blog pada kondisi/posisi seperti di atas memang ada salah satu kelemahan yang kita miliki berupa "pengguna blog tidak dapat memanfaatkan layanan terbaru blogspot yang berupa upload dan simpan file gambar animasi berekstensi .gif yang menjadi salah satu kebutuhan vital pemenuhan akan gambar posting dan desain blog. Layanan upload sekaligus simpan ini hanya akan kita temukan saat kita menggunakan New Blogger Templates (Template Baru Blogger) atau ketika SETTING blog kita ubah menjadi:

- Updated editor (Recommended) - Take a look at the latest features! , atau:
- Editor yang dimutakhirkan (Disarankan) - Periksa fitur terbaru! .

Jika kita masih akan tetap mempertahankan SETTING awal dan ingin bisa mengup-load serta menyimpan file gambar animasi gif, maka ada dua cara cara yang bisa ditempuh:

Membuat blog baru dengan template blogger baru yang difungsikan sebagai blog khusus tempat upload gambar beranimasi gif dengan konskuensi gambar yang akhirnya kita gunakan di blog aktif tidak mempunyai identitas sesuai blog. Dengan cara ini akan lebih praktis saat kebutuhan upload diperlukan.
Tetap menggunakan blog aktif yang selama ini digunakan melakukan aktifitas posting namun pada saat membutuhkan file gambar animasi gif dilakukan perubahan SETTING blog hingga file animasi bisa terupload dan tersimpan dengan baik. Cara ini membuat semua gambar posting atau mungkin desain blog akan tetap beridentitas sama dengan blog aktif. Sisi lemahnya adalah pada perubahan setting yang harus selalu dilakukan ketika upload gambar animasi gif dibutuhkan.

Jika car ke-2 menjadi pilihan bagi sampeyan maka langkah seperti berikut harus dilakukan ketika kita akan mengupload dan menyimpan file gambar animasi gif di blogger/blogspot.

Setelah halaman posting terlihat, klik SETTING.
Tarik halaman ke bawah menggunakan mouse hingga ditemukan:
Select post editor atau Pilih editor entri, kemudian pilih pada Updated editor (Recommended) - Take a look at the latest features! atau Editor yang dimutakhirkan (Disarankan) - Periksa fitur terbaru! . (lihat gambar di bawah ini!)

Setelah setting selesai dilakukan dengan klik SAVE/Simpan, lanjutkan kembali dengan klik POSTING - New Post.
Lakukan upload gambar animasi gif (Lakukan di posting mode Compose).
Lihat hasilnya melalui POSTING mode Compose dan jika ingin ambil kode HTML-nya silahkan copy melalui posting mode EDIT HTML.
Selesai dan selamat mengupload dan menyimpan semua file gambar animasi gif sampeyan. He ... he ... mau sekarung penuh juga boleh!!!
Untuk diperhatikan, saat mengambil URL gambar animasi gif hasil upload, ambilah URL-nya yang dari (tag a) dan jangan yang di tag img karena URL gambar animasi gif yang otentik ada di tag a tersebut. Sebagai contoh silahkan lihat kode di bawah ini (yang digunakan URL yang berwarna oranye!).

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

» Happy Blogging - gubhugreyot «

Membuat Scroll Box Widget Recent Post dengan Thumbnail Bawaan Blogger

2010-12-17T06:58:00.004-07:00

Setelah di posting sebelumnya kita bahas cara buat widget recent posts yang serba fleksible dan dilengkapi dengan beberapa pengaturan tampilan termasuk dengan thumnail ataupun mau dibuat tanpa thumnail, mungkin masih ada yang menjadi ganjalan saat widget ini selesai dibuat dan terpajang dengan cantik di salah satu sudut blog. Jika posting yang dimunculkan di recent posts hanya 4 atau 5 posting tentu masalah tak akan terlihat, namun ketika kita ingin menampilkan posting di recent posts dfalam jumlah cukup besar barulah persoalan mulai terlihat dan terasakan. Ya .... karena posting akan terlihat berderet meninggi dengan ketinggian yang .... heh ... heh ... ngudubilah .... seperti tangga hotel bertingkat seribu .... He ... heh ... tinggiiiiiiiiiiii .... sekali!

Tidak boleh tidak masalah ini harus segera diatasi jika blog tak ingin terlihat runyam di mata. Scroll box menjadi solusi paling tepat hingga ketinggian widget terbatasi dan dapat diatur.

Untuk mengikuti panduan membuat scroll box widget recent posts bawaan blogger ini sampeyan harus membuat recent posts-nya terlebih dahulu. Untuk tutorialnya bisa dibuka melalui lin di bawah ini:

Tutorial: Widget Recent Posts (bawaan blogger) Dilengkapi Thumbnail

Cara membuat Scroll Box Widget Recent Posts dilengkapi Thumbnail

Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN>
Setelah DASBOARD (Dasbor) terbuka, klik DESIGN (Rancangan).
KLIK Edit HTML kemudian lanjutkan klik DOWNLOAD FULL TEMPLATE (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.
KLIK Expand Widget Template.
Cari kode <b:if cond='data:gadgetSnippet != ""'>.
Di bawah kode ini terdapat kode HTML berikutnya dengan bentuk seperti di bawah:

    <b:if cond='data:gadgetSnippet != ""'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>

Rubah kode HTML di atas menjadi seperti berikut:

<div style="height:400px;margin:10px auto;padding:2px;border:2px solid #aaa;background:#999 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);overflow:auto;overflow-x:hidden;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;">
<div style="margin:3px auto;margin-left:2px;margin-right:2px;padding:3px;background:black;border:1px solid #555;">

    <b:if cond='data:gadgetSnippet != ""'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>

</div>
</div>

KLIK SAVE/Simpan Template.
Buka blog dan lihat hasilnya.

Silahkan gantai backgroundnya jika dikehendaki atau untuk penyesuaian dengan warna teks dan background blog.

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

» Happy Blogging - gubhugreyot «

Widget Recent Posts Blogger dengan dan tanpa Thumbnail

2010-12-17T03:38:00.007-07:00

Jika mungkin kita lebih teliti mencoba memanfaatkan widget yang telah disediakan blogger/blogspot maka mungkin widget recent posts tak perlu lagi kita cari dari luar yang membuat kita juga cukup repot saat mencoba menggunakannya. Widget recent posts yang telah disediakan blogger ini sangat fleksible dan memberi banyak alternatif pengaturan yang membuat kita bisa mengatur bentuk tampilannya. Berbagai pilihan tersebut di antaranya: bisa pakai thumbnail atau hanya teks, ukuran dan warna font bisa diatur, jumlah posting bisa kita pilih sesuka hati, ukuran thumbnail juga bisa dirubah disesuaikan dengan ruang widget yang tersedia, bahkan teks read more bisa kita tentukan sendiri kata-katanya.

Seperti halnya penggunaan widget bawaan blogger yang lain, untuk menerapkannya di blog kita hanya perlu masuk ke Page Elemen untuk selanjutnya memilih widget dan mengatur tampilannya.

Login ke Blogger.
- Tulis Email Address.
- Tulis Password.
- KLIK LOGIN.
Setelah halaman DASBOARD tebuka, klik DESIGN (Rancangan).
Lanjutkan dengan klik ADD a GADGET (Tambah Gadget) dalam box bergaris putus-putus. Tentang posisi Add a Gadget sampeyan bebas memilih tempatnya.
Lihat di kolom sebelah kiri. Akan terlihat pilihan :
Basics
Featured
Most Popular
More Gadgets
Add your own.
Silahkan pilih dan klik Featured.
Tarik halaman ke bawah dan klik widget recent posts seperti yang terlihat pada gambar di atas.
Atur tampilan widget dengan merubah beberapa variable di pengaturan widget. KLIK gambar di atas untuk melihat contoh cara pengisian dan pengaturan widget.
KLIK SAVE/Simpan dan buka blog untuk melihat hasilnya.

Keterangan/Catatan:

Jika yang ingin ditampilkan recent posts dari blog dimana widget terpasang, pilih pada Pull Posts from - My Blog sebaliknya jika recent posts akan digunakan untuk menampilkan blog tertentu, maka pilih Pull Posts from - The Blogger Blog Bellow dan di bawahnya diisi dengan URL blog yang recent posts-nya ingin ditampilkan di blog dimana widget terpasang. Dengan cara ini jika sampeyan punya 2 buah blog maka bisa pasang recent posts secara silang.
Number of Posts to Display dapat sampeyan tentukan sendiri jumlahnya.
Thumbnail Dimensions berfungsi untuk pengaturan ukuran thumbnail dalam recent posts.
Read More Text dapat dirubah bentuk teksnya sesuai keinginan. Tuliskan saja teks pada tempat yang telah tersedia.
Font, Font Size ,Extra Styling ,Border Colour ,Text Color ,Link Color dapat ditentukan sendiri baik jenis font-nya, ukuran ataupun warnanya.

Untuk membuat scroll box buat widget recent posts ini, silahkan buka panduannya dengan membuka tutorial di bawah ini:

Tutorial: Scroll Box Widget Recent Posts (bawaan blogger) Dilengkapi Thumbnail

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

» Happy Blogging - gubhugreyot «

Tampilkan Navbar Blogger di Halaman Bawah Blog

2010-12-17T01:50:00.002-07:00

Melihat navbar blogger di blog pada ujung teratas adalah hal yang lumrah karena posisi yang disediakan oleh desain templatenya memang di situ. Melihat blog tanpa navbar juga bukan lagi barang aneh karena memang bisa tidak ditampilkan (dihilangkan). Bagaimana seandainya navbar ini tetap kita tampilkan atau kita manfaatkan namun posisinya kita pindah di halaman terbawah blog. Navbar kita buat selalu terlihat biar halaman digulung naik ataupun turun, tetapi dibuat terlihat samar-samar (transparan) dan baru tampak jelas ketika tersentuh cursor? Biar sedikit efek membuat tampilan navbar lebih cantik, bagaimana kalau kode CSS3 kita dayagunakan? Lebih menarikkan blog jadinya? Bagaimana kalau kita coba saja dan lihat hasilnya? Perlu demo? He ... eh .... Sebaiknya nggak usah, ya .... He ... he ... Biar makin penasaran dengan gaya navbar yang sedikit lain dari biasanya ini!

Untuk membuatnya silahkan copy paste kode CSS berikut di atas kode ]]></b:skin>

Kode CSS

#navbar-iframe{
       display:block;
       position:fixed;
       bottom:0;
       left:0;
       opacity:0.2;
      -o-transition:opacity 1s ease-in;
      -moz-transition:opacity 1s ease-in;
      -webkit-transition:opacity 1s ease-in;
       filter:alpha(opacity=20);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
#navbar-iframe:hover{
       opacity:1.0;
       filter:alpha(opacity=100);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Login ke Blogger.
Setelah menuliskan Email Address, Password dan KLIK "Login", maka halaman "Dasboard (Dasbor)" akan terlihat. KLIK "Design/Rancangan".
KLIK "Edit HTML".
KLIK "Download Full Templates/Download Template Lengkap" untuk back-up templates.
Simpan file template di folder PC.
Kembali ke "Edit HTML" dan cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode tersebut supaya lebih mudah dan cepat.
Copy-paste kode CSS dan letakkan di atas kode ]]></b:skin>.
KLIK "SAVE Templates/Simpan Template".

Keterangan/Catatan:

Buka Special Tutorials di menu Accordiaon sebelah kiri untuk mengikuti tutorial cara cepat mencari kode HTML di template dengan Ctrl+F dan untuk mengetahui pentingnya serta cara back-up template.
Karena efek opacity telah dipadukan dengan kode CSS3 transition maka desain ini akan terlihat efeknya dengan sempurna hanya di browser yang telah support dengan CSS3. Silahkan download melalui link download browser di menu sebelah kiri di atas spesial tutorials.

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

» Happy Blogging - gubhugreyot «

gubhug reyot

Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting

Kode CSS :

Javascript :

xHTML :

Pasang icon di post-author, post-labels, post-timestamp dan post-comment-link

Kode CSS :

Membuat Icon dg Efek css3 di Link List Label Blogger

Kode CSS :

Menampilkan Profil Pengunjung dg Hover Effect

Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Kode CSS :

Javascript :

xHTML Baru:

Cursor Circling Text Trail Teks Berputar

Kode CSS :

Javascript :

Jozz.. Buat Cursor Animasi ndul Gondal Gandul

Kode CSS :

Kode CSS :

Trick Membuat Scrollbars di Sebelah Kiri

xHTMl scrollbars Kiri:

xHTMl scrollbars Kiri:

Cara Membuat Pengunjung Tekun Membaca Posting

Tambahkan 2 CSS 3 property dan Wow .... Keren....!!!!

Kode CSS yang digunakan:

Trik Percantik Image Posting dg CSS3 Border Radius Property

Kode CSS

Energy Saving Mode CSS3 dg Kode CSS & Efek Lebih Simpel

Kode CSS:

xHTML

Trick Pasang Jam Digital di Header Blogger Template Designer

Javascript:

Kode CSS:

xHTML Digital Clock:

Menampilkan tips (tooltip) di widget Blog Archive - Blogger

Membuat Header Blog dengan 3 Elemen

Kode CSS-1:

Kode CSS-2:

xHTML

Trick Buat & Ciptakan Page peel di Blogger

Link javascript page peel

Trick Spesial Buat Tab Menu Horizontal di Atas Header Blog

Kode HTML Elemen Baru

Trick Ampuh Pastikan Ukuran Background Header Blogger Template Designer

Javascript dan xHTML:

Cara Kilat Tingkatkan Jumlah Pengunjung dengan Widget Blog's Stats Blogger

Membuat Kode Posting Lightbox Lebih Simple

Kode posting lightbox yg tanpa bantuan css:

Kode posting lightbox yg lebih simple (dg css):

Contoh kode pada lightbox (umum)

Contoh kode pada lightbox image viewer:

Contoh kode pada lightbox slideshow

Image di sbl kiri (left):

Image di sbl kanan (right):

Image di tengah (centre):

Image poisis Tak satupun (right):

Gallery:

Membuat Slideshow CSS3 u Image Gallery Lightbox

Kode CSS Slideshow CSS3

xHTML Slideshow CSS3

Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

Link javascript & kode CSS Lightbox Slideshow

Kode Posting Lightbox Single Image

Kode Posting Lightbox-Gallery

Tips & Trik Membuat & Menggunakan Lightbox di blogger

Cara membuat Elemen Baru di Footer Blogger Baru (Template Designer)

Membuat - Memasang Scroll Box Widget Popular Posts Blogger

Membuat Ticker Popular Posts Blogger Widget Plugins-2 dg Javascript

Creating a special ticker Popular Posts Blogger Widget Plugins

Membuat Animasi Background Berjalan (Bergerak)

Hidden Calendar-Clock Using CSS3-Javascript

jQuery Simple Image Zoomer

Cara buat Box dg Efek Gelap-Terang (Fade Effect) CSS3

Cara Memodifikasi Search Form Blogger Plugins

jQuery Loader: Preload your blog

Model Penyimpanan yg lain

Menambah image di loader blog script:

Simple No Right Click Image - Disable Right Click Image

Membuat Daftar Posting di Halaman Statis Blogger