Membuat Spoiler Buka Tutup

Membuat Spoiler buka tutup ini dapat diterapkan di blog untuk menghemat tempat, dimana sebelumnya teks/gambar yang di spoiler disembunyikan jika di klik tombol maka akan munucul.

Untuk contohnya seperti ini :

Lihat Gambar :

Kodenya seperti ini :

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Lihat Gambar : </span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOWkIV2JaKRxc39-LKE04-ERftmLrSO1UESh_wY8v3G4hR8IDEC_uu1v1RHbFIxTRLFutlSftYP_mSPY2V0lOrk7RZzUD7tyKu5D1Wre-1ODDI69DB1fXkz_DTx32rhptEWXHKgbrsBAE/s1600/winnie+the+pooh.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="winnie the pooh" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOWkIV2JaKRxc39-LKE04-ERftmLrSO1UESh_wY8v3G4hR8IDEC_uu1v1RHbFIxTRLFutlSftYP_mSPY2V0lOrk7RZzUD7tyKu5D1Wre-1ODDI69DB1fXkz_DTx32rhptEWXHKgbrsBAE/s320/winnie+the+pooh.jpg" width="320" /></a></div>
</div>
</div>
</div>


Yang diberi tanda merah merupakan kode yang diganti dengan keinginan sobat, dapat berupa teks biasa, kode ataupun gambar.


sumber : 

Read more »

Ingin tahu yang pernah COPAS postingan anda?

 

....Pernahkah anda mengetahui postingan anda telah di COPAS orang lain??
tapi ilmu ini saya share semata-mata hanya untuk membuat anda bersikap bijaksana.....

Meskipun postingan anda telah di COPAS tanpa "permisi Numpang COPAS" atau lainnya ..sebaiknya anda berbangga , bahwa ternyata ada orang yang menyebar luaskan ilmu anda..dan semakin banyak orang Pinter deh....hihihihihi....

okkee.....untuk mengetahui dan memastikan apakah memang ada orang lain yang telah meng-COPAS postingan anda...silahkan menuju ke situs nya....HERE

Sekian dulu sekilas info dari saya...thkz udah mampir,, n jangan kebanyakan COPAS ya broo..hehehehee

Read more »

Cara Menyembunyikan Widget Follow

Cara Menyembunyikan Widget Follow

 
Ini buat agan-agan yang tidak memiliki banyak ruang di sidebar blognya. Untuk membuat alternatifnya, saya buat tutorial ini. Mudah-mudahan bebermanfaat.

Berikut langkah-langkahnya :

1. Login ke Blogger
2. Masuk Rancangan - Elemen Laman
3. Tambah Gadget Html/Java Script
4. Copy -  Paste kode berikut :

<style type="text/css"> #fl{ position:fixed; right:190px; z-index:+1000; } * html #fl{position:relative;} .fltab{ height:32px; width:270px; float:top; cursor:pointer; background:url(#) no-repeat; } .flcontent{ float:right; border:2px solid #676767; background:url()#F90 repeat-x bottom center scroll; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style> <script type="text/javascript"> function showHideFL(){ var fl = document.getElementById("fl"); var w = fl.offsetWidth; fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0); fl.opened = !fl.opened; } function moveFL(x0, xf){ var fl = document.getElementById("fl"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fl.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);} } </script> <div id="fl"> <div class="fltab" onclick="showHideFL()"> </div> <div class="flcontent"> GANTI TEXT INI DENGAN CODE FOLLOWERS ANDA <div style="text-align: right;"> <a href="javascript:showHideFL()"> [Tutup] </a></div> <span style="font-size:85%;"><a href="http://ryuuku-sena.blogspot.com/2011/02/cara-menyembunyikan-widget-follow.html"><div style="color: rgb(68, 68, 68);"> <span style="font-size:xx-small;">Get This Gadget</span></div></a></span> </div> </div> <script type="text/javascript"><br />var fl = document.getElementById("fl");<br />fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";<br /></script>

      5. Ambil code script followers anda di sini

      6. buka rancangan > edit html > cari kode    <body> dan paste kan tepat diatas <body>

          kode nya :

 

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:65px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJky_k63YP0iWc4vt_S1vPH7U3U0fIJjqK18GTq3HEX3elwQ6ApeTvoh9mRaXXAtzF78TdcqElSgeRkyyXoLolTDCpap0IYDCh3WDL1uAvkUmpmDeKwiqJv9Qr4sy4hgc0J8EQ4jE2MZc/s1600/FOLLOWERS-LOGO-.jpg'/></a>

