Membuat Energy Saving Mode untuk Blog

Bumi semakin tua, energi semakin mahal. Mari kita buat blog kita juga hemat energi. Yaitu dengan membuat Energy Saving Mode. Sama seperti yang ada di komputer, dengan Energy Saving Mode akan membuat layar yang menampilkan (membuka) blog kita menjadi gelap ketika tidak aktivitas di blog. Dan akan kembali normal ketika mouse digerakan. Bagaimana? Ada niat untuk membuat blog kita juga ikut berpartisipasi nyata dalam menghemat energi? Mari kita buat Energy Saving Mode di blog kita.

Cara Membuat Energy Saving Mode untuk Blog
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut di atasnya

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script>jQuery.noConflict();</script>

7. Simpan Template jika sudah selesai.

Membuat Blog Tidak Bisa Dicopy Paste

Copy paste (copas) adalah musuh para blogger, setuju gak? Apalagi jika tidak menyantumkan sumber linknya. Rasanya sakit hati atau marah bisa terjadi karena tulisan yang kita posting dicopas oleh blogger lain dan juga diposting di blognya. Pastinya akan kesal ketika karya kita dicopy paste tanpa izin.

Blogger sangat dekat dengan tulisan. Ide itu tertuang dalam kumpulan kalimat. Lalu setelah diposting di blognya akan menjadi konsumsi orang banyak. Memang semua zaman sekarang ini setiap orang bisa membuat konten. Tapi pengakuan terhadap hasil karya orang masih begitu rendah. Masih banyak pelaku copy paste.

Tulisan hasil copy paste yang sama persis sebenarnya akan merugikan blognya sendiri. Blog yang berisi postingan-postingan copas akan membuat blognya tidak bersahabat dengan google search engine. Selain itu juga akan mendapat predikat yang tidak baik dari blogger lain.

Dulu di Belajar Ngeblog di Blog pernah dibahas salah satu cara mencegah copy paste, yaitu dengan membuat klik kanan tidak berfungsi. Tetapi masih saja bisa, karena tulisan masih bisa diblock dan dicopy dengan Ctrl+C. Nah, sekarang akan kita buat lebih tidak bisa melakukan copy paste (copas) yaitu dengan men-disable text selection. Disable tet selection adalah membuat pengunjung blog kita tidak memblock tulisan, akhirnya tidak bisa meng-copy.

Cara Membuat Blog Tidak Bisa Dicopy Paste
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh kode berikut di atas kode </head>

<script type="text/javascript"> function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
    target.style.MozUserSelect="none"
else //All other route (ie: Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>

6. Lalu taruh kode berikut di bawah kode </head>

<script type="text/javascript"> disableSelection(document.body) //disable text selection on entire body of page </script>

7. Simpan Template jika sudah selesai.

Saya tidak menerapkan dua cara itu, yaitu tidak bisa klik kanan dan tidak bisa memblock tulisan di blog ini. Karena kalau saya gunakan jadi nggak bisa dipraktekan (diambil) scriptnya. Kalau benar-benar niat membuat blogmu tidak bisa dicopas, gunakan saja semuanya ;)

Membuat Efek Drop Shadow pada Gambar

Hampir setiap postingan di blog ini juga menyertakan gambar. Rasanya sebuah postingan akan lebih menarik jika kita menyertakan gambar atau photo ilustrasinya. Tidak hanya tulisan, tapi juga gambar atau photo yang mendukung juga ikut diupload untuk memberikan kesan postingan kita tidak berat, ada bentuk visualisasi atau gambar yang mewakili tulisan.

Dengan gambar memang sudah menarik, tapi kali ini kita akan belajar untuk membuat gambar yang sudah kita posting menjadi lebih menarik lagi. Yaitu dengan membuat efek drop shadown pada gambar. Drop Shadow adalah sebuah efek bayangan yang timbul pada suatu objek, bisa pada sebuah kotak, tabel, dan gambar. Tidak perlu mengedit gambar yang akan kita posting dengan photoshop. Tapi kita akan langsung membuat gambar yang ada di blog kita memiliki efek drop shadown.

Cara Membuat Efek Drop Shadow pada Gambar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode  ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

.drop-shadow img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

7. Cari kode <data:post.body/> lalu ganti kode tersebut dengan kode berikut:

Menambahkan Author Box di Bawah Postingan

Siapa seh yang menulis tulisan ini? Untuk itu kita bisa menambahkan Author Box, yaitu profil singkat si penulis blog beserta photonya. Author box itu bisa menampilkan biografi singkat diri kita dan juga mungkin bisa menambahkan kontak kita. Dengan menambahkan author box di bawah komentar akan membuat tulisan kita itu jelas. Selain itu bisa juga untuk membangun personal branding.

Cara Menambahkan Author Box di Bawah Postingan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin> dan taruh kode berikut di atasnya;

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

