Panduan Membuat Skills Bar Dengan jQuery dan CSS3

Di Panduan kali ini, Saya akan memberitahukan Cara Membuat Skills Bar dengan Animasi.

Fungsi skills bar ini adalah untuk memvisualkan hasil dari sebuah data sehingga terlihat lebih menarik.

Contoh penggunaannya:

  1. Menampilkan hasil Polling.
  2. Loading pada suatu aplikasi atau website.
  3. Proses Download pada Smartphone.

Penampilan Skills bar-nya seperti ini:

HTML5
65%
CSS3
85%
Photoshop
60%

Tertarik untuk membuatnya ?

Membuat Tab Responsive Hanya Dengan CSS dan HTML


Banyak blog yang membuat panduan tentang cara membuat Tab di blog.

Tapi, kebanyakan tidak responsive dan menggunakan Javascript atau jQuery yang memakan banyak kuota (ಥ﹏ಥ).

Anda beruntung karena bisa membaca panduan ini.

Karena di panduan ini, saya akan menjelaskan cara Membuat tab di blog yang Responsive dan tidak menggunakan Javascript maupun jQuery (Pure CSS).

Panduan membuat tab ini saya dapat saat sedang bermain di Codepen.io.

Disaat saya sedang mencari sesuatu yang 'menarik', saya menemukan karya milik Prakash.

Karena Saya rasa ini bisa membantu banyak blogger, akhirnya saya buat panduannya.

Di panduan ini saya tidak hanya memberikan code tab nya saja, tapi saya juga memberikan penjelasan di tiap codenya, agar pembaca bisa mengerti code yang digunakan, bukan hanya asal copy-paste saja.

Kesenangan dimulai Sekarang..

Pertama yang harus anda tahu, didalam panduan ini kita akan membuat 5 tab dengan 5 menu.

Ini markup untuk menunya:

<div class="tab_container">
<input checked="" id="tab1" name="tabs" type="radio" />
<label for="tab1">
<i class="fa fa-code"></i>Code</label>

<input id="tab2" name="tabs" type="radio" />
<label for="tab2">
<i class="fa fa-pencil-square-o"></i>About</label>

<input id="tab3" name="tabs" type="radio" />
<label for="tab3">
<i class="fa fa-bar-chart-o"></i>Services</label>

<input id="tab4" name="tabs" type="radio" />
<label for="tab4">
<i class="fa fa-folder-open-o"></i>Portfolio</label>

<input id="tab5" name="tabs" type="radio" />
<label for="tab5">
<i class="fa fa-envelope-o"></i>Contact</label>

Tab1, tab2, tab3, dan seterusnya adalah code untuk menyatakan setiap tab sesuai nomornya.

Kemudian, kita buat tab untuk kontennya.

<section class="tab-content" id="content1">
<h3>
Judul untuk Tab 1</h3>
Konten untuk tab 1.
Bisa disi dengan tulisan, gambar, video, iframe, dan yang lainnya.</section>

<section class="tab-content" id="content2">
<h3>
Headline 2</h3>
Sama seperti tab 1, tab 2 juga bisa disi dengan gambar, teks, video dan yang lainnya.</section>

<section class="tab-content" id="content3">
<h3>
Headline 3</h3>
Contoh untuk gambar:
<div class="separator" style="clear: both; text-align: center;">
<img src="http://3.bp.blogspot.com/-vxafcZlmlBo/Vq33Or-WMZI/AAAAAAAAAik/8DQFgkM5RPc/s1600/AXnael%2BCover%2BNew%2BVersion.png" /></div>
</section>

<section class="tab-content" id="content4">
<h3>
Headline 4</h3>
Butuh contoh untuk video ?
<iframe allowfullscreen="" data="" frameborder="0" height="315" src="https://www.youtube.com/embed/jlQVAlmXqoE" width="560"></iframe></section>

<section class="tab-content" id="content5">
<h3>
Headline 5</h3>
Baca Panduan membuat Tab seperti ini: <a href="https://axnael.blogspot.com">AXnael Blog</a>.</section>

Section adalah code untuk konten didalam tab.
H3 adalah code Judul didalam konten tab.
Tulisan atau teks didalam markup Section bisa diubah sesuka hati, sesuai kebutuhan.

Sekarang waktunya mendesain.

Masukkan CSS berikut ini:

<style>
/*Fun begins*/
.tab_container{width:90%;margin:0 auto;padding-top:70px;position:relative}
input,section{clear:both;padding-top:10px;display:none}
label{font-weight:700;font-size:18px;display:block;float:left;width:20%;padding:1.5em;color:#757575;cursor:pointer;text-decoration:none;text-align:center;background:#f5f5f5}
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4,#tab5:checked ~ #content5{display:block;padding:20px;background:#fff;color:#999;border-bottom:2px solid #f0f0f0}
.tab_container .tab-content p,.tab_container .tab-content h3{-webkit-animation:fadeInScale 0.7s ease-in-out;-moz-animation:fadeInScale 0.7s ease-in-out;animation:fadeInScale 0.7s ease-in-out}
.tab_container .tab-content h3{text-align:center}
.tab_container [id^="tab"]:checked + label{background:#fff;box-shadow:inset 0 3px #09C}
.tab_container [id^="tab"]:checked + label .fa{color:#09C}
label .fa{font-size:1.3em;margin:0 0.4em 0 0;display:inline-block;width:1.28571429em;height:auto;float:none;margin-left:-15px}
}
/*Media query*/
@media only screen and (max-width:900px){
  label span{display:none}
  .tab_container{width:98%}
}
/*Content Animation*/
@keyframes fadeInScale{
  0%{transform:scale(0.9);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.clearfix:before,.clearfix:after{content:" ";display:table}
</style>

Biasanya setelah di pasang di blog, tampilan blog anda akan sedikit rusak karena css labeldan section dinyatakan 'Display:none;'.Segera hapus atau hilangkan code yang mengandung <label> dan <section> di blog anda, agar tampilan bisa kembali normal.

Setelah semua code terpasang, silahkan save dulu project anda, lalu publish.

Tampilannya akan seperti ini:

View Demo

Selamat Anda sudah bisa membuat tab sendiri di blog anda.

Jika Anda masih gagal atau terhenti di tengah jalan karena kebingungan, jangan malu untuk bertanya lewat komentar dibawah 。◕‿◕。 .

50+ Font Terbaik Untuk Flat Design Gratis

Font terbaik pilihan saya yang sangat cocok untuk flat design

Sekarang Flat Design sedang menjadi tren di antara para Designer.

Bagi yang belum tau, Flat Design adalah Desain yang digabungkan menggunakan warna dan tipografi tanpa menggunakan tekstur, efek 3D dan bayangan.

Tapi, ada juga Flat design yang menggunakan bayangan.

Namanya Long Shadow.

Long shadow bisa dibilang 'Melengkapi' tren flat design karena long shadow sering hadir di dalam flat design.

Kembali ke topik Font.

Tidak semua font bisa di gunakan di dalam flat design.

Hanya font yang memiliki kesan kuat, minimalis, dan sederhana namun unik yang bisa di gunakan untuk flat Design.

Oleh karena itu, saya akan memberikan 50 Font Untuk Flat Design gratis untuk anda.

Tentunya font yang saya berikan ini tidak hanya bisa digunakan dalam flat design saja, tapi juga bisa digunakan untuk projek web, Web Design atau desain bergaya lain yang kamu inginkan.

Panduan Memoderasi Komentar Dari Disqus


Sudah banyak blogger dan webmaster yang menggunakan Disqus sebagai sistem komentar di blognya.

Tapi, masih banyak yang belum mengerti cara memoderasi komentar Disqus seperti menghapus komentar, men-approve komentar, membanned salah satu user, dan lain-lain.

Karena alasan itulah, Panduan ini saya buat..

Setelah anda membaca panduan ini, saya yakin anda bisa memoderasi semua komentar di blog atau website anda.

Isi dari artikel ini belum tersusun rapi. Dalam beberapa hari ke depan, isinya masih akan dibenahi dan ditambahkan kembali.

Menghapus komentar

Pertama, Login Disqus, buka blog/website anda.

Lalu, Cari komentar yang ingin di hapus.

Kemudian, Klik logo segitiga terbalik di ujung kanan komentar.


Terakhir, Klik tulisan Hapus.

Mem-blacklist user

Pertama, Login Disqus, buka blog/website anda.

Lalu, Cari komentar yang ingin di hapus.

Kemudian, Klik logo segitiga terbalik di ujung kanan komentar.


Terakhir, Klik tulisan Daftar Hitam.

Pilih salah satu yang di blacklist (Pengguna, IP address, atau Emailnya).

Menutup sebuah Diskusi

Login Disqus, buka blog/website anda.

Kemudian, Klik nickname anda (di sebelah kanan atas).


Klik tulisan Tutup Diskusi Ini.

Untuk membuka Kembali sebuah diskusi langkahnya sama seperti diatas, tetapi Kalimat Tutup Diskusi Ini Ganti dengan tulisan Buka Percakapan.

Mengedit Komentar Pengunjung

Seperti biasa, Login Disqus, buka blog/website anda.

Kemudian, cari komentar yang ingin di edit, klik Nickname Disqus anda yang ada di ujung kanan atas komentar pengunjung, Klik Moderasi.


Muncul tab baru, Klik tulisan Edit.


Edit sesuai kebutuhan, Klik Save Edit.


Komentar yang sudah diedit, tidak akan di index oleh Google karena sistem blogger tidak mengijinkan pengeditan komentar. Yang di index oleh Google adalah komentar pertama bukan yang sudah di edit.

Menandai Komentar Sebagai SPAM.

Login Disqus, buka blog/website anda.

Cari komentar yang ingin ditandai.

Jika sudah, klik icon segitiga terbalik yang ada di ujung kanan atas komentar pengunjung.


Klik Tandai Sebagai SPAM.

Mengutamakan Sebuah Komentar.

Login Disqus, buka blog/website anda.

Kemudian, Cari komentar yang ingin ditandai.

Klik icon segitiga terbalik yang ada di ujung kanan atas komentar pengunjung.


Klik Utamakan Komentar Ini.

Kurang lebih Tampilannya akan seperti ini:


Mem-filter Kata-kata kasar di Komentar

Login, buka halaman Dashboard Disqus.

Klik icon gerigi di ujung kanan atas lalu (Settings) , klik Admin.


Pilih Moderate Comments.


Cari tulisan Word Filters di menu Settings bagian kiri tengah (Jika anda punya banyak blog, pilih salah satu).

Isi kata yang ingin di filter (Contoh: Suck) Lalu, Klik Save Changes.


Tambahan: Anda bisa menggunakan tanda bintang atas (*) tapi hati-hati untuk tidak terlalu agresif. Misalnya, s * ck. Akan cocok suck, tetapi juga sock dan stack. Kata harus minimal 3 karakter.

Menambahkan Moderator Baru.

Login, buka halaman Dashboard Disqus.

Klik icon gerigi di ujung kanan atas lalu, klik Admin.


Lalu, pilih Moderate Comments.


Cari tulisan Moderators di menu Settings disebelah kiri tengah.


Jika anda punya banyak blog, pilih salah satu.

Klik Tombol Add moderator, isi form dengan username Disqus orang yang ingin dijadikan moderator baru.


Jika sudah, klik Save Changes.

Mengganti Avatar Default Komentator.

Pertama, Login, buka halaman Dashboard Disqus.

Klik icon gerigi di ujung kanan atas lalu, klik Admin.


Lalu, pilih Moderate Comments.


Cari kalimat Community Rules dibagian settings, Klik.

Jika anda punya banyak blog, pilih salah satu.


Klik kata Advanced di menu sebelah kiri atas.


Di bagian Default Commenter Avatar, klik kata Choose File lalu pilih foto yang akan di gunakan.


Tips: Gunakan Foto berukuran 125x125 untuk hasil yang maksimal.

Sekarang crop fotonya jika masih belum pas.

Terakhir, klik Save Changes.

LICEcap, Aplikasi Perekam Desktop untuk Dijadikan File GIF


Dulu saya sempat bertanya:

"Bagaimana cara Blogger merekam Desktop mereka dan dijadikan langkah di artikel mereka ? Aplikasi apa yang mereka gunakan ?"

Setelah saya mencari kesana-kemari, akhirnya saya menemukan jawabannya.

Ternyata mereka menggunakan LICEcap.

LICEcap adalah aplikasi yang digunakan untuk Merekam dan membuat gambar Dekstop dengan format .GIF.

Aplikasi ini cocok untuk blogger dan webmaster yang menekuni bidang atau niche Tutorial.


Anda tertarik menggunakan aplikasi ini ? jika iya, silahkan klik tombol download di bawah ini.

Panduan Menyimpan File Eksternal Blog di Github Kurang Dari 10 Menit


Mungkin anda sudah tidak asing lagi dengan code-code seperti Javascript, jQuery, CSS, dan sejenisnya.

Dulu, kita menyimpan code-code tersebut di Google Code dan Google Drive.

Tapi, kedua website tersebut punya kelemahan.

Pertama, Google Code sudah ditutup sehingga kita tidak bisa menyimpan file disana. Baca artikel penutupannya disini

Google Drive masih berfungsi, tetapi Google Drive memiliki waktu muat yang lama.

Itu sangat tidak baik bagi blog kita.

Nah, Sekarang muncul pertanyaan.

"Lalu, dimana saya harus menyimpan eksternal blog saya ?"

Saya menyarankan anda untuk menyimpan file anda di Github.

Tau kenapa ?

Karena Github memiliki waktu muat yang lebih cepat daripada Google Drive.

Dan yang lebih hebatnya lagi, Github itu gratis dan sangat mudah cara penyimpanannya.

Tapi ada 1 pertanyaan yang muncul di benak blogger pemula.

Gimana sih cara menyimpan file di Github ?

…Inilah panduannya.

Setelah membaca artikel ini, anda akan bisa menyimpan file eksternal anda dalam hitungan 10 menit kurang.

AXnael Blog

Name

Email *

Message *