Create animations on Header Image (New Blogger Templates) using CSS3

New Blogger Template adalah sebuah tantangan baru bagi semua blogger. Ya ..., template yang sangat jauh berbeda dengan "Template Lama Blogger" atau "Template Tata Letak (Layout Template)" ini sungguh membuat semua penasaran untuk mengobrak abrik isi dalamnya (he ...., tapi jangan kaya' si Paijo tetangga rumah sampeyan yang kerjanya bukan mengobrak-abrik template tapi justru "mengobrak-abrik rumah tangga orang". Aha .... jangan-jangan justru sampeyan yang jadi gurunya si Paijo?! Iya, broer? Wah ... malah cengar-cengir! Wah ..., bahaya, nih! Biasanya yang suka cengar-cengir suka melakukan hal seperti itu? He .... he ...). Dan ini broer, salah satu hasil suka mengobarak-abrik jerohan orang ( he ... eh ..., maksudku jerohan template!): Sebuah paduan kode CSS yang mampu menciptakan animasi pada header image blog!

CSS3 menjadi andalan untuk melakukan aksi menarik ini. Dengan memanfaatkan opacity effect, CSS3 border radius, CSS3 background rgba dan CSS3 Transition-transformation maka jadilah sebuah animasi cantik hasil penggabungan beberapa efek tadi. Sebuah gambar terjungkir akan menjadi header image blog dan pasti akan membuat orang penasaran. Lha ketika orang penasaran, maka secara otomatis cursor akan dibawa ke bagian header. Saat itulah aksi animasi terjadi dengan bergeraknya header image kearah kanan dengan di dahului sebuah putaran melebar yang membuat dia dalam sesaat menghilang dari pandangan kemudian tiba-tiba sudah berada di tengah-tengah header dengan ukuran yang lebih besar. Penasaran? Hoho .... jangan sekali-sekali rasa penasaran dibiarkan menggerogoti hati dan perasaan sampeyan. Kata orang tua, "Rasa penasaran yang tak tersalurkan ibarat birahi yang tersumbat!" He .... he ... kaya si Paijo! He .... he .... Makanya jangan diam saja! Nih, KLIK link demo di bawah ini! Ssstt ... di KLIK, lho! Jangan di raba-raba nanti terbangun! Wua ... ka' ka' ka'...

Jika sampeyan mencermati kolom header yang terlihat di demo, maka sebenarnya ada sesuatu yang berbeda karena dengan menampilkan header image sekecil itu harusnya "blog title" tidak akan terlihat. Yang akan ditampilkan hanya header image dan header description. Supaya bisa dalam rupa seperti di demo, maka sedikit penambahan kode harus kita lakukan untuk "memunculkan" blog title. Modifikasi ini kita lakukan di tag header yang ada di dalam tag body. Satu kelebihan tambahan dengan modifikasi di tag header ini adalah dengan dimungkinkanya kita menambahkan atau membuat link yang berbeda dengan link blog (link yang seharusnya ada di header). Contohnya jika sampeyan punya blog lain, maka link-nya bisa di pasang di link blog title yang kita buat sendiri ini. Bagaimana cara membuatnya? Yo ... kita buat bareng-bareng!

Cara membuat Animasi pada Header Image Blogger Baru

• Login : Login to Blogger.
  • Gunakan User Name atau Nama Pengguna. Tuliskan pada box yang tersedia.
  • Tuliskan Password (Sandi.
  • KLIK "Login".
• Setelah halaman "Dasboard" terbuka, cari dan KLIK link "Design" atau "Rancangan".
• Kembali cari dan KLIK link "Edit HTML".
• Back-up Template dengan KLIK "Download Full Templates (Download Template Lengkap)". Simpan file template di folder PC dan berikan nama khusus jika diperlukan. Setelah penyimpanan selesai kembali ke "Edit HTML". KLIK link "Page Elements (Element Laman)".
• KLIK "Edit" di Elemen "Header". Tunggu beberapa saat!
  • KLIK atau beri tanda pada Tempatkan keterangan setelah gambar (Have a description placed after the image) dan Dari Web: (From the web: ).
  • Masukkan URL gambar (lho ... mana gambarnya? blom di siapin, ya? He he ... maap maap! Ukuran gambar berkisar 80pixel x 80pixel atau 80px x 80px. Boleh hitam putih atau berwarna atau gambar animasi juga lebih bagus!).
  • Jika gambar belum nongol, hapus huruf "h" pada http kemudian segera "ketik" huruf "h" tersebut pada posisi yang sebelumnya di hapus.
  • Setelah gambar terlihat, KLIK "SAVE/Simpan".
  • Jangan lupa untuk menuliskan deskripsi dan title.
• KLIK "Edit HTML", kemudian setelah halaman Edit HTML terbuka, cari kode ]]></b:skin>
• Copy dan pastekan kode CSS di atas ]]></b:skin>.
• Cari kode <div id='header-inner'>. Kode seperti ini ada tiga. Cari yang di atasnya ada kode <!--Show the image only-->.
• Letakkan xHTML setelah kode <div id='header-inner'>.
• Ganti terlebih dahulu blog title dan link title pada xHTML.
• KLIK "SAVE Templates" atau "Simpan Template".
• Selesai sudah !

