Trick Menjadikan Item Box Transparent Tanpa Opacity

Tutorial untuk membuat item box semi transparan, tanpa meredupkan isinya / kontennya.

Bagi para penggemar site dengan nuansa transparan, modal utama untuk melaksanakannya adalah dengan perintah background-color:transparent dan opacity (opacity, hanya berjalan di Mozilla Firefox saja).

Jika dua modal ini kita gabungkan, maka kita akan mempunyai kekuatan untuk mengatur tampilan site kita dengan transparansi 0-100%. Maksudnya, transparan 100% diibaratkan seperti kaca bening, tembus pandang. Apapun yang berada di balik kaca, terlihat 100%.
Dan 0% berarti tidak tampak apa-apa, diibaratkan pandangan terhalang dinding tembok. Apa yang berada di balik dinding, tidak terlihat sama sekali.

Value warna transparent tidak bisa diatur persentasenya, dia hanya mempunyai 2 kemungkinan yaitu kalau tidak "transparan", ya "Opaque".
Yang bisa diatur persentase tembus pandang / tembus cahaya adalah property Opacity.
Opacity adalah kebalikan dari transparan. Opacity = 0 berarti tembus pandang bak kaca bening. Opacity = 0.25 seperti kaca terlapisi kaca film 25% dan Opacity = 1.0 seperti kaca dilapisi tripleks ... tidak tembus pandang sama sekali.

Berikut adalah trick untuk membuat latar belakang tembus pandang, tetapi tulisan maupun gambar yang berada di latar depan ( foreground ) tidak ikut meredup.

Berikut adalah gambar ilustrasi, agar anda mudah memahami dan dapat membedakannya :

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Default

Gambar di atas, adalah efek pemberian perintah transparent terhadap div#page_start dan background-color:white di class itembox.

Jika pada class itembox kita beri value transparent kepada property background-color dengan menyebutkan background-color: transparent; maka hasilnya akan seperti berikut ini.
Informasi yang terkandung di dalamnya sedikit terganggu, karena text warna hitam akan sulit dibaca jika berlatar belakang warna hitam juga.

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Transparent

Berikut ini, adalah contoh pemberian transparansi 50% dengan perintah opacity:0.5

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Opacity

Bisa dilihat di sini, bahwa tulisan / text beserta gambar logo MP ikut meredup.
Text yang semula berwarna hitam, menjadi abu-abu.
Agar warna text tetap, sesuai seting serta gambar tampil jelas, maka diperlukan trick yang jika sudah anda pahami, anda pasti akan bergumam "Ooooo ... begitu. Saya juga bisa, kalau hanya begitu saja" ... Nah, mari kita intip "begitu" nya tersebut.

Page ini didedikasikan untuk music-genre "dangdut koplo". Anda akan mendapatkan koleksi lagu-lagu "dangdut koplo", yang disertai tutorial bagaimana cara download serta aplikasi untuk download .MP3-nya. Dengarkan dan rasakan. Have a nice dance with "Dangdut Koplo" !

by Semi transparent image

"Begitu" tersebut adalah, memasang image yang semi transparent sebagai background.

