Cara Membuat Spoiler di Postingan Blog

Spoiler adalah sebuah fitur dalam blog   fungsi utamanya adalah menyembunyikan teks, kode, kalimat atau gambar. Fungsi nya mirip dengan text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. Saya yakin sobat sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali  dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

A. Membuat spoiler dengan isi teks

Klik Show Untuk Membuka Spoiler

Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

Berikut kode spoiler di atas:

<div style="margin-bottom: 2px;"> Klik Show Untuk Membuka Spoiler <div style="margin-top: 5px; text-align: center;"> <input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" 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'; }" type="button"> </div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks </div> </div> </div>

Keterangan;

• Klik show untuk membuka bla bla bla bisa sobat ganti termasuk Show
• Sedangkan kode berwarna biru adalah isi dari spoiler dengan teks. 

 B. Memasang spoiler dengan isi image atau gambar

 

Klik Show Untuk Membuka Spoiler

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoYBGJp0WDpVGFDNHEmZEaOPdZ3fD2ka1oMlYXDGPQcpngum8evp4uLpiPykNpPLGfiW-oNYZSR4x3jBPImu9iugt17C5dj7RG8tyYNfCe2foreDhgdICyDCTXVsY8APaoPtS3pCsz1hA/s400/bird_hair_t4belajarblogger.png" border="0" alt="Post spoiler">

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

Perhatikan cara memasang kode url gambar dengan teks warna biru. Ganti
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoYBGJp0WDpVGFDNHEmZEaOPdZ3fD2ka1oMlYXDGPQcpngum8evp4uLpiPykNpPLGfiW-oNYZSR4x3jBPImu9iugt17C5dj7RG8tyYNfCe2foreDhgdICyDCTXVsY8APaoPtS3pCsz1hA/s400/bird_hair_t4belajarblogger.png dengan alamat gambar sobat sendiri yang sudah dihost misalnya milik saya ini di google code.

Bagaimana cara memasangnya di posting blog? Saat menulis artikel masuk ke menu  HTML bukan compose (lihat kiri atas) kemudian masukkan kode-kode diatas.

Nah bagaimana Sobat blogger. Ternyata cukup mudah bukan membuat spoiler di postingan blog. Silakan dicoba.

Selamat Mencoba !!!!!

Baca Selengkapnya »

Cara buat ikon di samping judul Sidebar

Kali ini, kita akan belajar bagaimana menempatkan ikon kecil atau kanan gambar di samping judul widget / gadget Sidebar ... 

Dalam artikel kustomisasi Blogger judul sidebar, Anda melihat bagaimana menyesuaikan latar belakang judul, menambahkan beberapa perbatasan untuk itu , atau menggantinya dengan gambar .. 

Sekarang, kita ingin mencapai hal ini: Ada 4 langkah untuk mendapatkan ini bekerja:

1. Cari ikon (gambar) Anda suka, mengoptimalkannya
2. Upload pic ke web host gratis (untuk mendapatkan URL)
3. Membuat CSS style untuk judul sidebar (judul)
4. Bermain dengan gaya CSS (customize)

1. Ini adalah bagian yang menyenangkan. Cari pic (icon) Anda suka, desain satu, tanaman itu, memotongnya, warna itu Dua hal yang harus di urus:

• Ukuran ikon - buat ukurannya menjadi kecil, seperti 25px 25px ... Ini bukan aturan, dan rasio yang tidak penting (Anda dapat membuat .. 25x10px). Trial and error. Anda akan mendapatkannya
• Pic transparan atau tidak? - saya sarankan untuk TIDAK menggunakan Pics transparan. Sebaliknya membuat sebuah pic dengan latar belakang yang memiliki warna yang sama dengan warna latar belakang sidebar Anda (sehingga mereka berbaur bersama-sama). Transparansi adalah besar, tetapi browser Internet Explorer lebih tua tidak menampilkan dengan benar. Dan banyak orang di luar sana menggunakan mereka.

