Anime Around The World

Style text ala CSS

Melihat dari judul,saya jadi mau ketawa sendiri   Abis binggung mau buat judul apa ..yah mudah-mudahan aja dimengerti yak ..
Kali ini saya mau ngebahas tentang Style text ala CSS,cara penggunaannya sama aja koq ma HTML cuma beda scripst aja kale y
Kita langsung aja y,berikut contoh dan kodenya :

Contoh I :

<div style="text-shadow: 6px 6px 10px blue;">
Jika browser kamu support kode CSS,maka Text ini akan mempunyai bayangan.</div>

Hasilnya :

Jika browser kamu support kode CSS,maka Text ini akan mempunyai bayangan.

Contoh II :

 <p style="text-decoration:overline;">Garis Lurus Diatas Text</p>
<p style="text-decoration:line-through;">Garis Lurus DiTengah Text</p>
<p style="text-decoration:underline;">Garis Lurus Dibawah Text</p>
<a style="text-decoration:none;" a href="http://lamurdey.blogspot.com/" > Text Hyperlink Non Garis Lurus</a>

Hasilnya :

Garis Lurus Diatas Text
Garis Lurus DiTengah Text
Garis Lurus Dibawah Text

Text Hyperlink Non Garis Lurus


Contoh III :


<p style="word-spacing:60px;">Text CSS Memiliki Spasi</p>
<p style="letter-spacing:5px;">Huruf CSS Memiliki Spasi</p>
<p style="color:blue;">Text CSS warna Biru</p>
<p style="text-indent:50px;">Text Tab Baru</p>

Hasilnya :

Text CSS Memiliki Spasi

Huruf CSS Memiliki Spasi

Text CSS warna biru

Text Tab Baru

Contoh IV :

<p style="font-size:20px;">Text Berukuran 20 pixels.</p>
<p style="font-weight:bold;">Text Tebal.</p>
<p style="font-style:italic;">Text Miring.</p>  

Hasilnya :

Text Berukuran 20 pixels.
Text Tebal.
Text Miring.

Begitulah kira-kira kodenya,itu hanya sebagian kecil dari kode CSS,disini saya hanya memperkenalkan doank,saya tahu sedikit langsung saya share,sekalian buat belajar mengingat juga bagi saya .
Kira-kira ada yang kurang jelas tanyakan aja y..kontak langsung juga boleh.

Cara Membuat Navbar muncul bila di sorot

Ne gan satu lagi tutorial buat otak-atik Navbar .
Dengar-dengar sech klo dengan cara ini kita tidak melanggar hukumnya blogger,yang dimana kita tidak menghapusnya melainkan menyembunyikannya,dan akan muncul bila kita menyorotnya dengan cursor.
Penasaran,yuk.. ikutin tutorialnya.



