0 Kualitas Film Terbaik

Berikut ini merupakan jenis-jenis kualitas film:

Secara umum kualitas film memiliki urutan seperti berikut (dari paling buruk ke yang paling baik)

CAMRip > TS > PPVRip > R5 > DVDScr > DVDRip > BRRip

• CAM (CAMRip):
  Tipe ini merupakan kualitas terburuk dari sebuah film. Sumber film direkam dari bioskop dengan menggunakan video kamera portabel / handycam. Selain gambarnya buram, suaranya juga buruk, karena banyak noise yang ikut terekam, seperti suara penonton. Diantara itu semua yang paling menyebalkan adalah gambar kadang sering bergerak-gerak, hal ini mungkin disebabkan karena kamera yang digunakan untuk merekam film tersebut bergoyang.
   
• Telesync (TS):
  Kualitas gambarnya sama dengan CAM, hanya bedanya hanya di suaranya yang sedikit bagus, karena suaranya direkam melalui line khusus. Biasanya di bioskop ada line khusus yang digunakan untuk orang mengalami gangguan pendengaran. Line inilah yang digunakan dalam merekam film.
   
• Telecine (TC):
  Kualitas gambar dan suara bagus, karena dicopy dari sumber aslinya. Biasanya film ini masih memiliki time counter di atas dan bawah layarnya.
   
• Pay Per View (PPVRip):
  Sumbernya berasal dari layanan Pay-Per-View. Biasanya layanan ini ada pada hotel-hotel seperti di Eropa, kualitasnya mirip seperti VHS atau TVRip. Secara umum kualitasnya hampir menyamai kualitas Screener (Scr).
   
• Video On Demand (VODRip):
  Kualitasnya hampir sama dengan Pay-Per-View (PPVRip). Sumbernya diambil dari layanan Video On Demand.

• Screener (Scr):
  Film jenis ini biasanya dicopy dari video VHS yang telah resmi di release. Ciri khas film dengan flag ini adalah masih adanya peraturan undang-undang hak cipta di awal film tersebut. Kualitasnya cukup baik, karena dicopy dari sumber aslinya langsung.
   
• DVD Screener (DVDScr):
  Sama dengan SCREENER, hanya saja pada tipe ini data diubah kedalam format DVD.
   
• DVDRip:
  Sumber film di copy dari DVD release resminya. Kualitasnya sangat baik, karena langsung dicopy dari sumber aslinya.
   
• VHSRip:
  Dicopy langsung dari VHS tape langsung.
   
• R5:
  Sama dengan DVDRip, namun sumbernya berasal dari DVD yang telah release terlebih dahulu di Rusia.
   
• TVRip/Episodes:
  Film dengan jenis ini biasanya direkam langsung pada saat film tersebut sedang disiarkan. Kualitas bergantung pada stasiun televisi yang menyiarkan, apakah film tersebut disiarkan dalam format high definition atau tidak. Jika film tersebut disiarkan dengan format high definition, maka kualitasnya akan sangat baik.
   
• DSRip(Digital Satelite):
  Direkam dari transmisi satelite, kualiatasnya baik, biasanya di encode dalam format xvid.
   
• PDTV(Pure Digital TV):
  Film jenis ini direkam melalui jaringan TV digital dengan menggunakan Tv Tuner yang mendukung format digital. Kualitasnya sangat baik, biasanya di encode dalam format xvid.
   
• HDTV(High Definition TV):
  Sama dengan PDTV.
   
• Workprint(WP):
  Merupakan salinan dari film yang belum selesai, bisanya terdapat adegan yang hilang, suara yang tidak beraturan. Kualitas film dengan tipe ini bevariasi, dari yang paling baik hingga yang paling buruk.
   
• DivX Re-Enc:
  Merupakan film yang disalin dari DVD / VCD aslinya, namun di encode ulang, untuk menghasilkan ukuran yang lebih kecil. Tipe ini sering dijumpai pada dunia underground dan fansub. Contoh film-film anime biasanya tergolong ke dalam jenis ini.
   
• Bluray (BRRip):
  Tipe paling baru dengan kualitas High Definition. Sumbernya dari Bluray atau HDVD. Kualitas sangat bagus dengan resolusi 1080piksel. Diperlukan spesifikasi komputer yang cukup mumpuni agar film dapat berjalan tanpa terpatah-patah. Ukuran filenya sekitar 3-4 lebih besar daripada DVDRip

0 Merubah Ukuran Gambar Melalui HTML

Meskipun hanya sebuah panduan Blogger tentang posting mode Edit HTML, panduan ini juga bermanfaat untuk panduan BlogDETIK dan Panduan Bloggerlainya. Panduan untuk merubah ukuran gambar dan photo dalam ruang posting dimana ukuran gambar bisa dirubah hanya dengan merubah merubah nilai width dan height pada kode html hasil upload. Dengan memanfaatkan posting mode edit html atau mode HTML untuk BlogDETIK, tinnggi dan lebar gambar dengan mudah dapat dirubah dengan merubah width dan heigh-nya. Perubahan besaran yang dilakukan bisa hingga sekecil yang kita inginkan. Selain besaran beberapa perubahan dan penambahan juga bisa dilakukan untuk membuat "variasi baru" yang berbeda dari gambar aslinya. Dalam arti bukan merubah gambar akan tetapi menambahkan beberapa hal, misalnya bingkai gambar.

Perubahan ukuran gambar :

Gambar Asli : Animasi ini adalah sebuah gambaran dimana gambar/image dapat dengan mudah di rubah ukurannya :

Cara untuk merubah ukuran gambar dan photo :

1. Cari KODE width: ...px; dan height: ...px; atau dalam bentuk lain width=".." height=".."
2. Rubah nilainya menjadi lebih kecil ; misalnya 200px atau 200 dan 150px atau 150 menjadi 60px atau 60 dan 40px atau 40. Perubahan nilai ini akan membuat image bertambah kecil.
3. Perubahan nilai hendaknya tetap sesuai dengan perbandingan besaran asli (skala) sehingga bentuk gambar tidak menjadi berubah terlalu pendek atau terlalu tinggi. Contohnya orang cebol jadi jangkung! Terutama apabila perubahan ukuran dilakukan pada photo.(nanti kalau orangnya lihat bisa stress dan gantung diri).

Contoh KODE gambar dari blogger.com pada ruang posting :

Contoh Kode HTML gambar/image hasil upload di ruang posting Blogspot :

<a onblur="try  {parent.deselectBloggerImageGracefully();} catch(e) {}"  href="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s1600-h/GR-Kolom-Reg_Gmail.jpg">
<img  style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width:155px; height:320px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s320/GR-Kolom-Reg_Gmail.jpg" 
border="0" alt="" id="BLOGGER_PHOTO_ID_5396364953086344994" /></a>

Kode HTML gambar hasil upload setelah dilakukan perubahan pada height dan width untuk merubah besaran gambar :

Gambar di bawah ini telah dirubah dari ukuran aslinya.

<a onblur="try  {parent.deselectBloggerImageGracefully();} catch(e) {}"  href="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s1600-h/GR-Kolom-Reg_Gmail.jpg">
<img  style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width:39px; height:80px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s320/GR-Kolom-Reg_Gmail.jpg" 
border="0" alt=""  id="BLOGGER_PHOTO_ID_5396364953086344994" /></a>

Contoh dalam bentuk lain:

<img src="http://2.bp.blogspot.com/-anJJDpiSRw0/Tw2Ob9FzPDI/AAAAAAAABIU/8hbeBbk70eo/s200/gubhugreyot-flying-girl.jpg" width="87" height="130" border="0" />

Perubahan memperbesar ukuran image

<img src="http://2.bp.blogspot.com/-anJJDpiSRw0/Tw2Ob9FzPDI/AAAAAAAABIU/8hbeBbk70eo/s200/gubhugreyot-flying-girl.jpg" width="122" height="182" border="0" />

Catatan/Keterangan :

1. Perubahan untuk memperbesar gambar juga bisa dilakukan, akan tetapi perbesaran yang berlebihan akan membuat kwalitas gambar menjadi rusak (gambar semakin kehilangan focus/pecah-pecah/tampak berkotak-kotak)
2. Sedikit panduan ini akan sangat bermanfaat meskipun tampaknya sangat sederhana. Semoga banyak menolong bagi blogger-blogger yang masih belum begitu memahami kode html.

0 Cara Membuat Analog Clock Dengan Background Animasi

Gambar di bawah adalah bentuk Analog Clock dengan Background Animasi



Silahkan langsung copy paste KODE dan simpan sebagai widget baru.

Langkah untuk Membuat Analog Clock dengan Background Animasi

1. Login to Blogger (Login ke Blogger)
2. KLIK link Design (Rancangan)
3. KLIK Page Element (Elemen Laman)
4. KLIK Add Gadget (Tambah Gadget). Gunakan bagian sidebar (samping kanan atau kiri)
5. KLIK HTML/Javascript : Letakkan KODE dan script di dalamnya.
6. KLIK SAVE (SIMPAN)
7. Open Your Blog (buka Blog) : Lihat hasilnya dengan membuka blog.

Javascript dan KODE HTML Analog Clock dengan Background Animasi :

