Membuat Button Follow dan Dashboard ala Tumblr

Sekarang orang bisa mudah untuk follow (mengikuti) blog yang disukanya. Mengikuti berarti berlangganan tulisan-tulisan yang ada di blog itu. Salah satu media (tool) untuk mengikuti sebuah blog bisa lewat google friend connect. Biasanya widget ada berupa kotak dengan tombol join this site. Itu tersedia bagi blogspot.

Nah, kali ini kita akan membuat button follow yang meniru seperti Tumblr. Tumblr adalah satu platform untuk ngeblog. Jika melihat blog di bawah layanan Tumblr maka di pojok kanan atas selalu ada button follow dan dashboard. Contoh blog itu bisa dilihat di sini.

Sekarang kita akan membuat button seperti yang ada di blog Tumblr. Dengan button tersebut akan mempermudah dan lebih menarik pengunjung blog untuk follow atau mengikuti. Tentunya follow itu lewat google friend connect (GFC). Itu artinya cara baru untuk gabung ke GFC dari blog milik kita. Semakin banyak yang mengikuti blog kita bisa menjadi parameter kebermanfaatan dan kepopuleran sebuah blog. Tentunya selain itu semakin banyak yang follow semakin banyak yang berlangganan semakin banyak pengunjung.

Cara Membuat Button Follow dan Dashboard ala Tumblr
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode berikut ini

<div style="position: fixed; top: 5px; right: 93px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=833615522522935385" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:5px;"><a class="linkopacity" href="http://ucupprikitw.blogspot.com" target="_blank" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

5. Kode berikut 833615522522935385 adalah blog ID yang mana setiap blog berbeda. Ganti kode tersebut dengan blog ID mu sendiri. Bisa kita ketahui dari addres bar saat kita membuta entri baru (misalnya; http://www.blogger.com/post-create.g?blogID=833615522522935385)

6. Untuk button Dashboard link tersebut (http://ucupprikitw.blogspot.com) bisa kita arahkan ke halaman utama blogger.com tapi saya lebih memilih mengarahkannya ke halaman utama blog.

7. Simpan jika sudah selesai.

Sumber : http://kurniasepta.blogspot.com/2012/01/membuat-button-follow-dan-dashboard-ala.html

Read More

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

Sumber : http://kurniasepta.blogspot.com/2012/01/membuat-blog-tidak-bisa-dicopy-paste.html

Read More

Membuat Efek Bubble (Gelembung) Pada Cursor

Bagaimana tampilan blogmu? Sudah oke? Kali ini Ucup Prikitiew 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.

Sumber : http://kurniasepta.blogspot.com/2012/01/membuat-efek-bubble-gelembung-pada.html

Read More

Wibiya : ToolBar Blogger Canggih

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibia ini sangat canggih.

Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? penasaran ingin lihat Demonya?? langsung aja kunjungiwibia dan lihat di browser kamu bagian bawah.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

1. Buka website wibiya.com dan klik tombol "Get It Now"

2. Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol "Next"

3. Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"

4. Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"

5. Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on blogger

6. Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

7. Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

Read More