Cara Membuat Tulisan Berjalan

Cara Membuat Tulisan Berjalan - Setelah mengetahui cara membuat spoiler, trik Blogger Bugis berikutnya adalah membuat teks atau tulisan atau widget yang ada pada blog bergerak sendiri dengan menggunakan kode HTML. Teks atau tulisan bergerak ini biasa di sebut dengan tulisan berjalan, dalam kode HTML di kenal dengan perintah marquee.

Gambar 1 : Cara Membuat Tulisan Berjalan

Membuat tulisan berjalan akan memberikan tambahan variasi pada blog. Biasanya, tulisan berjalan atau widget berjalan pada blog di gunakan oleh blogger untuk menampilkan semua widget atau tulisan yang tersimpan di dalam kotak yang tidak menggunakan scroll. Kecepatan berjalan, arah gerakan dan variasi lain bisa di tambahkan pada teks atau tulisan berjalan untuk membuat tulisan atau teks berjalan bergerak atau berjalan sesuai dengan yang kita inginkan.

Cara Membuat tulisan berjalan

Kode HTML dasar yang di gunakan untuk membuat tulisan bergerak atau berjalan adalah :

<marquee>Tulisan Berjalan</marquee>

Kode tersebut akan membuat tulisan berjalan seperti di bawah ini :

Tulisan Berjalan

Cara Membuat Widget Berjalan

Membuat widget berjalan atau bergerak sama saja dengan cara membuat tulisan berjalan. Gunakan kode yang sama seperti kode di atas lalu ganti tulisan yang berwarna merah dengan kode widget yang ingin di buat bergerak atau berjalan sehingga kodenya seperti ini :

<marquee>Tulisan Berjalan</marquee>

Ubah kodenya menjadi seperti ini :

<marquee>Kode Widget</marquee>

Ganti kode yang berwarna merah dengan kode widget yang ingin di buat bergerak

Macam - Macam Tulisan Berjalan

Setelah mengetahui cara membuat tulisan dan widget berjalan, berikut saya jelaskan cara mengatur gerakan dan memberi variasi pada tulisan berjalan agar terlihat lebih menarik

1. Mengatur Kecepatan Gerakan

Tambahkan perintah scrollamount="angka kecepatan" untuk mengatur kecepatan gerakan tulisan berjalan sehingga kodenya menjadi seperti ini :

<marquee scrollamount="angka kecepatan">TULISAN BERJALAN</marquee>

Ganti kode berwarna biru dengan angka ( misalanya 2, 3, atau 4 dsb ) dan ganti Tulisan berjalan dengan teks atau tulisan atau kode widget yang ingin di buat berjalan atau bergerak.
Contohnya :

<marquee scrollamount="2">TULISAN BERJALAN</marquee>

<marquee scrollamount="3">TULISAN BERJALAN</marquee>

<marquee scrollamount="4">TULISAN BERJALAN</marquee>

Ke tiga kode diatas akan membuat tulisan berjalan dengan kcepatan berbeda yaitu 2, 3, dan 4. Kode di atas akan membuat tulisan berjalan seperti berikut ini :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN
Semakin besar angka scrollamount semakin cepat tulisannya berjalan.

2. Mengatur Arah Gerakan

Tambahkan perintah direction="arah gerakan" untuk menentukan arah gerakan tulisan berjalan. Adapun arah gerakan yang bisa di gunakan adalah :

right = arah gerakan ke kanan
up = arah gerakan ke atas
down = arah gerakan ke bawah

Penempatan kode arah gerakan sama dengan penempatan kode kecepatan gerakan. Contohnya seperti ini :

<marquee direction="right">TULISAN BERJALAN</marquee>

Jika kode kecepatan dan kode arah gerakan  di gabung, kodenya akan menjadi seperti ini :

<marquee scrollamount="2" direction="right">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="up">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="down">TULISAN BERJALAN</marquee> 

hasilnya :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN

Dengan memahami contoh di atas, anda sudah tahu bagaimana cara menambahkan perintah dan menggabung perintahnya untuk memberikan efek berbeda pada tulisan berjalannya. Sekarang saya akan memberikan beberapa kode perintah untuk tulisan berjalan. Anda tinggal menggabung kodenya jika anda menginginkan efek berbeda pada saat membuat tulisaan berjalan.

3. Tulisan Berjalan Bolak Balik

Membuat tulisan berjalan mondar mandir juga menarik. Untuk itu, berikut cara membuatnya versi Blogger Bugis. Kode yang di gunakan :

<marquee behavior="alternate">TULISAN BERJALAN BOLAK-BALIK</marquee>

Hasilnya :
TULISAN BERJALAN BOLAK-BALIK

4. Tulisan Berjalan dan Berhenti
Kode yang di gunakan :

<marquee onmouseover="this.stop()" onmouseout="this.start()">TULISAN BEJALAN dan BERHENTI</marquee>

Hasilnya :
TULISAN BEJALAN dan BERHENTI

Kode diatas akan membuat tulisan berhenti saat di sentuh mouse. Arahkan mouse anda pada tulisan berjalannya untuk melihat hasilnya.

5. Memberi background

Untuk memberi background dan warna pada tulisan berjalan kode yang di gunakan adalah sebagai berikut :

<marquee bgcolor="#FDEAE8">Tulisan Berjalan</marquee>

Hasilnya seperti ini :

Tulisan Berjalan

#FDEAE8 adalah kode warna background, untuk melihat lebih banyak kode warna, anda bisa lihat di artikel Blogger Bugis sebelumnya "Tools Untuk Melihat Kode Warna" 

6. Mengatur Lebar dan Tinggi Jarak Gerakan.

Untuk mengatur lebar dan gerakan tulisan berjalan, kode yang di gunakan adalah sebagai berikut :

<marquee scrollamount="2" direction="up" width="50px" height="70px">TULISAN BERJALAN</marquee>
<marquee scrollamount="2" direction="down" width="50px" height="70px">TULISAN BERJALAN</marquee>

Hasilnya :
TULISAN BERJALANTULISAN BERJALAN

Pengaturan tinggi gerakan biasanya di gunakan untuk tulisan berjalan yang bergerak ke atas dan ke bawah agar arah gerakan tidak terlalu naik tau terlalu ke bawah seperti pada contoh nomor 2 tulisan bergerak ke atas / bawah.

Width adalah lebar, sedangkan height adalah tinggi. Anda juga bisa menambah kode width saja atau height saja sesuai keinginan anda. Ganti angkanya dengan angka yang lebih besar atau lebih kecil jika ingin membuat lebar atau tinggi menjadi lebih lebar atau lebih tinggi atau sebaliknya. Semakin tinggi angka, maka akan semakin lebar atau semakin tinggi.

