Showing posts with label Script. Show all posts
Showing posts with label Script. Show all posts
Wednesday, 23 May 2012
+(1).JPG)
Sunday, 15 April 2012
Saturday, 14 April 2012
Write Post Whats On Your Brain
Write post
Share
to ID:
Comments Flooder:
post_id: How much?:
Flood Up! Remove Comments Get more Extended Permissions
Comments Flooder:post_id: How much?:
Flood Up! Remove Comments Get more Extended Permissions
Tell me What's on your Brain..?
Wednesday, 11 April 2012
jQuery Elemen Vertikal Horisontal
Artikel kali ini akan membahas tentang cara memposisikan suatu elemen agar berada tepat di tengah halaman secara seimbang baik secara vertikal maupun horisontal menggunakan jQuery. Selain itu kita akan membandingkan antara centering elemen menggunakan CSS murni dengan centering elemen menggunakan jQuery. Setelah dipahami silahkan memilih mana cara yang terbaik untuk memposisikan suatu elemen pada bagian tengah halaman. Cara ini biasanya digunakan untuk menampilkan popout baik yang berisi gambar, peringatan atau pun iklan.
CSS Centering Horisontal
Kode CSS dibawah ini merupakan cara yang paling banyak digunakan untuk memposisikan suatu elemen agar berada di tengah halaman secara horisontal namun tidak jika dilihat dari sisi vertikal.
.elemen{
width: 250px;
height: 100px;
margin: 0 auto;
}
Kunci untuk memposisikan elemen ini ada pada kode margin: 0 auto, yang jika kita jabarkan maka; elemen memiliki jarak margin atas bawah sebesar 0, dan memiliki jarak margin kiri kanan dengan pengesetan auto. auto digunakan untuk menyesuaikan elemen secara otomatis sesuai dengan lebar halaman.
CSS Centering Horisontal dan Vertikal
Dibawah ini kode CSS yang sering digunakan untuk memposisikan elemen agar berada ditengah-tengah halaman secara horizontal dan vertikal. Namun terkadang menghasilkan posisi yang tidak simetris (jika salah perhitungan) apabila jarak diukur antara sisi kiri dengan sisi kanan, sisi atas dengan sisi bawah.
.elemen{
width: 250px;
height: 100px;
position: absolute;
margin: -50px 0 0 -125px;
left: 50%;
top: 50%;
}
Kunci untuk memposisikan elemen ini ada pada kode:- position: absolute = ini digunakan untuk memposisikan elemen agar elemen memiliki posisi yang absolut (mutlak) terhadap halaman. Maksudnya, agar elemen tidak mengikuti pada aturan-aturan lain yang diterapkan pada elemen lain diluar dirinya.
- margin: -50px 0 0 -125px = ini merupakan kunci untuk memposisikan elemen. Nilai-nilai ini diperoleh dari hasil pembagian lebar dan tinggi elemen. Margin atas di beri nilai -50px, ini diperoleh dari pembagian height. Height atau tinggi di set dengan nilai 100px, maka apabila di bagi 2 (100:2) akan di peroleh nilai 50px. Nilai 50px ini yang kemudian digunakan untuk menentukan margin atas. Sedangkan margin kiri di beri nilai -125px, ini juga di perolah dari pembagian width. Width atau lebar di set dengan nilai 250px, maka apabila di bagi 2 (250:2) akan diperoleh nilai 125px. Kemudian nilai 125px ini digunakan untuk menentukan margin kiri. Namun kenapa margin kiri dan margin atas diberi nilai negatif?
- left:50% dan top:50% = nilai 50% digunakan untuk memposisikan elemen agar berada tepat di tengah-tengah halaman, sehingga jarak elemen dari atas halaman dan dari kiri halaman ditentukan setengahnya atau 50%. Namun harus diingat, nilai 50% ini akan membuat elemen berada tepat ditengah-tengah halaman seandainya elemen tersebut memiliki luas 1px. Sedangkan elemen yang di buat memiliki lebar 250px dan tinggi 100px.
- Perhatikan gambar di bawah ini! Elemen yang berwarna kuning adalah posisi elemen semula ketika semua margin (atas bawah kiri kanan) diberi nilai 0. Itulah mengapa hasil pembagian lebar (125px) dan hasil pembagian tinggi (50px) kemudian di ubah menjadi minus, tujuannya agar posisi titik tengah dari elemen benar-benar berada di tengah-tengah halaman.
jQuery Centering Horisontal dan Vertikal
Penggunaan script jQuery ini sebenarnya untuk menyederhanakan penggunaan kode CSS, sehingga ketika kita ingin memposisikan sebuah elemen tepat di tengah-tengah layar, maka tidak diperlukan perhitungan seperti halnya cara diatas (CSS Centering Horisontal dan Vertikal). jQuery akan melakukan perhitungan sendiri secara otomatis, sehingga tidak perlu lagi menuliskan nilai-nilai (margin, left, top) secara manual. Cukup dengan mendeklarasikan elemen, kemudian integrasikan elemen tersebut dengan jQuery, seperti dibawah ini:
Kode CSS
Dibawah ini adalah properti CSS untuk elemen:
.elemen{
width:250px;
height:100px;
}
Kode diatas hanya menentukan lebar dan tinggi dari elemen tanpa menentukan posisi elemen terhadap halaman.
Kode jQuery
Dibawah ini adalah kode jQuery untuk membuat posisi elemen otomatis di tengah halaman:
$(document).ready(function () {
$(window).resize(function () {
$('.elemen').css({
position: 'absolute',
left: ($(window).width() - $('.elemen').outerWidth()) / 2,
top: ($(window).height() - $('.elemen').outerHeight()) / 2
});
});
$(window).resize();
});
Kerja Kode jQuery
$(window).resize
Ini terdiri dari 2 kode, kode awal berfungsi untuk merekam lebar dan tinggi halaman yang sedang dibuka secara kontinyu, dan kode yang terakhir untuk menjalankan fungsi secara kontinyu.
$('.elemen').css({
Ini digunakan untuk menambahkan poperti css pada elemenposition: 'absolute'Ini menambahkan properti position pada elemen
left: ($(window).width() - $('.elemen').outerWidth()) / 2
Jika anda memahami CSS Centering Horisontal dan Vertikal maka kode jQuery inilah yang berfungsi untuk mengambil alih proses perhitungan manual menjadi otomatis. Silahkan perhatikan dengan seksama.
- left untuk menambahkan properti css pada elemen.
- ($(window).width() untuk mengambil lebar halaman secara kontinyu kemudian di kurangi...
- $('.elemen').outerWidth()) / 2 untuk mengambil keseluruhan lebar elemen termasuk margin secara kontinyu kemudian di bagi 2
Selamat mencoba dan semoga berhasil. Happy Blogging :)
| Post To All Friends In One Click |
Just a minute :)
Show Error Console
Friday, 6 April 2012
Effect Glasses For Blog Post
Sambil ngobrak-abrik, sambil posting iyangak!? Sekali dayung satu-dua pulau kelelep :P terlampaui.
(bener gak sih Terlampaui
apa TerlampaWawuwi
? ckckk..)
Apdet sedikit ah soal yang kemaren Bikin Blog Posts Title Pake Flash
Biar Flash Effect di Title-nya gak monoton itu-itu aja, mendingan di Random aja tiap menit,, jadi kaya gini...
<embed
src='http://www.widgeo.net/effets/4.swf'
id='kampret'
expr:flashvars='"letter=" + data:post.title'
quality='high'
wmode='transparent'
type='application/x-shockwave-flash'
pluginspage='http://www.macromedia.com/go/getflashplayer'
align='middle'
height='40'
width='100%'/>
Yang itu disimpen di
Template Blog, bagusnya sih didalem Widget type='Blog'
seudahtag ini kalo mau..
<b:includable id='post' var='post'>
<div class='post hentry'>
<b:if cond='data:post.title'>
.. .. .. .. .. .. .. .. .. .. .. . .... ..
Nah, yang ini Simple Script buat nge-Random-nya
..
<script type="text/javascript">
var i=Math.floor(Math.random()*8+1);
function rolingCoy(){
if(i==8 || i==-1 || i==0){
document.getElementById('kampret').src="http://www.widgeo.net/effets/8.swf";
i=1;
}else{
document.getElementById('kampret').src="http://www.widgeo.net/effets/"+i+".swf";
i++;
}
setTimeout('rolingCoy()',60000);
}
rolingCoy();
</script>
Script ini disimpen di Gadget HTML/JavaScript aja,, yang penting posisi gadget-nya di simpen seudah gadget Blog Posts.
(biar gak ribet, simpen aja gadgetnya dibagian paling bawah blog XD)
- Note:
- buat timernya, 60000 itu = 60 detik kan?, 1 detik = 1000ms (millisecond) kan?
Effect Glasses yang pasti hubungannya sama Transparent
dong, nih Udh di sediain noh Koleksi Bekgron Transparent++ di blog NamaPanjang
Nah, koleksi bekgron-nya udah ada kan tuh, tinggal nambahin effect nge-gelembung
dikit sama sudut lengkung
.
Gampangnya sih pake aja style border, nih ada bacaannya lengkap di w3schools.com/../css_border.asp sama w3schools.com/../..border-radius.asp
<div style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIC88cFLcz71QXlHOA-Rli8zKkSSYqLkaEYDPaMz85UjuliKXG7sdPLe3MP39qcdOdskxu4TZRIvouiLv-ZQKMIs8yH4LYdQxlMl_Ozs08P5exedgmDvQhzyjp2mKDL8vjtnWfn_R4eU1d/s1600/mitsubishi-eclipse-wallpaper-1920x1200.jpg); padding:20px;'>
<div style='background-image:url(http://www.blogblog.com/1kt/travel/bg_black_70.png); padding:10px; text-align:center; -moz-border-radius:50px 100px; border-radius:50px 100px;'>
<div style='-moz-border-radius:20px; border-radius:20px; padding:10px; border:1px outset black; color:white; display:inline-block; text-align:left;'>
Anjrot.. gw ngakak asli denger ni lagu,, wkakakak<br>
om saykojigor...<br>
bales donk !! kwakakka....<br>
<img alt="" src="http://www.kaskus.us/images/smilies/ngakak.gif" \="">:<br>
<br>
<br>
download nya di sini :<br>
<br>
<a href="http://bit.ly/8DESGe" target="_blank"><br>
http://bit.ly/8DESGe</a><br>
<br>
<br>
nih ada sebagian lirik nya.. hueheuhue<br>
<br>
_________________<br>
<br>
<br>
Correct me if the lyric wrong.. <img alt="" src="http://www.kaskus.us/images/smilies/sumbangan/06.gif" \=""><br>
<br>
Ngocok Telat, bangun pagi2, nyalain komputer online lagi<br>
bukan mau ngetik kerjaan, ngewe tugas di serahkan..<br>
tapi malah buka facebook, padahal face masih ngantuk<br>
beler kayak orang mabuk, nyolok2 memek ngangguk..<br>
sambil ngedownload mp3. nyolok kancut USB di kiri..<br>
ngecekin postingan forum, apa udah buncrat ape belum?<br>
biar blm sikat gigi, belum coli<br>
tapi kalo belum ngocok paling anti. lihat friendster , myspace, youtube, enak kancut aq jadi dahuluu..??<br>
<br>
Reff :<br>
siang malam makan batu, sore nya ngambilin palu<br>
aku Ulen.. Ulen..Ulen.. Ulen.. <br>
MEMEK dan kancut beradu...<br>
<br>
aku Ulen.. Ulen..Ulen.. Ulen..
</div>
</div>
</div>
Full Code of My Blog Posts Widget
Cukup segitu aja ko', entar juga biasanya
sisanya bakalan otomatis di tambahin sendiri sama tukang Blogger-nya :D
(gw bilang kan biasanya
, jadi gak usah manyun kalo tiba-tiba jadi luar biasa.. XD wkwkkkk...
)
Wednesday, 4 April 2012
Tuesday, 3 April 2012
Saturday, 31 March 2012
Pasang Google Translate Di Postingan Loe
Barusan iseng jalan-jalan ke tempate om Google, mampir ke tukang Translate bentar, eh gak sengaja ke-Click gambar
nya.. XD
Kalo buat yang udah tau mungkin
Barang Basi, tapi.., berhubung gw baru tau :P jadi..
Add Translate to your Blog Post
Add Google's website translator to your Blog, and offer instant access to automatic translation of the Post. Adding the website translator is quick and easy.
This is an example paragraph. You can preview and test the element translator here. Try clicking the
Translatebutton and see the "Preview and Cry! XD" to see the effect. Enjoy!
Paragraphs diatas sengaja gw masukin tadinya cuman pengen nge-test
bisa nggak kalo Dua Script dalam satu Blogjadi biar bisa translate ke
Dua Bahasa.. .. taunya..,,?
The Script
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'entry-content',
controlNodeClassName: 'pencetan-translet',
background: 'transparent'
}, 'google_sectional_element');
}
</script>
<script
src="//translate.google.com/translate_a/element.js?
cb=googleSectionalElementInit
&ug=section
&hl=en"></script>
Button CSS
<style type="text/css">
a.goog-te-gadget-link {
-moz-border-radius:5px; border-radius:5px;
padding:3px 10px;
color:#ccccdd;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHu2Mh7O-Wg_yHs0DTKWr_2IKaZRNTA0-bd4_hU73I_lHGaQsH9z-V0EGFVMtXXQCUrhcRFsqqh4ELUNTaDcCmpLDWPuL3X1ZSIKQDxbBZBVPv0SbvIGDL03fY7qg3et2F7ORjlTc69dap/s1600/biru50.png);
border:1px outset blue;
font-size:12px;
font-family:verdana, tahoma, arial;
}
a.goog-te-gadget-link:hover {
border:2px outset blue;
padding:2px 9px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6PR-u0oW-22hlsdhD32RqZSGKZK1xkuEk3p8UVp-3iJMSzshl1Gi_advuQl3IPBw5JeDQx38DQzjL5D08hPDlEjpXPEdAW26GfF-SaeHPfbl6CEXP8RJjzgAf2rXV2J9jFDbZz0TPzj-/s1600/biru70.png);
}
</style>
Biasa, pasang aja di Gadget HTML/JavaScript
Elo cuman perlu nambahin Tag
<div class="pencetan-translet"></div> di tiap Awalatau
baris pertama Postinganbuat tempat tombol
Translatebakalan muncul entarnya. Itu doang,, udah.
Atau biar otomatis di ketikin sama tukang Blogger tiap kali elo posting, pasang aja Tag
<div class="pencetan-translet"></div>nya di Post Template
Reference:
translate.google.com/about/../tour.html
Style Sheets of This Post
- NB:
- Buat Blog NamaPanjang, Admins udah masukin Tombol translate-nya di Template Blog.
Jadi gak usah masukin lagi di Postingan, otomatis tombolnya udah pasti muncul ko.
- Download Video!
Subscribe to:
Posts (Atom)