<script type="text/javascript">
var clocksize = 100;
var colnumbers = 'ff0000';
var colseconds = '12fe00';
var colminutes = 'ffcccc';
var colhours = 'ffcccc';
var numstyle = 0;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos = 0;
var ypos = 0;
var dayname = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
var am="AM";var pm="PM";var pi=Math.PI;var d=document;var pi2=pi/2;var rad=(+clocksize)/2;var ctrX=(+xpos)+rad;var ctrY=(+ypos)+rad;var hourln=1;var minln=secln=2;for(var i=0;i<(rad/2)+(rad/16);i++){hourln+=1}for(var i=0;i<(rad/2)-(rad/8);i++){minln+=2;secln+=2}var font_size=rad/4;var offset=16;var clocknum=[[,1,2,3,4,5,6,7,8,9,10,11,12],[,"I","II","III","IIII","V","VI","VII","VIII","IX","X","XI","XII"],[,"·","·","-","·","·","|","·","·","-","·","·","||"]];if(numstyle<0||numstyle>2){numstyle=0}function timeZone(e,g,c,j){if(g){var h=e.getDay();var b=e.getSeconds();var f=e.getMinutes();var a=e.getHours()}else{e.setUTCMinutes(e.getUTCMinutes()+(c+j)*60);var h=e.getUTCDay();var b=e.getUTCSeconds();var f=e.getUTCMinutes();var a=e.getUTCHours()}if(a>11){moa=pm;a-=12}else{moa=am}return[h,moa,a,f,b]}function commonClock(a){a.style.position="absolute";a.style.top="0";a.style.left="0";a.style.visibility="hidden"}function displayClock(){if(!d.getElementById){return}var b=document.createElement("div");if(fix){b.style.position="relative";b.style.margin="auto";b.style.width=(clocksize+offset*2)+"px";b.style.height=(clocksize+offset*2)+"px";b.style.overflow="visible"}var j=[];for(var c=12;c>0;c--){j[c]=document.createElement("div");j[c].id="cnum"+c;commonClock(j[c]);j[c].style.width=(offset*2)+"px";j[c].style.height=(offset*2)+"px";j[c].style.fontFamily=font_family;j[c].style.fontSize=font_size+"px";j[c].style.color="#"+colnumbers;j[c].style.textAlign="center";j[c].style.paddingTop="10px";j[c].style.zIndex=1000;j[c].innerHTML=clocknum[numstyle][c];b.appendChild(j[c])}var g=[];for(c=minln;c>0;c--){g[c]=document.createElement("div");g[c].id="cmin"+c;commonClock(g[c]);g[c].style.width="1px";g[c].style.height="1px";g[c].style.fontSize="1px";g[c].style.backgroundColor="#"+colminutes;g[c].style.zIndex=997;b.appendChild(g[c])}var e=[];for(c=hourln;c>0;c--){e[c]=document.createElement("div");e[c].id="chour"+c;commonClock(e[c]);e[c].style.width="2px";e[c].style.height="2px";e[c].style.fontSize="2px";e[c].style.backgroundColor="#"+colhours;e[c].style.zIndex=998;b.appendChild(e[c])}var h=[];for(c=secln;c>0;c--){h[c]=document.createElement("div");h[c].id="csec"+c;commonClock(h[c]);h[c].style.width="1px";h[c].style.height="1px";h[c].style.fontSize="1px";h[c].style.backgroundColor="#"+colseconds;h[c].style.zIndex=999;b.appendChild(h[c])}var f=document.createElement("div");f.id="ampm";commonClock(f);f.style.width=((xpos+rad)*2)+"px";f.style.fontFamily=font_family;f.style.fontSize=(font_size*2/3)+"px";f.style.color="#"+colnumbers;f.style.textAlign="center";f.style.paddingTop="10px";f.style.zIndex=990;b.appendChild(f);var a=document.createElement("div");a.id="zone";commonClock(a);a.style.width=((xpos+rad)*2)+"px";a.style.fontFamily=font_family;a.style.fontSize=(font_size*2/3)+"px";a.style.color="#"+colnumbers;a.style.textAlign="center";a.style.paddingTop="10px";a.style.zIndex=990;b.appendChild(a);d.getElementById("clock_a").appendChild(b);for(var c=12;c>0;c--){d.getElementById("cnum"+c).style.top=(ctrY-offset+rad*Math.sin(c*pi/6-pi2))+"px";d.getElementById("cnum"+c).style.left=(ctrX-offset+rad*Math.cos(c*pi/6-pi2))+"px";d.getElementById("cnum"+c).style.visibility="visible"}updateClock()}function moveClock(a,g,c){for(var b=a;b>0;b--){d.getElementById(g+b).style.top=(ctrY+b*Math.sin(c))+"px";d.getElementById(g+b).style.left=(ctrX+b*Math.cos(c))+"px";d.getElementById(g+b).style.visibility="visible"}}function updateClock(){var b=new Date();var a=timeZone(b,localZone,mytimezone,dst);d.getElementById("ampm").style.top=(ypos+rad/3)+"px";d.getElementById("ampm").innerHTML=a[1]+" "+dayname[a[0]];d.getElementById("ampm").style.visibility="visible";if(!localZone){d.getElementById("zone").style.top=(ctrY+(rad/10))+"px";d.getElementById("zone").innerHTML=city+""+country;d.getElementById("zone").style.visibility="visible"}moveClock(secln,"csec",pi*a[4]/30-pi2);moveClock(minln,"cmin",pi*a[3]/30-pi2);moveClock(hourln,"chour",pi*a[2]/6+pi*(+b.getMinutes())/360-pi2);setTimeout("updateClock()",100)}window.onload=displayClock;
</script>

<div align="center" style="background:#333;margin:0px;padding:0;border:1px solid red;width:132px;"> <div id="clock_a" style="padding:10px;border:1px solid lime;margin:4px;background:black url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_RedBlackAnimaV5H5-gubhugreyot.gif);width:100px; height:105px;"></div>
</div>

0 Cara Membuat Background Animasi Pada Judul Posting

Background animasi yang dipadukan dengan judul posting akan mampu menciptakan sebuah penampilan baru yang memberi nuansa baru pada blog. Background animasi ini akan membuat judul posting mempunyai latar belakang/bacground baru yang sangat jauh berbeda dari bentuk semula. Variasi animasi background yang dapat digunakan sebenarnya amatlah banyak, akan tetapi kali ini akan kita coba tampilkan sebuah background animasi pelangi yang sangat menarik untuk dimanfaatkan guna memperindah tampilan blog. Contoh bentuk Judul posting yang menggunakan background animasi :

1. Background Pelangi (Animated Rainbow Background) :

Judul Posting - Judul Posting - Judul Posting

2. Blink (Blink Animation) :

Judul Posting - Judul Posting - Judul Posting

Langkah untuk membuat Background Animasi Pelangi pada Judul Posting :

1. Login ke Blogger.
2. Amankan Template. Lihat di sini !
3. Tetap di Edit HTML.
4. Cari KODE:

.post h3 a{
        margin: ...px;
        font-size: ...%/px;
        ... 
        ... 
}

5. Ganti dengan KODE baru seperti berikut:

.post h3 a{
        background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_Rainbow-gubhugreyot.gif);
        display:block;
        padding:2px 4px;
        text-align:center;
        margin: ...px;
        font-size: ...%/px; 
        ... 
        ... 
}

6. Bila KODE pada template kamu hanya berupa :

.post h3 { 
        margin: ...px; 
        ... 
        ... 
}

7. Ganti dengan KODE seperti di atas (ada penambahan "a").
8. Bila ingin menambahkan border di atas dan di bawah judul posting seperti contoh gambar di atas, tambahkan KODE :

.post h3 a{
        ....
        ....
        border-top:2px dotted red; 
        border-bottom:2px dotted red;
}

9. KODE baru-nya menjadi seperti ini :

.post h3 a{ 
        background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_Rainbow-gubhugreyot.gif);  
        display:block; 
        padding:2px 4px; 
        text-align:center; 
        border-top:2px dotted red; 
        border-bottom:2px dotted red;
        margin: ...px; 
        font-size: ...%/px; 
        ... 
        ... 
}

0 Cara Membuat Blog Dofollow Menjadi Nofollow

Bila blog kamu masih berbentuk nofollow, sebaiknya segera dirubah menjadi difollow. Apa sih sebenarnya dofollow ? Secara sederhana fungsi dofollow bisa dikatakan sebagai sebuah cara untuk membuat sebuah blog menjadi lebih ramah dan bersahabat terhadap sesama blogger atau pembaca blog. Mengapa demikian ? Dofollow akan membuat link balik (backlink) kepada setiap pemberi komentar sehingga secara tidak langsung maka akan menciptakan lebih banyak komunikasi dan persahabatan yang berakibat pada percepatan peningkatan ranking sebuah blog. Bagaimana cara untuk membuat blog kamu menjadi sebuah blog yang "dofollow" ?!

Cara membuat blog menjadi dofollow :

1. Login ke Blogger.
2. Masuk Ke Halaman Dasbor.
3. KLIK Tata Letak.
4. Amankan Template. Caranya bisa dilihat di di sini !
5. Tetap di Edit Template.
6. Klik Expand Template Widget.
7. Cari KODE :

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/><data:comment.author/>
</b:if>