.itembox {
background:transparent url(http://images.dangdutkoplo.multiply.com/image/1/photos/35/500x500/1/opacity50.png?et=6dwDa2KUvk23e5ZZ8FH0Aw&nmid=236245969) repeat scroll 0 0;
}

Dan Item Box anda akan semi transparent.
Disamping itu, anda akan mendapatkan bonus Site anda akan tampak sama di semua browser, baik browser yang mendukung Opacity seperti Mozilla Firefox maupun yang tidak mendukung opacity.

Image ini mempunyai Opacity 0.65 atau transparan 35%.
Anda bisa mendapatkan image tersebut pada alamat :

http://images.dangdutkoplo.multiply.com/image/1/photos/35/500x500/1/opacity50.png?et=6dwDa2KUvk23e5ZZ8FH0Aw&nmid=236245969

Semoga membantu.

© 2009 Lilok http://dangdutkoplo.multiply.com

Konversi Akun Multiply Anda menjadi co.cc

Anda ingin memiliki nama domain sendiri secara gratis seperti ini: schaid.co.cc?

Saya tidak membuat situs ini dari awal, melainkan  hasil konversi dari situs multiply saya (muhsaid.multiply.com)












Bagaimana cara melakukannya berikut langkah-langkahnya:
1.    Bukalah situs www.co.cc
2.    Setelah itu masukkan nama yang Anda inginkan, lalu klik Check
       availability untuk memastikan nama yang Anda pakai belum ada yang
       memiliki.

3.    Setelah berhasil Anda akan masuk ke halaman baru, lalu klik Continue to Registration
4.    Masuk ke halaman baru, lalu
       klik Create an account now.

5.    Isi data-datanya, lalu tekan Create an account now.
6.    Pada halaman baru yang muncul, pilih pilihan nomor 3 (URL
        Forwarding). Masukkan alamat blog Anda, dan keterangan lainnya di
        bawahnya. Kemudian klik Set Up.

7.    Sekarang klik OK dan selesai, Anda hanya tinggal menungu konfirmasi
       dari mereka untuk  mengaktifkan domain Anda. Biasanya dalam waktu 24
       jam sudah bisa Anda buka.

Selamat mencoba!!!

Sumber: http://caturhp.multiply.com/journal/item/96  dengan sedikit perubahan.

Selengkapnya: http://muhsaid.multiply.com/journal/item/86/Konversi_Akun_Multiply_Anda_Menjadi_co.cc_muhsaid.multiply.com_schaid.co.cc

Mengatur Ukuran Headshot Pada Reply

Kalau di wordpress, kita bisa memilih ukuran avatar (headshot) yang akan ditampilkan pada komentar. Di MP kode CSS buat ngatur ukuran headshot:

.userboxlogo img {
height: 25px;
width: 25px;
}

Nah kita tinggal ganti aja tuh ukurannya yang 25px itu.

Mencuri HTML

Bingung ama HTML unik punya orang lain?
pingin tanya malu, kalo ga tanya ga bakal tau kodenya,
Curi HTML-nya ajah,

contoh:

BLAST MACHINE

rainbowrevalia ~ homeTips n Trick MP ~ hometrick MP ~ notesGO TO YOUR HOME

cara mengetahui kodenya?
Gini:

1. Copy "BLAST MACHINE" di atas,
2. Buka: http://IDMULTIPLY.multiply.com/journal/compose (IDMULTIPLY diganti dgn ID MP anda)
3. Paste, lalu klik "Edit HTML" pada posisi kanan atas
4. Dapet, deh kodenyah!!
kalo ga percaya coba ini:

HTML:

<center><big><b>BLAST MACHINE</b></big></center><center><form action="http://www.myspacegens.com/handler.php?gen=redirect" method="post"><select name="url" style="width: 150px; height: 20px; font-size: 11px; color: rgb(0, 0, 0); font-family: Franklin Gothic Medium;"><option value="http://rainbowrevalia.multiply.com">rainbowrevalia ~ home</option><option value="http://trickmp.multiply.com">Tips n Trick MP ~ home</option><option value="http://trickmp.multiply.com/notes">trick MP ~ notes</option><option value="http://multiply.com/gus">GO TO YOUR HOME</option></select><input style="border-color: rgb(153, 51, 102); font-family: Franklin Gothic Medium; color: rgb(0, 0, 0);" value="Blast Off !" type="submit"></form></center>



Teks biru: URL
Teks merah: kata-kata

~~~ SELAMAT MENCOBA ~~~

Memindahkan Tags ke Jalur Kanan (Rail)

Pengen sedikit inovatif aja.
Setelah belajar untuk meng-scrolling tags, sekarang kita coba menggeser tags ke jalur kanan atau rail.
Ini kode CSS-nya:

/*TAGS ON THE RIGHT RAIL */

div#mainbox_1 div.relatedlinks {
     color:transparent;
background-color: #0000;
border: 2px solid #0000;
color: #A3A9A0;
font-weight: normal;
font-size: 18px;
text-align: align left;
overflow-x: auto;
height:250px;
width: 155px;
position: absolute;
top: 1000px;
left: 590px;
}
div#mainbox_1 div.relatedlinks a, div#mainbox_1 div.relatedlinks a:link {
     color: #88888;
