Bismillah... pada kesempatan ini saya akan sedikit share tentang cara membuat label cloud dengan CSS Tri Angle.
Untuk membuat label cloud dengan sedikit gaya triangle ini pun cukup mudah dan gampang, sobat tinggal ikuti saja caranya di bawah ini..
Langkah pertama untuk membuat label cloud triangle yaitu :
Login Ke Blogger
Terus Soabat masuk ke Template Blogger
Teus klik Edit HTML
Setelah itu sobat cari kode ]]></b:skin>
Jika sudah ketemu terus sobat copi kode di bawah ini dan letakan di atas kode ]]></b:skin>.
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Tuesday, 12 March 2013
Cara Membuat According Dengan CSS dan JQuery
Bismillah.... di hari yang cerah ini semoga sobat masih semangat dalam dunia blog dan masih ingin berkreasi di dunia online via blog baik menggunakan CMS Blogger ataupun CMS WordPress atau CMS yang lainnya. pada postingan ini saya akan sedikit share cara membuat according dengan menggunakan CSS dan JavaScript JQuery.
Untuk membuat according sekarang ini tidak terlalu sulit karena sobat tinggal contek aja kode kodenya dari blog/web orang lain dan sobat tinggal terapkan di blog kita, bukan ngajarin yang tidak benar tapi daripada kita tidak berkreasi dan tidak bergerak sama sekali he he,mendingan kita ngembangin yang sudah ada, karena untuk berkreasi itu emang cukup sulit dan diperlukan skil yang tinggi.
Oke daripada bicara kesana kemari, mendingan kita langsung ke cara membuat Menu According, untuk membuat menu ini yang diperlukan adalah
JavaScript Jquery silahkan sobat kunjungi situs Jquery nya di alamat http://jquery.com/
CSS untuk mendesain tampilan Menu According
Terakhir adalah Script HTML
Untuk membuat according sekarang ini tidak terlalu sulit karena sobat tinggal contek aja kode kodenya dari blog/web orang lain dan sobat tinggal terapkan di blog kita, bukan ngajarin yang tidak benar tapi daripada kita tidak berkreasi dan tidak bergerak sama sekali he he,mendingan kita ngembangin yang sudah ada, karena untuk berkreasi itu emang cukup sulit dan diperlukan skil yang tinggi.
Oke daripada bicara kesana kemari, mendingan kita langsung ke cara membuat Menu According, untuk membuat menu ini yang diperlukan adalah
JavaScript Jquery silahkan sobat kunjungi situs Jquery nya di alamat http://jquery.com/
CSS untuk mendesain tampilan Menu According
Terakhir adalah Script HTML
Membuat Diamond Dengan CSS3
Bismillahirrahmanirrahim...semakin hari perkembangan CSS kini semakin bagus dan mantap,pada kesempatan ini saya akan share cara membuat diamond dengan CSS3.
Untuk membuat bentuk diamond dengan CSS3 sangatlah mudah karna sudah banyak sekali contoh contohnya di internet, tapi jika sobat tidak suka googling dan mencari di dunia maya mending tinggal copy paste saja codenya di bawah ini.
Jika blog sobat ingin kelihatan keren dan bagus solahkan sobat kembangkan oleh sobat disini saya cuma akan memberikan sedikit gambaran membuat bentuk Diamond dengan CSS3.
Oke deh daripada basa basi kesana kemari mending langsung saja Copy Vaste kode CSS nya di bawah ini.
KODE CSS3 Untuk bentuk Diamond
#diamond {
width: 80px;
height: 80px;
background: red;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Kode CSS3 diatas akan menghasilkan bentuk diamond seperti di bawah ini, untuk merubah warnanya, silahkan sobat ganti kode background: red; dengan selera sobat.