2. Ketika pic Anda sudah siap, hal berikutnya adalah untuk meng-upload ke web host gratis. Kami melakukan ini untuk mendapatkan link langsung dari pic host kita, sehingga kita dapat menggunakannya (link untuk itu) dari template kami ... gratis gambar (image) penyedia hosting (favorit saya): photobucket.com tinypic.com. Buat account, upload pic dandapatkan linknya.

3. Sekarang, kita harus membuat style untuk judul sidebar di Blogger HTML. Khawatir Don ', itu hanya dipotong-paste pekerjaan ... dengan sedikit tweak .. 

gaya Default untuk judul sidebar (judul) sudah ada di template, tetapi dalam default template Blogger (seperti Minima ) mendefinisikan gaya untuk tanggal pos juga . Jadi, kita harus membagi gaya tersebut ... Lagi pula, Anda dapat memiliki:

• standar template Blogger (yang dari Blogger Pilih template baru ) - Anda akan memiliki masalah dengan tutorial ini
• disesuaikan, pihak ketiga Blogger Template - Anda harus mengidentifikasi sidebar gaya judul dalam kode HTML (CSS), dan kemudian menyesuaikannya ... Biasanya, template ini sudah memiliki kode yang bersih bagus, dan gaya dibagi, jadi, Anda tidak akan memiliki masalah ... Inilah yang harus Anda lakukan: Pertama, back up template Blogger Anda . Lalu pergi ke menu LAYOUT >> EDIT HTML >> dan masukkan kode dibawah ini (warna kuning) DI ATAS  kode ]]></b:skin> dan </head>:

.sidebar h2 {background:url(Masukkan URL IMG Anda);background-repeat: no-repeat;background-position:left center;height:25px;margin:0;padding:10px 3px 0 30px;line-height:1.5em;text-transform:uppercase;letter-spacing:.2em;} 

4. Mari kita menganalisis (dan menyesuaikan) sidebar heading (judul) buru dengan gaya:

• Anda harus mengganti URL dari host PIC dengan gambar yang Anda upload (langkah 2 )

• Sesuaikan tinggi dan gambar (icon), jika tinggi pic Anda adalah 40px, maka garis akan height: 40px;

• dengan padding, Anda dapat menyesuaikan judul (bagian tekstual):

...misalnya, jika Anda meningkatkan padding atas untuk 20px, ini akan mendorong judul bawah ,

...dan jika Anda mengurangi bantalan kiri untuk 20px, ini akan menarik judul ke kiri

...tampaknya aneh, tapi Anda akan mendapatkannya

•dengan gaya lain (Anda juga dapat menambahkan beberapa lebih) Anda dapat mengatur huruf besar (CAPS) untuk huruf kecil , huruf spasi (spasi antara huruf dalam judul)

Itu saja! Jika Anda akan memiliki beberapa masalah, menjerit! Saya akan membantu. 

Selamat mencoba !!!!!

Baca Selengkapnya »

Tutorial Pembuatan cover DVD/VCD dengan AdobePhotoshop CS3

Saya, Erick Satriyo. Kali ini akan memberikan tutorial mengenai “CARA MEMBUAT COVER DVD / CD”. Sebenarnya cara membuat cover tersebut cukup mudah dan tidak perlu waktu yang lama, di sini kita hanya di tuntut untuk kreatif dan imajinatif, ini semua di karena kan agar hasil design cover tersebut enak di lihat oleh consumen atau client.

Nah di sini penulis membuat cover cd / dvd dengan menggunakan Photoshop CS 4, Tutorial ini juga bisa digunakan di Photoshop versi berapa saja…ok untuk mempersingkat waktu kita mulai saja cara membuat cover cd / dvd :

1. Double click icon Photoshop Cs 4

2. File > New > terus berikan ukuran seperti berikut width : 120 mm, height : 120 mm ,resolution 300 pixels / inchi, preset : custom, color mode : RGB > ok