Read more »

Mengganti Cursor di Blog

Cara ini mungkin tergolong mudah....jadu, untuk mengganti cursor pada blog cara nya sebagai berikut :

1. Login ke blog kamu.
2. Tata Letak >> pada elemen laman kamu klik add gadget >> HTML/Java Script.
3. Lalu coppas kode dibawah ni.

<style type="text/css">body {cursor:url("http://baykun.byethost15.com/cursorbiru.ico"),default}</style

4. Lalu di Save.., dan liat hasilnya.
5. Jangan lupa comment.., hehe.
6. kalau gak bisa ulangin sekali-lagi.
   

AaAaAa = ganti dengan URL icon Cursor  Anda.

Semoga postingku ini bermanfaat bagi kalian yang membutuhkannya., thanks for visited..,

Read more »

Mendisable Klik Kanan

  Hi blogger..., kali ini saya akan memberi tahukan rahasia kecil yang ingin ku berikan pada kalian..,  kalian ingin mendisable klik kanan ? mendisable klik kanan berfungsi agar kita tidak ingin sumber laman atau template kita di copy/ ditiru orang lain.
yang mau, copy paste kode berikut di Tambah Gadget >> HTML/ JavaSript.   :


<script>
function disableRightClick(e)
{
var message = "eitss..jgn klik kanan,,boros tab lo..ckckck";
if(!document.rightClickDisabled) // initialize
{
if(document.layers)
{
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = disableRightClick;
}
else document.oncontextmenu = disableRightClick;
return document.rightClickDisabled = true;
}
if(document.layers || (document.getElementById && !document.all))
{
if (e.which==2||e.which==3)
{
alert(message);
return false;
}
}
else
{
alert(message);
return false;
}
}
disableRightClick();</script>

Ganti tulisan yang berwarna biru dengan tulisan yang anda inginkan, tulisan tersebut akan muncul jika kita meng-klik kanan. Contoh nya ..silahkan klik kanan di halaman blog ini....
 

Read more »

Cara Memberi Buku Tamu pada Blog (CBox)

Cara Memberi Buku Tamu pada Blog (CBox)

1. Buka cbox.ws lalu daftarkan diri anda. Cara pendaftarnnya cukup mudah.

2. Jika pendaftarannya berhasil anda langsung tinggal mengisi password lagi unutk login ke CBox.

3. Klik tombol Publish! di bawah menu utama.

4. Lalu tekan tombol Copy To Clipboard dibawah kodenya .., Setelah mengklik OK, tekan Ctrl + C untuk menyalin kode tersebut ke clipboard. Lalu tekan Ctrl + V untuk paste kode di mana Anda ingin letakkan.../

5. Pilih Layout > Add Page Elements > HTML/Javascript.

6. Paste kode yang telah anda copy tadi ke dalam kotak Content.

7. Klik Save.

Sekarang widget CBox anda sudah ada/muncul pada blog anda.
Selamat mencoba...
Dan jangan lupa kasih komentarnya...

Read more »

Membuat Menu Widget Scroll di Blog

Membuat Menu Widget Scroll di Blog ini bisa di jadikan SOLUSI untuk bisa memasang widget blog yang banyak dan paling penting tidak makan tempat.
Berikut caranya :

1. Login ke akun Blogger Sobat

2. Klik menu "Layout"

3. Klik pada "Page Element"

4. Klik "Add a Gadget " Kemudian pilih atau klik HTML/Javascript".

5. Copy Paste Script yang ada di bawah ini:

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">
  <ul>
   <p><a href="URL POSTING">JUDUL POSTING</a> </p>
   <p><a href="URL POSTING">JUDUL POSTING</a> </p>




  </ul>
</div>







