Cara Menghapus Gadget/Widget Blogger Bagian I

Postingan Cara Menghapus Gadget/Widget Blogger ini saya tulis untuk sobat yang masih baru menggunakan blogger. Mungkin bagi sobat blogger yang sudah "senior", postingan ini sudah tidak penting, tapi pada kenyataannya, saya pernah mengalami hal seperti ini, yaitu kebingungan untuk menghapus gadget/widget blogger yang mengganggu, dan beberapa sobat blogger yang pernah mampir di sini kelihatannya masih kebingungan. Jadi, tidak ada salahnya jika saya memostingnya :)

Biasanya, ketika kita membuat blog baru, secara default atau secara otomatis sudah terpasang beberapa Gadget/Widget, seperti follower, arsip, Gadget Laman (menu Laman horizontal bawaan blogger) dan sebagainya. Gadget/widget ini kadang-kadang mengganggu pandangan atau tidak dibutuhkan, atau kita ingin menggantinya dengan gadget lain.

Nah, jika demikian, bagaimana Cara Menghapus Gadget/Widget Blogger? Silahkan Sobat mengikuti setahap demi setahap tutorial berikut:

1. Silahkan Sobat login dengan akun Bloggernya

2. Setelah login, kita sudah berada pada halaman Dasbor. Nah, Klik RANCANGAN (perhatikan gambar berikut)

3. Setelah Mengklik Rancangan pada Dasbor, kita sudah berada pada halaman Eleman Laman. Setelah itu, silahkan sobat memilih Gadget/Widget mana yang akan dihapus. Klik EDIT (perhatikan Gambar berikut)

4. Setelah Mengklik EDIT pada Gadget/widget yang akan dihapus, akan muncul jendela/window seperti pada gambar di bawah, perhatikan pada bagian bawah, di sana ada tombol Hapus, klik tombol HAPUS tersebut.

5. Gadget/Widget agan telah berhasil dihapus

Bagaimana Jika ternyata pada gadget/widget tersebut tidak memiliki tombol Hapus? SILAHKAN BACA Cara Menghapus Gadget/Widget Blogger Bagian II. Semoga artikel Cara Menghapus Gadget/Widget Blogger Bagian I bermanfaat.

Tooltip / Agar muncul tulisan ketika link ditunjuk atau disentuh

Jika sobat sering berkunjung ke blog atau situs yang profesional, pasti sobat sering menemukan teknik tooltip ini. Jika kita menunjuk pada sebuah link, akan muncul penjelasan singkat tentang link tersebut (mungkin seperti gambar di samping, ilustrasi aja sob). Trik ini dikenal dengan istilah "tooltip". Dengan menggunakan trik ini pada blog kita, pengunjung akan lebih tertarik untuk mengklik link jika link tersebut disertai dengan penjelasan. Ataukah sobat ingin membuat tolltip ini untuk link iklan? Tidak ada masalah, karena tooltip ini memang bertujuan untuk menarik perhatian pengunjung.

• Langkah pertama, copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>.

#dhtmltooltip{ position: absolute; left: -300px; width: 150px; border: 1px solid black; padding: 2px; background-color: #E1EEFD ; font-family:"Verdana",Arial;font-size:12px; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } #dhtmlpointer{ position:absolute; left: -300px; z-index: 101; visibility: hidden; }

• Setelah itu lanjutkan meng-copy kode di bawah ini kemudian paste tepat di atas kode </head>

<script type='text/javascript'> //<![CDATA[ var offsetfromcursorX=12 //Customize x offset of tooltip var offsetfromcursorY=10 //Customize y offset of tooltip var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image document.write('<div id="dhtmltooltip"> </div>') //write out tooltip DIV document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thewidth, thecolor){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var nondefaultpos=false var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20 var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20 var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth){ //move the horizontal position of the menu to the left by it's width tipobj.style.left=curX-tipobj.offsetWidth+"px" nondefaultpos=true } else if (curX<leftedge) tipobj.style.left="5px" else{ //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px" pointerobj.style.left=curX+offsetfromcursorX+"px" } //same concept with the vertical position if (bottomedge<tipobj.offsetHeight){ tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px" nondefaultpos=true } else{ tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px" pointerobj.style.top=curY+offsetfromcursorY+"px" } tipobj.style.visibility="visible" if (!nondefaultpos) pointerobj.style.visibility="visible" else pointerobj.style.visibility="hidden" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" pointerobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip //]]> </script>