3. Setelah itu view > rules atau tekan di keyboard CTRL + R, dan nanti di halaman photoshopnya akan
    muncul penggaris.
4. Setelah itu munculkan grid dengan cara View > show > grid atau tekan di keyboard CTRL + ‘
5. Setelah itu atur kotak grid dengan cara Edit > preferences > Guide, Grid and Slices , dan nanti akan
    muncul kotak dialog sebagai berikut



Pada baris grid : color : custom, style : lines, grid every : 60 mm, subdivisions : 12 > ok, dan nanti di halaman design anda akan muncul garis kotak-kotak.

6. Edit > preferences > units & rulers, di baris units , rulers anda beri mm



7. Setelah siap mengatur settingan, maka langkah selanjutnya anda pilih ELIPTICAL MARQUEE TOOL



8. Setelah anda pilih ELIPTICAL MARQUEE TOOL, maka langkah selanjutnya anda gambarkan lingkaran
    tersebut di garis tengah, seukuran halaman design, agar penggambaran rapi maka di keyboard anda tekan
    SHIFT+ ALT, dan nanti hasilnya seperti gambar di bawah ini :



9. Setelah sudah di gambar maka anda click di layers kemudian di double click di tulisan background, agar
    gembok dibuka, catatan jika ada muncul pesan, maka cukup anda click ok saja



10. Jika background sudah tidak terkunci, maka langkah selanjutnya anda tekan delete, dan nanti hasilnya
      seperti berikut :
     


11. Jika gambar sudah seperti diatas, maka langkah selanjutnya anda hilangkan area seleksi dengan cara
      tekan di keyboard CTRL + D, setelah itu hilangkan juga grid dengan cara tekan di keyboard CTRL +”

12. Setelah itu kita buat layer baru dengan cara tekan dikeyboard CTRL + shift + N, dan beri nama latar,
      setelah itu ok:



13. Setelah buat layer baru maka langkah selanjutnya anda buka foto yang ingin dijadikan gambar latar,
      dengan cara file > open > dan cari lokasi foto yang diingkan > open



14. Setelah foto sudah muncul, maka langkah selanjutnya , klik di foto yang anda buka tadi, kemudian tekan
      CTRL + A, setelah itu CTRL + C,setelah itu fotonya di minimize, kemudian anda klik halaman design
      anda dan gambar yang kita copy tersebut dipastekan di layers yang dengan nama latar



Dan nanti hasilnya sebagai berikut :



Nah untuk merapikan fotonya anda klik gambar tersebut dan di keyboard tekan CTRL + T yang gunanya untuk mengatur skala foto > setelah siap mengatur maka tekan enter



Dan nanti gambarnya akan menutupkan halaman design kita, untuk mengatasi masalah tersebut, maka dilayer anda tukar posisinya yang mana latar berada di baris bawah dan layer 0 di baris atas,
Posisi layers sebelum di ubah :



Posisi layers sesudah diubah :



Dan nanti halaman design sebagai berikut :

15. Setelah halaman design anda sudah seperti diatas, maka langkah selanjutnya anda munculkan kembali 

      grid dengan cara tekan CTRL + ‘, jika sudah muncul maka anda gambarkan lagi lingkaran kecil dengan 

      menggunakan ELIPTICAL marquee tool. dan nanti hasilnya sebagai berikut… upss jika gambar

      sudah siap, maka langkah selanjutnya anda hilangkan lagi grid nya dengan cara tekan CTRL + “

NAH DESIGN COVER CD / DVD SUDAH SIAP : ) !! disini anda tinggal menambah kan tulisan…..
Jika sudah siap semua, maka langkah selanjutnya anda pilih di menu bars layer > flatten image
Dan nanti hasilnya kira-kira sebagai berikut :



Ok. Sekian tutorial dari saya.
Semoga bermanfaat untuk anda.

