Sabtu, 24 Agustus 2013

Merubah Warna, Ukuran, Background Awesome Font - THEMASDOYOK.COM

Merubah Warna, Ukuran, Background Awesome Font - THEMASDOYOK.COM

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:
<i class="icon-facebook"></i>

Nah, kita bisa menambahkan CSS custom dengan selector .icon-facebook
Contoh kodenya adalah: - Di tambahkan di atas ]]></b:skin>

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:
<i class="icon-facebook"></i>

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:
<i class="icon-facebook"></i>  <i class="icon-facebook icon-large"></i>  <i class="icon-facebook icon-2x"></i>  <i class="icon-facebook icon-3x"></i>  <i class="icon-facebook icon-4x"></i>
 
Berurutan semakin ke bawah, semakin besar. Yang berwarna merah adalah kode yang ditambahkan untuk menyatakan ukuran.

Pull Icon/Floating
Untuk membuat ikon mepet ke kiri elemen, atau ke kanan elemen. Gunakan kode:
<i class="icon-facebook icon-4x pull-left"></i>
Yang akan tampil adalah ikon super besar dan mepet ke kiri elemen.

<i class="icon-facebook icon-2x pull-right"></i>
Yang akan tampil adalah ikon berukuran medium dan mepet ke kanan elemen.

Penambahan Garis Tepi / Border
Ikon ini juga bisa diberi garis tepi. Kodenya:
<i class="icon-facebook icon-border"></i>

Cara Memutar Icon
Ikon ini juga bisa diputar 90, 180 atau 270 derajat. Kodenya:
<i class="icon-facebook icon-rotate-90"></i>
<i class="icon-facebook icon-rotate-180"></i>
<i class="icon-facebook icon-rotate-270"></i> 

Flip Horizontal/Vertikal
Fungsi ini membuat ikon terbalik secara horizontal ataupun vertikal. Kodenya:
<i class="icon-facebook icon-flip-horizontal"></i>
<i class="icon-facebook icon-flip-vertical"></i>

Ikon Bergerak Memutar
Ikon juga bisa digerakkan memutar. Kodenya:
<i class="icon-facebook icon-spinr"></i>

Information: Cara Menggunakan Awesome Font - Twitter Bootstrap

Modifikasi Scroll Dengan CSS

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
*lebih baik scriptnya di host sendiri, biar lebih cepet, juga untuk jaga-jaga kalau suatu saat link script di atas dihapus Jools, kalau sudah di host sendiri kan aman.
*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
posted from di Tidak ada komentar:
Langganan: Postingan (Atom)