AGcreator Blog

Cara Membuat Mega Menu Drop Down Di Blog

Cara Membuat Mega Menu Drop Down Di Blog-Sebenarnya apa sih mega menu drop down itu? Mungkin pertanyaan tersebut yang pertama kalo terlintas setelah membaca judul di atas. Pertama kali terpikirkan mungkin menu drop down biasa yang tidak ada keistimewa-annya. Tanpa ada suatu keunikan tersendiri dengan yang lain, mungkin hanyalah tampilan yang sedikit diubah-ubah.

Segala prasangka tersebut dapat dilempar sejauh mungkin. Mega menu di sini adalah menu bar yang memiliki lebih dari satu subbab menu dalam tiap menu utama yang ditampilkan. Menu ini berbeda bila dibandingkan dengan menu drop down biasanya, karena biasanya satu menu utama akan menampilkan sub menu-sub menu lainnya tanpa menampilkan secara langsung subbab menu tersebut. Bingung ya? Untuk lebih jelasnya anda bisa membandingkan kedua gambar di bawah ini beserta penjelasannya.

Klik Untuk Memperbesar

Sudah sedikit mengerti kah perbedaannya? Bila tetap belum masuk ke otak (alias pusing) bisa tanya lewat komentar. O iya jangan lupa untuk nge-like FP blog ini dengan alamat facebook.com/netfori.

Bagi yang tertarik membuat menu drop down ekstra besar di blog tersebut, silahkan menyimak cara-caranya. Untuk melihat hasilnya silahkan klik link di bawah ini.

Demo Live

Cara Membuat

1. Masukkan kode css di bawah ini di atas kode ]]></b:skin>

ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:50px;
background-color:#D04528;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #EF593B;
border-bottom:1px solid #EF593B;
border-left:10px solid #D04528;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
float:left;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:#fff;
background-color:#D04528;
height:50px;
line-height:50px;
cursor:default;
padding:0px 20px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #DF7B61;
border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
position:absolute;
top:50px;
width:550px;
display:none;
opacity:0.95;
left:0px;
font-size:10px;
background: #C34328;
border-top:1px solid #EF593B;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#f0f0f0;
color:#444;
display:block;
clear:both;
padding:15px 20px;
text-transform:uppercase;
font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:0px 0px 2px #777 inset;
-webkit-box-shadow:0px 0px 2px #777 inset;
-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
list-style:none;
float:left;
border-left:1px solid #DF7B61;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color:#FFB39F;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family: Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
background:#AF412B;
}

2. Masukkan kode html di bawah melalui tambah widget atau dengan cara:

Layout/Tata Letak > Add a Gadget
Pilih HTML/Javascript > Masukkan kode di bawah ini tanpa menggunakan judul. Jangan lupa tambahkan gadget dan letakkan di bagian atas/ dekat dengan 'pages-menu'

<li>

<ul>

<li class="ldd_heading">Jenis</li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Curhat</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Hacking</a></li>

</ul>

<ul>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Google Adsense</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Hacking and Cracking</a></li>

</ul>

<ul>

<li class="ldd_heading">Tentang Blog</li>

<li><a href="#">About Me</a></li>

<li><a href="#">Privacy Police</a></li>

<li><a href="#">Contact Me</a></li>

<li><a href="#">Donate Us</a></li>

<li><a href="#">DMCA Protection</a></li>

<li><a href="#">Tukar Link</a></li>

</ul>

<a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span style="width: 76px;">Lengkapnya</span>

<ul>

<li class="ldd_heading">Jenis</li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Curhat</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Hacking</a></li>

</ul>

<ul>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Google Adsense</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Hacking and Cracking</a></li>

</ul>

<ul>

<li class="ldd_heading">Tentang Blog</li>

<li><a href="#">About Me</a></li>

<li><a href="#">Privacy Police</a></li>

<li><a href="#">Contact Me</a></li>

<li><a href="#">Donate Us</a></li>

<li><a href="#">DMCA Protection</a></li>

<li><a href="#">Tukar Link</a></li>

</ul>

<a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

<li>

<span style="overflow: hidden; width: 67px;">Seputar Blog</span>

<ul>

<li class="ldd_heading">Jenis</li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Curhat</a></li>

<li><a href="#">Produk</a></li>

<li><a href="#">Hacking</a></li>

</ul>

<ul>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Google Adsense</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Software</a></li>

<li><a href="#">Hacking and Cracking</a></li>

</ul>

<ul>

<li class="ldd_heading">Tentang Blog</li>

<li><a href="#">About Me</a></li>

<li><a href="#">Privacy Police</a></li>

<li><a href="#">Contact Me</a></li>

<li><a href="#">Donate Us</a></li>

<li><a href="#">DMCA Protection</a></li>

<li><a href="#">Tukar Link</a></li>

</ul>

<a class="ldd_subfoot" href="#"> + New Deals</a>

</div>

</li>

</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>

Berikut kode yang harus disesuaikan dengan kebutuhan:

Kode warna merah: Masukkan kata untuk Menu Utama.
Kode warna biru: Masukkan kata untuk sub menu yang diinginkan.
Kode warna ungu: Masukkan kata untuk subbab menu.
Kode warna kuning: Masukkan kata tambahan yang diinginkan.
Kode warna hijau: Masukkan url tujuan yang diinginkan.

NB: Bila menu bar tidak berfungsi seperti contoh, kode yang berwarna biru muda dihapus saja.

Penting untuk diperhatikan, jika menempatkan kode HTML di atas melalui HTML/Javascript kacau, maka dapat melalui:

Template > Edit Template
Cari kode <div id="content-wrapper"> dan letakkan tepat di atasnya.

Sekian penjelasan singkat ini, mohon maaf bila ada salah kata. Jika artikel ini menarik silahkan untuk dikopas dengan syarat yang tertera di bawah. Saya sangat terbantu jika anda mengeklik FP Facebook yang berada ~~di sidebar sebelah kiri~~ tersebut. Jangan lupa subscribe email anda untuk mendapatkan update artikel terbaru dari Blog Netfori. Terimakasih. Lihat juga Ganti Teks pada Labels dengan Gambar Menarik dan Load Posting Otomatis dan Scroll Tidak Terbatas di Blog. Tips ini didapat dari ini dan dikembangkan oleh ini. Sekian.

Cara Membuat Kode Link Hidup Di Teks Javascript

Kode Link hidup di javascript Blog netfori

Cara Membuat Kode Link Hidup Di Teks Javascript-Saat ini berbagai usaha dilakukan untuk memenuhi kebutuhan. Beberapa diantaranya adalah dengan menyalurkan hobi positif tersebut agar dapat dimanfaatkan dengan baik. Setiap orang pasti memiliki hobi yang berbeda-beda, salah satu contohnya adalah dengan blogging di internet. "Nge-blog" istilah kesehariannya, memang tak lepas dengan berbagai usaha keras yang dilakukan oleh admin blognya untuk membuat blog menjadi besar.

Oleh karena itu berbagai usaha dilakukan untuk membuat blog menjadi maju. Mulai dari membuat artikel yang berkualitas, menambah jaringan/relasi, dan lain sebagainya-termasuk menambah link hidup yang menuju ke arah blog kita (backlink) sebanyak dan se-berkualitas mungkin. Maka, kali ini Blog Netfori akan membagikan trik sederhana kepada pembaca cara membuat kode link hidup di teks javascript. Oke berikut penjelasannya.

Contoh Hasilnya

Langkah-Langkah Membuat

1. Siapkan teks javascript yang ingin disisipkan kode link hidupnya.

2. Buka kode yang berekstensi .js tersebut dengan menggunakan program notepad.

NB: Akan terlihat berbagai kode yang mungkin akan membuat kepala pusing :)

3. Scroll kursor sampai ke bagian paling bawah teks javascriptnya.
4. Lalu tambahkan kode link hidupnya seperti di bawah ini:

document.write('</br><a href="http://netfori.blogspot.com" style="font-size: 8px; text-decoration:none; color: #616469;">Blog Tutor</a>')

Ganti kode yang berwarna merah dengan alamat blog/web sobat.
Ganti kode yang berwarna ungu dengan teks yang diinginkan (bagian ini akan terlihat ketika kode .Js-nya dijalankan.
Ubah beberapa kode yang sesuai keinginan, contoh: warna, ukuran, dll.

Penjelasan kode

[document.write]: merupakan bahasa pemprograman javascript yang berarti akan memunculkan suatu tulisan pada saat kode javascript tersebut dijalankan.
[('</br>]: kode ganti baris.
[<a href="http://netfori.blogspot.com"]: kode untuk memanggil url yang diminta.
[style="font-size: 8px; text-decoration:none; color: #616469;">]: Kode-kode pendukung yang berfungsi menunjang teks yang akan ditampilkan.
[Blog Tutor]: kode untuk menampilkan teks pada saat javascript tersebut dijalankan.
[</a>')]: kode penutup.

Kesimpulan

Cara tersebut digunakan untuk menambah link hidup yang menuju blog kita, ketika mereka mengcopy-paste salah satu tutorial yang menggunakan script tambahan dari luar. Kita dapat menambahkan kode link hidup yang kita inginkan sebelum meng-hosting javascript. Trik ini sangat bermanfaat bagi para blogger yang isi blognya merupakan tutorial.

Sekian penjelasan singkat ini, mohon maaf bila ada salah kata. Jika artikel ini menarik silahkan untuk dikopas dengan syarat yang tertera di bawah. Saya sangat terbantu jika anda mengeklik FP Facebook yang berada di sidebar sebelah kiri tersebut. Jangan lupa subscribe email anda untuk mendapatkan update artikel terbaru dari Blog Netfori. Terimakasih. Lihat juga Ganti Teks pada Labels dengan Gambar Menarik dan Load Posting Otomatis dan Scroll Tidak Terbatas di 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)