Selamat Mencoba !!!!

Baca Selengkapnya »

Tutorial Menggunakan Software Diptrace

     Novarm Diptrace 1.5 ada yang versi freeware-nya, jadi bisa digunakan untuk membantu membuat PCB, bisa digunakan membuat PCB rumahan, bukan yang profesional dengan mesin, perlu sedikit modifikasi, jangan pakai nilai-nilai defaultnya, karena biasanya trace width (jalur) dan pad (tempat kaki komponen) kecil-kecil dan tipis, sehingga kalau dibuat dengan cara rumahan atau amatiran, maka jalur mudah putus atau pad terlalu kecil atau hilang tembaganya ketika di bor. Diptrace bisa membuat skematik langsung ke PCB, atau membuat langsung di PCB-nya. Skematik Diptrace agak kasar dibanding dengan Orcad, Eagle atau Isis,

tetapi lumayan lah dan PCB-nya cukup baik dan sederhana. Berikut contoh-contoh membuat PCB untuk sistem minimum mikrokontroler AT89S2051.Anda bisa tanya mbah Google dimana bisa download Diptrace versi Freewarenya. Diptrace memiliki library komponen-komponen elektronika demikian juga yang PCB juga memiliki library tata letak kaki komponen. Gambar 1 adalah skematik yang dibuat dengan program Schematic Diptrace, sistem minimum AT89S2051, selanjutnya anda bisa Convert to PCB layout, tetapi letak komponen amburadul, Gambar 2, anda harus geser secara manual dengan men-drag, karena kalau dibuat automatic, tata letak mencari seminimum mungkin PCB, nah kalau tak masalah ya silahkan, tetapi ini LED-LED harus ditaruh berjejer, jadi manual saja. Dalam proses peletakan kembali komponen, kalau anda berencana pakai soket IC, jangan pernah meletakan komponen yang tingginya melebihi tinggi IC+soket, sangat dekat dimuka atau dibelakangnya IC tersebut, karena nanti anda akan kesulitan mengambil atau memasang kembali IC tersebut karena terhalang komponen. Anda juga bisa tambah pad, atau menambah jalur dengan tinggal menghubungkan pad-pad nya, klik sana klik sini untuk buat jalur, gambar 3 sudah diatur manual.

1. Skematik sistem minimum AT89S2051

2. Layout auto place PCB

3. Penataan ulang

Selanjutnya yang harus anda perhatikan pada pembuatan PCB dengan cara ini adalah;

• Componen placement side, letaknya komponen dimana?, biasanya sih Top, atau atas, sisi komponen, tetapi kan ada komponen yang ditaruh di jalur PCB, yaitu pada PCB modern, tipe SMD.
• Current layer, pada top atau bottom, yaitu yang anda edit disisi komponen atau pcb, perhatian; bahwa kita selalu memandang dari atas sisi komponen, meskipun kita sedang dalam layer atau edit di sisi PCB.
• Current shape and Text, lha ini ada banyak, anda mau taruh gambar, text atau shape (lingkaran, segi empat dsb.), di sisi PCB, Top silk, wah masih banyak lagi, ini untuk PCB yang komplek, kali, kalau yang sederhana, biasanya taruh tulisan di PCB-nya saja sudah cukup.
• Carilah menu grid router setup (gambar 5), number of layer, ya pilih mau double side (2) atau single (1), kalau single, apakah diperbolehkan buat jumper, sebaiknya ya (dicentang).
• Carilah menu Route Setup (gambar 6), disini bisa diubah, lebar jalur (trace width), trace clearance (daerah bebas sekitar jalur) dan clearance pad (daerah bebas sekitar pad), semakin kecil nilainya, semakin mudah membuat route, tetapi semakin susah membuat PCB, karena jalur-jalur yang kecil, tembaga mudah larut. Perlu diketahui bahwa jarak antara kaki-kaki IC yang DIP (umum dipasaran) adalah 0.1 inchi, jadi lebar jalur 0.02 adalah seperlima-nya, memungkinkan jalur bisa melewati antar kaki-kaki IC, sebaiknya untuk jalur power supply + atau ground dibuat besar, minimum 0.05 inchi.
• Selanjutnya cari menu autoroute, akan didapat seperti gambar 7.

