Blog Johanes

PV :






1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>About</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Miku</a></li>
</ul>

Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='menusjohanes'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>

2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini



3. Setting Social media : facebook, Twitter, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>

4. Mengatasi Js Masonry yang tidak aktif/broken link js
Jika ada masalah pada susunan posting yang hancur atau tidak semestinya,masalahnya bisa terletak pada javascript,solusinya,silakan download dan re-upload 3 javascript dibawah ini.

https://sites.google.com/site/djogzs/js/modernizr-2.5.3.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
https://sites.google.com/site/djogzs/js/jquery.masonry.min.js

Tertarik dengan template Hentai Ouji ini?
Silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.Terima kasih






Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~


Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Hello lagi sobat,template kali ini adalah template minimalist+responsive dengan jquery mansory dengan warna dasar biru langit dan putih,yang merupakan template dasar blog saya sendiri.



1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>About</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Miku</a></li>
</ul>

Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='menusjohanes'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>

2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini


3. Setting tanggal posting / mengatasi undefined.

buka setting=> language and formating pada blog kamu seperti gambar dibawah ini.
Lalu ikuti format tanggal posting seperti contoh gambar dibawah ini :



Date header format:

Timestamp Format

Comment Timestamp Format



4. Setting Social media : facebook, Twitter, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>

Tertarik dengan template SkyBlue ini?silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.terima kasih







Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~


Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Hello guys,maaf kalau menunggu lama,karena semester ini kuliah saya sangat padat,jadi selalu tidak sempat untuk membuka blog,nah template yang akan saya share kali ini tema'a saya ambil dari anime Date A Live yang belum aired,tetapi kalau dilihat dari previewnya,mungkin anime ini sangat ditunggu" rilisannya pada tanggal 30 maret, 2013 yang artinya bulan depan nanti.maka dari itu template kali ini saya buat semenarik mungkin temanya,tetapi saya tetap mempertahankan penggunaan CSS3 dari pada gambar,kecuali pada bagian headernya yang ukuranya cukup besar.CSS3 loading system 10s hasil kreasi ini yang saya terapkan hanya ada pada halaman depan blog,bisa anda lihat screenshot dibawah,saat pertama membuka demo template ini,yang tampil hanya bagian header dan muncul loader yang beranimasi dan akan menampilkan isi content pada blog ,ditambah lagi penggunaan jquery Accordion(tutup-buka sidebar) dan Jquery Mansory yang memungkinkan post pada halaman depan akan responsive terhadap tinggi posting yang berbeda",maka akan sorting dengan otomatis.responsive di template ini bukan berarti template ini yang responsive,tetapi hanya pada bagian posting saja.mungkin kalau untuk komputer yang kecepatan internetnya kurang cepat,mungkin akan terasa berat,tetapi karena disini saya merasa normal" saja(tested browser mozilla,chrome,safari),jadi saya rasa tidak masalah.
Untuk Contohnya kalian bisa melihat pada screenshot dibawah ini atau kamu bisa melihat demo'a langsung.





1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='menusjohanes'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'/></li>
<li class='jolor' data-role='dropdown'><a href='#'>About</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li><li class='jolor' data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li class='jolor' data-role='dropdown'><a href='#'>Download</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li class='jolor'><a href='#'>Report</a></li>
<li class='jolor'><a href='#'>Watch</a></li>
</ul>

Jika kamu inin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam html <ul class='menusjohanes'> ....</ul>

Single menu

<li class='jolor'><a href='#'>namalink</a></li>

Dropdown menu

<li class='jolor' data-role='dropdown'><a href='#'>link kamu</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>

2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini


3. Setting tanggal posting / mengatasi undefined.

buka setting=> language and formating pada blog kamu seperti gambar dibawah ini.
Lalu ikuti format tanggal posting seperti contoh gambar dibawah ini :



Date header format:

Timestamp Format

Comment Timestamp Format