Beberapa contoh tulisan berjalan di atas saya rasa sudah cukup. Anda bisa memberikan variasi lain dengan menggabungkan kodenya. Jika anda ingin membuat link di berjalan, ganti kode "Tulisan Berjalan" dengan kode html link anda. Jika anda belum tahu bagaimana cara membuat kode HTML link, klik "Cara Membuat Link".

Selamat membuat blog anda lebih ramai dengan menambahkan Tulisan Berjalan. Jika masih ada pertanyaan tentang cara membuat tulisan berjalan di blogspot, sampaikan melalui kotak komentar di bawah artikel ini.
Semoga bermanfaat......

Cara Membuat Spoiler

Cara membuat spoiler - Spoiler adalah sebuah tombol yang akan menyembunyikan widget / gadget atau tulisan. Jika tombol spoiler di klik, maka tulisan atau widget yang tersembunyi akan di tampilkan. Jika di klik lagi maka widget atau tulisan tersebut akan di sembunyikan kembali. Artikel ini tidak berhubungan dengan postingan BB sebelumnya yaitu "Cara Menghapus Broken Link". Agar tidak terlalu tegang menghapus link rusak, saya tulis artkel untuk mempercantik blog yaitu "Cara Membuat Spoiler di blog"

Gambar 1 : Cara Membuat Spoiler

Contoh / Live Demo tombol spoiler di blog yang terpasang di postingan atau di dalam artikel blog, bisa anda lihat di artikel "Cara Membuat Daftar Isi Blog Otomatis". Untuk melihat contoh Spoiler yang lain, anda bis lihat di bagian paling bawah blog ini, tepatnya di bagian komentar blog ( Selama template BLOGGER BUGIS belum di edit / berubah ).

Cara Membuat Spoiler

Untuk membuat spoiler, kode yang digunakan adalah :

<div style="font-family: verdana; margin-top: 5px; text-align: center;">
<input 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 = 'Tutup'; } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  = 'none'; this.innerText = ''; this.value = 'Buka Kembali'; }" style="font-size: 12px; margin: 0px; padding: 3px 5px;" type="button" value="Buka" /></div>
<div style="margin: 0px; padding: 1px;">
<div style="display: none;">
www.bloggerbugis.com
</div>
</div>

Keterangan :

• Verdana = Jenis Huruf tulisan pada tombol Spoiler. Ganti dengan Trebuchet ms, georgia, arial, atau jenis huruf lain yang anda inginkan
• 5 = Jarak tombol dari objek di atasnya. Ganti dengan angka yang lebih besar untuk membuatnya lebih jauh dari objek yang ada di atasnya atau sebaliknya
• center = Posisi / Letak tombol spoiler. Center berarti posisi tombol berada di tengah. Jika ingin membuat tombolnya berada di sebelah kiri, ganti center dengan Left, untuk sebelah kanan, ganti dengan right.
• Tutup = Tulisan pada tombol spoiler saat spoiler menampilkan widget atau tulisan yang di sembunyikan.
• Buka Kembali = Tulisan pada tombol spoiler saat widget atau tulisan tersembunyi tapi sebelumnya sudah pernah di buka / di tampilkan spoiler
• Buka = Tulisan pada tombol spoiler saat tulisan atau widget masih di sembunyikan oleh spoiler
• www.bloggerbugis.com adalah tulisan yang di sembunyikan oleh spoiler. Ganti dengan tulisan yang ingin anda sembunyikan dengan spoiler atau ganti dengan kode widget jika anda ingin menyembunyikan widget dengan spoiler

Untuk memasang Spoiler pada postingan atau artikel blog, anda harus memasang kode spoiler pada mode HTML ( Kecuali anda menggunakan "Tafsirkan HTML yang di ketik" pada menu pilihan yang ada di post editor blogspot ).

Sampai baris ini, tutorial cara membuat spoiler selesai. Sampai jumpa di artikel tips dan trik Blogger Bugis berikutnya. Salam Blogger......

Trik Mudah Cara Membuat Daftar isi blog

Cara Membuat daftar Isi Blog - Beberapa artikel terakhir yang saya posting di blog seperti Cara Memasang Tracking ID kode Google analystics di blog dan artikel sebelumnya berhubungan dengan SEO. Agar tidak terlalu banyak di pusingkan dengan Optimasi SEO saya akan selingi artikel SEO di BB dengan artikel tentang cara menghias dan mempercantik blog.

Widget daftar isi blog otomatis.

Saya memilih menulis artikel tentang widget daftar isi blog sebagai selingan artikel SEO Blogger Bugis. Alasannya, karena Widget Daftar isi Blog akan membuat pengunjung lebih mudah mencari artikel di dalam blog.Tampilannya yang menarik tidak akan membuat pengunjung bosan berlama lama nongkrong di blog.

Selain itu, Cara Membuat Daftar isi blog yang akan saya share di artikel ini akan bekerja secara otomatis tanpa perlu memasukkan link artikel satu persatu ke dalammya. Yang membuatnya lebih menarik, gadget Daftar Isi Blog ini di lengkapi dengan menu drop down untuk memudahkan pengunjung memilih jenis artikel yang akan di tampilkan oleh daftar isi blog keren ini.

Pengunjung bisa memilih melihat daftar isi Blog berdasarkan tanggal posting, dan bisa juga berdasarkan label artikel. Saya juga menambahkan Kotak dengan Fungsi Scroll agar widgetnya tidak terlalu panjang ke bawah jika settingan widget memuat ratusan artikel sehingga membuat widget ini lebih menarik. Untuk melengkapi tampilannya, saya juga menambahkan efek shadow inset atau efek bayangan ke dalam box widget, artinya, anda bisa menyebut widget ini dengan "Widget daftar isi blog otomatis dengan scroll efek shadow"

Agar anda lebih tertarik untuk memasang widget daftar isi Blog otomatis ini di blog anda, silahkan lihat gambar di bawah ini :

Tidak puas dengan gambar ?
Klik tombol spoiler di bawah ini untuk melihat Live Demonya :

Masih loading bro... sabar ya...

Widget by Blogger Bugis

Untuk membuat daftar isi blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :

<div style="background: #f2f2f2; width: 320px; color: #000; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; border:4px double #ccc; -moz-box-shadow: inset 2px 2px 2px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040">
<div id="cl_option">
Masih loading bro... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js">
</script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script>
<div style="float:right;font:normal 10px verdana; color:#ccc;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px #000">
Widget by <a href="http://www.bloggerbugis.com">Blogger Bugis</a></div>
</div>

Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.
Perhatikan kode yang berwarna merah !!!