Untuk menambah list tinggal copy paste kode yang sama,dan tinggal edit saja. Sebagai cotoh di kodenya di bawah ini

<p><a href="URL POSTING">JUDUL POSTING</a> </p>

Keterangan Kode :

Tulisan Berwarna Biru : Diisi dengan URL POSTING SAHABAT ATAU WIDGET YANG MAU 

                        DI PASANG.

Tulisan Berwarna Merah : Diisi dengan judul posting sahabat.


Selesai, jangan lupa klik Save :)

selamat mencoba semoga bermanfaat :D

Read more »

Cara Menampilkan Status YM (Yahoo Messenger)

Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :

trus jika kamu online maka iconya akan berubah seperti ini:

Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".

 

<a href="ymsgr:sendIM?paijo"> <img src="http://opi.yahoo.com/online?u=paijo&amp;m=g&amp;t=2&amp;l=us"/>
</a>

Ganti text yang warna merah (paijo) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.


Selamat mencoba....

Read more »

Cara Membuat Menu Tab View

Sobat blogger pastinya sudah tau yang dinamakan tabview, banyak sekali web page dan blog yang sudah menggunakan tabview/ tabmenu dalam blognya. Fungsi utamanya adalah untuk menghemat space yang ada di halaman web kita, dan membuat blog/web lebih terlihat rapi.
Tab view itu contohnya seperti ini :

Banyak Sekali kegunaan Tab view ini,bentuknya yang mungil nan imut ini bisa menampung berbagai contents yang yang sangat di perlukan dalam blog kita. Contohnya seperti punyaku yang ada disamping kanan itu,bisa dilihat sendiri.

Langsung Saja...

Beginilah cara untuk membuat menu tab view tersebut

1. PErtama anda harus Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode berikut ( gunakan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 90px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 1px solid #000; /* Warna border Menu Atas */ border-bottom-width: 0; text-decoration: none; font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */ font-weight: 900; color: #000; /* Warna Font Menu Utama Atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #FF9900; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #6E6E6E; /* Warna border Kotak Utama */ overflow: hidden; background-color: #FF9900; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } .

4. Yang perlu di perhatikan adalah text-text yang berwarna merah, itu adalah keterangan untuk pengaturan   Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'> function tabview_auxundefinedTabViewId, id) { var TabView = document.getElementByIdundefinedTabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if undefinedTab.tagName == "A") { i++; Tab.href = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");"; Tab.className = undefinedi == id) ? "Active" : ""; Tab.blurundefined); } } while undefinedTab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while undefinedPages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if undefinedPage.className == 'Page') { i++; if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = undefinedi == id) ? 'block' : 'none'; } } while undefinedPage = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); } function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId, 1); } </script> <script type='text/javascript'>tabview_initializeundefined'TabView'); </script> .

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Read more »

Cara Menampilkan Kotak Komentar Di Bawah Postingan

Blogger/Blogspot memang tau apa isi hati para penggemar setianya,terbukti Blogger/Blogspot sekarang sudah menyediakan Comment Box(Kotak Komentar) yang muncul langsung di bawah postingan.. Kalau dulu hanya berupa link "Post a Comment" di bawah postingan, yang sekarang benar-benar lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah artikel ini). Dengan adanya kotak komentar yang seperti ini, kita tidak usah susah2 pake haloscan comment box . Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)

3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

 

 

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>

8. Lalu simpan template kamu.

Sekarang coba akses blog kamu dan kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar dari blogger.hohoho..Semoga Berhasil...

Read more »

Generator Kode Warna HTML

Dalam mendesain blog ataupun website,pastinya kita tidak akan terlepas dari gradiasi. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut kode warna HTML. Oleh karena kebutuhan tersebut, saya coba sediakan untuk semuanya generator kode warna HTML berikut. Selamat berkreasi,semoga membuatmu bermakna dan berwarna...

Kode warna :

Read more »

Cara Pasang Read More Animasi

 Cara membuat Read more Seperti Gambar di sampiing??

 
Caranya gampang kok 


1.Bagi teman-teman yang blognya belum pake readmore,buat readmore dulu disini