4. Menu Diptrace

5. Grid Router Setup

6. Router Setup

7. Hasil autoroute dan penambahan Text

• Ketika anda taruh text, mau dimana, tergantung taruhnya dilayer mana, sederhana-nya di PCB saja, biar nanti ikut di etching, nah ketika anda taruh text atau shape, program akan membalik (mirroring), text anda, kalau taruh di PCB bottom, karena program melihat dari sisi atas komponen, nah kalau anda mau membuat PCB dengan kertas transfer seperti yang ada dalam postingan lain web ini, maka tulisan atau text tidak dibalik, seperti pada gambar 7, taruh text pada layer Board cutout.
• Selanjutnya anda bisa edit jalur dan pad nya, dengan memilih object properties dengan menu klik kanan mouse pada objek yang dipilih, lebar jalur 0.02 inchi cukup kecil, tapi masih bisa dibuat, tidak luntur kena FeCl3, bisa juga merubah jalur-nya.
• Yang penting adalah pad properties, karena bulatan atau kotak pad harga default terlalu kecil untuk dibuat PCB dengan cara rumahan, jadi anda harus merubah lebar dan tinggi pad, dengan cara klik kanan objek terpilih - pad properties - ubahlah besarnya diameter atau ukuran pad, seperti yang ditunjukan pada gambar 8, ubahlah untuk lebar dan tinggi pad, diperbesar, contohnya adalah dari 0.022 ke 0.075 inchi untuk resistor, untuk IC lebar dan tinggi tidak sama, jadi bentuknya oval. Bentuk pad bisa oval, bulat dan kotak. Setelah anda rubah, nanti akan terlihat lebih tebal

8. Pad Properties

• Setelah anda merubah besar pad dan lebar jalur, anda bisa melaukukan Re-route, kemungkinan jalurnya berubah, atau ada yang tidak dapat diselesaikan jalurnya, atau ada warning atau peringatan (lingkaran merah) bahwa jalur melewati daerah berbahaya, karena berdekatan atau melampaui daerah bebasnya objek yang didekatnya (melampaui clearance area).
• Ketika anda mau print, sebaiknya preview dahulu, bagian atas atau bawah yang mau di print, tinggal pilih, nah yang penting bahwa anda perlu balik (mirror) atau tidak, tergantung dari cara anda membuat PCB. Jika membuat PCB dengan kertas transfer, maka anda harus membalik PCB, sehingga tulisan tampak terbalik. Untuk patokannya, jika ada IC AT89S2051, pin 10 adalah ground, kaki no 10 adalah disebelah sisi kiri IC bagian paling bawah.
• Cooper Pour adalah memblok bagian kosong PCB dengan pola (bermacam pola, block, raster dsb.), ini dimasudkan agar bagian tembaga yang larut ketika di etching sesedikit mungkin, selanjutnya, daerah ini biasanya dihubungkan dengan ground. Untuk pembuatan PCB untuk keperluan rangkaian yang bekerja di frekuensi tinggi, sebaiknya tidak melakukan pouring, dan gunakan PCB dengan bahan Epoxy glass. Klik icon cooper pour, pilih pola, buat daerah mana yang akan di pouring, klik-klik -end, jadilah seperti gambar 9.

9. Cooper Pouring

10. PCB jadi

11. Hasil Autoroute yang perlu disempurnakan

      Gambar 11, ada ketidak sempurnaan program Autotrace, atau mungkin harus seting ulang, dengan cara 

      uji coba berbagai variasi parameter;

