Membuat Kotak Kode / Text Area (Update)

Bagi yang belum tahu bagaimana cara membuat text area,anda bisa baca di membuat text area(3 macam) pada artikel blog ini.

---

Maksudnya menghias text area?

Ya,utuk meletakkan sebuah kode pada artikel,biasanya kita memakai sebuah text area yang berbentuk form,meskipun Pelajaran Blog jarang menggunakan area jenis ini (ribet,he..).

Contoh text area biasa seperti ini :

---

Saya sedang belajar bagaimana cara menghias text area pada Blog,Ini adalah contoh text area yang biasa,tentunya sedang belajar di Pelajaran Blog:)

dengan kode seperti ini :

---

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" readonly>Text Anda Disini</textarea></form>

---

**rows dan cols menentukan ukuran text area,disitu anda edit sesuai keinginan anda.

---

Tapi jika anda menginginkan sebuah form area kode yang berbeda,anda bisa coba contoh-contoh text area di bawah ini:

---

Menghias Text Area Contoh #1

Ini adalah jenis text area dengan garis tepi berbentuk dot berawarna biru,dan mempunyai background warna kuning,dengan text bergaris bawah.

Text area di atas:

• Background berwarna kuning
• Border berwarna biru (dot)
• Warna Text Merah
• Text bergaris bawah

Untuk kodenya copy kode di bawah ini :

---

<form><textarea rows="3" cols="30" background-color="green"
style="color: red; background-color: yellow; text-decoration: underline; border-style: dotted; border-color: blue">Text Anda Disini</textarea></form>

---

Menghias Text Area Contoh #2

Ini adalah jenis text area dengan border solid berwarna kuning dengan background text berwarna hijau,jenis text Uppercase

Text area di atas:

• Background berwarna Hijau
• Border berwarna Kuning (solid)
• Text Huruf Besar (Uppercase)
• Warna Text Putih

Untuk kodenya copy kode di bawah ini :

---

<form><textarea rows="3" cols="30" style="color: white; background-color: green; text-transform: uppercase; border-style: solid; border-color: yellow">Text Anda Disini</textarea></form>

---

Menghias Text Area Contoh #3

Ini adalah contoh text area dengan background berwarna biru dengan warna text kuning tanpa bergaris bawah,border solid berwarna merah

Text area di atas:

• Background berwarna Biru
• Border berwarna Merah (solid)
• Text Tanpa bergaris bawah
• Warna Text Kuning

Untuk kodenya copy kode di bawah ini :

---

<form><textarea rows="3" cols="30" style="color: yellow; background-color: blue; border-style: solid; border-color: red" >Text Anda Disini</textarea></form>

---

Menghias Text Area Contoh #4

Ini adalah contoh text area dengan background berwarna hijau dengan text warna putih dan berhuruf tebal,juga terinstall otomatis.

Text area di atas:

• Background berwarna Hijau
• Border berwarna gray/abu-abu(solid)
• Warna text Putih dan berhuruf tebal
• Kode terinstall/terblok otomatis

Untuk kodenya copy kode di bawah ini :

---

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" onmouseover="this.form.txt.select()" readonly ; style="color: white; background-color: green; font-weight: bold; border-color:gray">Text Anda Disini</textarea></form>

---

Untuk jenis-jenis yang lain anda bisa modif sendiri,selamat mencoba ya:)

Cara Pasang Tombol Like Setiap Posting-an (Google Plus,Facebook,Twitter,Addthis)

Cara Memasang Like / Share Button di Setiap Postingan Blogger

Hi Hallo guys,ketemu lagi ya,dah lama banget kayanya ga sharing seputar blogging ya,hihihi.

Ada info baru sob,kenapa baru? ya,karena sebagian blogger ada yang belum mengetahui 'bagaimana memasang tombol like atau share di setiap posting blog'.Karena beberapa hari kemarin ada yang mengirim via email sebagian tutorial hanya memaparkan tombol like untuk halaman blog utama saja.
Sedangkan untuk setiap posting tidak dapat dishare terutama untuk Google Plus dan Facebook.