Kode CSS animations on Header Image

.header-outer img#Header1_headerimg {
       margin: 10px;
       padding: 8px;
       background: rgb(0,0,0);
       background: rgba(0,0,0, 0.3);
       opacity: 0,8; /*original code by: www.orang2gembel.co.cc */
       border: 3px solid #eee;
       border-radius: 6px;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px;
       -goog-ms-border-radius: 6px;  
       -o-transform: scale(0.5) rotate(-190deg) translate(0, 0);
       -moz-transform: scale(0.5) rotate(-190deg) translate(0, 0);
       -webkit-transform: scale(0.5) rotate(-190deg) translate(0, 0);
       -o-transition: all 2s ease-out;
       -moz-transition: all 2s ease-out;
       -webkit-transition: all 2s ease-out;
}
.header-outer:hover img#Header1_headerimg {
       opacity: 1.0;
       border-radius: 26px;
       -moz-border-radius: 26px;
       -webkit-border-radius: 26px;
       -goog-ms-border-radius: 26px;   
        border-color: #555;
       -o-transform: scale(1.5) rotate(380deg) translate(200px, -50px);
       -moz-transform: scale(1.5) rotate(380deg) translate(200px, -50px);
       -webkit-transform: scale(1.5) rotate(380deg) translate(200px, -50px);
       -o-transition: all 4s ease-in-out;
       -moz-transition: all 4s ease-in-out;
       -webkit-transition: all 4s ease-in-out;
}

.header-inner span.bgsgrjudul a {
       display: block; 
       font-size: 40px;
       text-shadow: 1px 1px 1px #aaa; 
       color: #01fbfe;
       text-decoration: none;
       float: right; 
       margin: 30px 150px 0 30px;
       -o-transition: all 2s ease-in;
       -moz-transition: all 2s ease-in;
       -webkit-transition: all 2s ease-in;
}
.header-inner span.bgsgrjudul a:hover {
        color: red;
}

xHTMl animations on Header Image

Perhatikan letak xHTML di bawah kode yang berkedip!

<!--Show the image only-->
<div id='header-inner'>

<span class='bgsgrjudul'><a href='http://www.orang2gembel.co.cc/'>Orang2Gembel</a></span>

Catatan

