BOLEH ASYIK: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Minggu, 06 Februari 2011

Membuat Text Area

Apa itu text area? Definisinya sudah sangat jelas, biar lebih jelas lagi saya paparkan definisi singkat dan fungsi dari penggunaan text area pada blogger. Text area adalah tempat yang disiapkan untuk menyimpan tulisan dengan membentuk area. Biasanya text area ini digunakan untuk menyimpan kode HTML atau bisa juga text lain dengan tujuan untuk mempemudah pengunjung menyalin apa yang ada di dalam text area tersebut. Contoh penggunaan text area biasanya sebagai tempat kode link banner yang siap untuk disalin oleh pengunjung, atau bisa juga pesan admin kepada pengunjung.

Berikut kode untuk membuat text area:

<p align="center"><textarea name="code" rows="5" cols="20">masukkan text atau kode HTML anda di sini</textarea></p>

rows="5" /*Menunjukkan tinggi text area. /*
cols="20" /*Menunjukkan lebar text area. /*

Contoh penerapannya langsung:

<p align="center"><textarea name="code" rows="5" cols="20"><a href="http://bolehasyik.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1rPKBgf9_Udpd7hwBQ_US5RgjP1qKF6K71CMVmImJDeNVLwGFA0VIzoibvxP3lZUNIRk-KcG9vCQUWXEgBhezK6_xR8-Cry1VRm9OeuieU99MghPCdM3cJZETRJI2ybsCd2xHpygth8/s1600/Link+Orang+Indonesia.gif" border="0" alt="Blogspot Tutorial" /></a></textarea></p>

Maka hasilnya menjadi:

Ada cara lain yang lebih memudahkan pengunjung untuk mendapatkan kode HTML yang disediakan oleh kita yaitu dengan memberikan variasi penambahan tombol Select All atau Highlight All. Hanya ikuti langkah mudah berikut untuk mengubah kode text area dengan Select All atau Highlight All.

<form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"></div><p align="center"><textarea style="width: 300px; height: 150px" name="txt" rows="100" wrap="virtual" cols="55">masukkan text atau kode HTML anda di sini</textarea></p></form>

<div align="center"> /*Menunjukkan posisi tombol Select All./*
value="Select All" /*Tulisan yang akan muncul di tombol dan dapat diganti terserah anda seperti Highlight All. /*

Contoh penerapannya langsung:

<form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"></div><p align="center"><textarea style="width: 300px; height: 150px" name="txt" rows="100" wrap="virtual" cols="55"><a href="http://bolehasyik.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1rPKBgf9_Udpd7hwBQ_US5RgjP1qKF6K71CMVmImJDeNVLwGFA0VIzoibvxP3lZUNIRk-KcG9vCQUWXEgBhezK6_xR8-Cry1VRm9OeuieU99MghPCdM3cJZETRJI2ybsCd2xHpygth8/s1600/Link+Orang+Indonesia.gif" border="0" alt="Blogspot Tutorial" /></a></textarea></p></form>

Maka hasilnya menjadi:

Bagaimana? Siap untuk bertukar link menggunakan text area ini dengan sahabat blogger lain. Selamat mencoba.

Kamis, 27 Januari 2011

Cara Menghilangkan Tanda Obeng Blogger

menghilangkan tanda obeng dan tang widget blogger

Tanda obeng atau tang ini merupakan salah satu fasilitas yang diberikan oleh Blogger untuk mempercepat proses pengeditan. Dengan tersedianya tanda obeng atau tang yang muncul pada blog ini sebenarnya sangat berguna karena tidak semua pengeditan dapat dilakukan pada menu Edit HTML Blogger. Hal ini juga sebenarnya bukanlah masalah, karena tanda tersebut hanya akan muncul pada saat sedang login di account blog. Apabila sign out dari account, maka tanda itu hilang dan tidak akan muncul kembali. Mungkin bagi sebagian blogger hal ini tidak begitu mengganggu karena dengan adanya icon obeng dan tang justru memudahkan kita untuk mempercepat pengeditan tapi jika anda bersikeras tetap ingin menghilangkannya tidak jadi persoalan karena sekarang anda bisa ikuti langkah berikut ini untuk menghilangkan tanda obeng dan tang di blogger:

Untuk menghilangkan tanda obeng dan tang tersebut, maka ada beberapa cara yang akan saya jelaskan, yaitu:
1. Dengan menghilangkan tanda centang pada setting posting blog yang disediakan Blogger.

Berikut petunjuknya:
Log in account Blogger, lalu pilih Design > Page Element, kemudian klik Edit pada contoh kolom widget Blog Posts, seperti yang terlihat pada gambar di atas:

Setelah Anda klik Edit, maka akan terbuka halaman baru dan hasilnya akan muncul seperti gambar di atas. Anda hanya perlu menghilangkan tanda centang pada menu Show Quick Editing. Setelah Anda hilangkan tanda centang pada menu Tunjukkan Pengeditan Cepat, lalu simpan.

Note: Cara ini kurang efektif karena jarang berhasil dan anda dapat gunakan cara lain untuk menghilangkan tanda ini secara permanen namun bisa dimunculkan kembali bila Anda menginginkannya.

2. Memasukkan script atau kode html pada menu Edit HTML untuk menghilangkan tanda obeng atau tang blogger. Caranya adalah dengan mengikuti langkah-langkah sebagai berikut:

Seperti biasa login ke account blogger, kemudian pilih menu Design > Edit HTML, dan carilah kode berikut ]]></b:skin>. Tambahkan kode berikut tepat diatas kode yang telah disebutkan tadi, setelah ditambahkan langsun Save Template dan lihatlah hasilnya.

.quickedit {display:none;}

Note: Bila anda ingin menampilkan kembali tanda obeng dan tang tersebut pada blog, anda hanya perlu menghapus kode html diatas.

Lakukan langkah-langkah di atas dengan benar sesuai dengan petunjuk yang ada dan lihat hasilnya, kini tanda obeng atau tang dapat dihilangkan. Selamat mencoba.

Kamis, 20 Januari 2011

Disable Klik Kanan Blog

Bicara mengenai hak cipta, tentu anda tidak ingin apabila isi blog anda disalin habis-habisan begitu saja sembarangan oleh pihak lain apalagi tidak mencantumkan referensi artikel tersebut. Bagaimana cara mencegah atau setidaknya mempersulit agar hal ini tidak terjadi? Salah satu cara melakukan copy paste artikel web adalah dengan menggunakan klik kanan mouse lalu pilih copy.

Anda dapat mencegahnya dengan menggunakan script berikut:

<script>
var message="Maaf, klik kanan tidak diperbolehkan!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Masukkan script tersebut ke dalam gadget HTML/Javascript blog anda. Kemudian periksa halaman blog anda dan anda akan melihat kotak dialog pesan yang muncul ketika melakukan klik kanan mouse. Pesan tersebut dapat anda ubah sesuaikan sendiri dengan mengganti kalimat yang ditandai warna merah pada script di atas.

Script ini bukan satu-satunya cara yang handal untuk mencegah copy paste karena kita masih bisa melakukannya dengan hanya meminta bantuan keyboard untuk menekan tombol ctrl + c atau pilih menu edit > copy pada menu browser Mozilla anda. Selamat mencoba.

Minggu, 16 Januari 2011

Widget Recent Posts Blogger

Jika widget ini digunakan atau ditempatkan di halaman utama blogger, menurut saya kurang efektif karena blog posts pada halaman utama tersebut sudah berderet link-link postingan blogger anda (recent posts). Alangkah baiknya jika penggunaan widget recent posts ini ditempatkan pada halaman postingan blogger anda. Untuk tricknya agar dapat disetting penempatan widget di halaman yang anda tuju dapat anda dapatkan di sini. Jadi tujuannya adalah agar pengunjung dapat melihat kembali postingan apa yang terdapat di homepage blog anda dan dapat dilihat kembali di sidebar postingan yang sedang dibaca pengunjung. Ya lumayanlah untuk meningkatkan pageviews blogger anda ketika pengunjung tersebut telah selesai membaca dan ingin beralih ke postingan yang telah tersedia di sidebar blog anda. Bukankah asyik jika pengunjung berlama-lama di blog anda dan ini tentunya dapat meningkatkan alexa ranking juga lho.

Live DemoKlik untuk melihat demo langsung Widget Recent Posts

Langkah selanjutnya anda hanya tinggal copas kode berikut dan masukkan pada halaman gadget javascript blogger anda:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vzcpQ_CAszs5g6C3bZfmA7axgRCiXZlMyU0xiXPF7D_9YiCn-2pxzh9U0zthOjVbGivqz6z5FwGIaXzYAMqB_P6Jxe1YeVREyTiiwy4KyGPqHwnR0BuFK3mFNCjIpOY1sz6TsO5ms2vP/s400/feedreader_2.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vzcpQ_CAszs5g6C3bZfmA7axgRCiXZlMyU0xiXPF7D_9YiCn-2pxzh9U0zthOjVbGivqz6z5FwGIaXzYAMqB_P6Jxe1YeVREyTiiwy4KyGPqHwnR0BuFK3mFNCjIpOY1sz6TsO5ms2vP/s400/feedreader_2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vzcpQ_CAszs5g6C3bZfmA7axgRCiXZlMyU0xiXPF7D_9YiCn-2pxzh9U0zthOjVbGivqz6z5FwGIaXzYAMqB_P6Jxe1YeVREyTiiwy4KyGPqHwnR0BuFK3mFNCjIpOY1sz6TsO5ms2vP/s400/feedreader_2.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vzcpQ_CAszs5g6C3bZfmA7axgRCiXZlMyU0xiXPF7D_9YiCn-2pxzh9U0zthOjVbGivqz6z5FwGIaXzYAMqB_P6Jxe1YeVREyTiiwy4KyGPqHwnR0BuFK3mFNCjIpOY1sz6TsO5ms2vP/s400/feedreader_2.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4vzcpQ_CAszs5g6C3bZfmA7axgRCiXZlMyU0xiXPF7D_9YiCn-2pxzh9U0zthOjVbGivqz6z5FwGIaXzYAMqB_P6Jxe1YeVREyTiiwy4KyGPqHwnR0BuFK3mFNCjIpOY1sz6TsO5ms2vP/s400/feedreader_2.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fontsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://bolehasyik.blogspot.com/";
</script>
<script src="http://recentpostoilnk.googlecode.com/files/recentpost.js" type="text/javascript"></script>

Silakan ganti url blog yang ditandai dengan warna merah dengan url blog anda, dan untuk jumlah post widgetnya silakan ganti jumlahnya sesuka anda dengan mengubah angka 5 pada kode "numposts = 5;". Silakan berkreasi sendiri dengan mengganti opsi ukuran, warna, dan lainnya pada kode css sebelumnya. Selamat mencoba kawan.

Menampilkan Widget Pada Halaman Tertentu

Saya jelaskan terlebih dahulu apa yang dimaksud dari halaman tertentu dari judul postingan ini. Platform blogger memiliki halaman-halaman berbeda dimana setiap halaman digunakan untuk menempatkan postingan dengan tujuan tertentu. Selain posting (entri), anda dapat membuat artikel berupa page (laman). Halaman page ini memiliki sifat berbeda dengan posting, diantaranya:

Bersifat static, maksudnya halaman tidak diurutkan berdasarkan waktu.
Halaman banyak digunakan untuk menampilkan informasi tertentu, seperti contact person, about us, sitemap, dan sebagainya.
Biasanya untuk mengakses halaman ini juga anda dapat menambahkan gadget baru yang hanya tampil pada halaman page ini.

Begini kesimpulannya, setiap halaman yang ada di blogger memiliki karakteristik masing-masing. Berikut saya paparkan saja setiap halaman yang terdapat di blogger secara keseluruhan:

Homepage merupakan halaman utama blog anda, yakni halaman depan blogger.
Archivepage adalah halaman arsip blogger.
Itempage adalah halaman postingan yang diurutkan berdasarkan waktu penulisan.
Indexpage adalah halaman muka, halaman label, dan halaman pencarian.
Staticpage adalah feature baru google yakni halaman yang tidak masuk pada postingan yang telah saya jelaskan tadi.

Menampilkan widget hanya di Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>

Menampilkan widget selain di Homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
..........................
</b:if>

Menampilkan widget hanya di Archivepage

<b:if cond='data:blog.pageType == "archive"'>
..........................
</b:if>

Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != "archive"'>
..........................
</b:if>

Menampilkan Widget hanya di Itempages / Postingan

<b:if cond='data:blog.pageType == "item"'>
..........................
</b:if>

Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != "item"'>
..........................
</b:if>

Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == "static_page"'>
..........................
</b:if>

Menampilkan widget selain di Staticpages

<b:if cond='data:blog.pageType != "static_page"'>
............................
</b:if>

Menampilkan widget pada URL postingan tertentu

<b:if cond='data:blog.url == "alamatpostingan"'>
..........................
</b:if>

Menampilkan widget selain di URL postingan tertentu

<b:if cond='data:blog.url != "alamaatpostingan"'>
..........................
</b:if>

Sampai di sini apakah anda sudah mengerti maksudnya? Baiklah kawan, akan saya aplikasikan saja penggunaan kode tersebut pada widget yang ingin dimodifikasi agar penempatan widget blogger berbeda dari halaman homepage atau sebaliknya. Berikut contoh kode widget blog saya:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

kode pembuka perubahan widget

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

kode penutup perubahan widget
</b:includable>
</b:widget>

Kalimat ditandai berwarna merah adalah penempatan kode untuk penampilan widget pada halaman tertentu saja.

Jadi penggunaannya untuk contoh penempatan widget hanya di homepage menjadi:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>
</b:includable>
</b:widget>

Semoga bermanfaat.

Minggu, 10 Oktober 2010

Auto Hidden Chat Box

Ok guys, pada kesempatan yang berbahagia ini di tengah kesibukan akademic, saya sempatkan posting tutorial blogger untuk pemula. Sebuah penerapan kode HTML yang dapat digunakan untuk menghemat ruang blog kita. Kode tersebut digunakan untuk menyembunyikan berbagai widget namun pada tutorial ini saya contohkan aplikasi chatting untuk disembunyikan. Bagi para sobat blogger yang merasa sumpek dengan ruangan blog yang penuh dengan berbagai macam perkakas blog bisa gunakan penerapan ini di blog sobat. Berikut penampakannya:

Live Demo Auto Hidden Chat BoxKlik untuk melihat sreenshotnya

Bagaimana? Menarik bukan?

Simak tutorial berikut:

Saya bagi dalam 2 tipe penempatan chat box, sebelah kiri dan kanan.

Tampilan Widget di sebelah Kanan:

<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}

* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">

function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}

function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>

<div id="hcl">
<div class="hclcontent">

<!—Widget Here -->

<br />

<div class="hc-credit">
<span style="float:left">



<a href="http://bolehasyik.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a>

</span>
<span style="float:right">
<a href="javascript:showHidehcl()">

[close]
</a></span>
</div>
</div>

<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">

var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

Tampilan Widget di sebelah Kiri:

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}

* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>

<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}

function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>

<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!—Widget Here -->

<br />

<div class="hc-credit">
<span style="float:left">



<a href="http://bolehasyik.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a>

</span>

<span style="float:right">
<a href="javascript:showHidehcr()">

[close]

</a></span>
</div>
</div>
</div>

<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Note:

#hcr {
position:fixed; /* Menunjukkan bahwa posisi widget tetap tidak bergeser dan sobat bisa ganti menjadi posisi absolute */

#hcr {
position:absolute; /* Menunjukkan bahwa posisi widget tetap dapat bergeser dengan menggeser scroll */

top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa kalian ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left; border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (sebaiknya tidak perlu diganti jika kalian mengedit kode lain pada style) */
padding:10px;
}

Alhamdulillah, semoga dengan tutorial yang sesederhana ini dapat bermanfaat. Selamat mencoba! Ohya, pilihan model dan warna tab pemicunya dapat diubah sendiri:

http://img202.imageshack.us/img202/8018/copyofcbblue.png

http://img714.imageshack.us/img714/6969/cbblue.png

http://img43.imageshack.us/img43/7977/copy3ofcbblue.png

http://img571.imageshack.us/img571/2107/copy2ofcbblue.png