Seperti yang sobat dapat lihat pada gambar diatas,yup! tombol share / icon like facebook,twitter,google plus bahkan addthis dapat kita pasang pada setiap posting blog secara otomatis.Kelebihannya tentu sobat tidak perlu repot mengcopy url setiap postingan untuk dibagikan di facebook,twitter,google+ dan yang lain.

Ok! langsung saja ya,silakan sobat ikuti langkah-langkah dalam cara memasang tombol like facebook,google +,twitter,addthis,dll dalam setiap postingan berikut ini:

Langkah dan Cara Pasang Like Button / Icon Social Network Directories

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;en-US&#39;}
</script>

**script tersebut diatas dipasang jika sobat ingin juga menampilkan google plus share button

Kemudian langkah selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>

Setelah sobat menemukan kode tersebut,

-jika sobat INGIN MENAMPILKANNYA DI BAWAH POSTINGAN maka sobat letakkan kodenya nanti diBAWAH kode <data:post.body/> atau <p><data:post.body/></p>.

-jika sobat INGIN MENAMPILKANNYA DI ATAS POSTINGAN maka sobat letakkan kodenya nanti diATAS kode <data:post.body/> atau <p><data:post.body/></p>.

Nah,kode yang harus sobat letakkan adalah sebagai berikut:

<b>Bagikan posting ini di:</b><br/>
<tbody><tr><td><iframe allowtransparency='true' class='twitter-share-button twitter-count-horizontal' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/tweet_button.1337330192.html#_=1337861351239&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2F#%2F;url=http%3A%2F%2F#%2F' style='width: 110px; height: 20px;' title='Twitter Tweet Button'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td><td><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style addthis_nonzero' href='#' style='display: block;'><a class='atc_s addthis_button_compact'><span/></a></a><div class='atclear'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></td></tr></tbody></table></div>
<br/>

Simpan Template sobat dan lihat setiap posting sobat :D Good Luck ya! :D

Google Translate Widget

Memasang Translate Bahasa di Blog / Google Translate Widget

Sering kita ya sob,melihat sebuah Google translate widget di beberapa blog milik sobat blogger,tak perlu pusing untuk mendapatkannya,karena saya kira tutorial membuat google translate widget ini sudah banyak yang mempublikasikannya.
Bukan bermaksud latah gan,hanya kurang lengkap rasanya blog sederhana ini jika tidak memposting artikel bagaimana sih cara memasang widget translate di platform blogspot.

Hanya saja,google translate widget yang akan kita pasang nanti hanya berupa buletted list,hasilnya akan tampil seperti di bawah ini:

• English
• French
• German
• Spain
• Italian
• Belanda
• Rusia
• Portugis
• Jepang
• Korea
• Arab
• China

Adapun kelemahan dari widget translate untuk blogger yang satu ini,adalah widget yang tak bisa digunakan dalam halaman terjemahan.Alias jika halaman sudah diterjemahkan dari hasil widget ini,dalam halaman baru nanti saat hendak menggunakan widget ini sudah tak bekerja lagi.
Solusinya? Tetaplah klik google translate widget link pada halaman aslinya :D

Langkah Cara Pasang Google Translate / Penterjemah dalam Blog

Untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget:





Selanjutnya pilih HTML/Javascript,kemudian letakkan kode google translate widget berikut:

<ul><li><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;"><b>English</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cfr&hl=en'); return false;"><b>French</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cde&hl=en'); return false;"><b>German</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7ces&hl=en'); return false;"><b>Spain</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cit&hl=en'); return false;"><b>Italian</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cnl&hl=en'); return false;"><b>Belanda</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cru&hl=en'); return false;"><b>Rusia</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cpt&hl=en'); return false;"><b>Portugis</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cja&hl=en'); return false;"><b>Jepang</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cko&hl=en'); return false;"><b>Korea</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7car&hl=en'); return false;"><b>Arab</b></a></li><li><a href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7czh-cn&hl=en'); return false;"><b>China</b></a></li></ul>

Simpan dan sekarang sobat sudah bisa lihat hasilnya.

Cara Membuat Template Blogger untuk Tampilan Handphone

Cara Membuat Template Blogger versi Mobile