8. Cara mencari KODE : KLIK secara bersamaan Ctrl+ F kemudian ketik : data:comment.authorUrl. Lanjutkan dengan KLIK "Find Next" (di Opera) atau KLIK "Find" (pada Mozilla di ujung kiri bawah).

9. Setelah ketemu hilangkan "nofollow" atau ganti dengan "dofollow" sehingga bentuk KODE barunya menjadi seperti ini :

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'>
<data:comment.author/>
</a>
<b:else/><data:comment.author/>
</b:if>

Atau seperti ini :

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='dofollow'> 
<data:comment.author/>
</a>
<b:else/><data:comment.author/> 
</b:if>

10. KLIK Simpan Template.

0 Cara Membuat Tanggal Posting Tampil Gaya

Sesuatu yang baru belum tentu membuat orang tertarik, tetapi kalau hal baru itu menyangkut gaya penampilan blog pasti akan membuat blogger "kepingin untuk melihat. Bagaimana ? Seperti apa ? Benar nggak, sih ?! Cocok nggak, ya, buat blog ku ?! Hal-hal seperti itu sering atau bahkan pasti menjadi pertanyaan dalam hati setiap blogger.

Kalau biasanya tampilan date header hanya berupa teks memanjang yang menunjukkan tanggal, hari, dan bulan, maka dengan desain date header baru ini kita bisa mengatur seluruh komponen hari , tanggal atau jam dengan warna dan spesifikasi font yang berbeda tergantung selera blogger.

Desain date header baru memadukan KODE CSS dan javascript yang ditempatkan pada bagian head dan body serta sebuah background berbentuk gambar/image sebagai latar belakang yang dengan tujuan memberikan penampilan yang
mendekati/mirip dengan kalender sesungguhnya. Karena kalender ini mempunyai dimensi yang lumayan besar untuk sebuah date header, maka untuk menciptakan efisiensi dan penampilan yang seimbang pada bagian atas ruang posting, box kalender ini kita geser posisinya kearah kanan dan dibuat masuk ke bagian dalam (bawah). Apabila kamu menambahkan efek bounce menggunakan marquee untuk menciptakan efek animasi judul posting (lihat posting sebelumnya!), bentuk baru date header ini akan semakin terlihat cantik karena saat judul posting bergerak di ujung kanan maka box kalender akan terlewati (judul posting lewat di bagian box kalender).

Bentuk Date Header atau Kalender Posting Dilengkapi Efek Marquee :

Judul Posting

Langkah untuk membuat Kalender Posting Model Baru :

1. Login ke Blogger.
2. Amankan Template. Caranya bisa kamu lihat
3. Tetap di Tata Letak.
4. KLIK Edit HTML.
5. Cari KODE ]]></b:skin> dan letakkan KODE CSS berikut di atasnya persis :

h2.date-header{
        margin:20px 0 -40px;
        float: right;
}     
#kalender {
        background:url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/BlankCalendarAnima-gubhugreyot.gif) no-repeat;
        font-family:Arial;
        display:block;
        margin-left:2px;
        padding-right:2px;
        text-align:center;
        width:64px;
        height:68px;
        line-height:0.8em;
}
.kalender_bulan{
        display:block;
        clear:both;      /* original code by: */
        color:#eefd00;   /* gubhugreyot.blogspot.com */ 
        font-size:7px;
        text-align:center;
        padding-top:8px;
}
.kalender_tanggal{
        display:block;
        font-size:35px;margin-top:8px;
        color:#282658;
        font-weight:bolder;
        padding-top:12px;
        text-align:center;
}
.kalender_tahun{
        display:block;
        font-size:8px;
        line-height:0.5em;
        padding-top:9px;
        color:#480002;
}

6. Cari KODE h2.date-header (bawaan template : di baian atas !) dan hapus karena sudah kita ganti dengan yang baru.
7. Simpan javascript di bawah ini di antara KODE : </head> dan <body> , sehingga berbentuk seperti ini :

</head>