• A : tidak ada halangan kok, perlu jumper?.
• B : koneksi yang tidak terselesaikan.
• C: seharusnya dapat diminimisasi jumlah jumpernya.
• D: yang di jumper satu saja yang horisontal, tak ada fasilitas jumper vertikal dan horisontal (both)     

  Semoga Bermanfaat !!!!!

Baca Selengkapnya »

Tutorial Pembuatan Blog

Saat ini membuat website bukanlah suatu hal yang sulit. Blog dapat dijadikan salah satu

alternatif, jika Anda ingin membuat website. Dengan blog Anda dapat membuat suatu website

sederhana sesuai dengan keinginan Anda dengan mudah dan gratis.

Apakah yang dimaksud dengan blog itu ? Berikut beberapa definisi mengenai blog:

1.  Weblog atau blog merupakan teks dokumen, gambar, objek media dan data yang tersusun

     secara hierarkis dan menurut kronologi tertentu yang dapat dilihat melalui bowser internet

    (misalnya internet explorer).

2.  Blog merupakan publikasi secara periodik dan tetap mengenai pemikiran personal

     seseorang dan juga link web.

3.  Blog adalah jurnal yang disediakan pada sebuah web. Aktivitas meng-update sebuah blog

     dinamakan “blogging”. Seseorang yang mengelola blog disebut “blogger”.

4.  Blog adalah suatu perjalanan yang berkesinambungan, dengan panduan logika yang

     berkelanjutan dan konsisten. Topik dan pembahasan di dalam sebuah blog biasanya

     konsisten pada topik utama, misalnya politik, sastra, musik dan sebagainya.

5.  Blog adalah jurnal yang disediakan pada web. Blog dapat di-update setiap hari dengan
     suatu aplikasi yang disediakan oleh penyedia. Tidak dibutuhkan suatu keahlian khusus
     untuk melakukan update atau mengelola blog. Posting dalam blog tersusun secara teratur
     sesuai kriteria tertentu, biasanya dengan pengaturan urutan tanggal. 

Secara umum blog memiliki fitur utama, yaitu: arsip dan kotak komentar. Situs layanan
penyedia blog gratis saat ini begitu banyak diantaranya: blogger.com, wordpress.com,
friendster.com, xanga.com, blogdrive.com, blogsome.com, wordpress.com, multiply.com,
myspace.com dan lain-lain. Diantara sekian banyak penyedia layanan blog, blogger.com
merupakan penyedia layanan blog yang populer. Jika Anda membuat blog dengan blogger.com
maka alamat url blog Anda nantinya adalah: http://ericksatriyo.blogspot.com .
 
Pada tutorial kali ini saya akan memberikan langkah-langkah pembuatan blog dengan
blogger.com. Kemudian saya juga akan mendaftar link-link yang dapat dijadikan acuan atau
inspirasi untuk mengembangkan blog Anda. Disini

Baca Selengkapnya »

Cara Memasukan Teks Box di Posting Blog

Selamar pagi sobat semuanya...... kali ini saya akan posting mengenai cara memasukan teks box ke posting blog. terkadang kita sering memasukan sebuah teks yg panjang yg memakan banyak tempat :). kita bisa meminimaliskan dengan cara membuat teks box. contohnya seperti ini mas brow :

Ini merupakan Contoh dari Text Box

Nah itu dia contohnya mas brow,,,gimana ?? tertarik ??? tapi sayang mas brow kalo mau copy codenya harus bayar !!! hihihihi...g' kog mas brow, cuma becanda aja , hehehe,,oke kita langsung ke tkp,,,,:

<textarea cols="20" name="code" rows="3" style="background: #EF0090; border: 3px dotted #FFEFF9; color: #ffeff9; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI    copy code scriptnya ,,::

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 7px; background: #FBEFFF; border-left: 20px solid #CA3DD9; border: 1px solid #CA3DD9; color: #ca3dd9; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI <br>    copy code scriptnya ,,::