font-style:normal;
}
div#mainbox_1 div.relatedlinks a:hover {
     color:#ff0000;
text-decoration: blink;
font-style:normal;
}
div#mainbox_1 div.relatedlinks a:active {
     color:#ff0000;
}

Sekali lagi, teks berwarna merah untuk mengatur tinggi dan lebar scroll tags (kalau tags anda sudah banyak tentunya).
Dan untuk yang warna hijau, itu untuk mengatur posisi tags itu sendiri. Jangan sampai menutupi iklan.

Selengkapnya: http://muhsaid.multiply.com/journal/item/81/Memindahkan_Tags_ke_Jalur_Kanan_Rail

Membuat Scroll pada Tags

Multiply anda terlalu banyak tags?
mau show all di welcome box, tapi ingin tetap rapi??
caranya pasang script ini di CSS...

div#mainbox_1 div.relatedlinks {
height: 120px;
width: 560px;
overflow-x:auto;
overflow-y: auto;
}

sesuaikan ukuran height & width dengan layout anda
hasilnya seperti berikut...

semoga bermanfaat

Tips Tempel Search Engine Agar Bisa Di-custom

menjawab pertanyaan saudara budiscyansaya mencoba mengkreasikan metode memasang iklan seperti pada postingan Om Lilok di sini
http://trickmp.multiply.com/journal/item/161
menggunakan tag <div id="searchmupengml"></div> untuk memberi nama (selector) pada script agar dapat diatur kemudian dengan CSS
dengan dipadukan pada script asli search engine google (pada MP saya) :
<form style="color: rgb(255, 255, 255);" action="http://www.google.com/search" method="get"><input value="UTF-8" name="ie" type="hidden"><input value="UTF-8" name="oe" type="hidden"><input maxlength="255" value="" name="q" size="22" type="text"><input value="http://mupengml.multiply.com/" name="domains" type="hidden"><input checked="checked" value="http://mupengml.multiply.com/" name="sitesearch" type="hidden"> <input value="Search" name="btnG" type="submit"></form>

script hasilnya seperti dibawah ini

<div id="searchmupengml"><form style="color: rgb(255, 255, 255);" action="http://www.google.com/search" method="get"><input value="UTF-8" name="ie" type="hidden"><input value="UTF-8" name="oe" type="hidden"><input maxlength="255" value="" name="q" size="22" type="text"><input value="http://mupengml.multiply.com/" name="domains" type="hidden"><input checked="checked" value="http://mupengml.multiply.com/" name="sitesearch" type="hidden"> <input value="Search" name="btnG" type="submit"></form></div>


paste-kan script pada page tittle (bukan pada "edit CSS") dan
mulai edit css anda
saya menggunakan script dibawah ini untuk mengatur posisi search engine saya agar dapat "duduk" diatas flash banner (baru tahu, ternyata bisa!)

#searchmupengml {
width: 255px;
height: 22px;
position: absolute;
margin-left: 500px;
margin-top: 235px;
}

hasilnya bisa dilihat pada MP saya
http://mupengml.multiply.com

nb: ganti script yg saya warnai kuning-terang dengan nama selector anda dan gantikan link MP yg saya cetak kuning-terang dengan link MP anda

thanks to Om Lilok & Zhekho-kun yg udah duluan posting tips pasang gugel search.

Trick Customize Textarea-Handle (Dimples)

Yang dimaksud dengan Customize Textarea Handle adalah memberikan gambar atau image lain pada Dimples, yaitu icon untuk resizing tinggi comment box reply.
Icon ini dapat kita ganti dengan gambar sesuai keinginan kita, dan besar kecilnya juga bisa kita atur sesuai dengan nilai yang kita inginkan.
Batasannya adalah estetika saja.
Maksudnya, kita tidak mungkin memasukkan gambar dengan dimensi 100px x 200px hanya untuk sebuah button / icon.
Berikut adalah screenshot dari box reply standart Multiply.