<script type="text/javascript">
function bgsGR_kalender(d){
var da = d.split(&#39; &#39;);
bulan = &quot;<div class='kalender_bulan'>&quot;+da[0]+&quot;</div>&quot;;
tanggal = &quot;<div class='kalender_tanggal'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;tahun = &quot;<div class='kalender_tahun'>&quot;+da[2]+&quot;</div>&quot;;
document.write(bulan+tanggal+tahun);}
</script>

<body>

8. KLIK Simpan Template.
9. KLIK Expand Template Widget.
10. Cari KODE :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

11. Ganti dengan KODE berikut :

<b:if cond='data:post.dateHeader'>
<h2 align='right' class='date-header'><div id='kalender'><script>var gureykalender = &#39;<data:post.dateHeader/>&#39;;</script>
<script>bgsGR_kalender(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='kalender'>
<script>bgsGR_kalender(&#39;<data:post.dateHeader/>&#39;);</script><script>bgsGR_kalender(gureykalender);</script></div></h2>
</b:if>

12. KLIK Simpan Template.
13. KLIK Pengaturan.
14. KLIK Format.
15. KLIK pada tanda pilih mode --> Format Header Tanggal (Date Header).
16. Pilih format header tanggal yang berbentuk : bulan tanggal, tahun (contoh --> Maret 19, 2010).
17. KLIK SIMPAN SETELAN.
18. Lihat Hasilnya dengan membuka blog !

Selamat beraktifitas dan selamat berkarya... Semoga blog anda semakin tampil gaya, padat, berisi dan tentu saja .... Semakin "MONTHOK"dan membuat semua pengunjung blog melirik ....!!!!
Hi ... he ... ho .... ha ....Uhuk.... Uhukkk Uhuk ... Thet !!!!

Oh..., ya .., Sampeyan dapat juga membuat tampilan tanggal posting dalam bentuk yang tak jauh berbeda dengan date header di atas melalui cara yang berbeda. Silahkan KLIK link di bawah ini untuk baca tutorialnya!

0 Membuat Gambar Animasi Sebagai Profil

Bagaimana menampilkan sebuah inovasi baru yang oleh Blogger tidak disediakan fasilitasnya merupakan sebuah tantangan dan keasyikan tersendiri. Upaya ini adalah sebuah ungkapan kepedulian dan usaha untuk memperkaya penampilan Blogger sehingga diharapkan mampu semakin meningkatkan daya saing dan popularitas. Sebuah hal yang sederhana sebenarnya, akan tetapi semoga dapat kita nikmati sebagai sebuah imajinasi yang dapat semakin menambah keindahan dan sekaligus "keanehan" bagi pembaca blog. Bagaimana sebenarnya bentuk Profil animasi ini ? Ya..., demo memang sangat perlu karena acapkali kita kecewa dengan bentuk tutorial yang "muluk" tapi tanpa bisa kita saksikan bentuk sebenarnya. Ya .. karena kadang-kadang juga setelah kita dengan amat telaten dan "lelah" mencoba tutorial yang diberikan, eee .... ternyata
sama sekali nggak bisa kita gunakan untuk template kita. Kecewa !! Benar-benar membuat kecewa plus "emulsi". Ketika saat ini demo yang kuberikan hanya dalam bentuk "simulasi", bukan berarti aku ingin membuat kecewa juga. Kurasa kalian juga harus maklum bila setiap saat harus menggunakan demo kadang-kadang menjadi problem tersendiri juga. Bukankan jika semua harus melalui demo blog jadi super "berjejalan" yang buat loading jadi "lemot" ?! Percayalah ... Semua yang aku sampaikan ini sudah aku coba di blog tersendiri yang biasa aku buat nyoba. Hasilnya ?! So ... menarik pokoknya !

Klo mo lihat bentuk akhirnya kira-kira seperti ini :

Mengenai Saya

gubhugreyot
Lihat profil lengkapku

Ini adalah contoh model yang pertama. Untuk model yang kedua lebih menarik lagi karena menggunakan efek opacity dan efek hover, sehingga ketika mouse berada di atas gambar profil maka akan muncul dua buah gambar profil. Satu gambar sebagai background dan gambar yang lain merupakan gambar baru.

Langkah yang harus dilakukan untuk membuat profil baru :

1. Login ke Blogger.
2. Amankan template. Klo blom tahu, lihat caranya di sini !
3. Tetap di Edit HTML.
4. KLIK Expand Template Widget.
5. Gunakan Ctrl+F untuk cari KODE seperti di bawah ini :

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

6. Copy paste KODE di bawah ini dan letakkan persis di bawahnya :

<br/><br/><div align='center' style='width:102px;height:107px;border:2px solid red;background:#666 url(https://sites.google.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_RasterBlackTransV8H8-gubhugreyot.png) repeat; padding:5px;'><a href='http://gubhugreyot.blogspot.com/' title='Tuliskan title di sini !'><img alt='Tuliskan teks di sini !' src='image_profil-animasi.gif' style='height:94px;width:87px;padding:3px;border:2px solid #444; display:block; background:#999;'/></a></div>

Catatan :Gunakan gambar profil berukuran tidak terlalu besar.

7. KLIK Simpan Template.
8. Lihat hasilnya di blog.

Untuk model yang ke dua, silahkan copypaste KODE CSS di bawah ini dan letakkan di atas kode ]]></b:skin> , sedang xHTML-nya diletakkan seperti model yang pertama.

Kode CSS:

.profil{
      float:left;
      border:2px solid red;
      background:#666 url(https://sites.google.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_RasterBlackTransV8H8-gubhugreyot.png) repeat; 
      padding:5px;
      display:block;
}
.profil a{
      text-decoration:none;
      background:transparent;
      height:106px;
      width:99px;
      margin:0;
      display:block; }
.profil img{
      height:96px;
      width:89px;
      padding:3px;
      border:2px solid #444; 
      background:#999;
      display:block;
}
.profil img:hover{
      opacity:0.3;
      filter:alpha(opacity:30);
}
.profil a:hover{
      background:#fff url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/LatemBleding-gubhugreyot.gif);
}

xHTML

<br/><br/>
<div class="profil"><a href="http://gubhugreyot.blogspot.com" target="_blank" title="Tuliskan teks title di sini !"><img src="image_profile.gif" /></a></div>

Keterangan/Catatan :

1. Gunakan link image ini untuk bahan percobaan sebagai gambar profil kamu :

Contoh URL gambar profil -->
https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/ManusiaPurba-gubhugreyot.gif

2. Gunakan gambar profil untuk hover dengan ukuran : di bawah 100px x 100px.

3. Selamat berkarya. Sukses selalu untuk anda !!!

0 Cara Membuat Categories Tampil Cantik

Mungkin suatu ketika pernah terbersit dalam pikiran kita : Gimana ya membuat bentuk teks "Label" atau "Categories" seperti punya si "Anu". Kok bisa, ya...?! Kok nggak ada template bawaan blogger yang modelnya seperti yang itu ?!

Jangan kuwatir, kawan ! Ada cara super cepat untuk merubah tampilan label atau categories punya kalian. Nggak perlu bingung bagaimana cara buat teksnya. Semua sudah ada yang menyediakan. Gratis, lagi !

Langkah-langkahnya :

1. Sebagai langkah pertama kira-kira akan dibuat teks seperti apa label atau categories kalian. Mau tetap Label, Categories, Kategori, Daftar menu atau apapun yang menurut kamu baguslah.

2. Langkah selanjutnya kunjungi FlamingText.com - Logo Design

3. Buat teks yang kalian inginkan sepuas-puasnya dengan ukuran 22 (22px) s/d 27 (27px) : Ukuran standard dan jangan lupa langsung upload dulu gambar teks Label kamu di file hosting untuk digunakan link-nya. Jangan lupa kasih ongkos parkirnya ! he ...he ...

4. Kembali ke blog kamu.

5. Login ke blogger (Login to Blogger).

6. KLIK Tata Letak (Layout).

7. Amankan template (Secure Templates). Caranya bisa kamu lihat di sini !

8. Tetap di Edit HTML (Stay in the Edit HTML).

9. KLIK Expand Template Widget.

10. Cari KODE

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Catatan : KODE tersebut ada beberapa buah. Cari yang di sebelah atasnya ada KODE :

<b:widget id='Label...' .....dst 

10. Ganti KODE :

<data:title/>

, dengan :

<img src="Label.jpg" border="0"/> atau 
<img src="Categories.gif" border="0"/>

Sehingga bentuknya menjadi seperti contoh di bawah (disertai contoh link image Categories) :

<b:if cond='data:title'>
<h2><img src="https://sites.google.com/site/gubhugreyotprojects/image-posting/mart-2010/Categories-gubhugreyot.jpg" border="0"/></h2>
</b:if>

11. KLIK Simpan Template (SAVE).

12. Lihat hasilnya dengan membuka blog (open your blog).

0 Cara Membuat Dan Mengganti Judul Blog Dengan Animasi

Panduan BloGGeR dan Tutorial BloGGeR Animasi :

Membuat blog tampil menarik sudah menjadi kewajiban seorang blogger. Materi posting bagus tentunya harus didukung dengan penataan yang baik dan penampilan menarik. Bukankah sekalipun punya wajah cantik bodi "bahenol" kalau tidak pernah mandi dan berpakaian rapi serta sesekali berdandan akhirnya membuat orang malas juga untuk mendekatinya ? Hal seperti ini berlaku juga untuk sebuah blog. Posting yang sudah dengan susah payah dibuat (nglembur dan menghabiskan energi sekaligus nasi goreng dan rokok) tak jadi menarik bila penampilan blog sama sekali tidak di"othak-athik". "Ah, paling-paling orang ini baru seminggu ngeblog", begitu biasanya petualang blog berkata (dalam hati tentunya) kalau melihat wajah blog yang "sama sekali" persis dengan blog bawaan blogger. "Kacian", khan ?!

Merubah Bentuk teks judul blog kebentuk gambar merupakan salah satu cara merubah wajah header blog. Metode ini memungkinkan kita untuk lebih banyak menciptakan berbagai bentuk yang sangat variatif. Bisa berupa gambar biasa atau gambar animasi gif yang bisa berupa image atau image teks. Kita juga bisa menampilkan teks dengan efek blur, tiga dimensi dan masih banyak lagi yang lain.

Cara membuat :

1. Tentukan bentuk yang diinginkan : gambar atau teks. Untuk ukuran : yang penting ruangan di bagian header mencukupi.
2. Apabila ingin bentuk teks animasi datanglah di FlamingText.com - Logo Design. Silahkan langsung KLIK tuk ke sono ! Atau klo punya tempat lain, monggo !
3. Buat teks yang kalian inginkan sepuas-puasnya dengan ukuran font ideal berkisar di bawah 50 (50px;. Setelah jadi upload dulu ke image file hosting.
4. Kembali ke blog kamu.
5. Login ke blogger (Login to Blogger).
6. KLIK Tata Letak (Layout).
7. Amankan template . Cara nya bisa kamu lihat di sini !.
8. Cari KODE CSS seperti berikut (di bagian atas di bawah <head>).
   Tidak semua template punya kode sama. Sebagai contoh kira-kira seperti ini :

#header h1 {
        font-size: ...px; /* nilai dalam px atau %*/
        color: ....;
        text-align: ...;
        background: ...;
        ...
        ...
}

9. Rubah beberapa kODE menjadi seperti berikut :

#header h1 {
        font-size:...px;   /* tidak dirubah) px atau % */
        color:transparent;  /* color rubah ke  transparent */
        text-align:... ; /* tidak dirubah */
        background:transparent url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/blogsetangundulAnima-gubhugreyot.gif) left bottom no-repeat;
        ...  /* tidak dirubah */
        ... /* tidak dirubah */
}

10. Jangan lupa Klik Save Template.

Keterangan/Catatan :

- Perlu diperhatikan bahwa pada bbrp template digunakan kode :

#header h1 a{
        ...
        ...
        dst ...
}

- https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/blogsetangundulAnima-gubhugreyot.gif
URL di atas adalah salah satu gambar animasi gif yang berisikan nama blog atau blog title.
- left bottom (background-position) dapat juga di ganti left center atau cukup center bila ingin judul di tengah.

0 Cara Buat Dan Pasang Jam Digital Di Blog

Pasang jam pada blog sebenarnya sangat bermanfaat bagi blogger. Keasyikan saat posting atau "othak-athik" blog seringkali membuat blogger lupa waktu. Bagi yang lagi nggak punya tanggung jawab acara di keesokan harinya, sebenarnya sih nggak jadi masalah, tetapi ketika misalnya pagi harus "ngantor" atau punya "janji khusus", bisa-bisa semua jadwal jadi berantakan. Yanga lebih parah lagi : jangan-jangan justru "SK Pemberhentian Kerja" yang nongol. Untuk mengatasi masalah itu, akan sangat bijaksana seandainya kita pasang jam ditempat yang setiap kali terlihat di dalam blog kita. Disamping bermanfaat bagi "diri sendiri" tentunya juga akan jadi manfaat bagi para "petualang blog" yang juga sering lupa waktu ketika sudah mulai duduk di depan PC dan "jalan-jalan di belantara dunia maya. Oh..., ya... Satu hal yang dapat kita manfaatkan dari "pasang jam di bagian header" ini adalah : Wajah blog kita akan makin bertambah manis !!! Nggak percaya ?! Coba saja ...!

Cara pasanga jam di bagian Header :

1. Login ke Blogger.
2. Dasbor (Dashboard).
3. KLIK Tata Letak (Layout).
4. KLIK Edit HTML.
5. Amankan Template (Backup Template). Anda bisa lihat caranya di sini !.
6. Tetap di Edit HTMl.
7. Cari KODE berikut : (Gunakan Ctrl+F) Untuk mengetahui lebih jelas KLIK di sini !.

<div id='header-wrapper'>

8. KODE di atas terletak di bawah KODE <body>
9. Copy paste KODE di bawah ini dan letakkan di bawah <div id='header-wrapper'>

<form name='clock' style='float:right;padding:5px;margin:40px 10px 10px;border:4px solid #666;background:#333;'>
<input name='bgsGR' style='font-family:MS Sans serif;font-size:28px;color:#00FFFF;font-weight:bolder; background:#222 url(https://sites.google.com/site/gubhugreyotprojects/image-posting/mart-2010/bg_BlueFadeV57H4-gubhugreyot.jpg) top repeat-x;border:2px dotted red;padding:5px 0;display:block;float:right;text-align:center;width:125px;'/>
</form>