2.Dihalaman Edit HTML, ganti tulisan read more ato lainya yang sobat pake buat link baca selanjutnya dengan kode berikut <img src="link gambar kamu"/>
Yang sudah pake read more langsung langkah 2 aja ya.
3.Langkah terakhir dan terpenting adalah Save Template

Kalo sobat belum punya gambar ini aku sediakan:

 http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif

 http://i496.photobucket.com/albums/rr329/grandisyf/th_arrow-readmore.gif

http://i496.photobucket.com/albums/rr329/grandisyf/th_more.gif

  http://i496.photobucket.com/albums/rr329/grandisyf/Read-more-3_grandis.gif

 http://i496.photobucket.com/albums/rr329/grandisyf/th_Readmore3.gif

Selamat mencoba........ 

Read more »

Cara Membuat Read More(Baca Selanjutnya..)

Pada Default Blog Tempate postingan akan ditampilkan full memanjang kebawah. Beberapa memang ada , template yang menampilkan postingnnya sebagian,trus kalo mau baca lanjutannya harus klik dulu di link Read More/Baca selanjutnya/apalah istilahnya...Disini masalahnya, Kalo postingan full memanjang kebawah blog kita akan terlihat panjang banget(kalau postingannya panjang),berantakan, dan kurang simple. Ini menjadikan keindahan dan kecantikan blog kita jadi berkurang , jadinya pembacanya pun kurang tertarik/bosan dengan postingannya (nglihat postingannya aja langsung pusing...). Tapi masalah tersebut bisa diatasi. Jika kamu ingin postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (gunakan CTRL+F untuk mencari kodenya) :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">


</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
Selamat Mencoba...

Read more »

Membuat text area

Text area berfungsi untuk menyimpan kode kode html.contohnya seperti ini:
 

test cara membuat text area...anda bisa menuliskan kode kode HTML di dalam kolom ini

didalam kolom tersebut kamu bisa menyimpan kode kode HTML yang bisa di copy oleh pengunjung blog.sekarang akan saya ajarkan cara membuatnya. anda cukup copy code berikut :

1.Text area biasa

<p align="center"><textarea name="code" rows="6" cols="20"> test cara membuat text area...anda bisa menuliskan kode kode HTML di dalam kolom ini</textarea></p>

catatan:

• kamu bisa mengganti tulisan yang di cetak tebal dengan kode kode yang ingin anda letakkan dalam kolom tersebut.anda bisa meletakkan dalam postingan atau bisa juga diletakkan di dalam page element

•  row="6" ini menunjukkan tinggi dari kolom tersebut.jika ingin kotaknya lebih tinggi,silahkan ganti    dengan angka yang lebih besar

•     cols="20" ini menunjukkan lebar kolom

2.Text area Highlightdengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all
maka semua text yang ada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.

contohnya seperti ini

dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all maka semua text yan gada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.

cara membuatnya..copy code dibawah 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><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all maka semua text yan gada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.</textarea></p></div></form>


catatan:

1. ganti tulisan yang dicetak tebal dengan tulisan yang anda inginkan
2. <div align="center"> --> itu menunjukkan tombol highligh akan berada di tengah,jika ingin tombol itu berada di kanan atau kiri,tinggal ganti dengan left atau right
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
4. <p align="center"> menunjukkan bahwa text area berada ditengah,jika ingin berada di kanan atau kiri tinggal ganti dengan right atau left
5. <text style="WIDTH: 300px"> menunjukkan lebar kolom
6. HEIGHT: 144px menunjukkan tinggi kolom

Read more »

Membuat Efek Marquee atau Teks Berjalan

Marquee adalah kode HTML yang berguna untuk membuat teks berjalan. Dengan memasang marquee ini, blog kita akan terlihat lebih hidup dan dapat menghemat ruangan pada blog kita.

Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.

Beberapa attributes yang sering digunakan dalam marquee yaitu:

1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :

• Alternate : Teks bergerak bolak-balik
• Slide : Teks hanya bergerak sekali saja
• Scroll : Teks bergerak ke satu arah secara kontinu

2. Direction : mengatur arah gerakan teks.
Ada 4 arah gerakan yang bisa digunakan yaitu :