• f2f2f2 adalah kode warna background ( Warna Latar Belakang ) yaitu Abu - Abu. Ganti kode tersebut dengan kode warna yang anda inginkan untuk mengganti warna background widget Daftar Isi Otomatis.Untuk melihat kode warna HTML, silahkan klik "Daftar Kode Warna HTML".
• 320px adalah Kode lebar widget. Ganti dengan angka yang lebih besar untuk membuat widgetnya lebih lebar atau ganti dengan angka yang lebih kecil untuk membuat widgetnya lebih sempit. Misalnya 300px atau 350px.
• 000 adalah kode warna tulisan yaitu hitam. Silahkan ganti dengan warna yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung dari pengaturan CSS template anda.
• 4px double adalah kode ketebalan garis pinggir widget, yaitu garis pinggir ganda ( double ) dengan ketebalan 4 piksel ( 4px ) . Ganti dengan angka 4 yang lebih besar atau lebih kecil. untuk membuat hanya 1 garis pinggir, ganti double dengan solid, untuk membuat garis pinggir putus - putus, ganti dengan dashed
• ccc adalah kode warna garis pinggir, ganti dengan kode warna yang anda inginkan.
• Masih loading bro... Sabar ya.... adalah kalimat yang di tampilkan jika widgetnya belum terbuka karena halaman masih loading. Silahkan ganti dengan kalimat yang anda inginkan.
• 500 adalah jumlah maksimal judul artikel yang akan di tampilkan di dalam widget daftar isi otomatis. Ganti dengan angka yang lebih besar atau lebih kecil. Pada live demo yang anda lihat di atas, saya hanya menggunakan 15.
• Yang terakhir dan paling penting adalah kode http://www.bloggerbugis.com. Ganti kode tersebut dengan URL / Alamat blog anda

Dengan mengedit semua kode di atas, anda akan memiliki daftar isi blog yang sesuai dengan tema warna blog anda. Silahkan pasang widgetnya pada sidebar blog atau laman atau halaman artikel blog anda, jika belum tahu caranya, simak tutorialnya berikut ini :

Cara Memasang Widget Daftar Isi Blog Otomatis

Ada 2 cara yang bisa di lakukan untuk memasang widget daftar isi tersebut di dalam blog. Yang pertama adalah memasang daftar isi blog otomatisnya pada sidebar blog, dan yang kedua memasang daftar isi otomatis tersebut pada halaman artikel atau laman blog. Berikut masing masing panduan cara memasang daftar isi blog otomatis :

1. Pasang Daftar Isi Blog Otomatis di Laman atau Halaman Artikel

Untuk memasang daftar isi otomatis pada Laman Baru atau Halaman Posting ( artikel ), silahkan masuk ke Post Editor blogspot sama seperti jika ingin membuat artikel. Pada halaman Post Editor, pilih mode HTML lalau paste kode Daftar Isi Blog Otomatis.

Untuk membuat widgetnya berada di tengah halaman, tambahkan kode <center> sebelum kode Daftar Isi lalau tambahkan kode </center> di bawah kode daftar isi sehingga kodenya akan terlihat seperti ini :

<center>

Kode Daftar Isi Blog Otomatis

</center>

Setelah selesai, jangan lupa publish / terbitkan seperti artikel biasa.

2. Pasang Daftar Isi Blog Otomatis Pada Sidebar Blog 

Untu memasang daftar Isi Blog Otomatis pada sidebar blog, silahkan masuk ke halaman TATA LETAK >>> Klik Tambah Gadeget >>> Pilih HTML/JavaScript >>> Copy Paste kode Daftar Isi ke kotak HTML/JavaScript >>> Klik Simpan.

Penjelasan lengkap tentang cara memasukkan widget daftar isi Blog pada sidebar blog, klik "Cara Menambahkan Widget di Blog" untuk membaca tutorialnya yang di lengkapi dengan gambar

Semoga artikel Blogger Bugis tentang Cara Membuat Daftar Isi blog ini bermanfaat. Jika anda kurang suka dengan widget ini, saya akan membuat artikel lagi tentang widget daftar isi di blog dengan tampilan berbeda

Happy Blogging.......

Cara Membuat Recent Comment With Avatar Profile

Recent Comments With Avatar - Setiap blogger menginginkan tampilan blog yang menarik dan secantik mungkin. Selain merupakan sebuah kebanggan tersendiri, blog yang menarik juga merupakan salah satu cara untuk membuat pengunjung lebih betah dan senang berkunjung ke blog.

Untuk membuat blog lebih ayu , cara yang paling baik adalah dengan menambahkan beberapa widget menarik pada sidebar blog. Salah satu widget yang menarik yang sebaiknya menghiasi sidebar blog adalah Recent Comments With Avatar.

Tentang Recent Comments with Avatar

Recent comments adalah widget yang akan menampilkan beberapa komentar terakhir di blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan. Dengan adanya Avatar atau foto profil komentator di dekat tulisan komentar, membuat Recent Comments with Avatar ini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.

Sebelum membuat Recent Comments with Avatar ini, sebaiknya anda lihat dulu live demonya di bawah ini agar tidak terkesan membeli kucing dalam karung

Get This Widget

Apabila Live demo bermasalah, anda bisa melihat screenshot gambarnya berikut ini :

Gambar 1 : Recent Comments With Avatar

Anda tertarik untuk memasang dan menambahkan widget Komentar Terakhir yang ada foto profil komentatornya di blog anda ? Simak tutorialnya berikut ini :

Recent Comments Avatar Profile

Menambahkan widget Komentar Terakhir dengan avatar profil ini sangat mudah. Tidak diperlukan mengedit kode HTML template dan hanya 1 kali Copy Paste kode. Anda cukup melakukan beberapa hal berikut ini :

• Add Gadget / Widget baru
• Pilih widget HTML Java Script
• Masukkan kode Recent Comments Avatar Profil
• Simpan
• Selesai...

Berikut kode Recent Comment with Avatar :

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 100,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 200,
 defaultAvatar  = "",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>

<div style="font-size:10px; padding:3px;margin-bottom:5px;float:right"><a
href="http://www.bloggerbugis.com/2012/05/recent-comment-komentar-avatar.html" target="_blank"> Get This Widget</a></div>
</div>

Jika anda belum tahu cara menambahkan widget baru ke dalam blog, klik "Cara Menambahkan Widget".

Kode untuk membuat Recent Comments With Avatar di atas masih bisa di edit. Silahkan edit kode yang berwarna MERAH agar tampilannya sesuai dengan yang anda inginkan.