10. Ganti <body> dengan KODE baru di bawah ini :

<body onLoad='startclock()'>

11. KLIK Simpan Template (SAVE Template).
12. KLIK Elemen Laman (Page Elements).
13. Simpan Javascript berikut dengan cara KLIK Tambah Gadget --> HTML/Javascript --> SIMPAN.

<script type='text/javascript'>
//<![CDATA[<!--
//SimpleClock.js - gubhugreyot - bloggerstars-1
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = hours
timeValue += ((minutes < 10)?":0":":") + minutes
timeValue += ((seconds < 10)?":0":":") + seconds
document.clock.bgsGR.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;}
function startclock () {
stopclock();
showtime();
}
//]]>
</script>

14. Lihat hasilnya dengan membuka blog !

0 Menghilangkan Gambar Obeng Dan Tang

Bung, mas, mbak, pak, dik, bu, tante, mbah, kek .....Pernahkan sampeyan melihat orang membuang tang dan obeng ? Barangnya masih kinyis-kinyis, lho! Masih terbungkus rapi dalam plastik dan belum belepotan oli sama stempet. Ditanggung dijual pun masih laku keras, he .... Kalau memang mau dan buat simpanan atau jaga-jaga barangkali ada orang yang butuh mau perbaiki sepeda kumbang, atau .... eee ... barangkali rumah sampeyan dimasuki pencuri, tang atau obengnya bisa buat mukul atau ngelempar kepalanya biar benjol sebesar telur kerbau kemudian lari terkencing-kencing .. ha ... Klo mau, nich, cari saja disekitar rumah blogger. Banyak, kok, yang pada buang tang sama obeng baru. Benar-benar baru dan asli barang impor, lho. Tu ... tuh ..., yang buat langsung dari eyang buyut Blogspot, ... Ha ...

Cara Menghilangkan gambar tang dan obeng di blog :

Gambar tang dan obeng yang biasa kita lihat saat membuka blog, ketika kita tengah beraktifitas ngeblog atau membuat posting dan othak-athik desain blog, sebenarnya merupakan sebuah link quick edit. Link ini disediakan oleh blogger supaya seorang blogger dapat melakukan edit ulang pada kode html dibagian tertentu yang diberi tanda gambar obeng dan tank tersebut. Meskipun fasilitas ini sebenarnya juga mempunyai manfaat, akan tetapi dari berbagai pengamatan yang dilakukan terhadap para blogger, ternyata fasilitas quick edit sangatlah jarang dipergunakan. Tentu saja apabila memang kita tidak pernah menggunakannya, tak ada jeleknya bila icon quick edit ini dibuang sekalian. Ya ... daripada mengganggu pemandangan kretika kita sibuk melakukan posting atau meng-edit template. E ... barangkali setelah dilepas kemudian dikumpulkan bisa dijual di bakul loakan. Lumayan bisa buat beli rokok, ha .... Cukup banyak, lho, tang dan obeng dalam blog kita. Ha ... O ... o ...Jadi ngelantur! Yo kita mulai saja mumpung mata blom ngantuk !

1. Login to Blogger (Login ke Blogger) » Lakukan Login ke Blogger dengan memasukkan User Name atau alamat email dan Password.
2. Lay Out (Tata Letak) »» KLIK link "Tata letak (Layout)".
3. Edit HTML »» KLIK "Edit HTML".
4. ]]></b:skin> »» Cari kode " ]]></b:skin> ", kemudian letakkan kode html di bawah ini tepat di atas ]]><b/:skin.

.quickedit{
display:none;
}

5. SAVE Template (Simpan Template) »» KLIK "Simpan Template"
6. Tamat »» Obengnya jangan dibuang sembarangan atau dikasih ke orang lain. Kapan-kapan aku ke rumah! Mo buat buka bengkel servis payung-payung rusak , ha ....

0 Cara Menampilkan Avatar Di Navbar

Membuat Panduan Blogger, Tutorial Blogger atau Panduan dan Tutorial BlogDETIK yang aneh-aneh memang asyik dan bikin orang penasaran. Ya, mungkin saja sesuatu yang baru membuat banyak sobat blogger tetarik dan jadi penasaran juga. Membuat sebuah photo atau gambar animasi yang bertuliskan identitas blog atau identitas blog saya kira pasti jadi sesuatu yang menarik untuk ditampilkan. Untuk membuat ini, kita akan menggunakan permainan hover effects dan opacity effects yang mampu menciptakan transparansi, sehingga sebuah background image mampu tertampilkan di navbar.

Cara Membuat Gambar Animasi dan Gambar Avatar atau Photo di tampilkan di Navbar :

1. Login to Blogger (Login ke Blogger)
2. Dasboard (Dasbor) : Setelah masuk dasbor lanjutkan KLIK "Layout (Tata Letak)" kemudian KLIK "Edit HTML"
3. body{ .....} : Cari Kode syntax body { ... }, yang bentuknya kira kira seperti ini (nggak pasti sama, lho! Hanya sekedar contoh yang kuambil dari template minima bawaan blogger).
body {background:$bgcolor;margin:0;color:$textcolor;font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}
4. Copy Kode : Copy Kode berikut dan letakkan di atas syntax body{ .... } :
#navbar-iframe{opacity:0.4;-moz-opacity:0.4;filter:alpha(Opacity=40);background:#000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/GR_fire.gif) center repeat;}#navbar-iframe:hover{opacity:0;-moz-opacity:0;filter:alpha(Opacity=0);}
5. Simpan Template : KLIK "Simpan Template (Save Template)"
6. Jangan lupa untuk selalu melakukan pengamanan template terlebih dahulu sebelum perubahan desain blog dilakukan.
7. Ganti gambar yang disertakan di kode penampil photo atau animasi di atas dengan gambar milik sampeyan sendiri.
8. Apabila display navbar sebelumnya telah di sembunyikan, maka harus dibuka kembali.
9. Di opera dapat berfungsi dengan sempurna.

0 Cara Menyembunyikan Menghapus Judul Widget

Hari-hari terakhir ini tentunya beberapa rekan blogger jadi sibuk dan punya tambahan pekerjaan hanya gara-gara aturan penambahan widget di BlogSPOT yang berbeda dengan waktu-waktu sebelumnya. Pemberian Judul atau Nama Widget kini menjadi satu kewajiban yang tak mungkin dihindari atau ditolak. Susahnya ...., kewajiban memberi judul ini pada beberapa penambahan widget yang berasal dari luar BlogSPOT justru sebenarnya amat tidak diharapkan karena hanya menjadi pemenuh ruang dan sangat mengganggu upaya kita untuk menciptakan halaman blog yang terlihat rapi dan efisien. Kita bisa membayangkan pada satu hal kecil saja, misalnya untuk penambahan widget baru yang berupa javascript atau kode css dan xHTML untuk membuat sebuah cursor animasi. Mungkinkah kita akan beri judul pada widget tersebut? Tentu saja jadinya nggak lucu. Orang dibawah judul yang misalnya tertulis "Cursor Animasi", harusnya dibagian bawahnya ada sebuah bentuk barang (fungsi) yang menyertai judul tersebut ... e .... si cursor justru keliling sana-keliling sini nun jauh dari Judul Widgetnya. Sebuah tindakan aneh yang justru membuat semua jadi kacau menurut aku.

Bagaimana mengatasi permasalahan Judul Widget ini? Akankan sampeyan juga akan mendiamkan saja dan mau untuk menampilkan setiap judul widget sebagai pemenuh halaman blog semata? He .... he .... kalau mau, ya, syukur ...! Biar tambah ramai blognya. Ramai Judul, he .... he ... Biar orang yang buka pada ketawa, heh ... heh ... sambil terbatuk-batuk, uhuk ... uhuk ... uhuk .... thot .... Ha .... ha ....! Ha ... kalau ketawa terus sambil dibarengi kentut suaranya khan seperti itu. Uhuk ... uhuk ... uhuk ... thot ....!

Yo ... bareng-bareng pada buang kesungai, tuh judul widget! Biar nggak di ketawain pengunjung juga biar nggak jadi sarang judul. Emang dianggap tawon, ya kita? Tiap hari kerjanya buat sarang ma buat anak! Hu ....!

Cara Menyembunyikan - Memusnahkan Judul Widget si Pengganggu Tatanan Blog

Langkah Pertama : Cara Menambah Widget :

1. Login to BloGGeR (Login ke BloGGeR) ♥ Tuliskan User Name/Email Address kemudian tuliskan Password (Sandi).
2. Dasboard (Dasbor) ♥ Di halaman ini terdapat link Design/Rancangan/Tata Letak. KLIK link tersebut.
3. Desain/Rancangan/Tata Letak ♥ Setelah halaman ini terbuka, yang akan terlihat adalah Page Elements/Elemen Laman yang merupakan bagian dari Design/Rancangan.
4. Page Elements/Elemen Laman ♥ Lihat kolom dengan garis terputus-putus dengan teks Add Gadget/Tambah Gadget. Klik pada kolom tersebut.
5. Add a Gadget/Tambahkan Gadget ♥ Pilih Widget yang akan ditambahkan. Untuk widget dari blogger silahkan pilih yang tersedia. Apabila Widget yang akan ditambahkan/disimpan berupa kode HTML, kode CSS, Javascript dari luar (widget yang bukan berasal dari BloGGeR atau BlogSPOT), silahkan KLIK HTML/Javascript.
6. Configure HTML/JavaScript(Paste) ♥ Letakkan kode yang akan ditambahkan/disimpan dalam box yang tersedia.
7. Beri Judul Widget/Widget Title ♥ Tulis Nama atau Judul Widget Sesuka sampeyan.
8. SAVE/Simpan ♥ KLIK SAVE (Simpan).
9. Buka blog (Open Blog) ♥ Buka blog untuk melihat hasil penambahan widget.

