Merubah Warna, Ukuran, Background Awesome Font - THEMASDOYOK.COM |
- Merubah Warna, Ukuran, Background Awesome Font
- Daftar Awesome Icon Untuk Blog
- Menggunakan Awesome Font di Blogspot
- Modifikasi Scroll Dengan CSS
- Host Javascript dan CSS di Google Drive
| Merubah Warna, Ukuran, Background Awesome Font Posted: 23 Aug 2013 07:09 PM PDT Custom Awesome Font - Hari ini sepertinya mau posting banyak-banyak. Seperti kita tahu semua, untuk membuat icon sekarang tidak perlu susah payah dengan image, kita bisa memanfaatkan awesome font / awesome icon. (Baca: Menggunakan Awesome Icon di Blogspot). Nah, disana sudah dibahas coding standart untuk menentukan ukuran icon, memutar icon, flip icon dan lain-lain. Tapi sebenarnya kita bisa menambahkan kode CSS Custom untuk mengatur awesome ikon sesuai keinginan kita. Misalkan kita mencoba mengubah awesome icon Facebook, yang kodenya: Nah, kita bisa menambahkan CSS custom dengan selector .icon-facebook Contoh kodenya adalah: - Di tambahkan di atas ]]></b:skin> .icon-facebook { background: #FF0000; border-radius: 100px; color: #FFFFFF; font-size: 25px; padding: 2px 10px; } *background untuk menentukan warna latar *border-radius untuk membuat background berbentuk lingkaran. Effectnya icon berada di atas lingkaran. *color untuk menentukan warna awesome icon *font-size untuk menentukan ukuran awesome icon *padding untuk menentukan jarak awesome icon dari tepi background Kita juga bisa menambahkan CSS Custom agar tampilan icon berubah saat disorot mouse. Kita menggunakan selector .icon-facebook:hover Contoh kodenya adalah: .icon-facebook:hover { background: #000; font-size: 40px; } *maka ketika disorot otomatis background awesome icon akan berubah menjadi hitam. Bisa juga ditambahkan css-css yang lain, seperti text-shadow. Contoh hasilnya seperti berikut ini, coba disorot: |
| Daftar Awesome Icon Untuk Blog Posted: 23 Aug 2013 06:23 PM PDT Daftar Lengkap Awesome Icon - Sebelumnya saya sudah posting tentang pemasangan awesome ikon di blog (baca: Menggunakan Awesome Icon di Blog). Nah, berikut ini daftar lengkap kode-kode ikon yang bisa Anda pakai: Web Application Icons icon-file icon-thumbs-up icon-thumbs-down icon-adjust icon-anchor icon-asterisk icon-ban-circle icon-bar-chart icon-barcode icon-beaker icon-beer icon-bell icon-bell-alt icon-bolt icon-book icon-bookmark icon-bookmark-empty icon-briefcase icon-building icon-bullhorn icon-bullseye icon-calendar icon-calendar-empty icon-camera icon-camera-retro icon-certificate icon-check icon-check-empty icon-check-minus icon-check-sign icon-circle icon-circle-blank icon-cloud icon-cloud-download icon-cloud-upload icon-code icon-code-fork icon-coffee icon-cog icon-cogs icon-collapse-alt icon-comment icon-comment-alt icon-comments icon-comments-alt icon-credit-card icon-crop icon-dashboard icon-desktop icon-download icon-download-alt icon-edit icon-edit-sign icon-ellipsis-horizontal icon-ellipsis-vertical icon-envelope icon-envelope-alt icon-eraser icon-exchange icon-exclamation icon-exclamation-sign icon-expand-alt icon-external-link icon-external-link-sign icon-eye-close icon-eye-open icon-facetime-video icon-fighter-jet icon-film icon-filter icon-fire icon-fire-extinguisher icon-flag icon-flag-alt icon-flag-checkered icon-folder-close icon-folder-close-alt icon-folder-open icon-folder-open-alt icon-food icon-frown icon-gamepad icon-gift icon-glass icon-globe icon-group icon-hdd icon-headphones icon-heart icon-heart-empty icon-home icon-inbox icon-info icon-info-sign icon-key icon-keyboard icon-laptop icon-leaf icon-legal icon-lemon icon-level-down icon-level-up icon-lightbulb icon-location-arrow icon-lock icon-magic icon-magnet icon-mail-forward icon-mail-reply icon-mail-reply-all icon-map-marker icon-meh icon-microphone icon-microphone-off icon-minus icon-minus-sign icon-minus-sign-alt icon-mobile-phone icon-money icon-move icon-music icon-off icon-ok icon-ok-circle icon-ok-sign icon-pencil icon-phone icon-phone-sign icon-picture icon-plane icon-plus icon-plus-sign icon-plus-sign-alt icon-print icon-pushpin icon-puzzle-piece icon-qrcode icon-question icon-question-sign icon-quote-left icon-quote-right icon-random icon-refresh icon-remove icon-remove-circle icon-remove-sign icon-reorder icon-reply icon-reply-all icon-resize-horizontal icon-resize-vertical icon-retweet icon-road icon-rocket icon-rss icon-rss-sign icon-screenshot icon-search icon-share icon-share-alt icon-share-sign icon-shield icon-shopping-cart icon-sign-blank icon-signal icon-signin icon-signout icon-sitemap icon-smile icon-sort icon-sort-down icon-sort-up icon-spinner icon-star icon-star-empty icon-star-half icon-star-half-empty icon-star-half-full icon-subscript icon-suitcase icon-superscript icon-tablet icon-tag icon-tags icon-tasks icon-terminal icon-thumbs-down icon-thumbs-up icon-ticket icon-time icon-tint icon-trash icon-trophy icon-truck icon-umbrella icon-unlock icon-unlock-alt icon-upload icon-upload-alt icon-user icon-volume-down icon-volume-off icon-volume-up icon-warning-sign icon-wrench icon-zoom-in icon-zoom-out Text Editor Icons icon-align-center icon-align-justify icon-align-left icon-align-right icon-bold icon-columns icon-copy icon-cut icon-eraser icon-file icon-file-alt icon-file-text icon-file-text-alt icon-font icon-indent-left icon-indent-right icon-italic icon-link icon-list icon-list-alt icon-list-ol icon-list-ul icon-paper-clip icon-paperclip icon-paste icon-repeat icon-rotate-left icon-rotate-right icon-save icon-strikethrough icon-table icon-text-height icon-text-width icon-th icon-th-large icon-th-list icon-underline icon-undo icon-unlink Directional Icons icon-angle-down icon-angle-left icon-angle-right icon-angle-up icon-arrow-down icon-arrow-left icon-arrow-right icon-arrow-up icon-caret-down icon-caret-left icon-caret-right icon-caret-up icon-chevron-down icon-chevron-left icon-chevron-right icon-chevron-sign-down icon-chevron-sign-left icon-chevron-sign-right icon-chevron-sign-up icon-chevron-up icon-circle-arrow-down icon-circle-arrow-left icon-circle-arrow-right icon-circle-arrow-up icon-double-angle-down icon-double-angle-left icon-double-angle-right icon-double-angle-up icon-hand-down icon-hand-left icon-hand-right icon-hand-up Video Player Icons icon-backward icon-eject icon-fast-backward icon-fast-forward icon-forward icon-fullscreen icon-pause icon-play icon-play-circle icon-play-sign icon-resize-full icon-resize-small icon-step-backward icon-step-forward icon-stop Brand Icons icon-css3 icon-facebook icon-facebook-sign icon-github icon-github-sign icon-google-plus icon-google-plus-sign icon-html5 icon-linkedin icon-linkedin-sign icon-maxcdn icon-pinterest icon-pinterest-sign icon-twitter icon-twitter-sign Medical Icons icon-ambulance icon-h-sign icon-hospital icon-medkit icon-plus-sign-alt icon-stethoscope icon-user-md |
| Menggunakan Awesome Font di Blogspot Posted: 23 Aug 2013 06:18 PM PDT Cara menggunakan Awesome Font di Blogspot - Perkembangan Bootstrap mulai menarik diikuti (selama ini ane kemana aje? baru post hahaha < blogger ketinggalan jaman). Nah, karena banyaknya minat pembaca mengenai tema ini, maka di blog ini akan di bahas tentang bootstrap secara serial. Ya, kita belajar bareng lah sambil lihat perkembangannya. Untuk hal yang paling sederhana dulu, bagi temen-temen yang pengen menggunakan awesome font di blog. Apa Itu Awesome Font? Jika kalian sering twitteran maka kalian tidak akan asing dengan font ikonik ini. Font-font ini terdiri dari berbagai macam icon atau logo termasuk situs terkenal seperti facebook, google atau twitter. Dengan kata lain, jika biasanya saat menambahkan ikon di blog kita menggunakan image, maka sekarang kita bisa memanfaatkan awesome ikon ini. Loadingnya jadi lebih cepet. Pemasangan Script Tambahkan script berikut ini di atas </head> <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> Untuk membuat icon Facebook kodenya seperti berikut: Ganti yang berwarna merah sesuai kebutuhan. Untuk membuat icon-icon yang lain, bisa dilihat list lengkapnya di: Daftar Lengkap Awesome Icon Untuk Blogspot Ukuran Ikon Ukutan ikon juga bisa disesuaikan, menggunakan kode:
Pull Icon/Floating Untuk membuat ikon mepet ke kiri elemen, atau ke kanan elemen. Gunakan kode: Yang akan tampil adalah ikon super besar dan mepet ke kiri elemen. Yang akan tampil adalah ikon berukuran medium dan mepet ke kanan elemen. Penambahan Garis Tepi / Border Ikon ini juga bisa diberi garis tepi. Kodenya:
Cara Memutar Icon Ikon ini juga bisa diputar 90, 180 atau 270 derajat. Kodenya:
Flip Horizontal/Vertikal Fungsi ini membuat ikon terbalik secara horizontal ataupun vertikal. Kodenya:
Ikon Bergerak Memutar Ikon juga bisa digerakkan memutar. Kodenya:
Information: Cara Menggunakan Awesome Font - Twitter Bootstrap |
| Posted: 23 Aug 2013 06:53 AM PDT Custom Scroll Yang Dapat Dimodifikasi Dengan CSS - Seringkali gadget kita terlalu panjag sehingga menghabiskan area pada blog. Kita bisa mengakalinya dengan menambahkan scroll untuk gadget yang terlalu panjang (baca: Konsultasi Blog Tentang Scroll). Tapi masalah lain muncul karena kita semua tahu, desain scroll default jelek banget. Iya gak sih? Padahal tidak semua browser support modifikasi CSS scroll  scroll default  scroll custom, bisa di modifikasi sesuai selera Nah, jangan khawatir karena kemarin muter-muter forum Google dapat banyak referensi scroll dengan javascript ataupun jquery yang maknyus dan lancar di semua browser. Tapi dari sekian banyak pilihan, scroll dari Jools yang paling mudah instalasinya. Tambahkan Script berikut di atas </head> <script src="http://www.jools.net/javascripts/prototype.js" type="text/javascript"></script> <script src="http://www.jools.net/javascripts/slider.js" type="text/javascript"></script> <script src="http://www.jools.net/javascripts/scroller.js" type="text/javascript"></script>  Muhammad Hidayatullah Founder THEMASDOYOK.COM Scroll ini bisa dimodifikasi CSS-nya, jadi bisa sesuai selera  Aru Martino Founder ARUMARTINO.COM Desainnya keren, simple, sederhana & lebih fresh menurutku  Rakhmad Syahfizan Founder ANEKAREMAJA.COM Keren mas, bagusnya widgetnya di letakan di kanan soalnya megang mouse kan di kanan *referensi: - Host Javascript/CSS di Google Drive - Membuat Javascript Milik Anda Pribadi Tambahkan CSS berikut di atas ]]></b:skin> .scroll-track{ height:10px; width:10px; background:black; } .scroll-handle{ border: 1px solid black; height:10px; width:10px; background:#5B207B; cursor:pointer; } *scroll-track adalah jalur scrollnya sedangkan scroll-handle adalah tombol dragablenya. Edit sesuai selera. Pemasangan Gadget Kemudian untuk gadget yang ingin diberi scroll silahkan gunakan kode berikut ini: <div style="height:165px; overflow:hidden" class="makeScroll"> Kode HTML Gadget/Tulisan </div> Silahkan mencoba ya, semoga bermanfaat blogger... Referensi: Jools - Custom Scroll Bar Item Review: Scroll CSS, Scroll Bisa Dimodifikasi Dengan CSS |
| Host Javascript dan CSS di Google Drive Posted: 22 Aug 2013 09:32 PM PDT Tab Download di Google Code Hilang - Google kembali melakukan perubahan yang cukup merepotkan. Perubahan ini sebenarnya sudah sejak lama, tapi baru sempet posting. Perubahan yang saya maksud adalah hilangnya tab download pada Google Code (baca: Hosting JavaScript di Google Code, Tak Terbatas) yang artinya kita tidak bisa lagi host file per file disana. Google sendiri merekomendasikan layanannya yang lain yakni Google Drive untuk tempat host javascript, CSS ataupun file-file lain. Google Drive ini terintegrasi dengan banyak sekali layanan baik dari Google sendiri maupun dari pihak ketiga. Bagaimana Cara Host JavaScript/CSS di Google Drive? 1. Login ke https://drive.google.com dengan akun gmail Anda. 2. Klik tombol Upload kemudian pilih Files  3. Pilih file yang akan diupload 4. Proses upload ada di pojok kanan bawah. Klik Share  5. Muncul kotak dialog. Pada who has access klik Change.  6. Pilih Public On The Web kemudian Save.  Bagaimana Menggunakannya di Blog?  Perhatikan pada step 4, setelah di klik tombol share, pada kotak dialog yang muncul akan muncul sebuah link, misalnya: https://docs.google.com/file/d/0B69aOIwUyEZmX0JHNGtiTWp1YjQ/edit?usp=sharing yang berwarna merah adalah kode unik yang akan digunakan. Kode unik dari Google drive selalu terletak seperti berikut ini: https://docs.google.com/file/d/[letakkodeunik]/edit?usp=sharing Untuk memasangnya di blog, silahkan gunakan script berikut ini: <script src='https://googledrive.com/host/kodeunik' type='text/javascript'/> *kodeunik isikan dengan kode seperti dijelaskan di atas. Sedikit tambah ribet. Namanya gratisan :D Artikel Rekomendasi Berjudul: Host Javascript dan CSS di Google Drive |
| You are subscribed to email updates from THEMASDOYOK | Majalah Blogger | Modifikasi dan Tips Blogspot To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Belum ada komentar untuk "Merubah Warna, Ukuran, Background Awesome Font - THEMASDOYOK.COM"
Post a Comment
Konversi KodeEmoticonFolllow