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

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

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Ljcwc8qJTL247rCWod9WjyCiEekmoZWjTRTjd8l7fzPbWmI1RWi9VKMS3XHRxLFEKpXAKZMz7a8lLXnxYrwjm6AMLZDWwSqLpcESbttbvNXyooY4JtySslvidNaIwumgq7X9OA1QzKI/s200/gubhugreyot-flying-girl.jpg" width="87" height="130" border="0" />
Perubahan memperbesar ukuran image
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Ljcwc8qJTL247rCWod9WjyCiEekmoZWjTRTjd8l7fzPbWmI1RWi9VKMS3XHRxLFEKpXAKZMz7a8lLXnxYrwjm6AMLZDWwSqLpcESbttbvNXyooY4JtySslvidNaIwumgq7X9OA1QzKI/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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Ljcwc8qJTL247rCWod9WjyCiEekmoZWjTRTjd8l7fzPbWmI1RWi9VKMS3XHRxLFEKpXAKZMz7a8lLXnxYrwjm6AMLZDWwSqLpcESbttbvNXyooY4JtySslvidNaIwumgq7X9OA1QzKI/s200/gubhugreyot-flying-girl.jpg" width="87" height="130" border="0" />
Perubahan memperbesar ukuran image
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Ljcwc8qJTL247rCWod9WjyCiEekmoZWjTRTjd8l7fzPbWmI1RWi9VKMS3XHRxLFEKpXAKZMz7a8lLXnxYrwjm6AMLZDWwSqLpcESbttbvNXyooY4JtySslvidNaIwumgq7X9OA1QzKI/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.

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>

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>

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) :
  2. Judul Posting - Judul Posting - Judul Posting

  3. Blink (Blink Animation) :
  4. 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:
  5. .post h3 a{
    margin: ...px;
    font-size: ...%/px;
    ...
    ...
    }
  6. Ganti dengan KODE baru seperti berikut:
  7. .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;
    ...
    ...
    }
  8. Bila KODE pada template kamu hanya berupa :
  9. .post h3 { 
    margin: ...px;
    ...
    ...
    }
  10. Ganti dengan KODE seperti di atas (ada penambahan "a").
  11. Bila ingin menambahkan border di atas dan di bawah judul posting seperti contoh gambar di atas, tambahkan KODE :
  12. .post h3 a{
    ....
    ....
    border-top:2px dotted red;
    border-bottom:2px dotted red;
    }
  13. KODE baru-nya menjadi seperti ini :
  14. .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;
    ...
    ...
    }

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) :
  2. Judul Posting - Judul Posting - Judul Posting

  3. Blink (Blink Animation) :
  4. 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:
  5. .post h3 a{
            margin: ...px;
            font-size: ...%/px;
            ... 
            ... 
    }
  6. Ganti dengan KODE baru seperti berikut:
  7. .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; 
            ... 
            ... 
    }
  8. Bila KODE pada template kamu hanya berupa :
  9. .post h3 { 
            margin: ...px; 
            ... 
            ... 
    }
  10. Ganti dengan KODE seperti di atas (ada penambahan "a").
  11. Bila ingin menambahkan border di atas dan di bawah judul posting seperti contoh gambar di atas, tambahkan KODE :
  12. .post h3 a{
            ....
            ....
            border-top:2px dotted red; 
            border-bottom:2px dotted red;
    }
  13. KODE baru-nya menjadi seperti ini :
  14. .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; 
            ... 
            ... 
    }

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.

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.

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!

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!

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

Hua ... Ha .. Ha.. U...huk

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 !!!

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

Hua ... Ha .. Ha.. U...huk

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 !!!

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).

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).

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 :
  9. #header h1 {
    font-size: ...px; /* nilai dalam px atau %*/
    color: ....;
    text-align: ...;
    background: ...;
    ...
    ...
    }
  10. Rubah beberapa kODE menjadi seperti berikut :
  11. #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 */
    }
  12. 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.

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 :
  9. #header h1 {
            font-size: ...px; /* nilai dalam px atau %*/
            color: ....;
            text-align: ...;
            background: ...;
            ...
            ...
    }
  10. Rubah beberapa kODE menjadi seperti berikut :
  11. #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 */
    }
  12. 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.

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 !.
  8. <div id='header-wrapper'>
  9. KODE di atas terletak di bawah KODE <body>
  10. Copy paste KODE di bawah ini dan letakkan di bawah <div id='header-wrapper'>
  11. <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>
  12. Ganti <body> dengan KODE baru di bawah ini :
  13. <body onLoad='startclock()'>
  14. KLIK Simpan Template (SAVE Template).
  15. KLIK Elemen Laman (Page Elements).
  16. Simpan Javascript berikut dengan cara KLIK Tambah Gadget --> HTML/Javascript --> SIMPAN.
  17. <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>
  18. Lihat hasilnya dengan membuka blog !

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 !.
  8. <div id='header-wrapper'>
  9. KODE di atas terletak di bawah KODE <body>
  10. Copy paste KODE di bawah ini dan letakkan di bawah <div id='header-wrapper'>
  11. <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>
  12. Ganti <body> dengan KODE baru di bawah ini :
  13. <body onLoad='startclock()'>
  14. KLIK Simpan Template (SAVE Template).
  15. KLIK Elemen Laman (Page Elements).
  16. Simpan Javascript berikut dengan cara KLIK Tambah Gadget --> HTML/Javascript --> SIMPAN.
  17. <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>
  18. Lihat hasilnya dengan membuka blog !

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.
  5. .quickedit{
    display
    :none;
    }
  6. SAVE Template (Simpan Template) »» KLIK "Simpan Template"
  7. Tamat »» Obengnya jangan dibuang sembarangan atau dikasih ke orang lain. Kapan-kapan aku ke rumah! Mo buat buka bengkel servis payung-payung rusak , ha ....
 




Pengikut

Harbudi Manggala Putra MengucapkanTerima Kasih Atas Kunjungan Anda Di Blog Saya . Maaf Saya Hanya Manusia Biasa Yang Berusaha Untuk Menjadi Yang Terbaik