Langkah Kedua - Cara Menyembunyikan Judul Widget (How to Hide Widget Title) :

1. Copy Judul Widget/Copy Widget Title ♥. Copy Judul Widget yang telah tertulis sebelumnya.
2. Edit HTML ♥. KLIK link "Edit HTML".
3. Cari Judul Widget/Find Widget Title ♥. Gunakan "Ctrl+F" untuk mencari Judul widget yang akan di cari. Bagi yang ingin mengikuti panduan cara cepat mencari kode html menggunakan Ctrl+F, sampeyan bisa
   KLIK di sini!
4. HTML Widget ♥. Sampeyan akan menemukan sederet Kode HTML seperti contoh di bawah ini :

   <b:widget id='HTML2' locked='false' title=' ' type='HTML'/>
   <b:widget id='HTML1' locked='false' title='Cursor Animasi' type='HTML'/>
   <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
   <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
   <b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
   <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

5. Cursor Animasi ♥. Misalnya Judul yang sampeyan cari adalah "Cursor Animasi". Perhatikan kode yang bercetak tebal seperti di bawah ini :

   <b:widget id='HTML1' locked='false' title='Cursor Animasi' type='HTML'/>

6. id='HTML1' ♥. Dari kode di atas, ambil kode yang berupa : id='HTML1'.
7. Buat Kode CSS ♥. Buat kode CSS berdasarkan Kode tersebut di atas.
   Bentuk kode CSS:
   #HTML1 h2.title{display:none;}.
8. ]]></b:skin> ♥. Simpan kode CSS yang telah dibuat di atas ]]></b:skin>.
9. Contoh Penempatan Kode ♥. Di bawah ini adalah bentuk posisi kode CSS yang nantinya terpasang di template sampeyan :

   #HTML1 h2.title{display:none;}
   ]]></b:skin>

10. Save Template/Simpan Template ♥ KLIK "Save Template/Simpan Template" dan lihat hasilnya dengan membuka blog.

0 Mempercepat Loading Blog Dengan Compress CSS

Tutorial BloGGeR tentang CSS perlu juga di bahas karena banyak sekali pengaruh kode CSS terhadap blog.
Loading blog yang lelet seperti siput narik motor kehabisan bensin menjadi persoalan klasik yang membuat hampir semua blogger sering mendongkol karenanya. Bagaimana mengatasi masalah ini? Ada banyak solusi yang mungkin kita tempuh, dari yang gratis hingga yang perlu banyak ongkos. Bagi mereka yang kantongnya setebal pantat bu Lina tentunya nggak pusing mengatasi masalah klasik ini. Tinggal keluarin do'it dan ...yab..., semua udah ngacir kayak si Mandra. Lain lagi ma si Panjul. Boro-boro nambah ongkos buat langganan yang bisa tancap gas, orang klo mau ngeblog saja dia mesti ngurangin jatah rokok. He...hehh...Setali tiga uang ma aku sebenarnya. Sama-sama bokek. Tapi meski bokek aku bener-bener syukur ma Yang Di Atas. Orang kepepet biasanya banyak dikasih jalan keluar. Hasil muter-muter keliling dunia aku ketemu ma tukang compress. E... lumayan. Nggak bayar, kok. Nggak kayak tukang tambal ban yang mesthi bayar cemban. Klo kamu kepingin, datang saja ke sana. Compress saja CSS kamu. Ditanggung tambah entheng, Njul. Klo, nggak percaya coba saja, dah. Kamu bisa pilih 3 macam compress-an. Compress biasa, compress sedengan dan yang ke tiga compress abis-abisan. Ya, dari pada kamu mesti compress sendiri kan susah. Belum klo masih harus manggil jig-jag (wals-machine). Ouw..., bisa abis kamu punya gubug.

Compress CSS sebenarnya merupakan bentuk penataan ulang CSS dengan cara dipadatkan sehingga muatannya menjadi lebih kecil. Karena terjadi pengurangan beban blog tentu saja secara otomatis akan meningkatkan kecepatan loading yang sifatnya berbanding terbalik dengan beban blog. Meskipun compress css juga bisa kita lakukan sendiri secara manual, akan tetapi proses ini cukup menyita waktu. Apalagi bagi yang masih belum memahami secara baik tentang KODE HTML, khususnya CSS, tentunya akan membuat faktor kesalahan menjadi semakin tinggi. Bagi yang ingin compress css silahkan kunjungi  :

http://www.cssdrive.com/index.php/main/csscompressor/

Buat yang belum begitu memahami tentang KODE CSS, mungkin sedikit tip di bawah ini bisa membantu.

1. Lakukan login ke blogger.com.
2. KLIK Rancangan (Design).
3. KLIK Edit HTML (jangan lupa amankan template terlebih dahulu dengan cara KLIK "Download Template Lengkap" kemudian simpanlah di folder PC).
4. Cari KODE body { dan ]]></b:skin>
5. KODE yang harus di compress adalah semua KODE yang dimulai dari body { hingga KODE yang terletak di atas kode ]]></b:skin>
Untuk mempermudah pencarian kode gunakan Ctrl+F.

0 Cara Membuat Elemen Baru Di Sidebar

Membuat Elemen baru berfungsi untuk mendapatkan ruang baru guna menambah widget dalam kolom yang berbeda-beda. Dengan elemen yang baru ini membuat penataan blog menjadi terasa lebih mudah. Sebagai bahan percobaan kita akan menggunakan template Minima bawaan blogger. Bentuk desain yang sederhana dari template ini akan memudahkan blogger untuk berujicoba sekaligus memahami secara cepat teknik membuat elemen baru di bagian sidebar.

Beberapa tahapan dilalui untuk membuat elemen baru ini :

1. Login ke Blogger (Login to Blogger).
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Klik Download Template Lengkap (proses mengamankan template).
6. Simpan dalam folder PC.
7. Tetap di Edit HTML.
8. Cari kode

#sidebar-wrapper {
        width: 220px; 
        border:1px solid white;
        padding:8px;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Untuk memudahkan mengingat (identitas baru), rubahlah menjadi seperti ini :

#sidebartop-wrapper {
        width: 220px;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden;  /* fix for long non-text content breaking IE sidebar float */
}

Buat KODE CSS baru berdasar CSS di atas dan letakkan persis di bawahnya. Bentuk KODE yang baru adalah seperti di bawah ini :