1.Login Blog
2.Rancangan/Tata letak
3.Pilih Edit HTML
4.Lalu cari kode berikut body {
5.Setelah ketemu dengan kode diatas, sisipkan kode berikut tepat di atas body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Sehingga menjadi seperti di bawah ini :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
body {
font: 100% Arial, Helvetica;
background: #000000;
color: #333;
}


Gampangkan,selamat mencoba .

Cara membuat Border Gambar dengan HTML

Kali ini kita akan membahas bagaimana membuat border dengan kode HTML.
Hal ini akan terasa mudah jika kita sudah mengetahui bagaimana cara mengguna kan kode HTML,

Untuk mengubah tampilan perbatasan gambar, Anda perlu menggunakan CSS (Cascading Style Sheets). Anda dapat menyertakan CSS dalam gambar Anda dengan menggunakan gaya atribut HTML tag. Anda dapat menggunakan kode HTML pada halaman ini untuk menentukan batas-batas gambar dalam dokumen HTML Anda.

Berikut adalah beberapa contoh dari apa yang dapat Anda lakukan dengan HTML batas gambar dengan menggunakan CSS :

<!-- HTML codes by Lamurdey.blogspot.com -->
<img style="border:1px solid #0404B4;" src="http://i943.photobucket.com/albums/ad277/pakkuk/edaaa.jpg" width="225" height="101" alt="lamurdey logo" />
<p style="font-family:sans-serif;font-size:10px;">
 
Hasil dari kode diatas :
lamurdey logo


<!-- HTML codes by Lamurdey.blogspot.com -->
<img style="border:2px dotted #0404B4;" src="http://i943.photobucket.com/albums/ad277/pakkuk/edaaa.jpg" width="225" height="101" alt="Lamurdey logo" />
<p style="font-family:sans-serif;font-size:10px;">
Hasil dari kode diatas :
Lamurdey logo


<!-- HTML codes by Lamurdey.blogspot.com -->
<img style="border:20px solid #0404B4;" src="http://i943.photobucket.com/albums/ad277/pakkuk/edaaa.jpg" width="225" height="101" alt="Lamurdey logo" />
<p style="font-family:sans-serif;font-size:10px;">
Hasil dari kode diatas :
Lamurdey logo


<!-- HTML codes by Lamurdey.blogspot.com -->
<img style="border:8px ridge #0404B4;" src="http://i943.photobucket.com/albums/ad277/pakkuk/edaaa.jpg" width="225" height="151" alt="Lamurdey logo" />
<p style="font-family:sans-serif;font-size:10px;">
Hasil dari kode diatas :
Lamurdey logo

Ket :
Warna merah Adalah Warna dari border gambar
Warna Biru merupakan Kode gambar
Warna hijau ukuran lebar dan tinggi border
sedangkan Untuk warna Pink adalah ketebalan dari Border

yakk..begitulah cara membuat border dengan menggunakan HTML kode ..Mudah-mudahan dimengerti,kalau juga belum mengerti,cukup cantumkan pertanyaan di kotak komentar.

Semoga bermanfaat.

Cara menghilangkan Link Langgan:Entri (Atom) diblog

Langgan: Entri (Atom) adalah link bawaan yang telah sebelumnya disediakan oleh blogger, ini berfungsi apabila ada pengunjung yang ingin berlangganan posting melalui Entri(Atom).

Dan apabila agan merasa link ini kurang berguna,agan bisa menghapusnya dengan mengikuti cara dibawah ini;
1.Login blog
2.Rancangan/Tataletak
3.Edit HTML
4.Lalu cari kode .feed-links
5.Setelah ketemu kode yang diatas masukkan kode berikut display:none;
Sehingga menjadi kode dibawah ini ;

.feed-links{display:none;}

Jika tidak berhasil dengan cara yang diatas,coba dengan yang di bawah ini :
Login Ke blogger Dengan ID kamu.
Klik Tata Letak Kemudian Klik Edit HTML.
Selanjutnya Cari Kode ]]></b:skin> .Atau biar lebih gampang gunakan tombol CTRL+F.
Kalo Udah ketemu copy dan paste kode berikut diatasnya.
.feed-links{
display:none;
}
6.Pratinjau terlebih dahulu,jika sudah benar,baru di SAVE.

Selamat mencoba.

Cara menghilangkan tanggal pada posting blog

1.Login blog
2.Rancangan/Tataletak
3.Edit HTML
4.Lalu cari kode berikut h2.date-header {  Setelah ketemu,masukkan kode berikut visibility: hidden;


Sehingga menjadi seperti kode dibawah ini :

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}
 

5.Pratinjau terlebih dahulu,jika sudah tidak ada kesalahan..baru di SAVE

Selamat menghilangkan tanggal postingan. 

Cara membuat text berkedip diblog

Caranya gampang sangat gan,kita hanya perlu menambahkan sedikit kode.

Perhatikan contoh dibawah ini :

Isi Text Yang agan ingin berkedip

Dari contoh diatas kita hanya perlu memasukkan kode <blink> dan diakhiri dengan penutup </blink>
Gampangkan.
Semoga bermanfaat.

Cara membuat google translate di blog




1.Login blog
2.Rancangan/TataLetak
3.Lalu tambah elemen/gadget
4.Pilih HTML/Javascrips
5.Setelah itu masukkan kode berikut kedalam HTML/Javascrips ;

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

6.Simpan dan lihat hasil nya.

Jika ada yang kurang mengerti silahkan isi pertanyaan di kotak komentar !

Cara membuat text berjalan (efek marquee)