• Simpan template sobat

Sekarang tinggal memasang kode pada postingan atau di mana saja ingin ditampilkan (bisa pada link referral atau banner sobat)

<a onmouseover="ddrivetip('Situs aneka Informasi Online', 240)" onmouseout="hideddrivetip()" href="http://www.anekanews.com" target="_blank">AnekaNEWS.com</a>

Kode yang berwarna merah dan biru adalah kode tolltip yang ditambahkan. Silahkan ganti yang berwarna biru (kalimat yang akan muncul ketika link disentuh) dengan kalimat sobat sendiri.

Stabilow Hijau  ganti sesuai dengan keinginan, misalnya "Klik di sini" 

Stabilow Kuning ganti dengan link target sobat 

Adapun jika sobat ingin merubah tampilan tooltipnya, silahkan utak atik kode CSSnya. Semoga postingan ini bermanfaat !
*) Trik ini dipelajari di blog O-OM.com

Cara Membuat Anchor Link / Link Satu Halaman

www.andriapriyadi.com

Cara Membuat  Anchor Link / Link Satu Halaman - Apa itu Anchor Link? Anchor link menurut bahasa saya adalah sebuah link yang dibuat untuk menuju ke topik pembahasan pada halaman yang sama. Bingung ya dengan definisi saya? Mmmm, bingung juga mau menjelaskannya, harus ada praktek neh... (biasa, aku ini orang otodidak sob, hehehe, bahasa Indonesia juga g bagus).

Sebelum mempraktekkan Anchor teks ini, saya ingin berkoar-koar dulu sob :D. Anchor teks termasuk trik pemaparan artikel online yang efektif dan tidak membuat pengunjung jadi bingung sebab setiap topik bisa langsung dilink ke pembahasannya yang panjang. Jadi, Anchor teks ini cocok untuk digunakan pada halaman yang berisi penjelasan yang panjang dan memiliki topik yang banyak. Makanya aku malas banget ngasih contohnya pada halaman ini sebab ini hanya sekedar berkoar-koar sob, maaf hehehe.

Jika sobat ingin mempelajarinya langsung dengan contoh silahkan kunjungi blog Master Blogger kita KANG ROHMAN, klik aja link ini sob Anchor Link / Link Satu Halaman | Tutorial blog | Blog Tutorial | Free blogger template:

Cara Membuat Tombol Spoiler/Hide Show

Cara Membuat Tombol Spoiler/Hide Show - Apa itu tombol spoiler? Saya juga tidak mengerti definisinya, tapi saya mengerti maksudnya apa (maklum, saya juga otodidak, hehehe). Yang saya pahami, tombol spoiler itu berfungsi untuk menyembunyikan sebuah tulisan atau apa saja yang akan disembunyikan, termasuk scipt html. Jika tombol tersebut diklik, maka akan muncul semua tulisan atau fitur lain yang disembunyikan.

Sebagai contoh, coba klik tombol di bawah ini:

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

Nah, kalau sudah tau, sekarang kita melangkah pada tahap pembuatannya. Silahkan Copy kode di bawah ini kemudian pastekan pada postingan atau gadget di mana kita akan menggunakannya/menampilkannya.

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

</div></div></div></div>

Keterangan:

Warna merah dan biru silahkan diganti dengan kata yang di inginkan. Misalnya "show" untuk mengganti kata "tampilkan" dan "Hidden" untuk mengganti kata "Sembunyikan"

Warna Kuning silhkan diganti dengan kalimat atau script/kode atau foto yang akan kita sembunyikan.