Blogger Ponorogo: Blogging Area

Tampilkan postingan dengan label Blogging Area. Tampilkan semua postingan

Memasang Kotak Search di dalam Menu Bar

Merupakan sebuah tools yang dapat mempemudah pengunjung dalam menemukan artikel yang ingin di baca. Oleh karena itu, Tutorial blog yang akan disampaikan adalah tentang Cara Membuat Kotak Pencarian yang berada pada Menu Bar di blog anda.
Kotak pencarian yang di tawarkan hari ini, memiliki tampilan yang sangat simple atau sederhana.
Mungkin karena memiliki tampilan yang sangat sederhana inilah sehingga banyak para blogger memasang kotak pencarian ini.
Jika ingin melakukan ini anda terlebih dahulu harus mempunyai menu bar, jika belum ada silahkan bikin dulu ya…..

Jika sudah punya sekarang tinggal tambahkan search box-nya :

1. Login ke Blog > Layout (tata letak) >> Edit HTML >>> Cari kode ]]></b:skin>

2. Copy paste kode ini di atas kode ]]></b:skin>

#navright {
width: 220px;
background: #FF1202;
font-size: 11px;
float: right;
padding-top:0px;
margin: -4px;
}

Save

3. buka link menu bar milik anda dan copy paste kode ini

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLmDxc87XMIWMjxDsPIVuP_kWVFwMwgw9oOk5_8fMBzS6O5oPd0-UjOZJuni3uuQ_1ZbbGVrlFoK-PkYxPby3b_D-KXiFn7Tm4Z4ocX1UmOh0xLHNmxHZ-m6SodPjt84R68pS30LdHpU/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form> </div>

Contoh milik saya (PERHATIKAN PENEMPATANNYA):


<table border='0' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM5EcdzR4NQiUc3gyHdagaKiP6Ee3BHlQmaRUQDLqvGfL7Nqn5zjJ8rRdylRILCbSgKPowA_VJMRpeQbNRq6Pt-k4hGVKmwvM3petqKqrJapSzBuxpBr2XUil9KnWJXzFxj2aCaEpoh14/s400/title.jpg) repeat-x; margin-top: 10px; margin-bottom: 10px;' width='100%'>

<tr><td align='left' id='menu'>
<a href='#'>Menu1</a> |
<a href='#'>Menu2</a> |
<a href='#'>Menu3</a> |
<a href='#'>Menu4</a> |
<a href='#'>Menu5</a> |
<a href='#'>Menu6</a> |
<a href='#'>Menu7</a> |
<a href='#'>Menu8</a> |
<a href='#'>Menu9</a> |
<a href='#'>Menu10</a>

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLmDxc87XMIWMjxDsPIVuP_kWVFwMwgw9oOk5_8fMBzS6O5oPd0-UjOZJuni3uuQ_1ZbbGVrlFoK-PkYxPby3b_D-KXiFn7Tm4Z4ocX1UmOh0xLHNmxHZ-m6SodPjt84R68pS30LdHpU/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form>
</div>
</td></tr>
</table>


Gampang kan….. Semoga Membantu.

Membuat Background Pada Judul Sidebar

Untuk lebih mempercantik halaman depan blog ada satu lagi yang bisa dilakukan yaitu dengan membuat background pada judul sidebar. Template bawaan blogger pada bagian judul sidebar biasanya masih polos, nah anda bisa sedikit lakukan modifikasi dengan cara membuatkan backgroundnya. Mudah dalam hitungan menitan udah siap, yang penting cermat soalnya melalui edit html, bagi yang sudah biasa edit html ga sampai 5 menit selesai.

Berikut langkahnya:
1. Login ke blogger
2. Di dasbor klik rancangan atau template
3. Masuklah ke area Edit html, sebelum menambahkan kode klik full download template untuk antisipasi error karena kesalahan kode.
4. Di area edit html temukan kode .sidebar h2 akan terdapat sederetan kode kurang lebih seperti ini :

sidebar h2
{
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
repeat-x top left;
}