#sidebarmiddle-wrapper {
        margin-top:20px
        width: 220px;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebarbottom-wrapper{
        margin-top:20px
        width: 220px; 
        border:1px solid white;
        padding:8px;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Cari KODE HTML seperti di bawah ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Rubah KODE menjadi :

<div id='sidebartop-wrapper'>
<b:section class='sidebar' id='sidebartop' preferred='yes'>

KODE baru di atas akan membentuk rangkaian KODE baru dalam bentuk :

<div id='sidebartop-wrapper'>
<b:section class='sidebar' id='sidebartop' preferred='yes'>
......
......
</b:section>
</div>

Simpan KODE bar di bawah ini dan letakkan di bawah KODE di atas :

<div id='sidebarmiddle-wrapper'>
<b:section class='sidebar' id='sidebarmiddle' preferred='yes'/>
</div>

<div id='sidebarbottom-wrapper'>
<b:section class='sidebar' id='sidebarbottom' preferred='yes'/>
</div>

9. KLIK Simpan Template dan lihat hasilnya dengan membuka Elemen Laman dan halaman blog !

Keterangan/Catatan:

• Panduan atau titorial ini berdasarkan penggunaan kode html pada template lama blogger.
• Dengan selesainya pembuatan 2 buah elemen baru ini maka anda sekarang dengan mudah bisa memilih tempat baru untuk menambah widget. Bila ingin menambah elemen baru anda tinggal menggunakan cara seperti itu. Setiap menambah elemen baru gunakan identitas yang berbeda supaya tidak ada penolakan saat dilakukan proses Simpan Template.

0 Cara Membuat Elemen Baru Di Header

Mungkin sampeyan ingin menambahkan sebuah elemen baru di bagian header blog? Lakukan saja karena pasti banyak gunanya apabila sudah terpasang dan terlihat. Dengan penambahan elemen baru ini, kita bisa memanfaatkannya untuk menempatkan kode html atau javascript guna membentuk sebuah fungsi yang baru. Kalau sampeyan melihat blog ini, penambahan elemen bagian header aku gunakan untuk fungsi translate dan box yang memuat pemberitahuan kepada seluruh pengunjung melalui sebuah marquee effects. Silahkan sampeyan gunakan untuk sesuatu yang memberi support ke blog jika elemen baru ini telah di tambahkan. O ..., ya... Elemen blog bisa sampeyan lihat di halaman "Elemen Laman (Page Element)". Elemen ini ditandai dengan garis putus-putus yang membentuk box (kotak) dan disinilah banyak widget baru dapat ditambahkan melalui kode HTML atau Javascript setelah kita KLIK "Tambah Gadget".

Cara menambah Elemen Baru di bagian Header Blog :

1. Login : Login to BloGGeR (Login ke BloGGeR) dengan cara menuliskan "User Name/alamat email" dan memasukkan "Pasword (Sandi)".
2. Dasboard (Dasbor) : KLIK link "Layout (Tata Letak)". Tunggu beberapa saat hingga halaman baru terbuka.
3. Tata Letak (Layout) : Sebaiknya amankan template terlebih dahulu (backup) Bila sudah tahu manfaaatnya backup template silahkan lanjut, tetapi barangkali ada yang belum begitu memahami cara dan gunanya silahkan KLIK
   di sini!
   .
4. Cari Kode :Cari kode di bawah ini menggunakan "Ctrl +F", supaya lebih cepat. Untuk mengetahui cara cepat mencari kode HTML, silahkan sampeyan baca dulu
   di sini!
   .
Kode HTML yang harus di cari :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Rubah Kode HTML di atas menjadi :

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Kode yang tercetak tebal adalah kode sebelum perubahan dan sesudahnya.
5. Save (Simpan) : KLIK "SAVE TEMPLATE (SIMPAN TEMPLATE)".
6. Lihat Blog : Buka "Elemen Laman (Page Element)" untuk melihat hasilnya.

0 Cara Membuat Dan Memasang Shoutbox

Panduan BloGGeR dan Tutorial BloGGeR kali ini merupakan kelanjutan Panduan BloGGeR sebelumnya tentang

Cara Membuat dan Memasang Shoutbox

(langsung KLIK untuk membuka panduan tersebut!). Supaya shotbox yang sudah sampeyan pasang tidak terlalu meemenuhi halaman blog dan terutama biar terlihat lebih genit, maka akan kita lengkapi menjadi sebuah hidden shoubox yang nongkrongnya di blog sampeyan bagian sebelah kiri atau sebelah kanan. Untuk membangun "Hidden shoutbox" ini, dibutuhkan sebuah javascript dan kode html yang terdiri dari kode css dan xhtml. Melalui bantuan kode tambahan inilah, maka shotbox bisa ngumpet seperti burung beo sampeyan yang pinter ngomong "mboke ..., nambah maning, mboke ..." he ... he ... iya, khan, to?! he .... Dengan perubahan sedikit kode, Hidden shoutbox ini juga tidak hanya dengan cara di "KLIK", baru bisa nongol, kandang burung beo pinter ini bisa juga nongol hanya gara-gara sebuah elusan dan sentuhan yang di berikan pada pintu sangkarnya. Ndak percaya? Coba saja, pasti sampeyan baru percaya! Emang burung Perkutut saja yang bisa merespon elusan tangan? He ....

Pada prinsipnya shoutbox ini akan kita sembunyikan dari halaman blog sampeyan, sehingga yang terlihat hanya sebuah teks dengan bentuk tulisan "Buku tamu". Teks yang berupa gambar (tinggi 145px dan lebar 30px - seperti gambar di samping) ini akan menjadi kunci untuk membuka dan mengumpetkan (menyembunyikan, he ... he ...) si shoutbox supaya kembali ke ... kandangnya lagi. Untuk memfungsikan Hidden Shoutbox kita berikan 2 (dua) pilihan. Yang pertama model KLIK dan yang kedua model sentuhan.

Cara Membuat Hidden Shouthbox :

1. Buka Kode HTML shoutbox : Buka kembali kode html shoutbox sampeyan yang sudah disimpan di penambahan widget. Caranya seperti biasa : Login trus lanjutkan KLIK "Tata Letak (Layout)". Setelah masuk di Page Element (Elemen Laman), cari dimana sampeyan menyimpan kodenya. Setelah ketemu KLIK "Edit". Lihat dengan teliti apakah benar yang terlihat di depan mata sampeyan yang sudah "riyep-riyep" ngantuk itu benar-benar kode html shoutboxnya. Bila nggak keliru, silahkan teruskan lanjutannya.
2. Copy Kode CSS, javascript dan html : Copy seluruh kode html dan javascript yang ada di bawah kemudian tambahkan pada kode html shoutbox.
3. Save/Simpan : Setelah kode html dan javascript yang baru dipadukan dengan kode html shoutbox, KLIK "SAVE/Simpan".
4. Buka Blog : Lihat hasilnya dengan membuka blog.

Kode CSS, Javascript dan xHTML Hidden Shoutbox :

<style type="text/css">
#CilukBa_bgsGR{position:fixed;top:50px;z-index:+1000;}
* html #CilukBa_bgsGR{position:relative;}
.CilukBa_bgsGRknop{height:145px;width:33px;float:left;cursor:pointer;
 background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/button/TeksAnimaBukuTamu2.gif) no-repeat;}
.CilukBa_bgsGR_SB{float:left;border:2px solid #022f81;background:#75a3f8;padding:3px;}
</style>

<script type="text/javascript">
/* gubhug reyot * bloggerstars1 - bgs1GR */
function Ciluk_ba_bgsGR(){
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var w = CilukBa_bgsGR.offsetWidth;
CilukBa_bgsGR.opened ? moveCilukBa_bgsGR(0, 30-w) : moveCilukBa_bgsGR(20-w, 0);
CilukBa_bgsGR.opened = !CilukBa_bgsGR.opened;}
function moveCilukBa_bgsGR(x0, xf){
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;
CilukBa_bgsGR.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveCilukBa_bgsGR("+x+", "+xf+")", 10);}}
</script>

<div id="CilukBa_bgsGR">
<div class="CilukBa_bgsGRknop" onmouseover="Ciluk_ba_bgsGR()"> </div>
<div class="CilukBa_bgsGR_SB">

<!-- Disini Posisi KODE HTML Shoutbox === Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="bgs1GR" src="http://www6.shoutmix.com/?bgs1GR" width="160" height="500" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?bgs1GR">View sMix</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free aMix chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!--di sini akhir KODE HTML Shoutbox ====  End ShoutMix  -->

</div></div>
<script type="text/javascript">
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");
CilukBa_bgsGR.style.right = (33-CilukBa_bgsGR.offsetWidth).toString() + "px";
</script>

1. Model Sentuhan : Kode di atas digunakan sebagai model sentuhan. Ketika cursor disentuhkan ke gambar yang bertuliskan buku tamu, maka seluruh shoutbox akan nongol keluar.
2. Model KLIK : Apabila sampeyan pingin yang model KLIK, silahkan kode yang bercetak tebal bertuliskan "onmouseover" (javascriptnya), diganti dengan "onclick", sehingga bentuknya menjadi :
   <div class="CilukBa_bgsGRknop" onclick="Ciluk_ba_bgsGR()
   Dengan perubahan ini maka si shoutbox akan nongol ketika "Buku tamu" di KLIK.
3. Peletakan KOde Shotbox : Kode shoutbox milik sampeyan diletakkan persis di bawah kode :
   <div class="CilukBa_bgsGR_SB">
   dan di atas kode :
   </div></div>.
4. Hidden Shoutbox ini telah dicoba dan berhasil digunakan tanpa kendala apapun!
.

0 Cara Membuat Dan Memasang Kategori Blogspot

Panduan BloGGeR dan Tutorial BloGGeR Modifikasi Blog dan othak-athik Template :

He .... bener nggak bahasa planet yang aku buat di atas? Sial bener! Masa mo nulis pakai bahasa Inggris saja musti stress duluan. Biar saja ...! Salah juga "ndableg" saja. Niru gaya Thukul Arwana kadang penting juga. "Biar salah asal pede. Paling-paling orang tersenyum sendiri atau ketawa sampai terkentut-kentut. He ..... Nih..., semua gara-gara waktu pelajaran bahasa Inggris malahan ngacir ngerokok di kantin atau malahan nongkrong di "alun-alun". Menyesal sekarang! Mo nulis pakai bahasa Inggris saja musti buka kamus, google translate plus tambah bingung, he ....! Buat sobat-sobat blogger yang masih sekolah aku cuma pesan satu hal saja : Pelajari dengan sungguh2 MaPel bahasa Inggis kalian. Biar nggak menyesal kaya' si gubhug reyot. Bener-bener nyesel, dah! (Percaya, nggak?! Aku lagi nangis ,nich! menyesali goblognya aku berbahasa Inggris. tapi anehnya ... knapa mata malahan melotot sebesar jengkol? airmata nggak keluar, lagi! huh ... heran aku. Takutnya mata malahan melesat keluar, .. he ....)

Cara membuat dan memasang kategori dengan background animasi :

1. Contoh : Arahkan mata sampeyan ke kanan-atas blog ini pada kategori. Ya, seperti itu contohnya. Nyentrik, khan?!
2. Login : Login to BloGGer (Login ke BloGGeR).
3. Dasboard (Dasbor) : KLIK link "Layout (Tata Letak)".
4. Layot (Tata letak) (Dasbor) : KLIK link "Edit HTML".
5. CSS code (Kode CSS) : Cari kode "]]></b:skin>" (di atas tag <head>. Gunakan Ctrl +F untuk mevari kode tersebut. Bila blom tahu caranya silahkan KLIK
   di sini
   .
6. Copy Paste : copy dan simpan kode css berikut dan letakkan di atas kode ]]></b:skin>.
7. SAVE Template (Simpan Template) : KLIK SAVE Template (Simpan Template).

CSS Code (KODE CSS) :

#Label1 h2{color:transparent;
        background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/animacategories.gif) no-repeat 10px 50%;}