6. Cari kode <div class='post-footer-line post-footer-line-1'> dan taruh kode berikut ini di bawahnya;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='author-box'>
    <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='URL avatar/photo kita' width='70'/><b>About Author</b><br/>
   Sekilas tentang diri kita<br/></p>
    </div>
    </b:if>

7. Sebelum menyimpan, ganti URL dengan URL photo kita, dan tulis sekilas tentang diri kita. Dan juga bisa menganti judul about author. Dan juga mengubah kode css yang disesuaikan dengan tampilan blog kita.
8. Simpan jika sudah selesai.

Membuat Efek Bubble (Gelembung) Pada Cursor

Selamat malam, salam Blogger.. :D Bagaimana tampilan blogmu? Sudah oke? Kali ini Belajar Ngeblog di BLOG menyajikan salah satu cara membuat blogmu terlihat berbeda. Kalau dulu pernah kita membuat efek bintang sekarang ganti membuat efek bubble (gelembung) yang akan mengikuti cursor. Sama seperti mainan anak-anak kecil yang bola yang bergelembung-gelembung dari sabun itu loh,, tapi di terjadi di blog dan cursornya adalah penghasil bubble (gelembung-gelembung) itu.

Saya pernah mencoba, dan lucu. Gelembung itu dari berasal dari cursor kecil lalu lama-lama besar dan naik ke atas. Ibarat sebuah halaman atau toko, kadang blog juga perlu kejutan atau tampilan yang berbeda dari biasanya. Efek bubble (gelembung) ini bisa menjadi pilihan ketika ingin membuat berbeda itu. Dan melepas (menghapusnya) ketika sudah mulai bosan. ;)

Cara Membuat Efek Bubble (Gelembung) Pada Cursor
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

    // <![CDATA[

    var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles

    var bubbles=100; // maximum number of bubbles on screen

    var x=ox=400;

    var y=oy=300;

    var swide=800;

    var shigh=600;

    var sleft=sdown=0;

    var bubb=new Array();

    var bubbx=new Array();

    var bubby=new Array();

    var bubbs=new Array();

    window.onload=function() { if (document.getElementById) {

    var rats, div;

    for (var i=0; i<bubbles; i++) {

    rats=createDiv("3px", "3px");

    rats.style.visibility="hidden";

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="1px";

    div.left="0px";

    div.bottom="1px";

    div.right="0px";

    div.borderLeft="1px solid "+colours[3];

    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="0px";

    div.left="1px";

    div.right="1px";

    div.bottom="0px"

    div.borderTop="1px solid "+colours[0];

    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.left="1px";

    div.right="1px";

    div.bottom="1px";

    div.top="1px";

    div.backgroundColor=colours[4];

    div.opacity=0.5;

    if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);

    bubb[i]=rats.style;

    }

    set_scroll();

    set_width();

    bubble();

    }}

    function bubble() {

    var c;

    if (x!=ox || y!=oy) {

    ox=x;

    oy=y;

    for (c=0; c<bubbles; c++) if (!bubby[c]) {

    bubb[c].left=(bubbx[c]=x)+"px";

    bubb[c].top=(bubby[c]=y)+"px";

    bubb[c].width="3px";

    bubb[c].height="3px"

    bubb[c].visibility="visible";

    bubbs[c]=3;

    break;

    }

    }

    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

    setTimeout("bubble()", 40);

    }

    function update_bubb(i) {

    if (bubby[i]) {

    bubby[i]-=bubbs[i]/2+i%2;

    bubbx[i]+=(i%5-2)/5;

    if (bubby[i]>sdown && bubbx[i]>0) {

    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

    bubb[i].width=bubbs[i]+"px";

    bubb[i].height=bubbs[i]+"px";

    }

    bubb[i].top=bubby[i]+"px";

    bubb[i].left=bubbx[i]+"px";

    }

    else {

    bubb[i].visibility="hidden";

    bubby[i]=0;

    return;

    }

    }

    }

    document.onmousemove=mouse;

    function mouse(e) {

    set_scroll();

    y=(e)?e.pageY:event.y+sleft;

    x=(e)?e.pageX:event.x+sdown; }

    window.onresize=set_width;

    function set_width() {

    if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

    }

    else if (typeof(self.innerHeight)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

    }

    else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

    }

    else {

    swide=800;

    shigh=600;

    }

    }

    window.onscroll=set_scroll;

    function set_scroll() {

    if (typeof(self.pageYOffset)=="number") {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

    }

    else if (document.body.scrollTop || document.body.scrollLeft) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

    }

    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

    sdown=document.documentElement.scrollTop;

    }

    else {

    sdown=0;

    sleft=0;

    }

    }

    function createDiv(height, width) {

    var div=document.createElement("div");

    div.style.position="absolute";

    div.style.height=height;

    div.style.width=width;

    div.style.overflow="hidden";

    return (div);

    }

    // ]]>

    </script>

5. Kode warna pink adalah kode warna dari bubble (gelembung) itu, kamu bisa mengubah dengan kode warna yang lain.
6. Simpan jika sudah selesai.