Mengenai Sidebar,sama seperti template hatsune miku, Template ini menggunakan 2 Sidebar,tetapi dijadikan menjadi 1 kolom.berdasarkan gambar layout dibawah ini,sidebar bagian atas tidak menggunakan Fitur Accordion/tutup-buka,sedangkan sidebar bagian bawah menggunaan fitur accordion/tutup buka widget.



4. Setting Social media : facebook, Twitter, Rss.
*ganti url linknya

<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>

*Jika ada masalah pada sidebar yang tidak berfungsi accordion'a/tutup-bukanya,masalah umum selalu terletak pada javascriptnya.
Solusi:
download/ganti Js dibawah ini,lalu upload sendiri pada hostingan js kalian,misal di code.google.com atau https://sites.google.com

https://sites.google.com/site/djogzs/js/accordion-menu.js

Tertari dengan template date A Live ini?silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.terima kasih







Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~


Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Screenshot



CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
kemungkinan template body anda menggunakan class,misal <body class='home blog'>

<div id='notifjo'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Naruto shippuden tamat.</p>
<p>3. Gintama ceritanya mulai ngawur xD.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>

Untuk menambah baris notif baru,tambahkan:

<p>text kamu</p>

di antara:

<h2> .... </h2>

1. Pengaturan posisi notifikasi.

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)

#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Contoh :

Atas,kanan.
right: 10px;
top: 10px;


Bawah,kanan.
right: 10px;
bottom: 10px;


Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.

top:atas
bottom:bawah
right:kanan
left:kiri

Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)




Untuk setting lainya seperti background(menggunakan rgba color) baca disini, border-radius baca disini dan contohnya disini ,dan selebihnya dapat anda lihat pada comment css yang saya sertakan diatas.





Baiklah,Sekian penjelasan saya mengenai Notifikasi sederhana dengan CSS3 yang saya buat sendiri,semoga bermanfaat minna-san~ arigatou gozaimasu~ :v


Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Apa kabar sobat,tetap semangat membuat template, tidak tanggung" saya membuat video preview-nya juga saking niatnya~xD


HD: http://youtu.be/Bm-rNC9of-E
DL: Download Video
#Biar greget~xD

1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Categories</a><ul>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li data-role='dropdown'><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>

2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

3. Setting tanggal posting.



(CTRL+S)





Semoga bermanfaat untuk semuanya,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyu minna-san~

#Besok saya masih ada UAS .___.


Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Hai minna-san,hari ini saya mau sharing tentang Content Slider CSS3 yang sama dengan di template Fansuber Otaku,karena ternyata banyak yang membutuhkan slider ini.

Oia,Slider ini Sebenarnya hasil Editan saya,aslinya kamu bisa lihat di web ini :Iamceege.com. Apa sih bedanya? yang berbeda yang pasti stylenya,teruama pada judul slide,kecepatan animasi,jumlah photo yang ditampilkan,dan penambahan deskripsi pada slider,serta penambahan efek filter blur pada animasi.dan sebenarnya juga untuk pemasangan slider ini sudah pernah saya post pada banner lider,kalau yang itu cuma dibuat khusus agar cocok dengan banner.kelebihan dari slider ini yaitu ringan,tidak memerlukan javascript ataupun jquery,animasi dapat kita atur sendiri,dan cssnya mudah untuk disetting.






CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#slider3 {
width: 610px;
height: 298px;
overflow: hidden;
background-color: #fafafa;
border: 1px solid #ddd;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin:auto;
margin-bottom: 30px;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover ul, #slider3:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#slider3 img {-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;}
#slider3 img:hover {filter: saturate(1.2);
-webkit-filter: saturate(1.2);
-moz-filter: saturate(1.2);
-o-filter: saturate(1.2);
-ms-filter: saturate(1.2);}
#pause1 {
width: 610px;
height: 255px;
position: absolute;
top: 45px;
opacity: 0;
pointer-events: none;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
background: url("http://3.bp.blogspot.com/-DFS55asVVus/UQvKQ4zqL5I/AAAAAAAAFWg/789uf-FO-WU/s1600/paused+copy.png") no-repeat;
left: 560px;

}