Jika sobat ingin menampilkan blog dalam tampilan mobile dari blog yang sobat miliki seperti untuk tampilan pada handphone,smartphone,etc(versi mobile),ada trik singkat sob,yang mana hal ini memiliki kekurangan namun juga memiliki kelebihan yang sangat menguntungkan dari owner blog itu sendiri.

Diantara kekurangan tampilan blogger versi mobile adalah:

-Widget yang kita miliki tidak akan dapat tampil,seperti widget kalender,navigasi menu,dan lain sebagainya kecuali jika sobat melihatnya dalam tampilan versi web lengkap dalam handphone sobat.
-Iklan yang kita miliki tidak dapat tampil dalam template blogger versi mobile ini.

Sedangkan kelebihan dari blogger template mobile ini adalah:

-Blog yang kita miliki memiliki lebih banyak peluang untuk dapat dinikmati dan dilihat banyak orang.
-Mempermudah pembaca karena tampilan yang simple dan hanya memprioritaskan isi posting saja.

Hal ini pernah saya coba sob,saat saya mencoba membukanya di handphone milik teman saya yang berbasis 'Android' (beda dengan hp milik saya yang memiliki os bernotabene 'ngirid',hihihi) dan hasilnya sangat luar biasa.
Jangan khawatir,jika sobat ingin menampilkannya seperti situs aslinya tinggal pilih aja 'versi lengkap' yang ada di handphone sobat nantinya.

Cara Meng-aktifkan Blogspot template for Mobile

Sobat pilih Dashboard lalu pilih Settings (gb1) lalu pilih Email & Mobile (gb2) selanjutnya checklist checkbox Yes. Show mobile template on mobile devices. (gb3) kemudian pastikan selera sobat benar (gb4),jika dirasa sudah pas klik Save Settings (gb5) dan lihat hasilnya di handphone milik kamu :D

gb1


gb2


gb3


gb4


gb5

Cara Membuat ToolTip Ber-Link Di Dalamnya

Cara Membuat Tool Tip / Mini Popup Memiliki Link Anchor dan Menu Pilihan Didalamnya

Meskipun tutorial membuat tooltip link ini diposting tengah malam kaya ghene(bahasa gaul sekarang gan pent-),tapi tetep semangat ya bro,langsung aja deh,coba sobat arahkan kursor pada gambar link download di posting KLIK DISNI,nanti akan keluar tooltip keren yang memiliki link didalamnya (adapun masalah apa itu tooltip dan pembahasannya telah disharing beberapa waktu lalu di SINI pent-):

Gambar screenshotnya akan tampil seperti ini gan:

Gimana gan,pingin bikin juga buat menghias blog kamu,betul sob,kita bisa membuat tooltip yang didalam tool tip tersebut memiliki link bahkan gambar sekalipun,yuk kita intip gimana sih cara ngbikinnya :D

Langkah Membuat Coda Bubbles dengan jQuery

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.

.bubbleInfo {
position: relative;
}

.popup {
font-size:11px;
width:200px;
background:#F3F3F3;
padding:3px 5px;
border:1px solid #CCC;
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
bottom:60px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.popup:after{
border:15px solid;
border-color: #F3F3F3 transparent transparent transparent;
content:"";
display:block;
height:;
width:;
position:absolute;
bottom:-30px;
left:80px;}

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(function () {
$(&#39;.bubbleInfo&#39;).each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $(&#39;.trigger&#39;, this);
var popup = $(&#39;.popup&#39;, this).css(&#39;opacity&#39;, 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don&#39;t trigger the animation again if we&#39;re being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: &#39;block&#39; // brings the popup back in to view
})

// (we&#39;re using chaining on the popup) now animate it&#39;s opacity and position
.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 1
}, time, &#39;swing&#39;, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 0
}, time, &#39;swing&#39;, function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn&#39;t do the job)
popup.css(&#39;display&#39;, &#39;none&#39;);
});
}, hideDelay);
});
});
});