• Up : Teks bergerak keatas
• Down : Teks bergerak kebawah
• Left : Teks bergerak kekiri
• Right : Teks bergerak kekanan

3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda

4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna.

5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.

6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".

8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.

9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.

10. Loop: untuk mengatur jumlah pengulangan.

Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:

Contoh 1: Efek teks berjalan bolak-balik secara horizontal:
 Welcome To My Blog

kode nya :
<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">Welcome To My Blog</marquee></font>

 
Contoh 2: Efek teks berjalan bolak-balik secara vertikal:



Welcome To My Blog

Kode nya : <font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">Welcome To My Blog</marquee></font>


Contoh 3: Efek teks berjalan kekanan secara kontinu : 

  Welcome To My Blog

Kode nya : <font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">Welcome To My Blog</marquee></font>



Contoh 4: Efek teks berjalan kekiri sekali saja :

  Welcome To My Blog

Kode nya :  <font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">Welcome To My Blog</marquee></font>



Contoh 5: Efek teks berjalan kekanan tiga kali : 

  Welcome To My Blog

Kode nya :  <font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">Welcome To My Blog</marquee></font>


Contoh 6: Efek Bounce 
  Panduan membuat blog

Kode nya :  <font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Panduan membuat blog</marquee></marquee></font>

 Untuk membuat teks berhenti jika mouse menyentuh area marquee dan berjalan kembali jika mouse meninggalkan area marquee. Tambahkan kode onmouseover="this.stop()" dan onmouseout="this.start(


 Sebagai contoh saya memasukkan kode ini:
panduan membuat blog untuk pemula beserta tips n triknya...

Silahkan menggeser mouse Anda ke area marquee untuk melihat hasilnya..
Ini hanya beberapa contoh efek marquee atau teks berjalan. Masih banyak efek-efek lain. Silahkan utak-atik sendiri dengan mengganti nilai-nilai pada attributes.


Cara memasang kode marquee pada blog:

1. Login ke Blogger. Klik menu Design->Page Elements
2. Klik Add a Gadget-> HTML/ Javascript
3. Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
4. Selesai. Klik View Blog untuk melihat hasilnya

Selamat berkreasi...

Read more »

Membuat Judul Blog Bergerak Dari Kanan ke Kiri

Untuk memperindah penampilan halaman blog anda, tidak ada salahnya jika anda juga mengikuti trik berikut ini, yaitu cara membuat judul blog bisa bergerak. Untuk itu silahkan ikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode



<title><data:blog.pageTitle/></title>

Read more »

Tips Meningkatkan Alexa Rank

Masih seputar alexa rank seperti pada dua artikel sebelumnya, namun sepertinya artikel ini merupakan edisi terakhir mengenai alexa rank. Dalam coretan terakhir ini Kang Rohman coba membahas tentang beberapa tips meningkatkan alexa rank untuk web atau blog.

Sebenarnya inti dari meningkatkan alexa rank adalah meningkatkan jumlah trafik atau kunjungan ke web atau blog anda, namun seringkali data yang di dapat oleh alexa tentang trafik blog anda tidak akurat, oleh karena itu kita sebagai pemilik web atau blog harus berusaha agar data trafik web atau blog kita sampai ke alexa dengan akurat.

Berikut adalah beberapa tips meningkatkan alexa rank untuk web atau blog :

Read more »

Tutorial Pasang Widget Alexa di Blog

Melanjutkan artikel sebelumnya yang membahas tentang alexa rank, maka posting kali ini akan di bahas secara khusus tentang cara pemasangan widget alexa di blog. Ini tentunya di tujukan bagi anda yang masih bingung tentang cara memasang widget alexa. Bagi anda yang sudah mahir, rasanya tutorial ini kurang berguna bagi anda.

Read more »

Apa sih Alexa Rank atau Peringkat Alexa Itu?

ada yang bertanya tentang alexa Rank atau peringkat Alexa, berikut adalah beberapa coretan saya yang berhubungan dengan Alexa Rank.

Apa sih Alexa Rank atau Peringkat Alexa itu ?

Read more »

Menampilkan widget di halaman tertentu

                

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Read more »