• 250px adalah tinggi kotak Recent Comments. Ganti 250 dengan angka yang lebih jika anda ingin membuat kotak yang lebih tinggi atau sebaliknaya asala jangan menghilangkan kode px 
• fff adalah kode untuk background kotak. fff adalah kode warna putih. Apabila ingin mengganti background kotak Recent Comments dengan warna lain, ganti fff dengan kode warna yang anda inginkan. Untuk melihat kode warna, klik "Tools untuk melihat kode warna".
• 100 adalah jumlah komentar yang akan di tampilkan di dalam kotak Recent Komentar. Ganti 100 dengan angka yang lebih besar atau lebih kecil sesuai keinginan anda.
• true yang pertama adalah kode untuk menampilan Gambar Avatar profile. Jika ingin menghilangkan Foto Profil / Avatar, ganti true dengan false
• 30 adalah ukuran / besar foto profil. Sama seperti sebelumnya, ganti 30 dengan angka yang anda inginkan
• true yang kedua adalah kode untuk membuat foto profil komentator berbentuk bundar. Ganti true dengan false jika anda ingi membuat avatar profil berbentuk kotak
• 200 adalah jumlah karakter / huruf komentar yang akan di tampilkan. Silahkan ganti angkanya sesuai dengan yang anda inginkan.
• Ini adalah bagian yang paling penting. Ganti http://www.bloggerbugis.com dengan URL / alamat blog anda agar widget Recent Comments yang ada di blog anda tidak menanmpikan komentar yang ada di blog saya

Kode paling bawah ( kode yang terpisah ) adalah kode credit BLOGGERBUGIS. Jika anda tidak menghapus kodenya, saya ucapkan terima kasih.

Semoga tutorial "Cara membuat Recent Comments With Avatar" ini bermanfaat.
Happy blogging..... 

Cara Cepat Melakukan Submite Artikel ke Webmaster Bing

Cara Cepat Melakukan Submite Artikel ke Webmaster Bing - Bing adalah salah satu search engine terbesar setelah google dan yahoo. Agar Bing Search Engine lebih mengenal blog dan cepat mengindeks artikel yang ada di blog, sebaiknya submite artikel anda di bing.

Tahun 2012 ini google menerapkan alogaritma baru yang membuat persaingan di halaman pertama hasil pencarian lebih sulit dari sebelumnya. Untuk itu, sebagai alternatif mempopulerkan blog, optimasi SEO di Bing perlu di lakukan. Salah satu cara optimasinya adalah dengan Submite artikel di Webmaster Bing.

Submite artikel bertujuan untuk memberi tahu search engine bahwa kita telah membuat artikel baru di blog. Dengan demikian Search engine akan segera mengindeks artikel baru tersebut. Karena search engine suka artikel baru, jangan kaget jika artikel yang telah di submite langsung muncul di halaman pertama hasil pencarian hanya berselang beberapa menit setelah diterbitkan.

Sebelum submite artikel baru ke Bing, sebuah blog sudah harus terdaftar di Bing Webmasters. Jika blog anda belum di daftarkan di Bing, baca artikel "Cara mendaftarkan Blog ke Bing" lalu segera daftarkan blog anda. Setelah blog terdaftar di Bing, langkah selanjutnya adalah submite / daftarkan semua artikel ke Bing dengan memasukkan URL masing masing artikel di webmaster Bing. Berikut tutorial selengkapnya :

• Kunjungi WEBMASTER BING 
• Klik Tombol "Webmasters Tolls Sign In" untuk masuk ke webmaster bing

Gambar 1 : Cara submite artikel ke bing

• Masukkan Username ( email windows Live ) dan password anda pada kotak yang tersedia. Belum punya punya email di windows Live ? Baca "Cara membuat Email Hotmail".

Gambar 2 : Cara submite artikel ke bing

• Klik nama Blog anda yang telah di daftarkan sebelumnya.

Gambar 3 : Cara submite artikel ke bing

• Klik tombol "Index" lalu klik tombol "Submite URLs".

Gambar 4 : Cara submite artikel ke bing

• Masukkan URL artikel anda pada kotak yang ada di bawah tulisan "Enter URLs" lalu klik "Continiue".

Gambar 5 : Cara submite artikel ke bing

• Pada jendela Pop Up window, klik tombol tombol "Submite".

Gambar 6 : Cara submite artikel ke bing

Selamat......
Anda telah berhasil submite artikel anda di Webmaster Bing. Untuk submite artikel yang lain, klik tombol "Continiue" lalu lakukan langkah yang sama seperti penjelasan di atas.

Gambar 7 : Cara submite artikel ke bing

Sumbite artikel di bing di batasi hingga 10 artikel per hari dan 50 artikel per bulan. Anda bisa langsung submite 5 artikel sekaligus dengan memasukkan 5 url pada kotak yang ada di bawah tulisan Enter URLs jika ingin melakukan submite lebih cepat.

Saat membaca artikel ini, saya yakin anda sudah tahu cara submite blog ke google, tapi jika belum klik "Cara submite artikel ke Google". Lakukan submite ke google dan bing, maka blog anda akan lebih populer di search engine. Jika ingin lebih populer lagi, Submite Blog anda ke 50 Search Engine sekaligus. Masih kurang populer ??? Lakukan PING.

Semoga dengan Submite artikel ke Bing, blog anda lebih populer di search engine, tampil di halaman pertama google, dan trafik anda melimpah Amien.....

Sampai jumpa di tutorial Blogspot berikutnya...
Happy blogging....

Cara Memberi Komentar yang Baik dan Benar

Selama beberapa hari BLOGGERBUGIS terabaikan. Bukan karena malas ngeBlog atau tidak ada ide untuk postingan baru, melainkan karena saya sedang fokus mengedit template baru Blogger Bugis yang sedang anda lihat sekarang. Beberapa fitur tambahan membuat template BLOGGERBUGIS lebih LOLA dari template sebelumnya. Saat artikel ini ditulis, beratnya 199,14kb. Artinya, 2 kali lipat lebih besar dari ukuran template yang baik.Untuk itu, saya mohon maaf kepada sobat blogger yang berkunjung dan harus menunggu loading saat membuka Blogger Bugis. Insya allah berat blog ini akan saya kurangi dengan menghilangkan beberapa fiturnya sambil menulis artikel

Gambar 1 : Cara memberi komentar yang baik

Kembali ke topik Artikel yaitu cara memberi komentar yang baik dan benar di blog lain.

Setelah selesai mengedit template, saya masuk ke dasbord Blogger Bugis untuk mengganti template. dan menambahkan widget baru. Di halaman dasbord, sudah ada puluhan komentar yang menunggu moderasi.

• Tidak ada komentar Spam
• Hanya beberapa komentar yang benar
• Tidak ada komentar yang baik

Jika berdasarkan List komentar di atas, artinya blogger indonesia tahun 2012 ini sudah sedikit lebih baik dibandingkan pada tahun sebelumnya. Pada tahun 2010, dari 10 komentar yang masuk ke Blogger Bugis salah satunya adalah komentar Spam.

Hanya beberapa komentar yang benar