</script>

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="bubbleInfo"><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" trigger=""><img class="trigger" src="http://3.bp.blogspot.com/-OyJmeSaNDXA/T60LK6s8WxI/AAAAAAAABkQ/x6UY2x9CGw8/s1600/download%2Bbutton%2Bpelajaran%2Bblog.jpeg" height="65" width="150" /></a><div class="popup"><table><tbody><tr> <td>Nama File</td><td>: Benarkah Bid'ah Itu Sesat?</td></tr><tr><td>Ukuran</td><td>: 337kb</td></tr><tr> <td>Hosting </td> <td>: Google Code </td></tr><tr><td>Url Link </td> <td>: <small><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Klik Di Sini</a></small></td> </tr><tr> <td>Referensi </td><td>: <small><a href="http://pelajaran-blog.blogspot.com/" target="_blank">Pelajaran Blog dan Seo</a></small></td></tr>
</tbody></table></div></div>

Lalu simpan dan lihat hasilnya,oh ya,kode yang bercetak tebal sesuikan saja ya,udah terlalu malem soalnya gan,see you ya :D

Membuat Navbar / Tool Bar Share di Bawah Blog

Tambahkan Widget Tool Bar Share Social Network di Blog Kamu

Dulu pernah kami share ya seputar membuat navbar sederhana,namun bukan navbar seperti itu yang akan kita bahas gan.
Lihat screenshot gambar ini,ini adalah widget toolbar yang gratis tentunya dari:
wibiya.conduit.com
,or jika 'beliau' ini masih memberikan kami kesempatan untuk memasangnya,sobat bisa lihat tool bar dibawah blog ini.

Klik gambar untuk tampilan lebih besar:


Klik gambar untuk tampilan lebih besar:


Seperti sobat lihat,navbar ini sangat efektif sekali apalagi didukung dengan tampilan bantuan script yang sangat menarik.
Betul kita dapat membagikan artikel maupun blog yang kita miliki ke semua social network seperti twitter,facebook,kirim email,print bahkan mensubmit ke directory terkenal seperti reddit.

Wah,keren juga ya sob,gimana sih cara dapetinnya?

1.Silakan klik di SINI,dan klik tombol 'GET IT NOW!'

Klik gambar untuk tampilan lebih besar:


2.Selanjutnya,isikan url dari blog yang sobat miliki,misal
http://indonesianbiggestdirectories.blogspot.com,lalu klik tombol 'Create Now'

Klik gambar untuk tampilan lebih besar:


3.Kemudian,sobat pilih warna navbar,bahasa yang akan tampil dan login dengan email dan password baru sobat,lanjutkan dengan menekan tombol 'Get Your Bar'

Klik gambar untuk tampilan lebih besar:


4.Lanjutkan denga meng-klik link 'Install on Blogger'

Klik gambar untuk tampilan lebih besar:


5.Akan tampil jendela popup seperti ini,berhubung tak ada pilihan untuk platform blogger,maka sobat pilih saja 'Website and Other Blog Platform'

Klik gambar untuk tampilan lebih besar:


6.Copy kode script navbar keren yang tercipta,dan klik tombol 'Activate'

Klik gambar untuk tampilan lebih besar:


7.Nah,untuk menampilkannya widget pada blog coba pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,pilih HTML/Javascript lihat Gambar:





Selanjutnya kemudian letakkan kode script nav bar tool yang baru saja kita copy tadi,lalu simpan dan sobat sudah bisa lihat hasilnya.Semoga bermanfaat ya sob :D

Parse Tool

Alat Pengubah Kode Agar Tampil di Postingan

Bismillah - berhubung waktu yang semakin malam (chie),langsung aja ya gan,kali ini hanya informasi kecil seputar parse kode html.
Sekali lagi untuk penjelasan lebih detil,sobat baca dulu ya di artikel saya sebelumnya:
klik di
http://pelajaran-blog.blogspot.com/2010/11/menampilkan-kode-html-parse-kode-html.html

Saya kira sudah sangat jelas ya sob,yuk kita cari tahu bagaimana sih contoh script parse html code ini.
Penjelasan singkatnya,kita mencoba menerapkan script dari http://www.donatofurlani.it/ideas,yang kurang lebih fungsi dari script ini seperti parse tool yang sudah banyak kita tahu di www.blogcrowds.com.

Caranya hanya letakkan kode berikut diposting blog sobat dan publikasikan.

<center><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=315&h=200&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"> </script></center>

Sekarang lihat hasilnya ya,kurang lebih akan seperti ini gan:

Script ini saya ambil dari http://www.donatofurlani.it/ideas