Nah anda cukup menambahkan kode: background:#2200CC
Untuk #2200CC yaitu kode warna anda dapat meilih sesuai selera anda.

diantara deretan kode tersebut misal sebelum : color: #ffffff
Jika anda ingin menampilkan background baerupa gambar atau border cantik sesuai pilihan sendiri anda dapat menggati kode warna dengan url gambar anda di tinypic atau photobucket sehingga menjadi: background:url('URL gambar').

Sebelum disimpan ada baiknya klik pratinjau dulu, kalau sudah sesuai keinginan ya tinggal klik simpan template.

Selamat memodifikasi background judul sidebar, semoga membantu.

Berapa Orang Yang Online di Blog Kita?

Who's amung us adalah layanan online yang bermanfaat untuk mengetahui berapa jumlah user yang sedang online di blog kita pada saat kita browsing pada blog kita sendiri.

Berikut ini adalah caranya :
1. Buka url http://whos.amung.us/colorwheel
2. Pada "Already have a map, or our widget?", klik atau pilih "No"
3. Pilih kombinasi warna yang anda pilih, sebaiknya pilihlah warna yang sesuai dengan blog anda.
4. Copy paste scriptnya
5. Jika sudah kembalilah ke blogger
6. Klik Tata Letak lalu pilih tambah widget pilih HTML/Javascript
7. Pasang script yang anda copy tadi di HTML/Javascript
8. Klik simpan dan selesai

Meletakkan Video kedalam Blog

Meskipun blogger sudah menyediakan upload untuk video, tapi gak ada salahnya kan kalau kita mencoba masukin kode buat menempatkan sebuah video dengan kode yang lain.
Hasilnya kurang lebih seperti di bawah ini, klik untuk memutar Video :

Jika anda ingin meletakkan video dari Youtube, anda hanya mengisi alamat/URL video tersebut pada kode.
Untuk kode, copy di bawah ini:

Modifikasi Blockquote di Blogspot

Apa ya Blogquote itu ? Fungsinya untuk apa sih ?
Untuk lebih jelasnya liat aja contoh tampilannya dibawah ini
Contoh tampilannya :

Contoh ini adalah Blockquote hasil modifikasi dari template aslinya

Cara Membuatnya Sebagai berikut :
1. Login ke akun Blogger Sobat
2. Masuk Tata Letak
3. Edit HTML
4. Beri centang pada "Expand template widget"
5. BackUp template sobat dulu, dengan cara klik "download template lengkap"
6. Cari kode Berikut : blockquote { atau .post blockquote { atau cari aja "blockquote" soalnya tiap template beda-beda

Script Blockquote :

Cara Membuat 3 Kolom Elemen Di Atas Footer

Sobat blogger pemula yang ingin membuat 3 Kolom Elemen di Atas Footer.
Silahkan ikuti langkah-langkah berikut :

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode seperti dibawah
Untuk mempercepat pencarian, sobat gunakan tombol (F3)

#footer{
background:#F0F5FA;
width:960px;
height:32px;
margin:0px;
padding: 0px;
float:left;
}

Jika sudah ketemu tambahkan kode berikut di atasnya :

#bottom{
background:#F0F5FA;
width:100%;
position:relative;
clear:both;
margin:0px auto 0px;
color:#000000;
float:left;
padding:10px 0;
}

#bottom h2{
color:#000000;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 8px 0px;
padding: 0px;
letter-spacing:0em;
text-transform:capitalize;
}

#bottom ul{
padding:0px;
margin:0px;
}

#bottom ul li{
line-height:26px;
list-style-type:none;
border-bottom:1px dashed #031c5d;
}

#bottom_1{
width:300px;
float:left;
margin:0px;
padding:0px;
}

#bottom_2{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}

#bottom_3{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}

Untuk membuat elemen di atas footer.
Cari kode seperti dibawah ini :

Jika sudah ketemu tambahkan kode berikut di atasnya :

Sesuaikan ukuran lebar width footer dengan template dan lebar elemen yang akan ditambahkan.
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.