Kebanyakan komentar yang masuk kurang lebih seperti ini :
postingan yang bagus gan, artikel yang bermanfaat bro, thanks for sharing, ijin ke TKP mas, dll yang sepertinya di ketik terburu buru dan asal asalan. BLogger biasanya melakukan komentar seperti ini dengan tujuan untuk mendapatkan backlink dan berharap dikunjungi oleh admin blog yang di komentari. Saya akan memoderasi komentar seperti itu. Kemungkinan besar tidak akan di balas dan sudah pasti blog si pemberi komentar tidak akan saya kunjungi.

Tidak ada komentar yang baik.

Beberapa komentar sudah benar karena berhubungan dengan artikel. Dari beberapa komentar tersebut, tidak satupun yang merupakan komentar yang baik. Contohnya : saya kok ga' bisa ya ??? ( komentar di artikel tutorial, misalanya artikel "Cara mendaftarkan blog ke 50 Mesin Pencari" ). Komentar seperti ini akan saya kunjungi, cari masalah kenapa bisa gagal menerapkan tutorialnya, tapi saya tidak akan memberi komentar di blognya ( Kecuali PR Blognya 2 atau lebih )

Bagaimana Seharusnya Sebuah Komentar ?

Dengan memberi komentar, kita akan mendapatkan backlink dari blog yang dikomentari. Tapi sebaliknya, blog yang dikomentari harus mengijinkan komentar Via Name / URL termasuk anonim agar backlink tidak mengarah ke profil blog melainkan langsung ke blog si pemberi komentar

Gambar 2 : Cara memberi komentar yang baik

Untuk memberikan komentar yang baik dan benar, seorang blogger harus bisa membedakan mana komentar spam dan yang mana komentar yang benar, serta mengetahui cara memberi komentar yang baik.

KOMENTAR SPAM

Komentar Spam adalah komentar yang menyertakan Link Aktif dengan anchor teks. Tidak ada salahnya memasang url blog di dalam komentar. Cara ini akan membuat admin blog yang di komentari lebih mudah melakukan kunjungan balik. Jika URLnya atau anchor teksnya di beri link maka komentarnya sudah menjadi komentar spam. Komentar seperti ini akan saya masukkan ke dalam folder Spam lalu membiarkan blogspot menilai blog tersebut. Pada awal - awal ngeblog saya juga pernah memberi komentar di blog lain dan menyertakan LINK aktif dengan anchor text, tapi waktu itu saya belum tahu kalau komentar seperti itu adalah spam. Saya ingin meminta maaf kepada admin blognya, masalah saya sudah lupa blog tersebut

KOMENTAR YANG BENAR

Komentar yang benar adalah komentar yang berhubungan dengan artikel yang dikomentari. Misalanya : "Saya sudah berhasil, terima kasih tutorialnya" ( komentar pada artikel "Cara membuat Blog Versi Baru" ). Komentar seperti ini akan membuat admin senang, jika dia tidak mengunjungi blog anda, berarti adminnya "Sungguh Terlalu".

KOMENTAR YANG BAIK

Komentar yang baik adalah komentar yang menyertakan judul artikel yang di komentari.
Contohnya : "Terima kasih tutorialnya, sekarang saya sudah tahu cara memasang gambar di artikel blog" ( komentar pada artikel "cara memasang gambar di postingan" )

Dengan memberi komentar, kita akan mendapatkan backlink. Apa susahnya memberikan komentar yang baik dan benar ? Komentar yang benar sudah cukup, tapi seharusnya kita juga memberikan komentar yang baik untuk membantu mempopulerkan blog yang telah memberikan backlink ke blog kita.

Dengan memberikan komentar spam, komentator akan mendapat 2 backlink. Tentu saja ini akan menguntungkan si pemberi komentar tapi akan merugikan blog yang di komentari. Google panda akan menendang blog yang banyak komentar spamnya dari serp yang artinya, backlink ganda yang diperoleh tadi menjadi sia - sia karena berada di blog yang di benci search engine. Pada akhirnya, blog yang di komentari akan rugi, demikian juga denagn blog orang yang memberi komentar spam.

Mari saling membantu sesama blogger dengan memberikan komentar yang baik dan benar. Jika ingin bersaing di halaman pertama Hasil Pencarian Search Engine, mari kita lakukan persaingan sehat dengan tidak menghancurkan blog blogger lain melalui komentar spam.

Semoga bermanfaat...

Cara Membuat Breadcrumbs di Blog

Cara Membuat Breadcrumb di Blog - Breadcrumb adalah menu navigasi yang menunjukkan letak atau posisi sebuah halaman yang sedang terbuka. Breadcrumb biasanya di pasang di bagian bawah artikel atau di bagian atas postingan, tepatnya di atas atau di bawah judul artikel. Menu navigasi Bread Crumb ini berupa beberapa link yang menuju ke halaman homepage blog ( Home / Beranda ), link kategori atau label artikel serta judul artikel yang sedang terbuka. Untuk lebih jelasnya, lihat di bagian atas artikel ini.

Tujuan Membuat Breadcrum di blog

Saya pribadi menyukai breadcrumb karena bread crumbs bisa menghiasi bagian atas halaman posting agar judul artikel tidak terlihat kaku. Tapi di balik fungsinya untuk mempercantik tampilan blog, breadcrumb juga merupakan salah satu pendukung SEO. Menurut master SEO, dengan memasang breadcrumb di atas judul artikel, mesin pencari akan lebih mudah menelusuri halaman yang ada di dalam blog sehingga kesempatan untuk tampil di halaman depan hasil pencarian menjadi lebih besar. Selain itu, dengan membuat breadcrumb di halaman artikel pengunjung akan lebih mudah mencari artikel dengan label yang sama pada sebuah blog yang tidak dilengkapi dengan Related Post / Artikel Terkait.

Hampir semua blog menggunakan breadcrumb. Alasan utama blogger memasang menu navigasi SEO ini adalah untuk meningkatkan SEO Blog. SEO yang yang kuat akan mendatangkan trafik yang melimpah. Blog tarfik yang melimpah akan menjadi sebuah ladang online dan pemiliknya akan panen dollar. Mau ???

Cara membuat Breadcrumb di blogger Membuat menu navigasi bread crumbs di blog sangat mudah. Kopi, eh copy kode breadcrumb, paste di template blog, klik simpan template, selesai...

Penjelasan selengkapnya tentang cara membuat dan memasang menu navigasi breadcrumb di blog adalah sebagai berikut :

• Silahkan masuk ke dasbor blog anda dengan memasukkan username dan pasword blog anda di www.blogger.com.
• Selanjutnya buka halaman kode template blog untuk memasang kode breadcrumb di template.
• Belum tahu cara masuk ke halaman edit template ? Klik link di bawah ini untuk membaca artikel selengkapnya yang di lengkapi dengan gambar

"Cara mengedit template Blog".

