^ WoNg 3 CONNECTION ^: June 2012

Friday, June 29, 2012

Simple jQuery Tooltip

Menggunakan tooltip disamping berguna untuk membuat tips dalam blog bisa diatur agar terlihat lebih maksimal, di sisi yang lain bermanfaat untuk membuat blog lebih keren serta terlihat profesional. Anda dapat menggunakan tooltip sederhana yang hanya menampilkan teks hingga yang lebih kompleks dengan kemampuan menampilkan teks, URL dan image. Tentu saja azas manfaat harus diperhitungkan. Menggunakan tooltip dengan kode css atau javascript terlalu berlebihan tentu tak akan tak ada untungnya jika penggunaanya tidak maksimal. Ya..., karena semakin banyak javascript atau kode lain digunakan maka beban loading juga akan terus bertambah.

Setelah memperbandingkan dan mempertimbangkan, membuat tooltip dengan jQuery adalah pilihan terbaik yang mungkin dilakukan. Melalui jQuery berbagai desain menarik lainnya (selain tooltip) dapat dengan mudah dibuat tanpa perlu kode atau script tambahan yang berderet-deret dengan beban yang berkilo-kilo. ya..., ini adalah satu nilai lebih jQuery yang hingga detik ini belum mampu ditandingi oleh javascript manapun.

Cara membuat Simple jQuery Tooltip

1.Login ke Blogger
2.Beberapa saat setelah login anda akan menjumpai Halaman Dasbor (Dasboard)
3.Pilih dan klik Rancangan (Design).
4.Pilih dan klik Edit HTML.
5.Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template), simpan file template di folder PC. Jika terjadi kerusakan tempate akibat beberapa penambahan atau pengurangan kode, gunakan Browse dan Upload yang ada didekatnya, maka template (blog) akan pulih kembali seperti sebelum perubahan dilakukan.
6.Cari kode

(gunakan Ctrl + F). Latakkan kode CSS di atasnya.
7.Cari kode
kemudian letakkan javascript di bawahnya.
8.Klik Simpan Template (Save Template).
Gunakan class="GRtipz" pada tag a untuk menampilkan tooltip. Lihat contohnya pada box xHTML.

JAVASRIP

XHTML

Catatan/Keterangan:

Untuk merubah ukuran font dan tebal font, lakukan perubahan nilai pada font-size:13px; dan font-weight:600;.
Nilai font-size: 10px, 11px, 12px, 13px atau 14px;
Nilai font-weight: normal, bold, bolder, 400, 500, 600, 700 atau 900
Anda ingin cara yang lebih praktis dan tinggal pasang? Kode yang sudah terupload di file hosting? Jika ini yang anda mau, silahkan gunakan yang ini!

CONTOH
^ WoNg 3 CONNECTION ^

Dengan javascript di atas, anda tak perlu lagi menggunakan kode CSS. Langsung saja tulis xHTML anda agar tooltip segera terlihat!
Jika dalam blog anda sudah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js maka anda tak perlu lagi menambah jQuery yang sama dari tutorial ini!

Flux Slider Css3 Dan Jquery Buat Blog

Flux slider adalah slider gabungan dari CSS3 Dan Jquery ini slider keren banget menurut saya karena efeknya itu beuh keren banget memang kalau Css3 dan Jquery bertemu semua jadi Luar binasa hahahaha ada Efek 3D nya juga loh slider Flux ini keren dah pokoknya tapi kalau browser anda tidak support Css3 maka akan ada teks peringatan bahwa browser anda tidak support css3.

1. Masukan script di bawah ini di atas kode </head>

2. Masukan css di bawah ini di atas kode </b:skin>

#slider {

padding:5px;

margin: 0 auto 15px;

}

#slider > .fluxslider {

margin: 0 auto !important;

border: 3px solid #999;

background: #C9C9C9;

padding: 0 0 10px 0;

max-width: 99% !important;

overflow: hidden

}

#slider .pagination {

list-style:none outside none;

padding:5px !important;

}

#slider .pagination li.current {

background-color: dimGray

}

#slider .pagination li {

cursor: pointer;

display: inline-block;

margin-left: 0;

background-color: silver;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

height: 8px;

text-indent: -10000px;

width: 8px;

-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);

-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31)

}

#transitions {

overflow:hidden;

}

#transitions ul {

float:left;

list-style:none outside none;

padding:0;

width:33%;

}

#transitions ul#trans2D {

text-align:right;

}

#transitions ul li {

margin:0 10px;

}

/* Css Teks Warning jika browser anda tidak support css3*/

#warn {

font-weight:bold;

text-align:center;

}

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

</div>

CATATAN
Jika anda ingin menambahkan gambar usahakan gambarnya itu semuanya berukuran sama misalnya 400 x 200 Maka semua gambar harus berukuran seperti itu agar terlihat lebih rapi karena jika tidak maka slidernya akan terlihat berantakan, dan seperti yang saya bilang slider ini gabungan dari css3 dan jquery jadi jika slidernya diam yah berarti browser anda tidak support css3.

Cara Membuat Blockquote Dengan CSS3

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text shadow dan 3 (tiga) buah background image untuk background blockquote dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog sampeyan? Adakah manfaatnya?

Blockquote bukanlah "gadis yang jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag spesial yang sebenarnya amat pantas dipakai ini, ya? Oho ... atau barangkali tak begitu kenal dengan blockquote? Atau kalian merasa antipati terlebih dahulu? Ataukah sampeyan ketularan blogger lain yang jarang menggunakan blockquote? Heh... heh.... Coba rasakan betapa mudah dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting, lhoh! Sampeyan tak perlu membuat tag baru untuk melakukan itu. Cukup blockquote! Dan tampilannya? Hoooohoooo coba lihat saja yang ini!

Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!

Kode CSS

blockquote {
         padding: 10px;
         margin: 10px 0 10px 20px;
         background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */
         text-shadow: 1px 1px 1px #000;
         border: 1px ridge  #0099FF;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in; 
}
blockquote:hover {
         color: #eee;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);
}

Cara Menyimpan Kode CSS

Login : Login kee Blogger.
Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
Tuliskan "Password (Sandi)".
KLIK "Login".
Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
Design/Rancangan : Cari dan klik link Edit HTML.
Cari kode ]]>. Letakkan dan simpan semua kode CSS tepat di atasnya.
KLIK SAVE Templates/Simpan Template.
KLIK link Posting.
KLIK Entri Baru/New Entry.

Gunakan blockquote untuk melakukan posting. Sampeyan bisa menggunakan contoh di bawah ini.

Buka hasil posting di halaman blog untuk melihat hasilnya.

Contoh bentuk kode untuk posting

Silahkan di copy untuk percobaan!

test

bloquet

Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.

Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!

The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover.

In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.

Leding images

Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript

Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript

Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript
Kode HTML/CSS/Javascript

tooltip

This is a link This is GRinlinetips inline teks GRinlinetips ini diperlihatkan disebelah kanan nama-link yang kita gunakan (This is a link)!
Select All

^ WoNg 3 CONNECTION ^

Friday, June 29, 2012

Simple jQuery Tooltip

Wednesday, June 27, 2012

Flux Slider Css3 Dan Jquery Buat Blog

Cara Membuat Blockquote Dengan CSS3

test