Selamat mencoba dan Semoga membantu.

Membuat Background Transparan

Kali ini, kita akan membahas tentang penggunaan opacity pada template blog yang mungkin lebih tepatnya penggunaan background transparan ( tembus pandang ) pada template blog.
Tutorial kali ini saya khususkan untuk blog dengan background image atau gambar, tidak terlalu bagus untuk backround warna karna hanya akan menghasilkan perpaduan ke 2 warnanya saja. Misalnya sobat menggunakan background berwarna hitam dengan warna outer-wrapper berwarna putih, maka hasil perpaduannya akan memunculkan warna abu-abu.. jadi nggak berguna dong efek tranparantnya...

berikut kode yang di gunakan untuk membuat background transparan :

filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;

Untuk penerapannya sobat tinggal menyisipkan kode tadi sesudah kode warna seperti berikut :

#outer-wrapper{
width:980px;
margin:0 auto;
padding:5px;
background:#f2f2f2;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;
border:1px solid $bordercolor;
text-align:$startSide;
font:$bodyfont
}

Tambahan :
1. Berlaku juga untuk wrapper lainnya seperti header, main, sidebar dan footer, namun saran saya untuk tidak menerapkannya di wrapper lain jika sudah di pasang di outer-wrapper, karena outer-wrapper sudah mencakup semua bagian wrappernya.
2. Edit angka yang berwarna merah hingga sesuai dengan keinginan.

Buku Tamu Auto Hide di Blogspot

Kali ini saya memposting cara membuat buku tamu auto hide di blog dengan versi yang berbeda seperti contoh yang tampak di sidebar blog ini.

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( hanya di lewati pointer mouse ), kali ini beda sedikit dengan buku tamu show / hide terdahulu.
Jika sobat tertarik memasang dan mencoba widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

.gbtab{
height:125px;
margin:10px;
width:30px;
float:left;
background:url('http://i1068.photobucket.com/albums/u449/ponorogoweb/CBox-1.jpg') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

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

<br><br>
SISIPKAN DISINI SCRIPT CBOX SOBAT DISINI
<br><br>

-moz-border-radius: 5px;">
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://okietipsblogger.blogspot.com/2012/04/buku-tamu-auto-hide-di-blogspot.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>

Caranya :
1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save

Tambahan :
Sisipkan kode SCRIPT CBOX SOBAT dengan kode buku tamu milik sobat. Sobat yang belum punya Auto Hide Buku Tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) atau pada penyedia chatbox gratisan lainnya.

Salam dan semoga membantu.

Membuat Permalink di Blogspot

Kali ini saya akan mempostingan jawaban atas pertanyaan sobat blogger Amy Adeona yang masuk di email saya tentang cara membuat dan memasang permalink di blogspot sama persis dengan permanen link di blog ini. Sebelum kita ke pokok permasalahn ada baiknya saya jelaskan sedikit dulu tentang Permalink ( Permanen Link).

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan SEO on page blog sobat.
Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya itu adalah permanen link.

Permalink kali ini sudah saya lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok jika dilewati tikus... ehh..maksudnya mouse).

Contohnya bisa sobat lihat tepat di bawah artikel.
Jika sobat tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.

Cara Membuat Permanen Link di Blog
1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>