• Untuk mengatur posisi blog title dari ujung kanan header (apabila menhendaki posisi yang berbeda. Misalnya di tengah), rubahlah nilai margin pada syntax .header-inner span.judul a { margin: 30px 150px 0 30px; }. Perubahan dilakukan pada angka "150px". Semakin besar akan membuat blog title semakin ke kiri.
• Untuk menyesuakan warna blotg title dengan latar header, rubah pada .header-inner span.judul a { color: #01fbfe; }.
• Untuk merubah ukuran teks, rubah pada .header-inner span.judul a { font-size: 40px; }.

Semoga berhasil dan bermanfaat dalam memperindah blog!

Show - Hide Navbar with Animation using CSS3: Cara Menhilangkan Navbar Blogspot

Show Hide Navbar with Animation ini mungkin akan menjadi jalan tengah bagai beberapa sobat blogger yang tidak suka navbar ikutan nongol di halaman blog. Dengan menggunakan CSS3, kita akan membuat navbar tersembunyi (hilang) dan akan nongol lagi ketika cursor diarahkan pada satu titik tertentu. Tentu saja desain ini telah kita rancang secantik mungkin sehingga penampilan blog tetap terjaga. Dengan menyertakan kode CSS3 Transition, maka sebuah bentuk animasi gerak memungkinkan navbar sembunyi dan nongol dengan cara yang halus (tidak sruntal-sruntul kayak kalian, he ... he ...!). Saat blog dibuka navbar tidak akan terlihat. Di bagian atas blog (top bar) hanya akan terlihat sebuah image (gambar) yang kita gunakan sebagai "semacam swith" pembuka navbar. Saat cursor menyentuhnya, maka secara perlahan-lahan "si navbar" terlihat turun untuk memperlihatkan diri. Untuk menghilangkan navbar tersebut cukup lakukan dengan melepaskan cursor dari semua bagian navbar. Secara perlahan dia akan kembali pulang untuk bersembunyi ke habitatnya semula di di bagian atas blog. Sampeyan bisa coba melihat DEMO-nya dengan KLIK link di bawah ini. Carilah di bagian atas blog sebuah gambar (image) yang bertuliskan "Navbar (bertanda -panah-)".

Kode CSS

#navbar-iframe {
      height: 30px;
      padding-bottom: 30px;
      background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/navbar.gif) bottom right no-repeat;
      background-position: 99.5% 30px;
      position: absolute; 
      margin-top: -30px;
      -o-transition: all 1.5s ease-in;
      -moz-transition: all 1.5s ease-in;
      -webkit-transition: all 1.5s ease-in;
}
#navbar-iframe:hover {
      margin-top: 0px; 
      cursor: pointer;
      }

body {margin: 0;padding: 0;border: 0; ... dst; }

Cara menggunakan Show Hide Navbar

• Login : Login to BloGGeR (Login ke BloGGeR).
  • Masukkan/tuliskan "User Name" atau "Nama Pengguna". Sampeyan bisa juga menggunakan "Email Address".
  • Tuliskan "Password" atau "Sandi".
  • KLIK Login. Tunggu beberapa saat hingga sebuah window baru yang berupa halaman "dasboard" terlihat.
• Dasboard (Dasbor) : Beberapa link akan ditampilkan, pilih dan KLIK link "Design" atau "Rancangan" (sebelumnya dikenal sebagai "Tata Letak" atau "Layout". Tunggu kembali untuk beberapa saat.
• Design (Rancangan) : Bagian Design atau Rancangan yang akan terlihat adalah "Page Elements" atau "Elemen Laman". Halaman ini ditandai dengan terlihatnya beberapa kolom yang berisi box dan merupakan pola dasar desain blog sampeyan. (akan terlihat beberapa kotak (box) dengan garis terputus-putus). Lanjutkan dengan KLIK link "Edit HTML".
• Sampeyan akan melihat banyak kode HTML. Cari kode (tag) body yang letaknya di bagian atas template. Bentuknya kira-kira seperti yang terlihat di kode CSS. Jika sulit untuk mencarinya, silahkan buka tutorial tentang cara cepat mencari kode HTML yang terletak di Special Tutorials di sebelah kiri blog!.
• Copy kode CSS kemudian pastekan tepat di atas kode (tag) body.
• KLIK "SAVE Templates" atau "Simpan Template".
• Buka blog untuk melihat tampilan baru Navbar sampeyan.

Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Opacity effect sebenarnya sebuah CSS property yang berfungsi untuk menciptakan efek transparansi atau sering disebut juga efek blur. Semua browser sudah support terhadapnya, hanya untuk Internet Explorer harus digunakan kode yang berbeda dari yang lain. Memanfaatkan opacity property dalam sebuah desain sangat mudah dilakukan, hanya agar supaya ketika cursor diarahkan di atasnya keadaan berubah menjadi terang/gelap maka harus ditambahkan sebuah hover effect. Secara sederhana penulisan opacity effect dalam sbuah kode CSS adalah sebagai berikut:

Penulisan opacity property di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}