Sebelum membuat Tutorial ini alangkah baiknya kita kenali dulu tentang kode-kode yang ada di tutorial cara membuat text berjalan(efek marquee) dibawah ini ;

  • Height/Tinggi dari Text
  • Bgcolor/background Text
  • Width/Lebar dari Text
  • Behavior jenis dari tampilan Text antara lain : Alternate(bergerak dari kiri ke kanan dan sebaliknya),Scroll(Gerakan Text berputar),Slide(kadang bergerak dan kadang tidak)
  • Scrolladelay/Kecepatan dari Text dimulai dari angka 1,2,3 dst.Semakin kecil angka yang agan buat,maka semakin lambat gerak dari Text dan sebaliknya.
  • Scrollamount/Kebalikkan dari Scrolldelay.
  • Direction/Gerakkan Text adapun pilihannya Right/kanan,Left/kiri,Top/atas,Bottom/bawah.

Sample 1

Isi Text Agan Disini 


<marquee behaviour="alternate" scrollamount="4" width="100%" > Isi Text Agan Disini </marquee> 


Sample 2

Isi Text Agan Disini

<marquee behaviour="alternate" bgcolor="#00FF00" scrolldelay="1" width="350px"><span style="color: white;" direction="left"> Isi Text Agan Disini></span></marquee>

Nah,agan bisa mengedit kode tersebut dengan panduan dari kode-kode diatas.
Jika ada yang kurang mengerti sematkan pertanyaan dikotak komentar dibawah ini.

cara menambah gadget atau element pada header


1.Login blog
2.Rancangan/TataLetak
3.Lalu Pilih EditHTML
4.Setelah itu cari kode seperti dibawah ini,..biar gampang gunakan Ctrl+F

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='true' title='Lamurdey(Header)' type='Header'/>
</b:section>
</div>

5.Bila sudah ketemu ganti maxwidgets='4' itu terserah agan,mau dibuat berapa,lalu ganti lagi showaddelement='yes'.
6.Simpan Template,dan lihat hasil nya di element laman.

Semoga Bermanfaat.

Cara menghilangkan judul pada header

Langkah pertama :

1.Login blog
2.Rancangan/TataLetak
3.EditHTML
4.cari kode yang seperti dibawah ;

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 67%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;

5.Setelah ketemu dengan kode yang diatas,sematkan kode berikut :
   visibility:hidden;
   tepat dibawah color,sehingga menjadi seperti kode dibawah ini :


#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}


6.Pratinjau terlebih dahulu,jika sudah benar, Save tamplate.

Selamat mencoba.

Tukeran Link

Bagi Rekan-rekan yang ingin bertukaran link dengan blog ini,cukup mencantumkan link agan dikotak komentar yang tersedia di bawah ini .

Link Sahabat :




Cara mengganti cursor blog dengan ikon

