AGcreator Blog

Ganti Teks pada Labels dengan Gambar Menarik

Ganti Teks pada Labels dengan Gambar Menarik-Salah satu cara terbaik untuk membuat blog sobat menonjol dari yang lainnya dapat dilalukakan dengan menggunakan beberapa trik kecil di dalam desain template blog anda. Ini akan berdampak pada kualitas keunikan suatu template blog. Contohnya, pada blog demo yang akan saya sertai linknya di bawah ini, menggunakan gambar untuk labelnya.

DEMO LIVE

Gambar cenderung lebih menarik dibandingkan dengan tulisan. Kebanyakan template blog di luar sana tidak menggunakan/mengembangkan desain ini, pastinya trik yang akan saya sajikan benar-benar membuat blog-mu UNIK. Tidak lupa dan saya berharap untuk like FP Facebook yang berada di widget sebelah kiri.

Contoh Hasilnya

Kelemahan dari trik ini:

Repot karena bila ada banyak label harus memasukkan kodenya satu-persatu.
Dengan memakai gambar, maka proses loading blog menjadi lebih lama.
Diperlukan pemahaman dan ketelitian dalam menggunakan trik ini.

Langkah-Langkah Awal

1. Pertama, kamu membutuhkan beberapa icon cantik yang akan digunakan untuk labelnya. Kamu dapat mendownloadnya lewat mana saja. Terutama lewat google image. Gambar yang direkomendasikan berbentuk bujur sangkar dengan besaran kurang dari 32 pixels. Bila melebihi dari itu, maka akan terlihat terlalu besar atau bahkan berubah bentuknya.

2. Upload gambarnya melalui Entri Baru di Postingan Blog dengan cara:

Entri Baru > Insert Image
Di Tab Uploud, Klik “Pilih File” > Pilih file yang akan di upload > Tunggu
Klik dua kali agar gambar masuk dalam postingannya > klik kanan > copy image url

Klik untuk memperbesar

NB: Taruh image url di notepad atau tempat aman lainnya agar pada saat dibutuhkan tidak harus melakukan pengkopian url kembali

Penginstalan Triknya

1. Masuk ke “Template” > Edit HTML > CTRL + F (untuk mencari) > cari kata yang hampir sama dengan di bawah ini:

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

2. Masukkan kode di bawah ini tepat di bawah kode “<b:loop values='data:post.labels' var='label'>” :

<b:if cond='data:label.name == "NAMA-LABELNYA"'>

NB: Teks yang berwarna merah harus diganti dengan keterangan yang sesuai. Untuk bagian “NAMA-ALTNYA” dan “URL-IMAGENYA’” tidak begitu penting, tetapi sangat berpengaruh untuk SEO score.

3. Ulangi kode-kode di atas untuk labels yang lain, sesuai dengan labels yang ingin diganti dengan gambar.

Klik Untuk Memperbesar

Sekian penjelasan cara membuat labels dengan gambar di blog. Apakah kamu suka dengan tips yang unik ini? Jangan lupa untuk subscribe e-mail dan LIKE FP Facebook dengan meng-Klik tulisan “Like” di widget yang berada di sebelah kiri anda. Itu tuh kelihatan! Tunggu juga trick lainnya…

Dengan nge-like FP Facebook maka anda telah membantu saya. Terimakasih, semoga bermanfaat. Lihat juga Load Posting Otomatis dan Scroll Tidak Terbatas di Blog dan Cara Membuat Archive Blog yang Lebih Baik (Fresh Trick).

CSS kode struktur untuk HTML 5

Dalam posting ini saya ingin menggambarkan beberapa panduan yang berguna tentang bagaimana menerapkan struktur CSS kode terorganisir mengingat pengenalan HTML 5 bahasa markup. Mereka bukan aturan umum tetapi saran sederhana yang dapat Anda ikuti untuk meningkatkan pembacaan, pengelolaan, dan organisasi umum dari kode CSS. Saran ini sangat berguna jika Anda harus bekerja pada file CSS yang kompleks yang dinyatakan bisa sulit untuk mengelola.

Saya lebih memilih untuk memisahkan kode CSS dalam tiga bagian yang berbeda: bagian pertama yang berisi tag HTML umum; bagian kedua yang berisi tag struktur, sebuah bagian terakhir dengan kelas kustom.

Bagian 1: Umum tag HTML
Dalam bagian ini saya membagi kode dalam dua subbagian. Sebuah ayat pertama yang berisi kode untuk mereset tag HTML standar dan ayat kedua yang berisi kode untuk mendefinisikan kembali tag HTML standar.

Bagian 1 Ayat 1
Bagaimana Anda tahu, tentang ulang CSS, praktek ini digunakan untuk mengatur ulang gaya default browser untuk elemen HTML standar (tubuh, h1, p, ul, li, ...). Salah satu file yang paling populer untuk reset CSS adalah Eric Meyers CSS ulang . Untuk HTML 5 saya sarankan Anda untuk melihat pada Richard Clark CSS ulang berdasarkan file Mayers. File-file ini mengatur ulang semua tag HTML yang ada dan untuk itu mengandung banyak baris kode CSS. Kenyataannya, pada kebanyakan kasus, hanya tag yang sering digunakan itu perlu diatur ulang adalah tubuh, h1, h2, h3, p, ul, li, bentuk, masukan dan jarang meja, tr dan td. Jadi jika Anda suka, Anda dapat menggunakan versi singkat dari file-file yang hanya berisi elemen HTML Anda benar-benar digunakan dalam halaman Anda:

/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {

border:0;
margin:0;
padding:0;
font-size:100%;
...

}
Dalam kode sebelumnya saya disorot dalam huruf tebal beberapa HTML 5 tag baru yang Anda butuhkan untuk me-reset (lihat setelah penjelasan singkat tentang mereka).

Bagian 1 Ayat 2
Dalam ayat kedua dari bagian 1 saya hanya mendefinisikan kembali tag HTML standar:

/* Subsection 2: Standard HTML tags redefinition */body,
form, input {

color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}

Jika saya perlu mendefinisikan tag standar (untuk <h1> misalnya) dengan sifat yang berbeda tergantung pada posisi dari tag pada halaman (<h1> untuk judul posting dan<h1> untuk judul sidebar) Saya lebih memilih untuk menambahkan CSS terkait kode ke bagian yang berisi tag struktural (Bagian 2). Sebagai contoh, untuk sidebar:

aside {...}

aside h1 {...}

Bagian 2: tag Struktural
Dalam bagian ini saya mendefinisikan semua elemen CSS yang mendefinisikan struktur halaman. Seperti yang saya diantisipasi, HTML 5 memperkenalkan tag baru yang meningkatkan semantik kode. Beberapa dari tag ini adalah: <header>, <nav>, <article>, <section>, <aside>, <footer> ... Anda dapat menggunakan tag bukannya lebih lapisan DIV umum kita digunakan sampai sekarang (misalnya: <div id="nav"> ... </ span>).

Tak lama, gambar di sebelah kanan merupakan tata letak dua kolom yang khas menggunakan HTML 5 tag untuk menentukan struktur halaman. Jika Anda ingin mengetahui informasi lebih lanjut tentang topik ini, saya sarankan Anda untuk melihat artikel-artikel yang sangat baik:

- Smashing Magazine: HTML5 dan Masa Depan Web
- Steve Smith: Tag Struktural di HTML5
- Lachlan Hunt: Preview HTML5

Kode CSS sangat sederhana:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Praktis itu identik dengan kode kita menggunakan DIV dengan lapisan:

#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}

Untuk setiap elemen HTML Anda dapat menentukan elemen anaknya. Sebagai contoh jika ini adalah kode untuk bar navigasi:
...

<nav>

<ul>

</ul>

</nav>

Kode CSS yang terkait adalah:

nav{...}

nav ul{...}

nav ul li{...}
nav ul li a{...}

Seperti yang saya katakan sebelumnya, dalam rangka meningkatkan pembacaan kode, saya sarankan Anda untuk menggunakan kode indentasi, dan urutan abjad untuk daftar sifat-sifat unsu

nav ul li a{

font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;

}

Apa perubahan terhadap HTML 4? Tidak begitu banyak:

<ul>

</ul>

<div>

Menyederhanakan, jenis tag struktural dalam HTML 5 adalah lapisan DIV dengan ID tertentu dalam HTML 4:

#nav{...}

#nav ul{...}

#nav ul li{...}
#nav ul li a{...}

Bagian 3: Kelas Kustom
Pada bagian terakhir dari file saya CSS saya menambahkan kelas kustom saya dapat menggunakan kembali dalam beberapa bagian (header, sidebar, footer, ...).

/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}

Sumber : http://draftbloger.blogspot.com/2012/03/css-kode-struktur-untuk-html-5-beberapa.html

Merubah Gambar Menjadi Hitam Putih dengan CSS

Pada postingan kali ini saya akan membagikan/memberitahukan "Bagaimana Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS".

Berikut demonstrasi nya :

1. Simpan Kode dibawah ini tepat di atas kode </head> pada halaman EDIT HTML :


<style type="text/css">
.hitamputih { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */ }
.hitamputih:hover {filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale")}
</style>

2. Berikut contoh untuk memanggil kode CSS di atas :


<img class="hitamputih" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XceLrpg8G3nmUrSUW2qB2x7Osvi8wGj_7jQmNXkKiwVUnaYRyLSp3RneXj_z5NJoEQrjL193oaVszfSl-tQ6Bw60qqnBpqOnnFaju0iwtTpQOvICPUf3rE6dd1kWpITp8moY2CpZd_4/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg"/>

UPDATE ( Rabu - 03/07/2013 ) Jika anda ingin membuat semua gambar yang ada di blog anda secara otomatis menjadi hitam putih / (grayscale) dan menjadi berwarna ketika di sentuh!.. silahkan Tempel kode dibawah ini sebelum kode ]]></b:skin> pada Edit HTML :


.post img, .sidebar img{
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
 -webkit-filter: grayscale(1); /* Google Chrome  Safari 6+ */
 filter: gray; /* IE6-9 */
 }

    .post img:hover, .sidebar img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Semoga Tutorial Cara merubah Gambar Berwarna menjadi Hitam Putih dengan CSS ini bermanfaat .. terima kasih !

Cara Mengganti CHMOD Permission di cPanel

Pernahkah sobat mengalami masalah website yang tidak bisa diakses?
dan bagaimana caranya memperbaikinya?
Hati-hati…!! CHMOD permission yang tidak sesuai rawan terkena deface / hack..!!!

Mudah saja memperbaiknya, silakan ikuti langkah-langkah berikut ini :

1. Login ke cpanel hosting.

2. Masuk ke menu “Files -> File Manager”

3. Jika muncul popup seperti gambar di bawah ini, pilih opsi yang kedua yaitu “Web Root(public_html/www)” , klik GO

4. Misal, didapat file index.html mempunyai permission 600, dapat kita sesuaikan dengan klik kanan pada file tersebut -> pilih “Change Permissions” . Opsi lain, klik tombol “Change Permissions” di atas. (bisa juga multiple select file, checklist dulu semua file/folder yang akan dirubah permissionnya)