#overlay1 {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade1 35s infinite;
-webkit-animation:overlay-fade1 35s infinite;
}
#slider3 ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation1 35s infinite;
-webkit-animation:slide-animation1 35s infinite;
position:relative;
left:0px;
}
#slider3 li {
display:inline;
width:610px;
height:235px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 li span:hover {background: #7776B2;}
#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE;
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}

#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa;
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-moz-keyframes slide-animation1 {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
22.5% {opacity:0.6;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
25% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
45% {left:-610px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
}
47.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
50% {left:-1220px;opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
70% {left:-1220px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
72.5% {opacity:0.8;filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
75% {left:-1830px; opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
95% {opacity:1;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
98% {left:-1830px; opacity:0;filter: blur(3px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);}
100% {left:0px; opacity:0;filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);}
}
@-webkit-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}/* Blog johanes djogzs.blogspot.com */
@-moz-keyframes overlay-fade1 {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider3 ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;
font-weight:normal;
text-shadow:1px 1px 1px #362c30;
text-transform:uppercase;
}/* Blog johanes djogzs.blogspot.com */
#slider3 ul li .baka h3 {
font-size:13px;
line-height:25px;
color:#222;
font-weight:normal;
}/* Blog johanes djogzs.blogspot.com */

HTML

Sedangkan untuk Kode Html ini diletakan diantara kode <body> ... </body> tergantung dimana anda ingin meletakanya dimana.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider3'>
<div id='mask1'>
<ul><li>
<span><h2>Tamako Market</h2></span>
<a href='#' title='#'><img src='http://4.bp.blogspot.com/-weWC8gPWOeU/UPU-c1YHBeI/AAAAAAAAEmA/i9GCIMN1JJQ/s1600/4.jpg'/></a>
<div class='baka'><h3>Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town&#39;s bustling Tama-ya shopping district.</h3></div>
</li>
<li>
<span><h2>Vividred Operation</h2></span>
<a href='#' title='#'><img src='http://3.bp.blogspot.com/-5vBY85FV8M4/UPU-c6tc7EI/AAAAAAAAEmE/H73kv9AH2E8/s1600/3.jpg'/></a>
<div class='baka'><h3>The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (&#31034;&#29694;&#12456;&#12531;&#12472;&#12531; Jigen Enjin?), which solved an energy crisis five years prior.</h3></div>
</li>
<li>
<span><h2>Ore no Kanojo to Osananajimi ga Shuraba Sugiru</h2></span>
<a href='#' title='#'><img src='http://3.bp.blogspot.com/-H5jqqN1s9vE/UPU-fElKoQI/AAAAAAAAEmQ/Ue6SFazCiyo/s1600/Untitled-1.jpg'/></a>
<div class='baka'><h3>Eita Kid&#333; enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.</h3></div>
</li>
<li>
<span><h2>Maoyuu Maou Yuusha</h2></span><a href='#' title='#'><img src='http://3.bp.blogspot.com/-z39qB-brCS8/UPU-Z7mtXJI/AAAAAAAAEl4/6VIIxQIBVuw/s1600/2.jpg'/></a>
<div class='baka'><h3>The story is set in a world embroiled by war between Humans and Demons. The Humans&#39; greatest hero invades the Demon King&#39;s castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div>
</li>
</ul>
</div>
<div id='overlay1'>
</div><div id='pause1'>
</div></div></b:if>

Text bewarna Orange : Judul Slider
Text bewarna merah : Alamat situs/Link/url web
Text bewarna ungu : Url Gambar
Text bewarna biru : Deskripsi

Setting CSS Judul slider.

#slider3 li span {
display: block;
width: 553px;
padding: 5px 20px;
border-bottom: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
background: #8CA5CE; (warna background dapat diganti.)
border-left: 8px ridge #7776B2;
border-right: 8px ridge #7776B2;
float: left;
-webkit-box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
-moz-box-shadow: inset 0 1px 20px rgba(0,0,0,0.3), 0 1px 0 #5e524f;
box-shadow: inset 0 1px 20px rgba(0, 0, 0, 0.3), 0 1px 0 #5E524F;
}

Setting CSS deskripsi Slider

#slider3 li .baka {
display: block;
width: 570px;
padding: 5px 20px;
pointer-events: none;
text-align: left;
background: #fafafa; (warna background dapat diganti)
float: left;
border-top: 1px solid #ddd;
height: 51px;
margin-top: -3px;
}

Oia,aya mau menambahkan lagi,apabila kamu ingin mengubah ukuran lider ini,kamu haru setting sendiri secara manual.
Slider ini sudah saya atur dengan ukuran standart 610px,jadi artinya seluruh content pada slider ini selebar 610px,termasuk pergerakan animasi dan ukuran gambar pada slider ini sendiri,jadi bila anda ingin mengganti ukuran slider ini,misalkan 650px,berarti seluruh css lebarnya juga harus 650px agar susunanya rapih dan efek animasinya juga tepat,terumama untuk css animasi keyframenya,


saya ambil contoh dari postingan banner slider,karena sebelunya sudah dijelaskan.

(contoh pada css banner slider)

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}

perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.

1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.

2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.

3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:

-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka

0-468 = -468

digeser ke arah kiri lagi menjadi

-468-468 = -936

digeser ke arah kiri lagi menjadi

-936-468 = -1404

lalu di timing 100% kembali ke posisi awal yaitu 0.

nah,jadi bagaimana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.

jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD

karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.

perhitungan diatassama saja dengan content slider ini,hanya saja nilainya berbeda karena ukuranya lebih lebar content slider ini.




Sekian penjelasan saya tentang Content slider CSS3, Semoga bermanfaat ^^
#meskipun senin depan ujian,kegiatan blogging susah untuk dihentikan~xD
http://205.196.121.10/4784bn9qrucg/tqd877okjqgdc77/%5BUn%5Dcertain+happiness.mp3

Sejak kemarin dan beberapa hari sebelumnya saya rasa tidak ada masalah pada beberapa template yang saya kemarin,tapi hari ini , Selasa 30 januari,ada keanehan pada blog saya,saya sendiri bingung dan kaget.entah kenapa tiba" tombol reply/balas menghilang dan digantikan dengan tombol delete.padahal sebelumnya baik" saja.tetapi tiba" saja berubah seperti gambar dibawah ini,setelah saya cek,ternyata tombol delete menutupi tombol reply,sehingga tombol reply/balas tidak terlihat dan tidak dapat diklik,padahal sebelumnya seingat saya tombol delete sudah saya sembunyikan~xD,mungkin karena ada perubahan sytem thread comment pada blogger,maka beberapa struktur css dan html ada yang berubah juga.


Setelah saya cek,Semua kejanggalan ini hanya terjadi pada template dibawah ini secara global :

Metrominimalist

Robotic Notes

Fansuber Otaku


Solusi

Buka Account Blogger kamu => Template =>Edit HTML , lalu cari css dibawah ini:

.comments .comment .comment-actions a {

dibawah css tersebut, ganti position:absolute

menjadi :

position:relative;

lalu dibawahnya hapus css ini juga.

left: -80px;
width: 40px;
top: 58px;

lalu simpan template anda,dan lihat hasilnya,tombol reply anda akan kembali normal.

Template" yang bermasalah pada bagian komentar akan segera saya perbaiki dan re-upload ,bila ada keanehan/bug lain pada template saya,anda bisa melaporkanya,terima kasih.

Template kali ini bertema minimalist,dan terinsprasi dengan konsep style Metro UI dari windows 8.karena saya rasa sudah ada yang membuat template metro UI untuk blogger dan terlalu mainstream,karena itu saya membuat dengan cara saya sendiri dan kreasi style saya sendiri dengan warna dasar putih,blueDark dan color-blueLight dan css yang digunakan pun sederhana,tentunya membuat template ini ringan dan fast loading.yang paling indentik dengan metro style pada template ini terletak pada Tipografi font ini sendiri yang sama dengan windows 8 ,Segoe UI Light.dan pada bagian posting gambar auto readmore,saya berikan juga CSS3 Filter saturasi dan di beri nilai 0.0 agar warna pada gambar menjadi hilang,tetapi menggunakan hover efek dan diberi nilai 1.1 agar warnanya timbul kembali,lalu pada bagian descripsi,dibuat hover efek juga,dan akan menampilkan tanggal,jumlah comment,author dan label posting.


Screenshot
*jika menggunakan browser Mozilla,efek filter saturasi tidak akan berfungsi karena belum mendukung kemampuan ini.

1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Categories</a><ul>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li data-role='dropdown'><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>

2. Setting Social media facebook,twitter,g+,Rss
*ganti url linknya

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'/></li>
<li><a class='icon twitter' href='http://twitter.com/username/'/></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'/></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'/></li>
</ul>

3. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Semoga bermanfaat,terima kasih ^^





Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Berikut template sebeulum di edit dan sesudah diedit :






Screenshot video

720 (836mb- 5jam)

Link baru







#untuk file yang dibagi menjadi 5 part dan 24 part JOIN menggunakan Softwarehjsplit

Cara Join hjsplit :
http://flashboyz.wordpress.com/download/cara-gabung-file-dengan-hj-split/
http://www.downloadfilem.com/cara-menggabungkan-file-dengan-hj-split.html


Semoga bermanfaat,^^

Untuk kalian yang mungkin sudah familiar dengen efek filter yang ada photoshop pasti tentunya sudah tahu bagaimana efek filter seperti blur,sepia,grayscale,dll pada gambar.nah kali ini saya mau berbagi informasi,trik dan tutorial menarik lagi tentang CSS3 - Filters untuk Gambar dengan penerapan yang sederhana dan dasar.mungkin sudah ada beberapa yang tahu tentang trik ini,tapi bagi yang belum,bisa kalian coba dan mempelajari tentang dasar" syntax css Filter ini.semoga bermanfaat ^^

Untuk Penerapanya nanti cukup sederhana hanya sesuaikan css name pada class html,atau copy paste syntax css pada class/id html yang anda inginkan,misalkan contoh sederhana-nya :

HTML

<div class='nama-filter'>
<img border="0" height="400" src="http://4.bp.blogspot.com/-BKUd4ayf0do/UQFKBXmlGzI/AAAAAAAAFGM/h-5QkXyu-84/s400/30059960.jpg" width="283" />
</div>

nama-filter diganti dengan css name yang ada di contoh dibawah,misalkan saya pilih efek blur,HTML class-nya menjadi <div class='blur'> (tanpa tanda titik)

#class html dan css name harus sama agar trik ini WORK!


#CSS Diletakan diatas kode ]]</b:skin>

#HTML Diletakan diantara <body> isi html </body>

Oia sebelumnya Saya sarankan Gunakan CSS ini hanya untuk keperluan saja,mungkin kita tahu beberapa orang lebih sering menggunakan browser google chrome dengan versi terbaru(rekomendasi) ,oleh karena itu gunakan css yang memang untuk chrome (-webkit)

#ada kemungkinan mozilla belum mendukung css3 filter ini





Blur
Semakin Besar Nilai blur yang diberikan,maka efek blur pada gambar akan semakin pudar.

Sebelum                                                                         Sesudah

CSS


.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

Brightness
Semakin Besar Nilai Brightness atau kecerahan yang diberikan,maka gambar akan semakin terang.
dan sebaliknya juga diberi nilai dibawah 0 atau minus 1 gambar akan semakin gelap.
antara (-1.0 s/d 1.0)

Sebelum                                                                         Sesudah

CSS


.Brightness {
filter: brightness(0.2);
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
}

Saturation
Semakin Besar Nilai Saturation atau ketajaman warna yang diberikan pada gambar,maka warna pada gambar akan semakin terang/cerah.

Sebelum                                                                         Sesudah

CSS


.Saturation {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
}

Hue-Rotate
Untuk Hue-Rotate,nilai yang diatur menggunakan derajat yang sesuai terhadap arah jarum jam prinsip roda warna sejauh 360 derajat.


Roda Warna

Sebelum                                                                         Sesudah

CSS


.Hue-Rotate {
filter: hue-rotate(170deg);
-webkit-filter: hue-rotate(170deg);
-moz-filter: hue-rotate(170deg);
-o-filter: hue-rotate(170deg);
-ms-filter: hue-rotate(170deg);
}

Contrast
Semakin Besar Nilai Kontras yang diberikan pada gambar,maka tingkat kontras pada gambar akan semakin tinggi, dan begitu juga sebaliknya.

Sebelum                                                                         Sesudah

CSS


.Contrast {
filter: contrast(150%);
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);
}

Grayscale
Semakin Besar Nilai grayscale yang diberikan pada gambar,maka gambar akan semakin berubah warna menjadi abu-abu/gray.


Sebelum                                                                         Sesudah

CSS


.Grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}