Penulisan opacity property dan hover effects di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

• Opacity di Internet Explorer dituliskan dalam bentuk kode:
  filter:alpha(opacity=...);
• Nilai opacity (tanda titik-titik) sebesar 0 s/100.
• Nilai opacity di browser yang lain menggunakan nilai 0 s/d 1.0
• Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas.

Menggabungkan opacity property dan CSS3 Transition

Saat ini banyak browser sudah support terhadap CSS3 hingga berbagai efek baru dapat ditambahkan dalam sebuah desain termasuk saat kita mendayagunakan opacity property. Penggunaan CSS3 transition akan mampu menciptakan sebuah transisi dalam waktu yang bisa diatur saat terjadi perubahan efek gelap menjadi terang atau terang menjadi gelap. Transisi ini tentunya akan membuat efek transparansi yang tercipta menjadi semakin menarik, karena kecepatan waktunya bisa diatur sesuai selera.

Kode CSS: Efek Gabungan opacity dan CSS3 Transition

.efekblur {
      opacity: 0.7;
      filter: alpha(opacity=70);
     -o-transition:opacity ease-in 700ms;
     -moz-transition: opacity ease-in 700ms;
     -webkit-transition: opacity ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Jika beberapa efek lain masih ingin di tambahkan, maka penulisan dituliskan dalam bentuk:

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
     -o-transition: all ease-in 700ms;
     -moz-transition: all ease-in 700ms;
     -webkit-transition: all ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Kode CSS di atas karena menggunakan CSS3, maka hanya akan bekerja secara sempurna di browser yang sudah support CSS3 seperti Mozilla, Opera, Safari dan Google Chrome serta beberapa browser tertentu yang lain.

Box dengan Efek Gelap Terang

Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px;   
      padding: 15px 8px;
      background: #111;
      color: #666; 
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}

Untuk menggunakan box tersebut, sampeyan harus menggunakan kode xHTML seperti di bawah ini:

<div class="boxwidget">
Di sini widget atau Teks diletakkan!
</div>

• Simpan kode CSS di atas kode ]]></b:skin>
• Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka <body> dan tag penutup <body>.
• Untuk menggunakan kode CSS tersebut di blog, sampeyan bisa baca Special Tutorials yang terletak di menu sebelah kiri. Di situ tersedia beberapa tutorial dasar yang berkaitan dengan posting ini.

Snow Effects

Berbeda dengan Money Rain Effects yang harus menggunakan image untuk menciptakan sebuah effek, Snow Effects mampu menciptakan efek hujan salju tanpa harus menambahkan gambar/image. Efek ini benar-benar murni menggunakan javascript. Seperti apa tampilan sebuah blog dengan Snow Effect di dalamnya ?

Cara membuat Snow Effects :
Lakukan :
Login di Blogger --> Tata Letak --> Edit HTML.
Lanjutkan cari KODE </head> kemudian simpan javascript persis di atasnya.KLIK Simpan Template