Masalah utama di sini adalah, Multiply hanya memberikan kesempatan tinggi sebesar 5px saja untuk icon dimples ini. Yaitu nilai yang sesuai dengan tinggi icon mereka. Dan celakanya, seting 5px ini dimasukkan lewat Style di HTML pada tag span :

<span class="textarea-handle" style="height: 5px;"/>

Hal inilah yang menyebabkan kita sedikit kesulit mencari kode CSS nya, dimana Multiply meletakkan seting untuk tinggi icon ini ?
Jika anda cari di CSS Multilpy, anda akan mendapati di 64.CSS ( site ) pada baris 1.182 dengan bunyi sbb.

.textarea-handle {
background:transparent url(http://images.multiply.com/common/misc/dimples2.gif) no-repeat scroll right top;
bottom: -8px;
cursor: n-resize;
display: block;
height: 5px;
position: absolute;
right: 5px;
width: 10%;
}
Dan di manakah pengaturan height nya ?
Jawabannya adalah seperti saya sampaikan beberapa baris di atas, yaitu diatur di HTML, dan bukan di CSS.
Langkah ini diambil oleh Multiply agar estetika penampilan icon Dimples tidak terlalu "norak", cukup dengan 5px saja.

Mari kita mulai.

Pertama, siapkan image yang sesuai dan telah pula ada alamat URL nya.
Berikutnya, masukkan block ID declaration di bawah ini

.td#cell_submit {
padding-top: 18px;
}
Penjelasan : Seting padding di atas untuk memberi kesempatan icon textarea-handle (dimples baru) dapat ditampung di antara box textarea (box tempat menuliskan reply) dan tombol submit.
Default adalah 8px. Ganti nilai 8px ke nilai lain sesuai tinggi icon baru dan juga agar dapat terlihat serasi.

Langkah berikutnya adalah menambahkan class textarea-handle yang berfungsi untuk memasukkan image kita serta mengatur lebar, tinggi dan posisi di bawah box reply.

.textarea-handle {
background:transparent url(http://img259.imageshack.us/img259/8334/arrowblade.gif) no-repeat scroll right top;
bottom: -45px;
display: block;
height: 62px !important;
position: absolute;
right: 5px;
width: 11%;
}
Class tersebuat akan menempatkan gambar yang diatur tingginya sebesar 62px pada posisi 45px di bawah box reply.
Ganti alamat gambar dengan alamat URL gambar anda.

Jika tidak ada halangan atau salah ketik, maka box reply akan tampak seperti gambar berikut ini.



Semoga bermanfaat.
Enjoy.

© 2009 Lilok. http://dangdutkoplo.multiply.com

Menambah Kata di antara UserID pada Reply Box

Tambahkan CSS:

/* User ID+ */
div.replyboxstamp a:before {
content:"Kata sebelum ";
}
div.replyboxstamp a:after {
content:" Kata sesudah";
}

Contoh:

Trick Pasang Link Iklan di Multiply tanpa Premium Account

Pasang link iklan atau link-link lainnya di halaman Multiply bagi user FREE account.
Jika anda adalah user multiply.com dengan status Premium Account, anda akan diberikan kesempatan untuk memasang link maupun embed-flash di rail dan iklan dari pihak ketiga atau partner penyelenggara iklan MP tidak akan muncul lagi di rail anda.
Bagi user free, tidak ada pilihan lain kecuali menerima apa adanya, termasuk terbitnya iklan di rail kita.

Pada kesempatan ini, saya tidak mengajak anda sekalian untuk menghilangkan iklan tersebut, karena iklan tersebut adalah salah satu sumberdaya MP agar bisa melangsungkan hajat hidupnya. Termasuk memberikan tempat bagi user FREE Account untuk exist di halaman sosial multiply.com ini.

Saya akan pasang link ini di tempat lain, dengan segala "keanehannya" yang bagi sebagian orang akan terlihat sedikit mengganggu.
Tips ini, akan lebih bermanfaat bagi anda penyelenggara online shop / toko online atau apapun sebutan untuk itu.

Dikarenakan site Dangdut Koplo bukan site komersial, maka sebagai contoh link yang akan saya pasang adalah link untuk menuju album lagu yang sudah ada di site DK.

Saya akan mencoba pasang link ini tidak di rail, karena akan mengganggu iklan MP.
Untuk site / page MP yang berbasis full-wide, seperti SKYLINE akan sedikit bermasalah.
Yang berkrmungkinan untuk memasang link ini, adalah Theme yang mempunyai sisa space di kiri maupun kanan layar, yaitu space antara batas kiri maupun kanan layar dengan perbatasan bodywrap.
Sebagai contoh, link akan saya pasang di site DK yang berbasis AVLACK.

Kita mulai.

• Siapkan image untuk dipakai sebagai link-button, dan image ini bisa berbentuk dan berformat apa saja, mulai PNG (tanpa kompresi), JPG (dengan kompresi maupun tanpa kompresi) hingga GIF (animasi).
• Siapkan alamat link nya, yang bisa berasal dari dalam MP maupun dari luar MP
• Siapkan segelas kopi, karena akan sedikit lama mengetikkannya.

Kita akan membuat ID dan Class untuk mengatur semua ini.
Tambahkan ID dan Class declaration berikut ini pada akhir custom CSS anda.

.customadlink img {
border: medium none;
margin: 2px 5px;
width: 60px;
height: 60px;
}
#customadleft {
display: block;
width: 70px;
left: 0pt;
top: 0pt;
position: fixed;
}
#customadright {
display: block;
width: 70px;
right: 0pt;
top: 0pt;
position: fixed;
}