<br /><textarea cols="20" name="code" rows="3" style="background: #FF000A; border: 3px double #ffaf; color: white; line-height: 1.5em; padding: 5px;"><br />ISI TEKS AREA SOBA DISINI   copy code scriptnya ,,::

<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: #FFDAAF; border: 2px ridge #7F4500; color: #7f4500; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI   copy code scriptnya ,,::

<textarea cols="20" name="Bptxt" rows="3" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: white none repeat scroll 0% 0%; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">ISI TEKS AREA SOBAT DISINI  copy code scriptnya ,,::

<textarea cols="20" name="Bptxt" rows="3" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% Pink; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">ISI TEKS AREA SOBAT DISINI  copy code scriptnya ,,::

<textarea cols="20" name="Bptxt" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; -webkit-box-shadow: 5px 5px 8px #818181; background: yellow; border-left: 20px solid red; color: black; line-height: 1.5em; padding: 5px;">ISI TEKS AREA SOBAT DISINI copy code scriptnya ,,::

OK,, caranya mas brow tinggal copy code scriptnya aja and paste ke HTML posting mas brow *,,,ingat di posting di HTMLnya, bukan di composenya ya*,,, Semoga bermanfaat ya brow :) 

Selamat Mencoba !!!!!

Baca Selengkapnya »

Kode Warna HTML Blog

Untuk kalian yang sedang membuat script PHP, HTML atau kode lainnya yang membutuhkan kode warna, kalian bisa menggunakan tools dibawah ini untuk mempermudah kalian dalam pencarian kode warna.





Gerakkan kursor ke posisi warna yang kalian pilih, kode warna akan muncul di kolom Hex, atau sebaliknya jika kalian punya kode warna dan ingin mengetahui apa warna yang dihasilkan dari kode tersebut, isi kode warna tersebut di kolom Hex dan warna yang dimaksud akan ditampilkan.

Baca Selengkapnya »

Cara Mengganti (modifikasi) Kursor Blog

Cara Mengganti (Modifikasi) Kursor Blog. Kali ini saya akan membahas tentang cara mengubah tampilan kursor yang ada di blog kita. Jika antum masih penasaran dengan yang dimaksud mengubah kursur, maka silahkan untuk memperhatikan kursor blog ini terlebih dahulu. Bagaimana? Menarik bukan....?

Nah, di atas itu adalah tampilan kursor blog ini. Bagi antum yang ingin mengubah kursor yang ada di blog antum, maka sobat bisa mengubahnya melalui langkah-langkah berikut :


1. login lah ke akun blogger antum terlebih dahulu
2. Lalu klik "Layout"