<script type="text/javascript">
//<![CDATA[
/* bloggerstuars/gubhugreyot.blogspot.com */
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
(function(){
var num = 30;   //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 
var y = [];var x = [];var fall = [];var theFlakes = [];var sfs = [];var step = [];var currStep = [];
var h,w,r;var d = document;var pix = "px";var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");var idx = d.getElementsByTagName('div').length;
if (d.documentElement.style && 
typeof d.documentElement.style.MozOpacity == "string")
num = 12;for (i = 0; i < num; i++){sfs[i] = Math.round(1 + Math.random() * 1);
document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');
currStep[i] = 0;fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;}
if (domWw) r = window;else{  if (d.documentElement && 
typeof d.documentElement.clientWidth == "number" && 
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{  if (d.body && 
typeof d.body.clientWidth == "number")
r = d.body;}}
function winsize(){var oh,sy,ow,sx,rh,rw;if (domWw){
if (d.documentElement && d.defaultView && 
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;}
else{rh = r.innerHeight;rw = r.innerWidth;}
h = rh - 2;  w = rw - 2; }else{ h = r.clientHeight - 2; w = r.clientWidth - 2; }}
function scrl(yx){var y,x;if (domSy){y = r.pageYOffset;x = r.pageXOffset;}
else{y = r.scrollTop;x = r.scrollLeft;}
return (yx == 0)?y:x;}
function snow(){var dy,dx;for (i = 0; i < num; i++){dy = fall[i];dx = fall[i] * Math.cos(currStep[i]);
y[i]+=dy; x[i]+=dx; if (x[i] >= w || y[i] >= h){y[i] = -10;x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;}
theFlakes[i].top = y[i] + scrl(0) + pix;theFlakes[i].left = x[i] + scrl(1) + pix;currStep[i]+=step[i];}
setTimeout(snow,timer);}
function init(){winsize();for (i = 0; i < num; i++){theFlakes[i] = document.getElementById("flake"+(idx+i)).style;y[i] = Math.round(Math.random()*h);x[i] = Math.round(Math.random()*w);}snow();}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);} 
else if (window.attachEvent){window.attachEvent("onresize",winsize);window.attachEvent("onload",init);
} 
})();}
//]]>
</script>

Money Rain Effects

Hujan uang ? Siapa nggak suka?! Ada pepatah mengatakan "Lebih baik hujan uang di negeri sendiri daripada hujan batu di negeri orang (kepala bejol-benjol, lho!). Ini pepatah baru yang tentu saja semua orang suka. Kamu pingin pembaca blog kamu tambah kerasan karena di blog terjadi hujan uang?! Lho ini benar-benar nyata, bung!

Cara membuat Money Rain Effects :
Cukup dengan copy paste javascript di bawah ini dan simpan di bagian body di atas KODE </head> Lakukan :
Login di Blogger --> Tata Letak --> Edit HTML.
Lanjutkan cari KODE </head> kemudian simpan javascript persis di atasnya.KLIK Simpan Template

