Mari Belajar - Belajar dimana saja dan kapan saja.: CSS

Senin, 05 Mei 2014

Cara Membuat Efek Salju Halus Turun di Blog Dengan CSS

Gusti Ardias Riantono Mei 05, 2014 3 comments

Cara Membuat Efek Salju Halus Turun di Blog Dengan CSS - Malam sobat, saya sebenarnya lelah habis mengerjakan tugas kuliah tapi pengen banget ngeblog hehe. Malam ini saya mau berbagi tutorial Cara Membuat Efek Salju Halus Turun di Blog Dengan CSS, seperti apa sih demonya? kalian bisa cek di sini untuk melihat demonya.

salju di dalam blog

Gimana sobat? kalian sudah lihat demonya? keren gak? hehe. Jika sobat suka mari ikuti langkah dibawah ini,

Buka blogger.com
Pilih blog yang ingin sobat berikan salju
Pilih Template -> Edit HTML
Kemudian cari kode ]]></b:skin> dengan bantuan CTRL+F
Jika sudah ketemu salin dan tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> /* Salju turun di blogger sobat [ardiasgusty.blogspot.com] ------------------------------------------------------------ */ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } #falling-snow { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xRJfbmEuY-6BpLkmEsQB7DcF6QcaS4KENd16hc9_-hYDiceIVrpQB-P9XdGvairEGN_aHR-Fldh8L1o78fQQqRcQLu8GTxDstywOM9w4mpfC9ObNAR-cd8iVI1tuszqNxIgg7x2fNcTY/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOyEgSZE4sGK312mk89rbtitQ-gWWOCiehYGAurjmlSnND1OZij6csPGRBzsVLb-1w_Y4H_SPzWXR8C5Lei4gklhZ_YEPtCHercmWRGiP8UFgJDeDnWT1jJl8tlZqE7itHgsf6GxHOVGo/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBqOHkwjfJdBw_Bah58-O5wtSQilA5SqzOagLKYnhk4_qFdypHW1Gqtd2kfkbGy9vn7MiVAqLNN8D6RiVb7FMhGHcRJ1GUyQcW6ijLZYMoU8MuYY_LaURR_JemOm97IY7IFLxJkZnuhwl/s1600/snow2.png); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; }
Jika sudah, cari lagi kode <body> dengan bantuan CTRL+F
Kemudian salin dan tempelkan kode dibawah ini tepat diatas kode <body> <div id='falling-snow'>
Cari lagi kode </body> lalu ketik kode </div> disamping atau dibawah kode </body>.
Simpan template lalu lihat blog sobat.

Nah itulah Cara Membuat Efek Salju Halus Turun di Blog Dengan CSS, silahkan sobat coba dan rasakan saljunya di blog sobat hehe :D

Happy blogging :)~

Minggu, 26 Mei 2013

Membuat Menu Drop Down Animasi CSS3 di Blog

Gusti Ardias Riantono Mei 26, 2013 2 comments

Membuat Menu Drop Down Animasi CSS3 di Blog - Banyak cara dalam mempercantik sebuah blog, dengan memilih template blog yang sesuai, memasang widget blog, memodifikasi CSS blog dan salah satunya yang akan saya bahas kali ini adalah menu drop down untuk blog. Di dunia internet sudah banyak yang membahas tentang menu drop down. Bahkan banyak macamnya, mulai yang sederhana sampai yang elegant.

Sebenarnya menu drop down yang akan saya bahas kali ini bukan buatan saya sendiri. Maklum saya bukan blogger profesional, saya di sini baru belajar bisa di katakan blogger pemula. Oke lanjut saja, Menu drop down ini menggunakan CSS3. Tutorial ini saya dapat dari www.mybloggerlab.com. Jika mau lihat demonya bisa kunjungi blog ini.

Langsung saja Tutorial Cara Membuat Menu Drop Down Animasi CSS3:

1. Masuk ke blogger.com

2. Pilih Layout >> add gadget atau Tambah gadget (terserah dimana kamu ingin meletakkan menunya)

3. Kemudian pilih HTML/JavaScript

4. Copy sccript di bawah ini dan pastekan di kotak HTML/JavaScript yang kamu pilih tadi

<link rel="stylesheet" type="text/css" href="https://gustiardias14.com/menuheaderardias.css"/> <nav id="mbl-menu-wrap"> <ul id="mbl-menu"><li><a href="URL-Here">Home</a></li>
<li> <a href="URL-Here">Categories</a> <ul><li> <a href="URL-Here">CSS</a> <ul><li><a href="URL-Here">Item 11</a></li>
<li><a href="URL-Here">Item 12</a></li>
<li><a href="URL-Here">Item 13</a></li>
<li><a href="URL-Here">Item 14</a></li>
</ul></li>
<li> <a href="URL-Here">Graphic design</a> <ul><li><a href="URL-Here">Item 21</a></li>
<li><a href="URL-Here">Item 22</a></li>
<li><a href="URL-Here">Item 23</a></li>
<li><a href="URL-Here">Item 24</a></li>
</ul></li>
<li> <a href="URL-Here">Development tools</a> <ul><li><a href="URL-Here">Item 31</a></li>
<li><a href="URL-Here">Item 32</a></li>
<li><a href="URL-Here">Item 33</a></li>
<li><a href="URL-Here">Item 34</a></li>
</ul></li>
<li> <a href="URL-Here">Web design</a> <ul><li><a href="URL-Here">Item 41</a></li>
<li><a href="URL-Here">Item 42</a></li>
<li><a href="URL-Here">Item 43</a></li>
<li><a href="URL-Here">Item 44</a></li>
</ul></li>
</ul></li>
<li> <a href="URL-Here">Work</a> <ul><li><a href="URL-Here">Work1</a></li>
<li><a href="URL-Here">Work2</a></li>
<li><a href="URL-Here">Work3</a></li>
<li><a href="URL-Here">Work4</a></li>
</ul></li>
<li><a href="URL-Here">About</a></li>
<li><a href="URL-Here">Contact</a></li>
</ul></nav> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
/* Mobile */
$('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">
mbl-Menu</div>');
$("#mbl-menu-trigger").on("click", function(){
$("#menu").slideToggle();
});
// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#mbl-menu ul').addClass('no-transition');
});
</script>

Pengaturan:

Ganti tulisan URL-Here dengan url yang kamu inginkan
Tulisan yang berwarna Biru ganti dengan nama sesuai label atau url yang di tuju

5. Jika sudah selesai klik save atau simpan

Tutorial Menu drop drown diatas sangat simple, karena kamu tidak perlu melakukan edit HTML dan mengeditnya pun juga mudah tidak usah repot-reepot lagi melakukan dari edit HTML. Sekian dulu tutorial membuat Membuat Menu Drop Down Animasi CSS3 di Blog, semoga tutorial ini dapat bermanfaat untuk sobat blogger semuanya. Terima kasih

Senin, 05 Mei 2014

Cara Membuat Efek Salju Halus Turun di Blog Dengan CSS

Minggu, 26 Mei 2013

Membuat Menu Drop Down Animasi CSS3 di Blog

Popular Posts

Labels

Archive

Recent Posts

Formulir Kontak

SMA

Kuliah

Senin, 05 Mei 2014

Cara Membuat Efek Salju Halus Turun di Blog Dengan CSS

Minggu, 26 Mei 2013

Membuat Menu Drop Down Animasi CSS3 di Blog

Newsletter

Popular Posts

Labels

Archive

Recent Posts

Formulir Kontak

SMA

Kuliah