.admin-tulisan{
width:auto;
background:#39316b;
border:1px solid #FFFFFF;
margin:30px 0 10px 0;
display:block;
font-family:"Tahoma";
color:#F0E68C;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"Tahoma";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{

width:60px;
height:70px;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. (bila di blog sobat sudah terpasang auto readmore letakkan kode tersebut di <data:post.body/> yang kedua )


<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Writen by : <b><data:post.author/></b> ~ Tips Blogger</h4>
<div class='kontainer'>
<img alt='Okie Masterpiece' src='http://i1068.photobucket.com/albums/u449/ponorogoweb/Okie2.jpg'/> Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>. by Admin, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.
<textarea cols='53' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea> <p><span style='float:right;font:italic 9px Arial, Sans-Serif;'> <a href='http://okietipsblogger.blogspot.com/2012/04/membuat-permalink-di-blogspot.html' target='_blank'>:: Get this widget ! ::</a></span></p> <div style='clear:both;'/>
</div>
</div>
</b:if>


5. Klik save dan lihat hasilnya.

Tambahan :
• Ganti kode yang berwarna kuning sesuai dengan Url foto / gambar milik sobat
• Sesuaikan angka yang berwarna merah tersebut diatas sesuai dengan ukuran template blog sobat ( ukuran textarea )

Semoga Membantu.

Menampilkan Gadget Popular Post

Dalam Panduan Blog kali saya akan posting tentang Cara Menampilkan Gadget Popular Post khusus Blogspot. Apa itu Popular Post ? Popular Post adalah posting paling populer, Atau dengan kata lain posting yang paling banyak dibaca para pengunjung blog.

Dengan menampilkan Popular Post maka pengunjung yang datang akan melihat dan membaca juga informasi tersebut. Pengunjung biasanya akan terpesona untuk membaca juga seperti yang lain sebelumnya. Jadi blog anda akan terus didatangi pengunjung dengan setia, Bahkan jika Popular Post yang ada di blog anda benar-benar menarik dan bermanfaat buat mereka, bukan tidak mungkin mereka akan datang lagi untuk ke beberapa kali.

Bagaimana cara menampilkan Gadget Popular Post? Caranya sangat mudah. Karena di blogspot gadget ini sudah tersedia.

1. Login ke blogger.com

2. Tuju blog yang akan anda setting/atur lalu klik Rancangan ( untuk tampilan blogspot yang lama ) atau klik Tata Letak ( untuk tampilan blogspot yang baru ).
Dalam panduan blog kali saya menggunakan tampilan blogspot yang lama.

3. Klik Tambah Gadget di side bar mana anda mau. Kalau Popular Post ingin anda tayangkan di side bar kanan klik saja Tambah Gadget di side bar kanan.

4. Klik menu Entri Populer ( Baru )

5. Atur konfigurasi Entri Populer /Popular Post
- Judul, isi dengan judul misalnya paling rame atau paling sering dibaca dll
- Paling banyak dibaca, centang aja setiap saat
- Tampilan > Judul Entri, centang thumbnail gambar jika anda mau yang tayang adalah Popular Post dengan gambar/image
- Tampilkan hingga, pilih sesuai dengan keinginan anda. Popular Post bisa anda tampilkan maksimal 10 entri.

6. Jangan lupa klik Simpan.

Sukses ! Anda sekarang bisa Menampilkan Gadget Popular Post di blog anda.

8 Lokasi Upload Gambar dengan Gratis

Namanya Blog atau Website itu pasti tidak bisa lepas dari yang namanya gambar, fungsi gambar (selain berupa foto) adalah untuk mempercantik tampilan web/blog, kemudian dalam artikel tutorial petunjuk yang disampaikan dengan gambar juga akan lebih bagus dan mudah dipahami daripada sekedar penjelasan tulisan saja.

Nah, tentang gambar tersebut, banyak diantara kita yang belum tau situs apa saja yang melayani upload gambar gratis dalam jumlah besar. Padahal di internet ada banyak sekali situs yang menyediakan space untuk upload gambar secara gratis.
Berikut beberapa diantara situs-situs untuk upload gambar secara gratis:

Photoserver.ws/
Tinypic.com/
Imgur.com/
Sadpanda.us/
Imagevenue.com/
Imagebam.com/
Photobucket.com/
Picasaweb

Memperingan Loading Blog dengan Script

Hallo sobat, ketemu lagi dengan Ponorogoweb yang kali ini akan membahas hal yang terkait dengan postingan yang lalu yaitu Kompres CSS Agar Loading Blog Menjadi Ringan, maka sekarang akan saya bahas tentang cara lain Memperingan dan Mempercepat Loading Blog dengan Lazy Load Script.

Banyak cara dilakukan agar loading blog itu tidak terlalu lama , misalnya saja dengan mengurangi widget, tidak mempostingkan gambar dengan ukuran yang terlalu besar dan lain-lain.
Script Lazy Load tersebut berfungsi untuk melipat gambar dalam artian tidak membaca gambar dimana tujuannya agar loading blog semakin cepat dan beban server menjadi lebih ringan.

1. Sekarang ikuti langkah berikut :
2. Login ke akun blog anda
3. Klik Rancangan
4. Klik Edit HTML
5. Centang Expand templete Widget
6. Masukkan kode berikut di atas kode </head>

7. Simpan Template
8. Simpan Template, Tutup dan restart ulang Blog sampeyan………. Beres!

Selamat mencoba dan semoga berhasil.

Kompres CSS Agar Loading Blog Menjadi Ringan

Selamat datang sobat, berhubung banyak sobat bertanya terkait judul postingan diatas baik melalui email maupun dari kotak komentar, maka posting kali ini Ponorogoweb membahas Bagaimana cara mengkompres CSS suatu template dengan tujuan agar loading Blog sobat menjadi ringan dan cepat loadingnya, diantaranya :

1. Jangan memasang atribute yang berlebihan
2. Kurangi widget dan javascript yang rumit
3. Usahakan gambar jangan terlalu besar filenya
4. Dan lain-lain.

Langsung aja Sobat ikuti langkah berikut cara mengkompres CSS Template Blog anda, setelahnya sobat bisa bandingkan efek sebelum dan sesudah dikompres dengan menggunakan Test Loading Blog.

1. Cari kode CSS pada blog sobat, yang letaknya diantara <b:skin><![CDATA[ letakkan disini kode CSSnya ]]></b:skin>.

2. Copy semua code script dari <b:skin><![CDATA[ DISINI LETAK KODENYA]]></b:skin>.

3. Kemudian simpan CSS nya terlebih dahulu di Notepad atau Microsoft office untuk jaga-jaga kalau terjadi error.

4. Langkah berikutnya masuk kesitus CSS-Compressor

5. Setelah masuk halaman seperti gambar dibawah, langsung pastekan kode CSS sobat kekotak CODE IN

6. Lalu tekan tombol Compres, kemudian copy hasilnya.

7. Bila sudah sobat copy, kemudian pastekan kode hasil dari Compresan tadi di antara code <b:skin><![CDATA[ disini letak pastenya ]]></b:skin>

8. Simpan Template, Tutup dan restart ulang Blog sampeyan………. Beres!

Selamat mencoba dan semoga berhasil.

Membuat Teks Area Dengan Style Berbeda

Sebelumnya telah dibahas mengenai pembuatan teks area secara default, untuk mengkostumisasi atau memberikan style yang berbeda dan menarik ada beberapa langkah pembuatannya dan tentu saja dengan adanya penambahan kode.

dibawah ini beberapa contoh teks area dengan kostumisasi menarik dengan style yang apik :

1. Teks Area Dengan Background Warna

2. Teks Area Dengan Background Gambar

Background dan ukuran besar kecilnya kolom teks area bisa kalian rubah
Semoga bermanfaat

Highlight Teks Area Untuk Blogspot

Teks area merupakan suatu ruang untuk menyimpan teks atau tulisan dengan membentuk area baru. seperti kebiasaan orang, teks area biasanya digunakan untuk menyimpan kode-kode HTML atau teks agar menjadi pembeda dalam penyajian penulisan, untuk jelasnya perhatikan contoh ini.

<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">
</div>
<div align="center">
<textarea cols="15" name="txt" rows="50" style="height: 60px; width: 350px;" wrap="VIRTUAL">Semoga tulisan yang ada diblog ini bisa bermanfaat untuk para pembacanya dan bisa memberikan tambahan ilmu pengetahuan terutama dalam proses pembuatan teks area, terima kasih</textarea></div>
</form>
</div>

kode tersebut diatas adalah yang membentuk contoh teks area yang menggunakan tombol highlight.

Keterangan Elemen :

* <div align="center"> dan <p align="center"> : merupakan kode untuk mengatur posisi tombol highlight berada pada posisi tengah dan <p align="center"> untuk menempatkan kotak teks area pada posisi tengah, untuk customisasi sendiri bisa dirubah kesebelah kiri atau kanan dengan mengganti kata center dengan left atau right.

* style="height: 50px; width: 300px;" : untuk merubah ukuran panjang dan lebar teks area.

* <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> : keterangan ketika tombol highlight di klik, maka seluruh isi akan terpilih atau di blok.

N/B : apabila isi dari teks area panjang sedangkan kotak teks areanya kecil, nantinya teks area akan membentuk tombol scroll secara otomatis.

Untuk penambahan Style Teks Area yang lain, bisa melihat yang ini "Teks Area Dengan Background"

Semoga bermanfaat.

Membuat Paragraf Text Indent di Postingan

Pada sebuah buku pasti sobat menjumpai tulisa yang pada paragraf pertamanya menjorok ke dalam. Apakah kita bisa menerapkannaya pada blog kita ? Tentu saja bisa….., seperti pada artikel yang saya buat ini. Pada Blogger maupun wordpress tidak ada seperti ini atau kebanyakan orang menyebutkan namanya Text Indent.

Tak usah kawatir cara membuatnya tidak terlalu susah, kita hanya menambahkan sebuah code Html di postingan kita dan secara otomatis teks yang kita buat pada tulisan pertamanya akan menjorok kedalam seperti pada postingan yang saya buat ini. Yang perlu sobat lakukan hanya mengcopy script Html di bawah ini dan pastekan di postingan sobat. pastikan postingan dalam mode Html apabila salah maka teks tidak akan menjorok ke dalam.

<p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;">Tulis teks sobat disini....</p>

• text-align : peratan pada tulisan.
• text-indent : dalamnya kalimat yang menjorok kedalam.
Anda tidak perlu mengcopy lagi Htmlnya setiap kali anda ingin membuat sebuah paragraf baru sobat tinggal Enter dan secara otomatis akan membentuk sebuah paragraf baru yang menjorok kedalam. Gampang sobat bisa mencobanya.....

Semoga Bermanfaat

Cara Mudah Membuat Scroll Pada Blog

Salah satu fungsi daripada membuat scroll adalah untuk menghemat space pada blog kita. Sehingga apabila kita akan membuat label ataupun widget berukuran terlalu besar sidebar blog berukuran terbatas kita bisa mengakalinya dengan membuat scroll box ini. Ok untuk lebih jelasnya kita langsung praktik aja gan..

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit Element
4. Klik Add Widget dan pilih HTML/Javascript
5. Copas salah satu cara dari kode berikut

Cara 1 :
<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">Copy paste disini code yang ingin ditampilkan</div>

Cara 2 :
<div class="'rbbox'"><div style="'margin:0;"><Copy paste disini code yang ingin ditampilkan></div></div>

Cara 3 :
<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px; height: 200px;width: 94%;text-align: left;"> Copy paste yang ingin ditampilkan </div>

Cara 4 :
<div class="'rbbox'"><div style="'margin:0;"><Copy paste yang ingin ditampilkan></div></div>

Semoga Bermanfaat

Membuat Scroll Blog Archive

Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div style='overflow:auto; width:ancho; height:200px;'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div></div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select expr:id='data:widget.instanceId + "_ArchiveMenu"'> <option value=''><data:title/></option> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span> <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>▼ </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'> <b:if cond='data:blog.languageDirection == "rtl"'> ◄ <b:else/> ► </b:if> </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget>

Kode : <div style='overflow:auto; width:ancho; height:200px;'> dan </div></div> adalah kode yang ditambahkan.
7. Angka 200 adalah tingginya, dan kita bisa ubah seseuai selera.
8. Simpan jika sudah selesai.

Semoga Bermanfaat

Membuat Spoiler di Blogspot

Membuat Spoiler pada blog berfungsi untuk menyembunyikan atau untuk meringkas artikel, gambar, kode CSS atau kode javascripts supaya tidak memakan tempat pada post, untuk menyingkat teks atau kode scripts bisa juga dengan menggunakan fungsi scroll ataupun dengan mengunakan teks area.

Spoiler itu sendiri bisa ditempatkan pada blog post, sidebar, header maupun footer. coba perhatikan contoh dibawah ini :
Silahkan klik tombol Show :

Keterangan Spoiler

Untuk membuatnya, copy kode dibawah ini kedalam postingan atau sidebar :

Keterangan Spoiler
 
ISI SPOILER DENGAN TEKS ATAU SCRIPTS CODE

Keterangan Spoiler : merupakan judul dari spoiler itu sendiri
Show : Kalimat yang muncul pada tombol spoiler, bisa kalian ganti dengan kata buka/tutup
Isi Spoiler Dengan Teks atau Scripts Code : Merupakan tempat untuk mengisi dari spoiler tersebut

Semoga bermanfaat

Membuat Tabel di Postingan 2

Sekarang kita sudah memahami cara membuat sebuah tabel dalam sebuah posting, tulisan ini merupakan kelanjutan dari cara membuat tabel di postingan 1, bagi yang belum mengetahui cara membuat tabel sebaiknya melihat caranya dengan meng-klik link tersebut. Dalam sebuah tabel kadang kita perlu menyatukan atau menggabungkan sebuah kolom atau baris untuk membentuk suatu susunan data yang sesuai, teratur dan rapih.

Waktu kita melakukan pengisan data pada tabel, kadang data yang harus diisi terdiri dari beberapa baris dalam beberapa kolom dengan 1 judul. Untuk kolom judul yang membawahi beberapa baris dan kolom, kita harus melakukan penggabungan 2 kolom atau lebih untuk membawahi baris-baris tersebut, sebagai ilustrasi seperti tergambar pada tabel dibawah ini :

Gabungan Kolom
Baris 2 - Kolom 1	Baris 2 - Kolom 2
Baris 3 - Kolom 1	Baris 3 - Kolom 2

dalam tabel tersebut menggambarkan 1 judul kolom (Perhatikan Gabungan Kolom) membawahi 2 baris kolom pertama dan 2 baris kolom kedua, untuk membuat itu kita perlu menambahkan keterangan perintah tambahan pada kode kolom pada kolom data berisi tulisan gabungan kolom dengan perintah colspan, seperti terlihat penggunaannya pada kode tabel dibawah ini :

 
 
Gabungan Kolom 
 
 
Baris 2 - Kolom 1 
Baris 2 - Kolom 2 
 
 
Baris 3 - Kolom 1 
Baris 3 - Kolom 2

colspan adalah perintah untuk menggabungan beberapa kolom menjadi 1, seperti dalam kode diatas yaitu kode <td colspan="2"> menggambarkan perintah untuk menggabungkan 2 kolom, jika ingin menggabung 3 atau 4 kolom, kalian bisa mengubah angka 2 didepan kode colspan dengan jumlah kolom yang akan digabungkan.

Setelah mengatahui cara menggabungkan kolom menjadi satu, bagaimana dengan menggabungkan 2 atau beberapa baris menjadi satu, caranya sama dengan menggabungkan kolom menjadi satu, hanya kode keterangan perintah yang dipakai adalah rowspan, seperti tergambar pada deretan kode tabel dibawah ini :

 
 
Gabungan Kolom 
 
 
Baris 2 - Kolom 1 
Baris 2 - Kolom 2 
 
 
Baris 3 - Kolom 2

dan hasilnya seperti ini :

Gabungan Kolom
Baris 2 - Kolom 1	Baris 2 - Kolom 2
	Baris 3 - Kolom 2

Dari kedua contoh penggabungan kolom dan baris diatas, kita sudah bisa membuat tabel dengan data-data yang lebih teratur dan rapih.

Selamat Mencoba dan Semoga Bermanfaat