Sepia
Efek photo filter Sepia akan semakin sempurna jika diberikan nilai 100%.

Sebelum                                                                         Sesudah

CSS


.Sepia {
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
}

Invert
Filter ini untuk membalikan warna yang ada pada gambar dengan batasan 0% - 100%

Sebelum                                                                         Sesudah

CSS


.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}

Transparency
Untuk efek transparant pastinya sudah tidak asing bukan,transparant juga dapat dikategorikan sebagai photo filter.

Sebelum                                                                         Sesudah

CSS


.Transparency {
opacity:0.5;
filter:alpha(opacity=40);
}

Nah,apakah dalam satu gambar efeknya bisa kita satukan ,tentu saja bisa,kita bisa mengkombinasikan efek" filter seperti halnya filter pada photoshop,dan inilah hasil contoh nexperiment yang saya buat :

Hasil:

CSS


.jomixed {
filter: saturate(2.0);
-webkit-filter: saturate(2.0);
-moz-filter: saturate(2.0);
-o-filter: saturate(2.0);
-ms-filter: saturate(2.0);
filter: contrast(122%);
-webkit-filter: contrast(122%);
-moz-filter: contrast(122%);
-o-filter: contrast(122%);
-ms-filter: contrast(122%);
filter: hue-rotate(325deg);
-webkit-filter: hue-rotate(325deg);
-moz-filter: hue-rotate(325deg);
-o-filter: hue-rotate(325deg);
-ms-filter: hue-rotate(325deg);
}

Nah,setelah itu apa lagi yang dapat kita gunakan dengan css3 filter ini?
dengan css filter kita juga bisa buat sebagai hover efek dan animasi infinity ataupun animasi yang menggunakan keyframe.

misalkan untuk efek animasi hover,yg kita perlukan adalah css transition,misalkan kita beri nilai timing 0.5 detik.

CSS


-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;

Silakan anda coba arahkan kursor anda pada gambar dibawah ini.




Dan cara diatas juga sama untuk css filter lainya,mudah bukan? sekian penjelasan saya tentang >CSS3 Filters,Arigatou gozaimasu minna-san~ ja mata ne~ ^^/



Artwork by :絵 | mia@ミア [pixiv]



Sebelum mencoba Trik ini,ada baiknya anda membaca kebijakan .

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html