Jika saya ingin link ini tampil di semua page item, maka kode berikut ini akan saya isikan ke dalam Page Title. Tetapi jika saya hanya ingin tampil di hompage saja, maka saya akan mengisikannya di Welcome Box. Dan jika saya hanya ingin menampilkannya di item tertentu, kode berikut ini akan saya paste ke Description Item tertentu tersebut.
Dan jika akan ditampilkan di Blog / Journal, pastikan saat paste contreng :

Edit HTML

<div id="customadleft">
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/868"><img src="http://img300.imageshack.us/img300/734/mawarbiru.jpg" alt="DangdutKoplo Mawar Biru"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/864"><img src="http://img141.imageshack.us/img141/3898/tanjungmas.jpg" alt="DangdutKoplo Tanjung Mas"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/862"><img src="http://img259.imageshack.us/img259/1053/luntur.jpg" alt="DangdutKoplo Luntur"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/860"><img src="http://img301.imageshack.us/img301/6196/kesepian.jpg" alt="DangdutKoplo Kesepian"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/858"><img src="http://img223.imageshack.us/img223/5821/rekasaningurip.jpg" alt="DangdutKoplo Pacobaning Urip"></a>
</div>
<div id="customadright">
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/846"><img src="http://img4.imageshack.us/img4/6601/bimbang.jpg" alt="DangdutKoplo Bimbang"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/844"><img src="http://img10.imageshack.us/img10/1593/tujuhsumur.jpg" alt="DangdutKoplo Tujuh Sumur"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/838"><img src="http://img297.imageshack.us/img297/4207/sumpahbenang.jpg" alt="DangdutKoplo Sumpah Benang Emas"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/836"><img src="http://img11.imageshack.us/img11/7149/bulandiranting.jpg" alt="DangdutKoplo Ranting Cemara"></a>
<a class="customadlink" href="http://dangdutkoplo.multiply.com/music/item/834"><img src="http://img6.imageshack.us/img6/1061/perih.jpg" alt="DangdutKoplo Perih"></a>
</div>

ID customadleft akan mengatur tampilan di kiri layar, dan customadright akan mengatur tampilan link di kanan layar.
Khusus sebelah kanan, harap berhati-hati jangan sampai menutupi rail.
http://dangdutkoplo.multiply.com/music/item/868 adalah alamat yang dituju apabila image yang berada di http://img4.imageshack.us/img4/6601/bimbang.jpg di klik pengguna.
Sesuaikan alamat referensi href= dan alamat gambar src= sesuai dengan link anda.

Anda dapat mencobanya :

Semoga bermanfaat.
Enjoy.

© 2009 Lilok Dangdut-Koplo.-