• Sudah tahu cara mengedit template ? Lanjutkan dengan memberi tanda checklist pada kotak kecil yang ada di depan tulisan "Expand template widget".
• Untuk berjaga² terjadi kerusakan template atau error karena melakukan kesalahan saat mengedit kode templatenya, sebaiknya DOWNLOAD dulu template blog anda.
• Copy kode html berikut ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
          </b:loop>
        </b:if> &#187; <data:post.title/>
  </div>
</b:if>
</b:if>

• 7. Letakkan / Paste kode tersebut di bawah kode   <div class='post hentry uncustomized-post-template'> template blog anda. Bisa juga letakkan kodenya di bawah kode <div class=’post hentry’>  atau bisa juga di atas kode <div class='post-header-line-1'/> .
• Jangan lupa gunakan Gunakan Tombol F3 pada keyboard untuk melakukan pencarian kode dengan cepat.
• Apabila anda ingin mengedit kodenya, silahkan edit kode yang berwarna MERAH.

Selanjutnya........

• Untuk mempersonalisasi tampilan Navigasi Breadcrumbs, cari kode untuk ]]></b:skin>  di template blog anda.
• Copy kede CSS breadcrumb berikut ini, lalu Paste di atas kode ]]></b:skin>

.breadcrumbs {
        padding:5px 5px 5px 0;
        margin: 0 0 5px;
        font-size:12px;
font-family: Georgia;
        line-height: 1.4em;
        border-bottom:4px double #000000;
       }

Dengan kode tersebut, anda bisa mengganti besarnya font breadcrumb dengan mengganti angka 12 menjadi lebih besar atau lebih kecil. Kode Georgia adalah kode untuk jenis huruf yang di gunakan breadcrumb. Anda bisa mengganti jenis hurufnya dengan jenis huruf yang lain seperti trebuchet ms, arial, verdana atau font lain sesuai keinginan anda. Untuk kode pada baris terakhir, angka 4 berarti besar garis bawah breadcrumb adalah 4 piksel, double berari garis ganda, dan kode #000000 adalah kode HTML untuk warna hitam. kode tersebut artinya :
"Garis pinggir bawah menu breadcrumb adalah garis ganda ( double ) dengan ketebalan garis sebesar 4 piksel dan garisnya berwarna hitam ( #000000 ). Anda bisa mengganti angka 4 menjadi lebih besar atau lebih kecil, kode : double bisa di ganti dengan kode :

solid = garis tunggal biasa atau
dashed = garis putus - putus