3. Pilih "add a gadget" lalu pilih "HTML/Java Script" dan paste-kan kode berikut untuk mulai   
    mengubah tampilan kursor yang ada di blog antum :

    a. Kode 1: mengubah kursor tapi tidak mengubah kursor ketika menyorot link  :

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-r6UEE0EP7Csdixwl9pH7IVAmEYJ8HrTvdaV2QNLwoyhp1oYIeSbM2tI7yvQpCFICUTe5jMEKz8Cdw_esA3_Ilxhz12ZYikG6OOyyRUVow4-QX7mfGS5_pwyJN9f7R95C4ixEu4zSv6OR/"), auto;}
</style>

    b. Kode 2: mengubah kursor serta tetap berubah walau disorot ke arah link  :

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-r6UEE0EP7Csdixwl9pH7IVAmEYJ8HrTvdaV2QNLwoyhp1oYIeSbM2tI7yvQpCFICUTe5jMEKz8Cdw_esA3_Ilxhz12ZYikG6OOyyRUVow4-QX7mfGS5_pwyJN9f7R95C4ixEu4zSv6OR/"), auto;}
body a:hover{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-r6UEE0EP7Csdixwl9pH7IVAmEYJ8HrTvdaV2QNLwoyhp1oYIeSbM2tI7yvQpCFICUTe5jMEKz8Cdw_esA3_Ilxhz12ZYikG6OOyyRUVow4-QX7mfGS5_pwyJN9f7R95C4ixEu4zSv6OR/"), auto;}
</style>

SILAHKAN UNTUK MEMILIH SALAH SATU KODE YANG ANTUM INGINKAN

4. Jika sudah, maka silahkan untuk tekan tombol "SAVE" atau "SIMPAN" .

PENTING:
Antum bisa mengganti link gambar yang telah saya tandai warna biru dengan link gambar kursor sesuai keinginan antum. Berikut adalah beberapa link gambar kursor koleksi saya :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iIdFmsnaizQU2OVLKMly0UKKLhm_62FOo7mdoNY56y3x7ZYeI_sS3D1jQg8feDSqrGnfAKx13ULb3mvMRSXrbptO57m_fY7gV-xeVXQVx_bDJibaO1_OevH248LkF5i9qqCWMrBjn3U/s400/bat_banana_t4belajarblogger.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoYBGJp0WDpVGFDNHEmZEaOPdZ3fD2ka1oMlYXDGPQcpngum8evp4uLpiPykNpPLGfiW-oNYZSR4x3jBPImu9iugt17C5dj7RG8tyYNfCe2foreDhgdICyDCTXVsY8APaoPtS3pCsz1hA/s400/bird_hair_t4belajarblogger.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Equ8WpWbjHTmiZ9Irg4hldg5577FUg2lCA4fYwf2MWO8DxMyvfkAsfiqrXKt75dye-Xu_-RlsW56a3Ti7jqaRWVYqcnwDFbvVYFOCNt73-Yj01M8M2mNt9U-IsR9J-rIh4-VMT4MPu4/s400/guitar_banana_t4belajarblogger.png

Untuk selebihnya antum bisa mencarinya melalui Google... :D

1.  http://www.cursors-4u.com
2.  http://www.myspacecursor.net
3.  http://www.totallyfreecursors.com
4.  http://www.123cursors.com
5.  http://www.anicursor.com

Semoga bermanfaat. Keep blogging...

Baca Selengkapnya »

Cara Membuat Kotak Scroll pada Postingan

           Apa itu kotak Scroll di dalam Posting, bagi sobat yang belum mengetahui kotak Scroll bisa sobat lihat kotak di bawah ini. Kotrak Scroll bisa berfungsi untuk memasukkan post yang terlalu panjang sehingga dapat meminimalkan tempat pada halaman post sobat.
           Untuk membuatnya antum hanya cukup membuka new postingan klik compose dan paste HTML yang ada di bawah ini!!

   Catatan:
           Untuk mengganti ukuran kotak Scroll ubah ukuran sesuai dengan selera antum pada HTML di bawah ini .

   Tampilan 1 jika menggunakan HTML ini!

Contoh tulisan yang diletakkan dalam kotak.

<div style="overflow:auto; width:590px; height:100px; color:#b4040; padding:10px; border:4px double #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;-goog-ms-box-shadow:0 0 10px #000000;"> TULIS POSTINGAN DISINI</div>     copy code scriptnya ,,::

Tampilan 2 jika menggunakan HTML ini!

Contoh tulisan yang diletakkan dalam kotak.

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;"> TULIS POSTINGAN DISINI </div>    copy code scriptnya ,,::

Tampilan 3 jika menggunakan HTML ini!

Contoh tulisan yang diletakkan dalam kotak.

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;"> TULIS POSTINGAN DISINI </div> </div>    copy code scriptnya ,,::

Tampilan 4 jika menggunakan HTML ini!

Contoh tulisan yang diletakkan dalam kotak.

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

Pilih jenis / model kotak Scroll yang sobat inginkan, lalu copy HTML nya!!
Dan Selesai!!

SELAMAT BERKREASI !!!

Baca Selengkapnya »