Diamond Dengan CSS3
Untuk penerapannya sobat tinggal pakai di tag div atau span untuk contoh diatas saya menggunakan tag div
Kode Diamond CSS3
<div class="diamond" id="diamond"></div>
Oke deh sampai disini dulu postingan tentang CSS3 Diamond Semoga bermanfaat, Good Luck happy Blogging
Untuk membuat bentuk diamond dengan CSS3 sangatlah mudah karna sudah banyak sekali contoh contohnya di internet, tapi jika sobat tidak suka googling dan mencari di dunia maya mending tinggal copy paste saja codenya di bawah ini.
Jika blog sobat ingin kelihatan keren dan bagus solahkan sobat kembangkan oleh sobat disini saya cuma akan memberikan sedikit gambaran membuat bentuk Diamond dengan CSS3.
Oke deh daripada basa basi kesana kemari mending langsung saja Copy Vaste kode CSS nya di bawah ini.
KODE CSS3 Untuk bentuk Diamond
#diamond {
width: 80px;
height: 80px;
background: red;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Kode CSS3 diatas akan menghasilkan bentuk diamond seperti di bawah ini, untuk merubah warnanya, silahkan sobat ganti kode background: red; dengan selera sobat.
Diamond Dengan CSS3
Untuk penerapannya sobat tinggal pakai di tag div atau span untuk contoh diatas saya menggunakan tag div
Kode Diamond CSS3
<div class="diamond" id="diamond"></div>
Oke deh sampai disini dulu postingan tentang CSS3 Diamond Semoga bermanfaat, Good Luck happy Blogging
Beberapa Situs Penyedia CSS3 Generator
Biasanya untuk membuat tampilan website/blog yang bagus diperlukan kemahiran atau pemahaman kode-kode CSS, misalkan kita akan membuat rouded couner, CSS Animasi, atau yang lainnya, setidaknya kita mengusai bahasa CSS (Cascading Style Sheets) tapi untuk sekarang tidak perlu repot-repot karna sudah banyak sekali penyedia CSS Generator, oke sekarang kita langsung saja yuk.
CSS Portal, CSS Portal adalah sebuah situs yang menyediakan CSS Generator Online dari mulai Button Maker, Layout Generator, CSS Menu Generator,CSS Sprite Generator,Rounded Corners,CSS Bok Shadow dan yang lainnya untuk screen shotnya seperti di bawah ini jika ingin menggunakannya silahkan sobat kunjungi situsnya di alamat http://www.cssportal.com/
![]() |
| CSS Portal Generator |
Profesional CSS Menu, yaitu situs specialis CSS Menu, jika sobat ingin mempercantik tampilan menu di blog,sobat tinggal kunjungi saja websitenya, disana di sediakan beberapa menu CSS, Diantarnya CSS Menu Drop Down, CSS Menu Horizontal, CSS Menu Vertikal, CSS Tab Menu,CSS Flay Out Menu, langsung saja untuk mengunjungi alamatnya tinggal copy alamat ini (http://cssmenumaker.com/) dan masukan di Addres bar dan membuat menu untuk blog/website
![]() |
| Profesional CSS Menu |
CSS Frame Generator, yang ini yaitu untuk membuat Frame di website screen shotny seperti di bawah ini, alamatnya di http://lab.xms.pl/css-generator/
![]() |
| CSS Frame Generator |
CSS Little Box, yiatu situs Generator CSS Box, alamatnya di http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html, sobat tinggal pilih jenis box yang akan kan di buat , disana ada beberapa pilihan One Box,Touching,Theere Box dan yang lainnya. tampilan websitenya seperti di bawah ini
![]() |
| CSS Little Box |
CSS3 Generator, yang ini untuk CSS3 Generator dari mulai Font,Border Radiusm Rounded Corners,Box Resize,Text Shadow,CSS Gradien, CSS Transition dan yang lainnya. Untuk alamatnya http://css3generator.com/, tampilannya seperti di bawah ini.
![]() |
| CSS3 Generator |
Ultimate CSS Gradient Generator, yaitu Generator untuk gradien, warna warnya juga cukup bagus dan warnanya hampir mirip dengan warna yang terdapat dalam Adobe Photoshop, untuk alamatnya di http://www.colorzilla.com/gradient-editor/
![]() |
| Ultimate CSS Gradient Generator |
CSS Ribbon Generator, yaitu generator untuk membuat ribbon, ribbon itu gambar nya seperti pita lah..hehe, lihat aja screen shotnya alamatnya di http://www.css3d.net/ribbon-generator/, Tampilannya websitenya seperti dibawah ini.
![]() |
| CSS Ribbon Generator |
3D Text CSS Generator, yaitu untuk membuat bentuk text yang berbentuk 3D, alamatnya http://www.3dcsstext.com/.
![]() |
| 3D Text CSS Generator |
Sebenarnya masih banyak lagi situs situs yang menyediakan CSS Generator Online, silahkan sobat cari sendiri di Search Engine, oke deh saya cukupkan postingan tetang CSS3 nya semoga bermanfaat, Akhir kata dari saya Good Luck Happy Blogging.
Subscribe to:
Posts (Atom)