<script type="text/javascript">
//<![CDATA[
/* bloggerstuars/gubhugreyot.blogspot.com */
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQe_QTixGfHSwbrBZdREOW1lUyxRADkxTdpodkZcN8OmEoai9IsQbo2C1nNI-DqYjgYP-LKn3Wml96AwfQVB30bl35bjAGSqwBfJF_wMiepE5EwvNtPtsZs6VPSBAs1cq9SNsjcfBnTDY/s200/money.gif"
var no = 10;
var hidesnowtime = 0;
var snowdistance = "pageheight";
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600; 
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) { 
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>

Catatan :
Image yang digunakan sebagai Efek hujan dapat kamu ganti dengan gambar-gambar lainnya dengan merubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQe_QTixGfHSwbrBZdREOW1lUyxRADkxTdpodkZcN8OmEoai9IsQbo2C1nNI-DqYjgYP-LKn3Wml96AwfQVB30bl35bjAGSqwBfJF_wMiepE5EwvNtPtsZs6VPSBAs1cq9SNsjcfBnTDY/s200/money.gif

Membuat Tanda Tangan di Blog

Menampilkan ciri khas atau identitas diri bisa menggunakan berbagai cara. Selain nama blog, favicon di address bar dan seabreg cara dan ciri khas lain, sebuah tanda tangan, selain membuat ciri khas super khusus dan pasti berbeda dengan yang lain, dia juga mampu ditampilkan sebagai alat untuk mempermanis gaya atau style blog.

Membuat sebuah tanda tangan selain bisa dilakukan sendiri dengan membuatnya menggunakan berbagai software seperti Adobe Photoshop, Corell Draw dan yang lain, bisa juga dibuat dengan memanfaatkan situs pemberi layanan gratis membuat tanda tangan. Berbagai gaya dan variasi tanda tangan bisa kita ciptakan dengan cara yang sangat mudah. Cara ini merupakan yang paling gampang dan bisa dilakukan semua blogger tanpa kecuali. Keahlian menggunakan software pembuat gambar tak diperlukan lagi dan yang jelas waktu membuatnyapun amat singkat. Mau coba?

Silahkan klik link di bawah ini dan sampeyan dapat segera mempunyai tanda tangan yang bisa diletakkan diberbagai sudut blog. He ... he ... semua sudut mo dipenuhi boleh juga ~! Ha ... biar ramai kaya' pasar malam!!!

http://mylivesignature.com/

Langkah Pembuatan Tanda Tangan

• Setelah klik link di atas maka sampeyan akan melihat halaman mylivesignature.com. Cari dan klik link Proceed yang terdapat di sebelah kiri tengah halaman.
• KLIK Using the signature creation wizard.
• Tuliskan Teks yang akan dibuat menjadi sebuah tanda tangan, kemudian KLIK button Next Step
• Tunggu hingga berbagai bentuk tanda tangan terlihat. Jika belum ada yang cocok bisa pilih berbagai jenis huruf yang tersedia dengan klik pilihan yang disediakan melalui button yang ada. Setelah ada satu pilihan yang paling pas dan cocok dengan selera, berikan tanda kemudian KLIK button Next Step.
• Pilih ukuran yang tepat dan kembali KLIK button Next Step.
• KLIK pada kode warna untuk merubah background color (Click to change the background color) atau bisa memilih transparent dengan memberi tanda (klik) pada pilihan background transparan.
• KLIK pada text color (Click to change the the text color) untuk memilih warna tanda tangan.
• KLIK button Next Step.
• Pilih sudut kemiringan tanda tangan dan lanjutkan kembali dengan KLIK button Next Step.
• Pada langkah ini bisa dilakukan klik kanan pada gambar kemudian "SAVE image" selanjutnya upload di image hosting. Sampeyan bisa juga klik Want to download this signature? kemudian setelah URL tanda tangan dicopy langsung upload di image hosting. Atau klik Want to use this signature? kemudian klik Generate HTML code dan lanjutkan kembali dengan klik Generate a code for my handwritten signature.
• Ambil dengan copy kode HTML yang tersedia dalam box.
  Contoh Kode HTML:
  
  <a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54488/383/C9D62899FC43CCD15F6560899A516E00.png" style="border: 0 !important; background: transparent;"/></a>

Jika tanda tangan diupload sendiri di file hosting, gunakan URLnya dalam sebuah tag image seperti di bawah ini:

<img src="URL tanda tangan" width="..." height="..." style="border:none;" />

[Blogger]Display Navbar on Mouseover

"Display Navbar on Mouseover" mungkin menjadi pilihan tepat bagi beberapa blogger yang tetap menginginkan keutuhan fungsi navbar. Penggunaan "Display Navbar on Mouseover", pada template berfungsi untuk menghilangkan navbar pada tampilan blog, tetapi navbar akan muncul kembali pada saat cursor menyentuh bagian navbar yang tersembunyi. Dengan cara seperti ini menjadikan navbar tetap berfungsi sebagaimana mestinya.

Cara menggunakan Display Navbar on Mouseover :

1. Sebelum menerapkan dan menyimpan KODE penghilang navbar, sebaiknya amankan dulu tenplate kalian dengan cara :

Login ke Blogger --> KLIK Tata Letak --> KLIK Edit HTML -->

KLIK Download Template Lengkap --> Simpan di folder PC

2. Tetap di posisi Edit HTML.

Cari KODE body{ (terletak di bagian atas Edit HTML)

Copy paste KODE di bawah dan letakkan tepat di atas KODE body{

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}
#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

3. KLIK Simpan Template.

4. Buka blog untuk melihat hasilnya.

Catatan :

- Untuk lebih memudahkan dalam melakukan pencarian KODE HTML di dalam ruang Edit HTML (seperti halnya KODE body}), sebaiknya selalu lakukan dengan memanfaatkan fasilitas yang telah disediakan dengan cara KLIK bersamaan Ctrl + F (pada keyboard).

Cara Pasang dan Membuat Read More Animasi Blogger

Membuat sebuah read more animasi tidaklah sulit karena gambar animasi yang kita harus gunakan bisa kita peroleh dengan memanfaatkan layanan gratis di beberapa situs yang menyediakan pembuatan teks animasi maupun button read more yang bisa kita manfaatkan tanpa perlu susah payah membuat menggunakan software animasi. Tentu saja jika kita hanya memanfaatkan layanan ini maka hasil yang kita dapatkan tak akan seperti halnya jika kita membuatnya sendiri dengan Adobe PhotoShop dan Adobe ImageReady ataupun GIF Animation Software yang  lain. Meskipun demikian untuk sebuah tampilan read more bisa dikatakan sudah cukup memadai.

Langkah untuk membuat dan memasang Read More Animasi :

1. Login : Lakukan login ke Blogger terlebih dahulu.

2. Tata Letak : Setelah masuk di halaman Dasbor, silahkan KLIK “Tata Letak”, kemudian lanjutkan dengan KLIK “Edit HTML”.

3. Amankan Template : Lakukan pengamanan terlebih dahulu terhadap template sampeyan. Langkah pengamanan dilakukan untuk menjaga kerusakan desain blog apabila terjadi kesalahan selama proses penambahan kode. Cara mengamankan template bisa sampeyan KLIK .

4. Expand Template Widget : KLIK untuk membuka keseluruhan desain blog, sehingga seluruh kode html terlihat.

5. Cari kode di berikut :

<a expr:href=’data:post.url + “#more”‘ expr:title=’data:post.title’>
<data:post.jumpText/>
</a>

Untuk memudahkan pencarian, cari kode yang tengah terlebih dahulu (<data:post.jumpText/>), karena yang lain akan tepat berada di atas dan bawahnya. Gunakan Ctrl+F untuk mempercepat pencarian kode. Untuk mengetahui cara tercepat pencarian kode html, silahkan sampeyan KLIK .

Ganti kode di yang sudah ditemukan dengan kode seperti di bawah ini :

<a expr:href=’data:post.url + “#more”‘ expr:title=’data:post.title’>
<img src=’http://i46.tinypic.com/4lmtyh/gubhugreyot/images/readmore-anima2.gif’ style=’float:right;height:49px;width:103px;margin:15px 50px;border:1px solid #555;padding:2px;’/>
</a>

6. Simpan Template :  KLIK “Simpan Template” kemudian coba buat sebuah posting dengan menggunakan read more. Atau mungkin ada posting sampeyan yang sudah menggunakan fungsi read more, jika sudah ada langsung sajadibuka untuk melihat hasilnya.

7. Beberapa alamat di bawah ini bisa kalian manfaatkan untuk membuat berbagai teks animasi yang mungkin sampeyan perlukan untuk membuat teks read more tersendiri yang berbeda dengan yang lain.

1. CoolText :
   http://cooltext.com
2. Flamingtext :
   http://www.flamingtext.com
3. GRsites :
   http://www.grsites.com

Memasang 'Auto Read More' pada Blogger

Jika anda membuka halaman awal blog ini, maka anda akan menemukan posting artikel yang hanya menampilkan paragraf awal saja dan di bawahnya akan terdapat link seperti BACA SELENGKAPNYA -> Judul Post
                                             

Nah apakah itu?
Yup itu adalah fungsi Read More, tapi Read More milik saya berbeda karena semuanya sudah otomatis karena hal itu maka disebut Auto Read More

Bagaimana membuatnya?
Yuk langsung saja!


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:


<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with Orang2Gembel

Membuat Cursor Bertaburan Bintang

Membuat Cursor Bertaburan Bintang

Ada banyak sekali untuk meodifikasi atau membuat pernak-pernaik tentang cursor, yang sudah kita bahas saja ada mengubah cursor dengan gambar, membuat teks yang berputar mengelilingi cursor. Dan kali ini belajar membuat cursor yang bertaburan bintang. jadi saat cursor kita bergerak akan turun bintang-bintang dari cursor. Ada beberapa warna bintang yang bisa kita pilih untuk ditampilkan di blog kita.

Cara Membuat Cursor Bertaburan Bintang
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:

<script src="http://www.geocities.com/adestd40/bintangputih.js" type="text/javascript"></script>

<script src="http://www.geocities.com/adestd40/bintangbiru.js" type="text/javascript"></script>

<script src="http://www.geocities.com/adestd40/bintangmerah.js" type="text/javascript"></script>

<script src="http://www.geocities.com/adestd40/bintangungu.js" type="text/javascript"></script>

<script src="http://www.geocities.com/adestd40/bintanghijau.js" type="text/javascript"></script>

5. Simpan jika sudah selesai.

Membuat Buku Tamu Buka Tutup Di Samping Kanan Blog

Seperti yang tertera dijudul, kali ini saya akan menjelaskan bagaimana cara membuat buku tamu yang berada disamping blog yang dapat dibuka tutup, seperti apa sich buku tamu itu, lebih jelasnya lihatlah disamping kanan blog saya coba anda klik maka akan keluar buku tamu nya? Sudah jelas sekarang..
Sebagai tambahan, ini tidak hanya untuk buku tamu saja, anda juga dapat menggantinya dengan yang lain seperti gambar,Profile anda atau lainnya yang anda ingin tampilkan,,
Ya udah, kayaknya udah jelas nieh…
Oke langsung aja ke proses pembuatannya..!!!


Langkah 1
Copy Paste Script Kode Dibawah Ini :

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RCj1LKmRd2UxgHWNQdha-3dKQtegMlu4V67U9z2UylzL2oNk4vcBl7iPVTX27_tQrSpP_s-IDPKCwmI0q5jDTe1L1JEZXB99JLeOpIJgwqqDWACex2MHmJ5zgu5sv54YbayVXeJ57_-m/') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]

<br/>

Mau punya buku tamu seperti ini?<br/>

Klik di

<a href="http://www.orang2gembel.co.cc/2011/03/membuat-buku-tamu-buka-tutup-di-samping.html">

sini

</a>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Lalu cari tulisan [Masukan Script Kode Buku Tamu Anda Disini] di script kode tadi.
Hapus tulisan itu Lalu Ganti dengan Script kode Buku Tamu anda
Langkah 2
1. Login di blogger dengan ID anda
2. Klik menu tata Letak
3. Klik Elemen Halaman
4. Klik Tambah Gadged
5. Klik HTML/JavaScript
6. Lalu Copy paste kodenya
7. Setelah itu klik Simpan
8. Dan Lihat Hasilnya

Semoga Sukses….!!!

Pasang Text Melayang Di Blogmu

Setiap orang yang mempunyai sebuah blog pasti berlomba-lomba untuk memperindah
blognya dengan gedget yang keren agar pembaca menarik, pada triks kali ini saya
akan coba membuat text yang melayang-layang mengikuti arah gerak mouse anda,
anda bisa memilih script berikut textnya:


Selamat menikmati blog ini:
<script src="http://www.geocities.com/yono_pati/nikmat.js" type="text/javascript">

/***********************************************

* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/

* Please keep this notice intact

***********************************************/

</script>



Welcome:

<script src="http://www.geocities.com/yono_pati/welcome.js" type="text/javascript">

/***********************************************

* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/

* Please keep this notice intact

***********************************************/

</script>



selmat datang di blog ini:

<script src="http://www.geocities.com/yono_pati/datang.js" type="text/javascript">

/***********************************************

* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/

* Please keep this notice intact

***********************************************/

</script>



Selamat datang:
<script src="http://www.geocities.com/yono_pati/datang_1.js" type="text/javascript">

/***********************************************

* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/

* Please keep this notice intact

***********************************************/

</script>



Enjoy Stay Here:

<script src="http://www.geocities.com/yono_pati/stay.js" type="text/javascript">

/***********************************************

* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/

* Please keep this notice intact

***********************************************/

</script>

jika anda tertarik langkahnya sebagai berikut: 1. login ke blogger 2. masuk
ke tata letak (layout) >> Element halaman 3. tambah gedget >> html/java
Script 4. copy code diatas yang anda suka 5. kemudian pastekan ke dalam html/java
script 6. simpan perubahan dan lihat hasilnya