#Label1 .widget-content li{list-style:none;padding-left:40px;
        background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/Arrow_animacategories.gif) no-repeat 0 6px;}

Catatan :

Biar pasangnya gampang:

1. Bagi yang mempunyai widget label lebih dari satu, sebaiknya dihapus dulu semua. Setelah hapus lakukan penambahan widget label yang dari blogger, baru kemudian pasang kode css tadi.
2. Untuk sobat blogger yang hanya mempunyai satu widget label kepunyaan blogspot (seperti punya gubhugreyot yang sudah terpasang animasi di atas), silahkan langsung lakukan prosedur yang sudah tersedia di atas.

0 Cara Pasang Flag Counter

Ini hanyalah sebuah tips dan triks sederhana berdasar apa yang telah aku alami selama ngeblog. Dan sebelum dilanjutkan, "tak ada satupun pikiran buruk tersebul di bathok kepala bothak ku selain sebuah keinginan untuk sekedar berbagi dengan sampeyan semua.

Sebelumnya aku sama sekali tak pernah peduli dengan apapun yang namanya counter yang berhubungan dengan rating, popularitas, ranking dan apapun sebutan untuk sebuah peningkatan prestasi ngeblog. Ketakutan dan rasa pesimistis selalu menggelayut diotak ditelan keputusasaan akan sebuah harapan yang sepertinya hanya sebuah angan kesia-siaan. Ya ..., ngeblog dengan rutinitas tinggi, melek sampai pagi dan pekerjaan jadi terabaikan adalah sebuah wujud kecintaan akan dunia blog dan segmen posting yang aku pilih. Tutorial BloGGeR dan Panduan BloGGeR itulah yang jadi pilihanku. Beberapa yang lain tentang masakan, komputer, software, politik dan sastra hanyalah pengisi kejenuhan dan keputusasaan akan harapan yang sering menghantam semangat ngeblog ku. Yah, .... bayangkan ..., sudah beberapa blog yang coba aku buat tetapi tak pernah sekalipun kurasakan sebuah transisi menuju harapan yang selalu jadi impian seorang blogger. Bagaimana hasil posting mampu menapak ketingkat yang lebih tinggi dimana sang mesin pencari dengan mudah menemukan dan akhirnya dengan gampang pula para penjelajah internet melirikkan matanya untuk sekedar membuka sebuah halaman blog ku atau syukur-syukur lebih dari itu. Uh ..., dan itu tidak hanya berlangung dalam tempo sebulan tiga bulan. Buih ... berbulan-bulan, bung! Itulah sebabnya aku takut memasang satu counterpun! Sebuah rasa ketakutan melihat potret hasil kerja sendiri yang sepertinya tak pernah beranjak dari kegelapan dan dasar neraka blog. Persaingan yang tinggi memang membutuhkan sebuah kesabaran dan konsistensi. Sebuah pilihan harus diyakini, ditekuni dan dilakukan tanpa pernah putus asa plus semangat tinggi. Kini aku baru menyadari arti pentingnya sebuah counter. Apapun namanya dan apapun sebutan dan apapun yang mau dihitung. Ternyata dari counter inilah kita bisa melakukan monitoring terhadap apa yang selama ini sudah kita kerjakan. Kekurangan kita tentunya, bung!

Melihat site info di alexa, mypagerank rutin membuka data blog di Histats.com ternyata adalah sebuah aktifitas yang amat diperlukan untuk melihat sejauh mana perkembangan yang kita capai. Keberanian untuk menghadapi kepahitan setelah data terlihat haruslah dijadikan api membara yang membangkitkan semangat untuk tetap hidup. Semangat untuk tetap menjaga keberadaan kita ditengah persaingan ini. Bukan persaingan untuk saling menjatuhkan atau karena dengki dan iri. Persaingan untuk saling menunjukkan jati diri dan keseriusan untuk tetap bisa bertahan dan terus merangsek ke depan. Melangkah menuju jenjang yang lebih tinggi dalam sebuah prestasi kerja.

Keterlambatan bukanlah sebuah kematian atau ketertinggalan. Keterlambatan hanyalah sebuah proses yang sempat tertunda. Yah ..., sekalipun karena terlambat data otentik blog yang seharusnya kumiliki semenjak aku ngeblog tak mungkin lagi aku dapat, biarlah ini jadi pelajaran ketika aku membuat blog yang baru! Bukankah banyak orang mengatakan : Lebih baik terlambat dari pada tidak masuk sekolah ? He .... he .... Ngomong terlalu serius malahan jadi kaya' orang gila di guyur seember air, he ... he ...
Ayo tuh segera pasang flag counternya! Kaya'nya baru yang ini yang agak bener kerjanya. Beberapa flag counter yang aku pasang kemarin dulu pada kena virus ngalamun. Datanya banyak yang nggak benar. O, ya ... setelah terpasang kita bisa monitoring banyak hal tentang blog kita juga di sini. Cukup dengan KLIK saja di counternya ! Yo ..., Nih alamatnya :

http://www.trendcounter.com

Pemasangan counter ini sama halnya dengan cara menambah widget baru di blog yang berupa kode html, javascript atau kode CSS.

Kode yang akan kita dapatkan dari trendcounter adalah seperti di bawah ini :

<script type="text/javascript" src="http://widgets.tcimg.com/v1/flag.js"></script><script type="text/javascript">tc_flag("wmhbyk8q", "en", "010327", "919192", "4a5ce2", "3", "5");</script>

Tambahkan kode hingga bentuknya menjadi seperti di bawah ini :

<style type="text/css">
.bgs1GR_flagcounter{margin:20px 10px; padding:10px;border:1px solid #555;background:#222;opacity:0.3;-moz-opcity:0.3;filter:alpha(opacity=30);}
.bgs1GR_flagcounter:hover{background:#333;border:1px solid #a53802;opacity:1.0;-moz-opcity:1.0;filter:alpha(opacity=100);}
</style>
<div class="bgs1GR_flagcounter" align="center">
<script type="text/javascript" src="http://widgets.tcimg.com/v1/flag.js"></script><script type="text/javascript">tc_flag("wmhbyk8q", "en", "010327", "919192", "4a5ce2", "3", "5");</script>
</div>

Kode yang bentuknya tebal nantinya digantikan dengan kode/javascript yang didapatkan dari trendcounter.
Bagi yang perlu panduan lengkap untuk memasangnya, silahkan

0 Pasang Translator Di Blog

Translator ini ini berfungsi untuk menterjemahkan blog sampeyan ke dalam bahasa Inggris. Yah ..., memang untuk apa gunanya kita pasanga translator ke terlalu banyak bahasa? Bukankah kita semua juga tahu betapa translator yang hingga detik ini bisa kita manfaatkan tetap saja tak mampu memberikan hasil terjemahan sesuai harapan? Dus ... itu sama artinya untuk saat ini cukuplah hanya gunakan translator yang mampu menterjemahkan ke bahasa Inggris saja. Yah sekedar sebagai sebuah pelengkap blog yang mungkin saja berguna bagi yang membutuhkan. Tentu saja si pengguna juga masih harus banyak mengumpulkan segenap energi dan memeras keringat untuk bisa mengerti secara maksimal apa yang terbaca dala bahasa terjemahan. Atau mungkin saja mereka yang membaca justru jadinya lebih banyak mengerutkan dahi sambil tersenyum simpul membaca hasil translate yang bisanya jadi aneh nggak karuan?!

Cara membuat dan Memasang Translator

1. Login to BloGGeR (Login ke BloGGeR) : Tuliskan User Name/Nama Pengguna atau Email Addreess, kemudian lanjutkan dengan menuliskan Password/Sandi. Setelah semua terisi, KLIK Login.
2. Dasboard (Dasbord) : KLIK Layout/Tata Letak atau Design/Rancangan.
3. Layout/Tata Letak - Design/Rancangan : Setelah bebrapa saat akan terlihat Page Element (Elemen Laman). KLIK Add Gadget/Tambah Gadget (kotak yang bergaris putus-putus).
4. KLIK HTML/Javascript. Tunggu hingga sebuah box yang masih dalam keadaan kosong terlihat.
5. Lanjutkan dengan copy kode di bawah ini :

<a class="google_translate" href="#" target="_blank" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://i30.tinypic.com/9u6iiv/gubhugreyot/images/English.jpg" style="cursor: pointer;margin:10px;" /></a>

6. Letakkan kode dalam box dan kemudian lanjutkan KLIK SAVE/Simpan.
7. Buka blog untuk melihat hasilnya.

0 Buat Kode Posting Lightbox

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:

1. 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
2. rel="grsslightbox[gallery-1]" diperuntukkan untuk lightbox slideshow. Panduan membuat lightbox slideshow bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox slideshow