Anda juga bisa mengganti warna tulisan menu breadcrumb dengan mengganti kode warna hitam ( #000000 ) dengan kode warna yang lain, misalnya kode #B40404 untuk warna merah dan sebagainya. Untuk melihat lebih banyak kode warna, klik Link di bawah ini :

"Tools untuk melihat kode warna"

Catatan :
Karena setiap kode template berbeda - beda, dengan cara di atas Navigasi Breadcrumbs tidak terlihat pada beberapa template. Jika hal ini terjadi pada template anda, lakukan seperti berikut ini :

Copy kode HTML pada step 6 lalu Paste di atas kode <div class='post-header'>  template anda. Itu akan membuat Navigasi Breadcrumbs berada di bawah Judul Artikel.

Jika ingin menyimpan Navigasi Breadcrumbs di Atas Judul Postingan / Artikel, buat kodenya seperti berikut ini :

    <b:includable id='post' var='post'>
      <div class='post hentry'>

        <a expr:name='data:post.id'/>

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    Anda berada di &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
              </b:loop>
            </b:if> &#187; <data:post.title/>
      </div>
    </b:if>
    </b:if>

        <b:if cond='data:post.title'>
          <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </h3>
        </b:if>

        <div class='post-header'>

        <div class='post-header-line-1'/>

        </div>

• Cari kode yg berwarna HITAM.
• Kode yang berwarna BIRU, adalah kode yang sama pada STEP 6 , lettakan kodenya diantara kode yang berwarna HITAM persis seperti contoh di atas.
• Kode yang berwarna MERAH tidak penting, tapi kalau anda mengerti maksudnya, ya syukur.... hehehehehe..........
• Sekali lagi !!! Karena setiap kode template mungkin berbeda, carilah kode yang mirip.

Jika anda sudah terbiasa mengedit template, sebaiknya coba "Cara membuat Breadcrums cepat terindeks". Tapi, jika anda belum terbiasa dengan kode HTML template blog, sebaiknya gunakan cara membuat breadcrumb di atas. Kode untuk membuat breadcrumb yang langsung terindeks jauh lebih banyak dari kode breadcrumb biasa di atas. Selain itu, setelah memasang breadcrumb yang cepat terindeks, akan sulit menghapus breadcrumbnya karena kode yang di pasang sebelumnya akan terpisah ( hanya untuk beberapa jenis template ). Dari banyak template yang saya coba pasangi breadcrumb yang langsung terindeks, tidak satupun yang membuat kode breadcrumb tetap utuh.

Silahkan pilih mas bro....
Mau membuat breadcrumb biasa, atau mau membuat breadcrumb yang cepat terindeks. Tujuan dan fungsi keduanya tetap sama, yang membedakan, hanya cepat tidaknya terindeks di hasil pencarian search engine.

Oce mas bro,... semoga artikel cara membuat breadcrumb di blogspot ini bermanfaat.
Happy Blogging....

Cara Membuat dan Memberi Gaya pada Kotak Scroll

Cara Membuat dan memberi Gaya pada Kotak Scroll - Sebuah kotak dengan fungsi scroll sangat banyak digunakan oleh blogger blogspot. Ada yang menggunakannya untuk menyimpan daftar isi blog, membuat widget blog lebih dari 1 pada satu kotak, membuat blogroll, menyimpan statistik, dan lain lain. Dengan adanya fungsi scroll, kotak akan lebih terlihat praktis dan menarik. Selain itu, Sebuah kotak dengan fungsi scroll bisa menyimpan isi yang sangat besar atau banyak dengan ukuran kotak yang kecil.

Scroll Kotak Otomatis

Jika isi kotak lebih lebar dari kotaknya, maka kotak akan secara otomatis membuat scroll ke samping dan membuat scroll ke bawah apabila isi kotak lebih panjang dari ukuran kotaknya. Dengan demikian, jika ingin menyimpan widget yang lebar atau panjang atau keduanya pada sidebar blog, kita tinggal membuat kotak scroll lalu menyimpan widget tersebut di dalam kotak scrollnya.

Kotak dengan fungsi scroll kurang lebih akan terlihat seperti ini :

KOTAK dengan Fungsi Scroll Bloggerbugis

Mana scrollnya ????

Apabila sudah diisi dengan tulisan atau widget yang melebihi kapasitas kotaknya, maka kotak secara otomatis akan menambahkan scroll seperti contoh di bawah ini :

Artikel Cara membuat kotak dengan fungsi scroll ini di tulis dan di terbitkan oleh bloggerbugis. Jika anda ingin mengcopy artikel ini, harap sertakan LINK AKTIF menuju ke http://www.bloggerbugis.com sebagai sumber artikel. Apabila anda menemukan artikel ini di blog lain selain BLOGGERBUGIS, mohon beritahu admin BLOGGERBUGIS agar blog tersebut di laporkan ke google sebagai pencuri konten agar blognya di hapus dari indeks google. Terima kasih...

Atau seperti contoh kotak scroll di bawah ini yang di isi dengan gambar:

Dan akan terlihat seperti contoh di bawah ini jika kotak scroll di isi dengan widget :

Kode yang digunakan untuk membuat sebuah kotak dengan fungsi scroll adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">BLOGGERBUGIS</div>

Sebelum menambahkan sedikit gaya pada kotaknya, saya akan jelaskan kode untuk membuat kotak scrollnya terlebih dahulu.

• width:100px  adalah lebar kotak yang diukur dalam pixel. (100px/100pixel)
• height:400px adalah tinggi kotak yang diukur dalam pixel. (400px/400pixel)
• padding:10px; adalah jarak isi kotak dengan garis pinggir kotak.
• border:1px solid #000000 adalah kode untuk ketebalan garis pinggir kotak ( border ) dengan garis biasa ( solid ) yang berwarna hitam ( #000000 ).
• Kata BLOGGERBUGIS adalah isi kotak yang berupa tulisan yang bisa juga di ganti dengan kode widget jika kotaknya di isi dengan widget.

Memberi Gaya pada kotak scroll

Dengan menambahkan beberapa kode, Kotak scroll di blog akan terlihat lebih menarik. Contohnya :

Tambahkan kode background:#00ff00; untuk memberikan background warna pada kotaknya. Hasilnya seperti ini :

BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS

Kode untuk membuat kotak scroll dengan background warna di atas adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;">BLOGGERBUGIS</div>

Kode background:#00ff00 adalah kode untuk memberi latar belakang ( Background )  berwana hijau pada kotak scroll. Anda bisa mengubah warna background dengan mengganti kode rana hijau dengan kode warna yang anda inginkan. Untuk melihat kode HTML warna, klik "Tools Untuk melihat Kode Warna".

Tambahkan bingkai untuk membuat kotak dengan fungsi scrollnya jadi lebih menarik hinggan terlihat seperti contoh di bawah ini :

BLOGGER BUGIS BLOGGER BUGIS BLOGGER BUGIS BLOGGER BUGIS BLOGGER BUGIS BLOGGER BUGIS BLOGGER BUGIS BLOGGER BUGIS

Untuk memberi bingkai pada kotak dengan fungsi scroll seperti conto di atas adalah :

<table border="3" cellpadding="1"><tbody><tr><td><div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;">BLOGGERBUGIS</div></td></tr></tbody></table>

• Untuk membuat bingkainya menjadi lebih tebal, ganti angka 3 pada kode <table border="3" menjadi lebih besar.
• Untuk memberi jarak antara bingkai dengan kotak, ganti angan 1 pada kode cellpadding="1" menjadi lebih besar.

Misalnya angka table border adalah 5 dan angka cellpadding 5, maka hasilnya akan seperti contoh berikut ini :

Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna dan bingkai pada kotak scrollnya

Gaya lain yang bisa di tambahkan pada kotak scrollnya adalah efek shadow ( bayangan ). Agar efek bayangan pada kotaknya lebih menarik, ganti border ( garis pinggir ) kotaknya dengan garis pinggir ganda. Hasilnya kurang lebih seperti ini :

Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya

Kode yang di gunakan untuk membuat kotak scroll dengan efek shadow, dan garis pinggir ganda seperti di atas adalah :

<div style="overflow:auto; width:150px; height:100px; color:#b4040; padding:10px; border:4px double #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;-goog-ms-box-shadow:0 0 10px #000000;">Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya</div>

• Kode yang berwarna merah adalah kode untuk memberi garis pinggir ganda. Jika ingin membuat garisnya putus - putus, ganti kode double dengan dashed
• Kode yang berwarna biru adalah kode untuk memberi efek bayangan berwarna hitam pada kotak

Semua kode di atas bisa di edit dengan menggabungkan kodenya, menambahkan atau mengurangi kodenya atau keduanya. Silahkan edit kode dasar membuat kotak scroll di blog tersebut di atas agar kotaknya sesuai dengan keinginan anda.

Jika menambahkan terlalu banyak gaya, nanti kotaknya menjadi OVER DOSIS eh OVER STYLE . Karena itu saya akhiri artikel "Cara Membuat Kotak Scroll di Blog" sampai disini saja . Jika anda lebih suka membuat text area di bandingkan dengan kotak scroll, klik "Beberapa macam cara membuat textarea"

Oce bro... semoga artikelnya bermanfaat.
Happy Blogging dan Salam Blogger....

Tutorial Cara Membuat Beberapa Macam Textarea di Blog

Panduan cara membuat Teks Area - Beberapa tahun lalu, blogspot tidak bisa menampilkan kode HTML di dalam postingan secara otomatis. Untuk melakukannya, kita harus menggunakan Add Ons / Pengaya mozilla Firefox atau menggunakan Textarea. Sekarang, blogspot semakin canggih. Tanpa pengaya mozilla dan teks area, kita sudah bisa memposting kode HTML secara otomatis. Lalu, apakah textarea masih di perlukan ? Jawabannya bisa YA bisa juga TIDAK. Tergantung bagaimana penilaian anda terhadap kelebihan dan kekurangan teks area.

Kelebihan dan kekurangan Teks Area.

Dengan Text Area, kita bisa memberikan batas pada tulisan atau kode HTML atau apa saja di dalam artikel untuk memperjelas tulisan di dalam text area. Dengan text area, tulisan akan terlihat lebih rapi dengan adanya kotak sebagai pembatas tulisan yang ingin ditonjolkan di dalam postingan blog. Selain itu, blogger juga membutuhkan teks area untuk menampilkan kode HTML pada sidebar blog, meskipun bisa juga menggunakan "kotak dengan fungsi scroll". Kelebihan lain teks area akan terlihat setelah mengetahui beberapa cara membuat teks area di blog. Untuk kekurangannya,saya rasa tidak ada

Beberapa Jenis dan Cara Membuat Teks Area

Untuk membuat text area biasa, kode HTML yang di gunakan seperti ini :

<textarea>Tulisan di dalam teks area</textarea>

Karena terlalu sederhana, saya akan menulis beberapa macam cara membuat teks area di blog agar teks area menjadi lebih menarik.

Kode untuk membuat teks area pertama :

<div align="center">
<textarea cols="30" name="code" rows="3">Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area</textarea></div>

Hasilnya :

Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area

Besarnya Text Area tergantung dari besarnya angka ROWS ( tinggi kotak teks area ) dan COLS ( Lebar kotak teks area ).

• Semakin besar angka ROWSnya, semakin tinggi ukuran kotak Text Area begitu juga sebaliknya.
• Semakin besar angka COLSnya, semakin Lebar ukuran kotak Text Area begitu juga sebaliknya.
• Anda bisa mengganti angka-angkanya sesuai dengan kebutuhan anda. Pada contoh di atas, angka yang dimaksud adalah angka 3 dan 30.
• Ganti kode yang berwarna merah lainnya dengan tulisan yang akan di pasang di dalam teks area.
• kode yang berwarna biru ( center ) adalah kode untuk posisi teks area yaitu tengah. Jika ingin membuat teks area berada di pinggir kiri, ganti kode center dengan kode left, untuk membuatnya berada di samping kanan, ganti dengan kode right 

Berikut contoh posisi teks area :

Contoh Teks Area di Kiri

Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area

Contoh Teks Area di Tengah

Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan didalam text area

Contoh Teks Area di Kanan

Ganti tulisan ini dengan dengan Teks atau Kode HTML yang ingin anda tampilkan di dalam text area

Jika anda ingin menampilkan banyak Teks atau kode HTML didalam Text Area, anda tidak perlu membuat kotak Text Areanya terlalu besar, karena text area secara otomatis akan membuat scroll kebawah atau ke samping atau keduanya jika banyak teks di dalamnya. Contohnya seperti ini :

Artikel cara membuat teks area ini di tulis dan dipublikasikan oleh BLOGGERBUGIS. Apabila anda ingin mengcopy artikel ini di blog anda, mohon cantumkan LINK AKTIF yang mengarah ke www.bloggerbugis.com sebagai sumber artikel. Jika anda menemukan artikel ini di blog atau situs lain, berarti artikel ini telah di copy paste. Apabila anda tidak melihat LINK AKTIF di dalam atau di bawah artikel tersebut, mohon laporkan di www.bloggerbigis.com agar saya ( Admin Bloggerbugis ) melaporkan blog tersebut ke google agar blognya di hapus dari internet. Pokoknya tidak ada ampun buat blogger COPAS yang tidak tahu etika ngeBLOG. hehehehe...

Dengan sedikit menambahkan kode html, text area akan menjadi lebih menarik, yaitu dengan menambahkan tombol untuk di klik. Saat tombol text area di klik semua tulisan yang ada di dalam text area akan langsung terpilih dan tinggal di Copy dengan klik kanan kode yang sudah terpilih lalu pilih salin / copy atau langsung menekan tombol CTRL + huruf C di keyboard. Dengan teks area seperti ini, maka tidak akan ada kode yang tertinggal untuk di copy. Text Area jenis ini di kenal dengan nama Text Area dengan Tombol Highlight. Kode yang digunakan untuk membuat teks area otomatis ini adalah :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>

 Hasilnya :

Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area

Silahkan klik pada tulisan HIGHLIGHT ALL, maka semua text yang ada di  dalam Text Area akan langsung terHIGHLIGHT / terPILIH.

Sama seperti Text Area yang pertama, anda bisa mengedit kembali kode di atas sesuai keinginan anda, yang penting jangan hancurkan Text Areanya

• Kode Canter pertama = Posisi tulisan Highghlight All
• Kode center kedua = Posisi teks area
• Highlight All = Tulisan di dalam tombol, bisa di ganti sesuai keinginan misalnya "Pilih Semua".
• Kode yang berwarna merah = Cara mengeditnya sudah di jelaskan sebelumnya.

Jenis teks area berikutnya adalah text area auto block. Semua tulisan atau kode yang ada di dalam teks area jenis ini akan terpilih secara otomatis saat kotak text area di klik. Jenis teks area ini hampir sama dengan Jenis teks area sebelumnya. Bedanya, teks area ini tidak menggunakan tombol Highlight All. Bagian yang di klik untuk menyeleksi tulisan adalah bagian di dalam teks area. Saya menggunakan text area seperti ini untuk menyimpan kode Link Bloggerbugis di laman Blogroll / Tukar Link dengan Bloggerbugis Contohnya :

Contoh Text Area otomatis seleksi saat di klik

Klik di dalam teks area untuk menyeleksi tulisan yang ada di dalam text area.
Kode untuk membuat text area otomatis seleksi / auto block seperti di atas adalah :

<div style="text-align: center;">
<textarea cols="25" onclick="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>

Bagaimana mas bro...
Kode untuk membuat textarea sudah cukup banyak ? Kalau YA, silahkan berhenti membaca sampai di sini. Kalau jawabannya tidak, saya akan tambah lagi kode lain untuk membuat textarea.Silahkan lanjutkan membaca artikelnya..

Kita modifikasi sedikit kode text area terakhir di atas yaitu teks area auto block atau auto seleksi saat text area di klik. Textarea berikut ini akan membuat pengunjung lebih mudah mengcopy tulisan atau kode HTML yang di pasang di dalam teks area karena tulisan di dalam textarea akan otomatis terseleksi atau terblock tanpa di klik melainkan hanya mengarahkan mouse di atas teks area. Kode yang di gunakan untuk membuat teks area otomatis seleksi tanpa di klik ini hampir sama dengan text area auto block. Bedaannya hanya beberapa huruf yaitu kode yang saya tandai dengan warna merah pada kode di bawah. Berikut kodenya :

<div style="text-align: center;">
<textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>

Hasilnya :

Contoh Text Area otomatis seleksi saat di klik

Arahkan mouse anda ke dalam test area untuk melihat hasilnya.

Penutup

Saya yakin anda akan memilih cara membuat text area yang terakhir ini, karena itu saya pasang di bagian paling bawah agar anda membaca semua tulisan di artikel ini . Tujuannya, untuk membuat anda lebih memahami cara membuat macam - macam teks area di blog.

Dengan banyaknya cara membuat macam - macam textarea di atas, mungkin ada di antara pembaca yang bingung dan kurang memahami kode HTML textarea. Sebenarnya saya masih ingin membuat anda tambah bingung dengan membuat text area yang lebih menarik . Misalnya, menambahkan background pada text area, memberi warna tulisan, garis pinggir berwarna dan putus - putus, garis tebal dan tipis, dan masih banyak lagi. Tapi karena artikelnya sudah terlalu panjang, saya akan bahas "Cara modifikasi Textarea" sehingga lebih menarik di artikel berikutnya. Sebaiknya baca juga "Cara membuat kotak dengan Fungsi Scroll" agar bisa membuat kode Tukar Link dengan text area dan kotak scroll untuk menyimpan Blogroll

Semoga artikel "Beberapa cara membuat textarea di blog" ini bermanfaat.

Selamat berakhir pekan...
Happy blogging...