Emm..bingung ne mau bilang apa gan,saya orangnya kurang pintar dalam merangkai kata,mau nya langsung-langsung aja,memang sech.. tanpa basa-basi dari awal kayanya kurang terkesan,harap maklum aja ya gan dengan penyakit saya yang satu ne :( ..hehe.

Topik saya kali ini, cara mengganti cursor di blog agan.
Seperti biasa gan ;
1.Login blog
2.Rancangan/TataLetak
3.Klik EditHTML
4.Lalu cari kode </head> dengan mengguna ctrl+f agar lebih mudah mendapatkannya.
5.Setelah ketemu kode </head> , Masukkan kode yang dibawah ini,tepat diatas </head>

<style type="text/css">
HTML,BODY{cursor: url("

http://i943.photobucket.com/albums/ad277/pakkuk/heartbroken1.gif"), auto;}
</style> 

Ganti kode yang berwarna merah dengan bentuk cursor yang agan ingini..
Apabila agan belum memiliki kode tersebut, kunjungi situs http://www.totallyfreecursors.com,disitus ini disediakan berbagai gaya cursor,download salah satu,lalu ambil kodenya.

Selesai.

Cara mengetahui pengunjung blog

Mau tahu cara mengetahui pengunjung blog agan ?

caranya cukup simple gan,ga pake ribet.Langsung aja gan to the point :

1.Kunjungi www.hit-counts.com
2.Pilih salah satu bentuk yang agan ingin kan.


3.Setelah itu isi alamat email dan situs agan.


4.Setelah selesai mengisi alamat email,beri tanda ceklist pada
   Term and conditions
5.Lalu klik Generate Code,maka akan muncul seperti gambar dibawah ;


6.Copy pastekan kode tersebut ke HTML/Javascrips.

7.Simpan template.selesai.

Cara membuat kotak iklan melayang

Ne gan, yang pengen iklan nya gantung-gantung kaya Mony** dan akan hilang jika di klik 2x.
Langsung ke TKP gan :

1.Login Blog
2.Rancangan/Tataletak
3.Tambah Gadget/elemen
4.Pilih HTML/Javascrips
5.Masukkan kode yang dibawah ini :

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Tutup][Klik 2x]:.
</a>
</div>
<center>
Masukan Kode iklan atau Gambar yang agan inginkan di sini.
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Ganti yang berwarna Biru dengan alamat iklan..

6.Simpan Template..
7.Dan lihat Bagaimana hasilnya ?

Daftar Isi

Cara membuat Menu bar blog berjalan

Ne gan,tutorial yang kepengen judul menu bar nya berjalan,ikutin alur tutorial dibawah ini :

1.Login Blog
2.Rancangan/Layout
3.Pilih Edit/HTML
4.Cari kode </head> dengan menggunakan  Ctrl+f  biar mudah
5.Lalu Copas kode yang dibawah ini,tepat diatas kode </head>


</script>
<![endif]-->
<script type='text/javascript'>
//<![CDATA[
msg = "Blog Lamurdey";
msg = "| Berpikirlah | Sebelum | Mengambil | Resiko | Fatal |" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>


Ganti Kata-kata yang berwarna biru dengan kata-kata apa saja yang kamu ingin kan ..

6.Simpan Tamplate dan lihat hasil nya.

Cara membuat Label berputar(Tag Cloud)


 Langsung aja gan,ga perlu basa-basi ntar nanti jadi basi :

1.Login ke blog
2.Rancangan/TataLetak/Layout
3.Tambah Gadget
4.Pilih HTML/Javascrips
5.Masuk kan kode yang dibawah ini :

<center>
<embed type="application/x-shockwave-flash" src="http://sites.google.com/site/ruangbmi/tagcloud.swf" id="tagcloud" name="tagcloud" bgcolor="#172535" quality="high" flashvars="tcolor=0x0080FF&amp;mode=tags&amp;distr=true&amp;
tspeed=100
&amp;tagcloud=&lt;tags&gt;
&lt;a href='#' style='16' target='_blank'&gt;Selebritis&lt;/a&gt;
&lt;a href='http://lamurdey.blogspot.com/2010/11/kode-warna-html.html' style='16' target='_blank'&gt;Template&lt;/a&gt;
&lt;a href='#' style='16' target='_blank'&gt;Mp3 indo&lt;/a&gt;
&lt;a href='#' style='16' target='_blank'&gt;Mp3 &lt;/a&gt;
&lt;a href='#' style='16' target='_blank'&gt;Nada Sms&lt;/a&gt;javascript:void(0)
&lt;a href='#' style='16' target='_blank'&gt;Paypal&lt;/a&gt;
&lt;/tags&gt;"
width="180" height="200"
allowscriptaccess="always"></embed>
</center>

6.Simpan Witged.

Untuk keterangan #172535 warna background Tag cloud.
0x0080FF warna dari Text
Dan untuk yang berwarna Hijau,isi dengan alamat(URL) yang ingin di tampilkan.
180 = Lebar Tag Cloud
200=Tinggi Tag cloud

Semoga Bermanfaat.

Cara membuat efek bintang bertaburan

  1. Login ke Blog 
  2. Rancangan/TataLetak/Layout
  3. Tambah Gadget
  4. Pilih HTML/Javascrips
  5. Masukkan kode dibawah ini :                                                                                                               
    <script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
    /***********************************************

    * Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
    * Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
    * Please keep this notice intact

    ***********************************************/
    </script><a href="http://lamurdey.blogspot.com/2010/12/cara-membuat-efek-bintang-bertaburan.html" target="_blank"><font size="1">Bintang Bertaburan</font></a>
                                                                               
  6. Simpan Template,dan jangan beri nama di witged agar tidak merusak tampilan template.
  7. Selesai.




Cara mengganti template xml hasil downloadtan

Template adalah hal yang paling penting jika membuat sebuah blog/website dan juga merupakan bagian utama dari blog/website,ini guna mempercantik dan menarik perhatian pengunjung.
Disini saya akan menjelaskan bagaimana cara menggunakan template xml hasil downloatan.
Untuk yang pertama download dulu template yang berbentuk xml di situs-situs penyedia layanan template gratis,seperti,finalsense , zoomtemplate,blogtemplate4u.
Disitus ini disediakan bermacam-macam bentuk template mulai dari kalangan personal hingga template bisnis,pilihlah salah satu template yang agan sukai.
Biasanya hasil downloatan berbentuk zip dan juga rar.
Nah,setelah agan download salah satu template tersebut,ikuti tutorial berikut untuk dipasang di tamplate blog sobat.

1.Silahkan login dulu ke blogger dengan ID sobat.
2.klik Rancangan lalu pilih edit HTML


3.buka hasil downloatan anda,seperti gambar dibawah ;

 
4.klik kanan pada template.xml lalu klik view file,maka akan muncul seperti gambar dibawah ini :


 5.klik kanan, select All (ctrl + A),pastekan ke template blog sobat.


6.Setelah selesai dipastekan,simpan template. 

Dan apabila muncul gambar seperti yang dibawah,itu memberitahukan bahwa di template yang baru agan tidak memiliki widget yang seperti widget template lama. 
klik pertahankan witged jika ingin tetap mempertahankan widget tersebut.

 
7.Simpan template dan lihat hasil.





Cara membuat gambar dipojok kiri,atas,kanan,bawah

Cara membuatnya ada dua cara gan,bisa dengan cara yang simple dan juga yang rumit,
langsung aja gan,kita buat dengan cara yang simple dulu :

  1. Upload gambar yang ingin digunakan,ketempat file sharing yang biasa agan gunakan,sperti photobucket,pict.com,fileave.com atau apa aja la,yang biasa agan gunakan.
  2. Setelah di upload ambil kode url nya.
  3. Login/Masuk ke blog 
  4. Rancangan/TataLetak/Layout
  5. Tambah Gadget
  6. Pilih HTML/Javascrips
  7. Masukkan kode dibawah ini kedalam HTML/Javascrips 

    <a href='ALAMAT BLOG AGAN' style='display:scroll;position:fixed;Bottom:0px;RIGHT:0px;' title='KETERANGANGAMBAR'><img src='URL GAMBAR AGAN'/></a>
      
  8. Untuk keterangan ALAMATBLOGAGAN isi dengan alamat blog agan,seperti http://lamurdey.blogspot.com/
  9. Bottom(bawah) posisi gambar bisa diganti dengan Top(atas)
  10. RIGHT(kanan) posisi gambar bisa diganti dengan LEFT(kiri)
  11. KETERANGANGAMBAR ganti dengan nama apa yang agan ingin kan dan ini akan terlihat jika agan menyorot gambar.
  12. Dan untuk URLGAMBARAGAN masukkan URL yang berasal dari file sharing sebelumnya.
  13. Jika sudah selesai Pratinjau terlebih dahulu,kira-kira sudah tidak ada kesalahan baru di SAVE.

Selesai SEMOGA BERMANFAAT.


    cara membuat scorllbox dipostingan/widget

    Saya yakin, pasti yang agan maksud seperti gambar yang bawah ini iya kan,ayo de ngaku aja...


    Langsung aja gan,sebelum ketinggalan pesawat :
    1. Login/Masuk Blog
    2. Rancangan/Tata Letak/Layout
    3. Tambah Gadget
    4. Pilih HTML/Javascrips
    5. Lalu Copas kode yang ada dibawah ini,kedalam HTML/Javascrips.


    <center><!--Code By Lamurdey -->
    <div style="border: 1px solid rgb(238, 238, 238); height: 50px; overflow: auto; padding: 10px; width: 200px;">
    <a href="http://ALAMATBLOGAGAN.com">BLOG AGAN</a>
    <a href="http://ALAMATBLOGAGAN.com">BLOG AGAN</a>
    <a href="http://ALAMATBLOGAGAN.com">BLOG AGAN</a>
    <a href="http://ALAMATBLOGAGAN.com">BLOG AGAN</a>
    <a href="http://ALAMATBLOGAGAN.com">BLOG AGAN</a>
    <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><center>
    <a href="http://lamurdey.blogspot.com/">scrollbox</a></center></p></div></center>

    Untuk keterangan warna merah (50) adalah tinggi dari scorll,untuk warna hijau (200) adalah lebarnya.
    sedangkan untuk warna pink(http://ALAMATBLOGAGAN.com) isi dengan alamat blog agan.
    Selesai
    Gampangkan...

    Semoga bermanfaat.