Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

Kali ini saya akan kembali membahas tentang pembuatan efek/animasi sederhana, ya walaupun saya katakan sederhana namun efek ini sangat mungkin untuk dikembangkan oleh kawan dikarenakan saya hanya memberikan contoh sederhana dan sangat mendasar tentang penggunaannya.

Untuk kali ini saya akan kembali menggunakan jQuery.

Apasih yang saya maksud dengan Cara Membuat Animasi Setelah Halaman Web/Blog Termuat., mungkin kalian pernah liat ada blog yang memasang animasi seperti ini namun kalian tidak mengenalinya, contoh seperti elemen yang awalnya tidak ada namun setelah sekian detik tiba-tiba muncul dari samping/atas/bawah atau warna halaman Web/Blog yang awalnya kuning setelah sekian detik berubah menjadi merah, nah itu bisa kita buat sendiri dengan cara ini.


Seperti itulah gambarannya

Praktek Yuk !


Oke, tidaklah mewah kode yang akan kita gunakannya kali ini karena hanya menggunakan seupil baris jquery dan dioleskan dengan sedikit CSS.
Pasang jquery dibawah ini diatas </body>

<script>
$(window).on('load',function(){
 $('.paragraf12').addClass('muncul')
})
</script>

Kan tadi pake CSS, kenapa gak CSSnya duluan yang dipasang ?
Oke, ini dimaksudkan karena saya akan menjelaskan sedikit tentang sebuah event yang akan kita gunakan yaitu onload.
Sesuai namanya, onload atau bahasa Indonesianya pada (saat)/(setelah) termuat yang mengartikan bahwa script akan mengeksekusi fungsi yang ada didalam kurung kurawal itu pada kondisi halaman telah sepenuhnya termuat atau telah terbaca XMLnya secara utuh. Jadi kalo web/blog yang menggunakan cara ini namun saat dibuka blognya ngadat karena jaringan visitor lemboy, maka fungsinya tidak akan tereksekusi dan animasi pun tidak akan jalan. Seperti itulah sedikit pemahaman saya.

Seperti yang saya katakan diatas, kita menggunakan sedikit CSS. Mengapa kita perlu CSS ?. Seperti ini, coba kawan lihat lagi kedalam jQuery diatas, terdapat sebaris kode yang berisi

$('.paragraf12').addClass('muncul')

Yang artinya Class ditambahkan dengan Class yang baru, yang namanya Class pasti akan berkaitan dengan namanya CSS, dikarenakan akan ada perubahan design CSS pada saat jquery menambahkan Class yang baru. Oke inilah CSSnya

.paragraf12 {opacity:0;transform:translate(0,60px);transition:1s}
.paragraf12.muncul {opacity:1;transform:translate(0,0)}

Terdapat 2 class yang sama namun berbeda, jika kita lihat class yang kedua maka kita akan melihat adanya tambahan Class baru dibelakangnya yang juga dibarengi dengan Value&Property yang berbeda.

Kenapa keduanya berbeda ?

Ini sederhananya saya jelaskan.
Pada Class pertama kita akan melihat opacity yang bernilai 0 yang artinya transparansi elemen akan 100% atau tidak terlihat dan transform elemen yang di Translating atau digerakkan secara vertikal dari posisi semula dikarenakan nilainya 0,60px (H,V), sedangkan Class kedua lebih kepada menetralkan elemen ke posisi Semula yang awalnya opacitynya 0 menjadi 1 yang artinya elemen akan terlihat kembali dan Translating atau digerakkannya elemen ke posisi Semula atau 0,0.

Perbedaan akan jelas terlihat pada saat sebelum dan sesudah termuatnya halaman Web/Blog, ini dikarenakan Pada Class pertama CSS akan tereksekusi pertama kali saat anda masuk halaman namun belum sepenuhnya termuat secara utuh, jadi elemen yang diberikan CSS ini akan terlihat seperti menghilang padahal sebenarnya tidak, kenapa tidak ?
dikarenakan CSS hanya menggeser elemen kebawah sejauh 60px dan dibuat transparan (tidak terlihat) seakan elemen menghilang entah kemana.
Nah setelah halaman web termuat secara utuh, CSS yang kedua akan tereksekusi dan sesuai fungsinya dia akan mengembalikan elemen ke posisi semula jadi seakan elemennya melayang ke posisi awal,
 *Yang maksudnya utuh adalah browser tidak akan melakukan loading lagi.


Untuk penggunaannya mudah saja, cukup mengubah Class diatas dengan Class elemen yang ingin diberi animasi.

Mungkin panjang penjelasannya yah kawan, tapi semoga saja dapat dipahami.
Sekian artikel saya, terima kasih.

Membuat Kotak Author Info

Kotak Author

Setelah lama tidak menulis artikel seperti ini karena sibuk ngurus template yang gak mutu itu, akhirnya saya bisa nulis lagi pada jam /4 ini. Oke, membuat kotak author info ini tidaklah sulit, karena kita hanya cukup memainkan sedikit CSS dan perpaduan HTML maka terbentuklah sebuah author info yang nyaman dipandang ini. Tidak ada yang spesial sih sebenarnya dengan tampilannya, tapi ya sudahlah.

Sebenarnya membuat kotak author atau about me box ini sudah saya bahas di artikel sebelumnya
Namun kotak author atau about me box kali ini kita desain ulang supaya lebih joss :D.
Sebelum memasang, pastikan sudah instal font awesome.


Praktek

Letakkan CSS dibawah ini diatas </style>, tetapi hindari yang ada dalam tag kondosional


.inner_wrapper {background:#fff}
.aboutme-img {position: relative;height: 150px;background: url(https://1.bp.blogspot.com/-SuS26cgl5JM/WS3DCpqUxvI/AAAAAAAABVA/Yr8Yq0G1IKwmuQvZujEumGFA5S2CPs6DACLcB/s1600/bg6.jpg) no-repeat top;background-size:cover}
.aboutme-img img {width: 100px;height: 100px;display: block;border-radius: 50%;margin: 0 auto;position: relative;top: 100px;}
.aboutme-info {font-size: 13px;padding: 66px 20px 10px;text-align: center;}
.aboutme-info h4 {margin-bottom: 10px;text-align: center;font-size: 16px; text-transform: uppercase;color: #202020;font-weight: 700;}
.aboutme-ikon {display: block;margin: 0 auto;padding: 10px 10px 20px;position: relative;}
.aboutme-ikon .sosialmedia {width: 100%;display: block;text-align: center;}
ul.sosialmedia {padding:0}
.sosialmedia .aboutme-icon a {font-family:fontawesome;font-weight:400;color:#222;}
.sosialmedia .aboutme-icon, .sosialmedia .ig,.sosialmedia .fb, .sosialmedia .twt, .sosialmedia .ggl{border-radius: 3px;background: #f6f6f6;height: 42px;width: 42px;line-height: 42px;display: inline-block;border: 0;margin: 0;padding: 0;}
.sosialmedia li.fb:hover, .sosialmedia li.fb:hover a {color: #fff;background-color: #3b5998;}
.sosialmedia li.twt:hover, .sosialmedia li.twt:hover a {color: #fff;background-color: #00aced;}
.sosialmedia li.ggl:hover, .sosialmedia li.ggl:hover a {color: #fff;background-color: #dd4b39;}
.sosialmedia li.ig:hover, .sosialmedia li.ig:hover a {color: #fff;background-color: #dd4b39;}

Silahkan kawan sesuaikan sendiri, saya ngantuk hahaha.
Oke selanjutnya pasang HTML dibawah ini kedalam Widget di Tata Letak.


<div class="inner_wrapper"> 
<div class="aboutme-img"> 
<img alt="Author" src="https://i0.wp.com/santuarie.files.wordpress.com/2017/03/ys2.png" title="Author" /> 
  </div> 
</div> 
<div class="aboutme-info"> 
  <h4>Brayen Luhat</h4> 
  <p>Selamat datang orang lemah yang kalo joging pake sepatu. Saya no, saya pake sendal refleksi, dan itu sakit!</p> 
</div> 
<div class="aboutme-ikon"> 
  <ul class="sosialmedia"> 
    <li class="twt"><a href="//twitter.com/brayenid" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li> 
    <li class="ggl"><a href="//plus.google.com/u/0/+Brayenluhat" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li> 
    <li class="ig"><a href="//instagram.com/brynfree" rel="nofollow" target="_blank" title="IG"><i class="fa fa-instagram"></i></a></li> 
  </ul> 
</div>

Saya rasa kode diatas cukup jelas, silahkan disesuaikan sendiri kawan.
Oke saya rasa itu saja, jika kesulitan silahkan bertanya pada saya. Sekian dan terima kasih.

Cara Nyeleneh Menggambar Dengan CSS

CSS Gambar
Entah bingung ingin nulis apa, tapi yaudahlah lebih baik saya isi dengan  tutorial nyeleneh ini yang sebenarnya jelek dan gak penting sekali.

Menggambar secara digital bisa kita lakukan dengan berbagai software gratis jika memakai crack seperti Photoshop, namun apalah daya jika hanya punya laptop kecil yang jalanin Mozilla saja ngadat. Sehingga ide menggambar dengan CSS pun terbayang, yah walaupun tampak seperti Minecraft.

Tutorial ini adalah tutorial yang sangat dasar, jika kamu pernah belajar CSS dasar, maka trik ini dibawahnya dasar lagi. Sebenarnya menggambar dengan CSS bisa kita sempurnakan lagi dan hasilnya bisa seperti gambar hasil kreasi photoshop, namun karena malas mikir, maka yang simple saja sebagai dasar pemahaman.

Disini saya menggunakan box-shadow sebagai media menggambar, jadi gambar ini punya elemen induk/utama yang berupa kotak yang tidak jelas yang dibuat dengan CSS sederhana {width:1em;height:1em;background:red;overflow:hidden}, jika selector itu dipanggil maka akan menghasilkan sebuah kotak kecil, nah kotak itu yang akan kita kreasikan menggunakan box-shadow.

Klik link dibawah


Untuk Source Code nya bisa di copy paste dari sini.
<style>
.bungkusgalon {width: 50px;margin: auto;margin-top: 20px}
#logo {animation: mantul 3s infinite;border-radius: 0 6px 5px;font-size:20px;padding: 4px;background: #ee352a;font-family: arial;color: #fff;margin:auto;margin-top:170px;margin-left:520px;width: 1em;height: 1em;background: red;overflow: hidden;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
@keyframes mantul{
    0%    {transform: rotate(0deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
    25%    {transform: rotate(-20deg);background: green;box-shadow: 0 1em 0 0 green,0 2em 0 0 green,0 3em 0 0 green,0 4em 0 0 green,0 5em 0 0 green,0 6em 0 0 green,0 7em 0 0 green,0 8em 0 0 green,1em 8em 0 0 green,2em 8em 0 0 green,3em 8em 0 0 green,4em 8em 0 0 green,5em 8em 0 0 green,6em 8em 0 0 green,7em 8em 0 0 green,7em 7em 0 0 green,6em 6em 0 0 green,5em 5em 0 0 green,4em 4em 0 0 green,5em 3em 0 0 green,6em 2em 0 0 green,7em 1em 0 0 green,7em 0 0 0 green,6em 0 0 0 green,5em 0 0 0 green,4em 0 0 0 green,3em 0 0 0 green,2em 0 0 0 green,1em 0 0 0 green,9em 0 0 0 green,9em 1em 0 0 green,9em 2em 0 0 green,9em 3em 0 0 green,9em 4em 0 0 green,9em 5em 0 0 green,9em 6em 0 0 green,9em 7em 0 0 green,9em 8em 0 0 green,10em 0 0 0 green,11em 0 0 0 green,12em 0 0 0 green,13em 0 0 0 green,14em 0 0 0 green,15em 0 0 0 green,16em 1em 0 0 green,16em 2em 0 0 green,15em 3em 0 0 green,14em 4em 0 0 green,13em 5em 0 0 green,14em 6em 0 0 green,15em 7em 0 0 green,16em 8em 0 0 green}
    50%    {transform: rotate(20deg);background: purple;box-shadow: 0 1em 0 0 purple,0 2em 0 0 purple,0 3em 0 0 purple,0 4em 0 0 purple,0 5em 0 0 purple,0 6em 0 0 purple,0 7em 0 0 purple,0 8em 0 0 purple,1em 8em 0 0 purple,2em 8em 0 0 purple,3em 8em 0 0 purple,4em 8em 0 0 purple,5em 8em 0 0 purple,6em 8em 0 0 purple,7em 8em 0 0 purple,7em 7em 0 0 purple,6em 6em 0 0 purple,5em 5em 0 0 purple,4em 4em 0 0 purple,5em 3em 0 0 purple,6em 2em 0 0 purple,7em 1em 0 0 purple,7em 0 0 0 purple,6em 0 0 0 purple,5em 0 0 0 purple,4em 0 0 0 purple,3em 0 0 0 purple,2em 0 0 0 purple,1em 0 0 0 purple,9em 0 0 0 purple,9em 1em 0 0 purple,9em 2em 0 0 purple,9em 3em 0 0 purple,9em 4em 0 0 purple,9em 5em 0 0 purple,9em 6em 0 0 purple,9em 7em 0 0 purple,9em 8em 0 0 purple,10em 0 0 0 purple,11em 0 0 0 purple,12em 0 0 0 purple,13em 0 0 0 purple,14em 0 0 0 purple,15em 0 0 0 purple,16em 1em 0 0 purple,16em 2em 0 0 purple,15em 3em 0 0 purple,14em 4em 0 0 purple,13em 5em 0 0 purple,14em 6em 0 0 purple,15em 7em 0 0 purple,16em 8em 0 0 purple}
    75%    {transform: rotate(-20deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
    100%{transform: rotate(0deg);background: red;box-shadow: 0 1em 0 0 red,0 2em 0 0 red,0 3em 0 0 red,0 4em 0 0 red,0 5em 0 0 red,0 6em 0 0 red,0 7em 0 0 red,0 8em 0 0 red,1em 8em 0 0 red,2em 8em 0 0 red,3em 8em 0 0 red,4em 8em 0 0 red,5em 8em 0 0 red,6em 8em 0 0 red,7em 8em 0 0 red,7em 7em 0 0 red,6em 6em 0 0 red,5em 5em 0 0 red,4em 4em 0 0 red,5em 3em 0 0 red,6em 2em 0 0 red,7em 1em 0 0 red,7em 0 0 0 red,6em 0 0 0 red,5em 0 0 0 red,4em 0 0 0 red,3em 0 0 0 red,2em 0 0 0 red,1em 0 0 0 red,9em 0 0 0 red,9em 1em 0 0 red,9em 2em 0 0 red,9em 3em 0 0 red,9em 4em 0 0 red,9em 5em 0 0 red,9em 6em 0 0 red,9em 7em 0 0 red,9em 8em 0 0 red,10em 0 0 0 red,11em 0 0 0 red,12em 0 0 0 red,13em 0 0 0 red,14em 0 0 0 red,15em 0 0 0 red,16em 1em 0 0 red,16em 2em 0 0 red,15em 3em 0 0 red,14em 4em 0 0 red,13em 5em 0 0 red,14em 6em 0 0 red,15em 7em 0 0 red,16em 8em 0 0 red}
}
</style>

Untuk penerapannya. Copy kode berikut
    <div id="logo"></div>
 Sederhana bukan ?. Silahkan dipelajari dasarnya dan bisa dikembangkan sendiri.
Sekian artikel saya, terima kasih.

Membuat Daftar Menu Dengan Toggle

Toggle Menu
Oke sebagai awalan saya ingin memberitahu bahwa toggle yang dimaksud bukan angka togel yah =D.
Kali ini singkat saja, saya akan memberikan sebuah tutorial tentang cara membuat menu dengan memanfaatkan fungsi toggle. Umumnya fungsi ini digunakan untuk membuat sebuah spoiler, tapi yang lain juga bisa sih dikarenakan toggle itu menyembunyikan sebuah elemen, dan elemen itu punya arti luas, bisa gambar, foto, image, picture, dll =D.

Sekarang kita akan membuat sebuah daftar menu yang dapat di show/hide dengan satu tombol. Cek link berikut.


Oke kita langsung praktek.
Sebelumnya pastikan kamu sudah memasang library jQuery dan Font-Awesome.


<style>
.daftartaut li:last-child {margin-bottom:-16px}
.daftartaut li:first-chiild{padding-top:4px}
.daftartaut li a {font-size:14px;color: #fff;padding-left: 3px;text-transform: uppercase;text-decoration: none;}
.daftartaut li {padding: 6px}
.daftartaut li:hover {background:#222}
.daftartaut li:hover a {color:#fff}
#tombol3{padding:5px;color: #fff;border:none;background: transparent;font-size: 24px;cursor:pointer;transition: .3s}
#buka{display:none;text-align:left;color:#fff;position: absolute;min-width: 150px;height:auto;background: #333;margin-top: 8px;box-shadow:1px 1px 3px rgba(0,0,0,0.5)}
.kotakkan {width:30px;height:30px}
.list-unstyled {padding-left: 0;list-style: none;margin-top:0}
</style>
<div class='kotakkan'>
<button id='tombol3'><i class='fa fa-bars'></i></button>
<div class='collapse' id='buka'>
<ul class='daftartaut list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Faq</a></li>
<li><a href='#'>Partner</a></li>
</ul>
</div>
</div>
<script>
 $(document).ready(function(){
  $("#tombol3").click(function(){
    $("#buka").slideToggle(700)
  });
});

</script>
Sengaja saya satukan dan tidak tercerai berai kodenya =D itu dimaksudkan supaya kawan yang belum terlalu memahami pemasangan kodenya bisa lebih termudahkan.
Jika kamu mau memasangnya didalam header, kamu bisa taruh dibawah kode header contohnya <div id='header-wrapper'> atau <div class='header'> atau kode pembungkus header yang serupa.
Untuk mengatur posisi tombol toggle, saya sudah pasangkan containernya yang diberi class .kotakkan silahkan diubah sendiri posisi margin jika belum tepat.

Silahkan ditanyakan jika kurang mengerti. Sekian dan terima gaji.

Membuat Blog 100% Responsive Dengan Media Queries

CSS

Jaman sekarang kebutuhan akan informasi semakin meningkat, terutama informasi dari media-media online seperti website/blog, tapi apa jadinya jika informasi yang bagus tidak diimbangi media (website/blog) yang mendukung, tentu tidak akan seimbang. Dulu mungkin desain web yang Responsive belumlah menjadi prioritas sebuah web seperti jaman sekarang, karena dulu web lebih diprioritaskan untuk pengguna PC karena dulu mengakses sebuah website menggunakan seluler sangatlah susah karena fiturnya yang terbatas. Namun sekarang hal tersebut tertepiskan, karena pengakses informasi online bukan hanya dari pengguna PC melainkan juga pengguna seluler, bahkan pengakses yang berasal dari seluler melampaui pengakses dari PC, oleh karena itu web yang Responsive sekarang menjadi prioritas.

Namun bagaimanakah kita dapat membuat sebuah blog tampil Responsive ?
Nah ini dia, didalam CSS3 kita dapat menjumpai yang namanya Media Queries, seperti yang saya pahami Media Queries ini bekerja layaknya sebuah tag kondosional namun sedikit berbeda, jika didalam tag kondisional kita mengaturnya dengan perintah kondisi (contohnya "static_page"), jika media queries membuat membuat sebuah CSS bekerja pada saat Window/Browser dalam ukuran (lebar/tinggi) tertentu. Itu menurut saya, mungkin para expert CSS ada tanggapan atau pengertian lain boleh di koreksi.


Oke setelah membahas sedikit tentang apa itu Media Queries, kita berpindah ke cara penerapannya.
Kamu dapat memasukan kode berikut kedalam <style>...</style>. Media Queries ini sudah lengkap sesuai ukuran yang tersedia di responsinator.com .
@media screen and (max-width:1024px) {
CSS
}
@media screen and (max-width:940px) {
CSS
}
@media screen and (max-width:820px) {
CSS
}
@media screen and (max-width:768px) {
CSS
}
@media screen and (max-width:600px) {
CSS
}
@media screen and (max-width:568px) {
CSS
}
@media screen and (max-width:414px){
CSS
}
Lihat max-width diatas, itu memiliki arti "Jalankan perintah ini pada saat lebar window dalam ukuran maksimal berikut", itu secara sederhananya. Misalnya kamu ingin membuat ukuran area artikel blogmu tampil penuh pada ukuran maksimal 414px, kamu bisa memasukan kode berikut.

@media screen and (max-width:414px){
#main-wrapper {width:100%}
}
Nah coba saja kamu kecilkan window browsermu pada ukuran kurang dari 414px maka otomatis ukuran postmu akan penuh dan mengikuti ukuran window browser.
Ingat ! usahakan untuk tidak menggunakan ukuran dengan satuan pixel (px) tetapi gunakanlah ukuran (%) supaya ukurannya dapat menyesuaikan diri secara otomatis.

Kamu dapat melihat contoh dibawah ini untuk cara penggunaan media queries.

@media screen and (max-width:1024px) {
.post-outer {width:23%}
.post-outer:nth-child(4n+4) {margin-right:0}
}
@media screen and (max-width:940px) {
.post-outer {width:45%}
.post-outer:nth-child(4n+4) {margin-right:25px}
}
@media screen and (max-width:820px) {
.post-outer {width:44.3%;margin-left:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
}
@media screen and (max-width:768px) {
.post-outer {width:45.7%;margin-left:15px;margin-right:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
.post-title {padding-top:7px}
}
@media screen and (max-width:600px) {
.post-outer {width:44.3%;margin-left:15px;margin-right:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
}
@media screen and (max-width:568px) {
.post-outer {width:45%;margin-left:10px}
.post-outer:nth-child(2n+2) {margin-right:0}
}
@media screen and (max-width:414px){
.post-outer {width:90%}
.post-outer:nth-child(4n+4) {margin-right:25px}
.post-outer {margin-left:15px}
.navigasi,.navigasi span,.navigasi a{font-size:10px}
.navigasi .pages {display:none}
}

Jika masih ada pertanyaan, boleh tulis dibawah.

Cara Membuat About Me Box Sederhana dan Keren !

About Me

Kali ini saya akan membuat tutorial tentang cara membuat Abouut Me Box dengan tentunya hanya menggunakan CSS yang simple. About Me Box ini bisa anda pasang di side bar dengan ukuran 300px lebar sidebar, tetapi juga bisa anda sesuaikan sendiri. About Me Box ini memiliki link yang saya tempatkan dibawahnya untuk membawa pengunjung ke halaman about me yang lebih lengkap, jadi About Me Box ini sifatnya singkatnya about me anda.


Oke langsung saja.
Pertama, tempatkan CSS dibawah ini diatas </style>

#utama {background:#eee;text-align:center;line-height:1.4em;width:300px}
.artikel {padding:7px 23px 15px}
.tombol {background:#3DC3A8;margin-top:2px;padding:8px}
.tombol a {color:#fff;text-transform:uppercase;letter-spacing:0.5px}
.tombol:active {background:#43DABB}
.sosmed {display:inline-block;letter-spacing:0.1px;margin:0;padding:4px 13px;}
.fb,.tw,.ig {transition:all .2s ease-in-out}
.fb {background:#3A539B;color:#fff}
.fb:hover {background:#4865BC}
.tw {background:#19B5FE;color:#fff}
.tw:hover {background:#49C6FF}
.ig {background:#F62459;color:#fff}
.ig:hover {background:#FF3668}

Kemudian masukan kode HTML dibawah ini didalam Tata Letak, anda bisa memasukannya dengan cara pilih Tambahkan Widget, kemudian pilih HTML/Javascript.

<div id='utama'><img src='https://1.bp.blogspot.com/-aPZ2l1EPf2s/WSbwfXBKj4I/AAAAAAAABTA/_K5XZe1uEZQ7RbCZhCrCc9BHw_glP_c6gCLcB/s400/bingung.jpg' height='200px' width='300' alt='About Me' title='About Me'/>
  <div class='sosmed'>
  <a class='sosmed fb' href='#' target='blank'>Facebook</a>
  <a class='sosmed tw' href='#' target='blank'>Twitter</a>
  <a class='sosmed ig' href='#' target='blank'>Instagram</a>
  </div>
  <div class='artikel'>Jangankan gunung semeru, jangankan juga gunung everest, apalagi gunung rinjani, gunung depan rumahku saja tak mampu tuk ku daki....
  </div>
  <div class='tombol'><a href='#'>kenali lebih dalam</a>
  </div>
</div>

Note : Ganti yang berwarna merah dengan URL gambar kawan, ganti tulisan yang berwarna ungu dengan tulisan atau cuplikan kawan.,  ganti pagar warna biru dengan URL tujuan, ganti yang warna pink dengan tulisan terserah.
Nah selesai, seperti yang katakan tadi sedehana. Ok, sekian artikel saya, terima kasih
Kamu bisa menggantikan tulisan sosmed diatas dengan Font Awesome jika mau

Membuat Tombol Salin Artikel Instan Untuk Blogger

Copy
Akhirnya saya bisa menulis tentang tutorial blogger lagi, kali ini saya akan menulis tentang "Membuat Tombol Salin Artikel Instan Untuk Blogger". Mungkin anda bertanya, apa maksudnya tombol salin artikel instan ? sebenarnya hal ini terlintas begitu saja dipikiran saya untuk membuatnya karena pengalaman saya dulu yang sering sekali membuat makalah untuk tugas sekolah dengan mencari referensi di google, banyak memang yang menyediakan materi, tetapi artikelnya panjang-panjang, saya selalu kesulitan untuk menyalin ke Ms.Word, hal ini dikarenakan jika saya menekan CTRL+A yang terjadi malah seluruh elemen blog terseleksi, jika saya menyeleksi secara manual terkadang setelah dipastekan ke word hasilnya kadang kacau, seperti warna font, iklan, ukuran, jenis font. Nah dari situ saya timbul ide untuk memudahkan mereka yang ingin mencari materi di blog dengan lebih efisien (efisien dalam seleksi, tapi jika sudah di paste ke word, tulisan perlu sedikit diatur lagi, hanya enter saja).

Tetapi sepertinya hal ini tidak terlalu penting bagi para blogger yang protektif terhadap artikelnya, yang memasang JS anti seleksi, klik kanan, copy. Tetapi bagi para blogger yang blognya dikhususkan untuk menulis sebuah materi belajar, menurut saya cara ini sangatlah perlu. (Para pelajar butuh materi anda guru)

Oke mulai saja, pastikan sobat sudah memasang Jquery pada blog sobat, jika belum tempel kode dibawah ini diatas </head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Tambah JS dibawah ini diatas </body>

<script src='https://rawgit.com/brayenid/borneoscript/master/bryncopy.js'/>

Kemudian tempelkan CSS ini sebelum </style>

.tombol {background:#eee;cursor:pointer;padding:4px;border-radius:4px;border:1px solid #1abc9c;transition:all .3s ease-in-out;float:right}

Terakhir, letakan dimana saja kawan mau tombol "salin"nya, contohnya saya memasangnya didalam <div class='post-info'>....</div>, tentunya berbeda, mungkin blog sobat menggunakan post-info yang berbeda (atau tidak menggunakannya). Sobat juga bisa memasangnya diatas <div id='related-posts'> (diatas related posts masing-masing)

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<a class='tombol' title='Klik Untuk Salin' onclick='copyToClipboard(&apos;.post-body&apos;)'>Salin Artikel Ini</a>
</b:if>

Note : Perhatikan class warna merah, itu adalah class dari body artikel saya, silahkan sesuaikan class body artikel blog sobat.

Nah selesai, jika ada pertanyaan soal tutorial diatas, sobat bisa ajukan pertanyaan di bawah. Terima kasih.

Membuat Tombol Share Dengan Hover

Tombol Share

Kali ini saya akan share kepada sobat Blogger tentang cara memasang "Tombol Share Dibawah Postingan dengan Hover", tutorial ringan ini saya bagikan karena saya ingin update blog saya  maka dari itu saya share tutorial ini. Oh ya, sebelumnya saya juga sempat memberikan Tutorial yang serupa.
Cuma, tombol share yang sebelumnya belum disertakan dengan effect Hover, jadi saya coba lagi membuat yang baru dengan effect hover supaya lebih kelihatan lebih menarik.

Ok, langsung saja.
- Pertama, sobat masuk kedalam Edit HTML
- Setelah itu cari kode ]]></b:skin atau </style>
- Lalu masukan kode berikut diatasnya.
.brayenl {background:#eaeaea;width:97.1%;border:1px solid #ccc;text-align:left;color:transparent;text-decoration:none;padding:7px 7px 7px 7px;font-size:13px;margin-top:4px;position:relative}
.brayen {color:#222;font-size:12px;font-weight:700;}
.share1 a {text-decoration:none;color:#fff;margin-left:3px}
.fb {background:#3b5998;padding:3px;border-radius:3px;border:1px solid #3b5998;transition:all 800ms ease-in-out}
.fb:hover {background:#809FFE;padding:3px;}
.gp {background:#b0103d;padding:3px;border-radius:3px;border:1px solid #b0130d;transition:all 800ms ease-in-out}
.gp:hover {background:#FF0000;padding:3px;}
.tw {background:#4099FF;padding:3px;border-radius:3px;border:1px solid #4099ff;transition:all 800ms ease-in-out}
.tw:hover {background:#9FCCFE;padding:3px;border:1px solid #4099ff;}
Note :
Ganti ukuran panjang yang berwarna merah dengan ukuran panjang yang sobat inginkan.

 - Setelah memasukan kode diatas, sobat cari kode <div id='related-posts'> lalu masukan kode berikut diatasnya.
<div class='brayenl'>
<div class='share1'>
<span class='brayen'>Share This Article :</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'>Facebook</a>
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'>Google+</a>
 <a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'>Twitter</a>
</div>
</div>
 selesai, demikia artikel saya, semoga bermafaat.

Cara Membuat Like Box Facebook Float

Floating Like Box

Kali ini saya akan mencoba share cara memasang Like Box Facebook Float atau melayang.
Dengan memakai widget ini, sobat pasti akan mudah mencari liker FPnya di Facebook melalui blog.
Ok, deh langsung saja sobat.
- Pertama, buka tab Template
- Kedua, klik Edit HTML
- Setelah masuk, sobat cari kode </body>, lalu masukan kode berikut diatasnya.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><object data="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/brayenluhatpages?fref=ts&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" ></object><span><a target='_blank' href="http://my-topsite.blogspot.com">Brayenl &#9658;</a></span></div></div>

Note :
Ganti URL yang berwarna merah dengan url FPnya sobat.
URL yang berwarna biru itu akan menuju ke blog saya, jika sobat ingin menghapusnya, silahkan saja.

Untuk masalah Iframe, sudah saya ganti dengan object seperti yang disarankan oleh Kompi Ajaib, jadi like box yang satu ini sudah bebas dari Iframe.

Ok deh demikian artikel saya, semoga bermanfaat.

UPDATE :
Jika Like Boxnya gak mau keluar, coba pasang kode diatas dalam layout/add gadget.

Membuat Tombol Link Sederhana Dengan CSS

Membuat Tombol Link Sederhana Dengan CSS

Sudah lama saya gak share tentang Tips Blogger karena beberapa hari ini saya cuma share artikel Umum seperti Berita Misteri, Game, dll pokoknya. Maklum saya kurang berpengalaman di Blogger karena saya baru jadi Blogger, jadi kurang terlalu paham tentang kode-kode pembangunnya, tetapi walaupun begitu, saya mencoba untuk belajar lebih giat lagi tentang kode-kode tersebut dengan melakukan Eksperimen-eksprimen Sederhana yang hanya melibatkan CSS dan HTML yang saya lakukan di lab Cssdeck saya.
Ok, ngomong soal Tombol link ini sebenarnya tidak berbeda dengan Link Biasa hanya saja tombol link ini lebih berwarna dan bervariasi jadi lebih kelihatan menarik, heheh.

Ok deh, kita langsung praktekan saja.
- Pertama, sobat masuk dulu ke Edit HTML
- Lalu cari Kode ]]></b:skin
- Masukan Kode ini diatas ]]></b:skin
.johny {background:#15b;color:#fff;text-shadow:1px 1px 1px #000;padding:5px 11px 5px 11px;text-decoration:none;border-radius:3px 3px;font:normal 12px arial;font-weight:599;box-shadow :inset 1px 2px 2px #1b6fee}
.johny:hover {background:#484848;color:#fff; box-shadow :inset 0 3px 3px #000;transition: all 800ms ease-in-out}
.johny2 {background:#B0130d;color:#fff;text-shadow:1px 1px 1px #000;padding:5px 11px 5px 11px;text-decoration:none;border-radius:3px 3px;font:normal 12px arial;font-weight:599;box-shadow :inset 1px 2px 2px #FF0000}
.johny2:hover {background:#484848;color:#fff; box-shadow :inset 0 3px 3px #000;transition: all 800ms ease-in-out}
Untuk supaya desainnya berfungsi, saat sobat ingin membuat link, sobat tinggal menambah sedikit kode.
Contoh :
<a class='johny' href='http://my-topsite.blogspot.com'>Johny</a>
Maka akan menjadi

Johny

<a class='johny2' href='http://my-topsite.blogspot.com'>Johny</a>
Maka akan menjadi

Johny

Selesai, saya harap artikel diatas bisa dimengerti.

Membuat Menu Dropdown Di Blogspot

Submenu

Mungkin Tutorial ini sudah ketinggalan jaman atau hal yang sudah diketahui oleh kebanyakan Blogger-blogger, tetapi sekali lagi saya memberikan tutorial ini untuk para sobat saya yang masih bingung dan kesulitan dalam memasang submenu ini.
Sebenarnya sih agak ragu memberikan tutorial ini, karena saya masih bingung untuk menempat kode submenunya dimana, tetapi setelah coba teliti sedikit (soq teliti nih Johny :D) akhirnya saya mengerti juga dengan kode Submenu yang ditaruh Maskolis pada template ini.
Ok, jika sobat ingin memasang Submenu ini, silahkan sobat ikuti cara berikut.
- Sobat cari dulu kode ]]></b:skin
- Lalu masukan kode berikut diatasnya.
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;}
#menu li a{border-right:1px solid #222;}
#menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px}
#menu ul.menus a:hover{background:#222;color:#fff}
- Setelah memasukan kode diatas, silahkan sobat cari kode yang hampir mirip dengan kode.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cara Blogger' type='Header'/>
</b:section>
</div>
- Lalu Masukan kode dibawah ini  dibawah kode </div> pada kode diatas.
  <nav id='menu'>
<input type='checkbox'/>
  <label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='http://my-topsite.blogspot.com/' title='Home'>Home</a></li>
<li><a href='#' title='Template Blogger'>Template</a></li>
<li><a href='#' title='Best Blogger'>Best Blogger</a></li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
 <li><a href='#' title='Index'>Blog Index</a></li>
  <li><a href='#' title='About Me'>About Me</a></li>
  <li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
  <li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
 <li><a href='#' title='Index'>Blog Index</a></li>
  <li><a href='#' title='About Me'>About Me</a></li>
  <li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
  <li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
<li><a class='dropdown' href='#'>More</a>
<ul class='menus'>
 <li><a href='#' title='Index'>Blog Index</a></li>
  <li><a href='#' title='About Me'>About Me</a></li>
  <li><a href='#' title='Tukar Review Alexa'>Tukar Review Alexa</a></li>
  <li><a href='#' title='Gosip Yuk !'>Forum</a></li>
</ul>
</li>
       </ul>
    </nav>
Note :
Sesuaikan sendiri link yang sobat ingin masukan pada submenu.

Demikian Tutorial dari saya, yang saya kutip dari template Maskolis dan Kang Ismet, semoga bermanfaat.

Menambahkan Effect Hover Pada Blockquote

Cara Blogger
Kali ini saya akan memberi tips kepada sobat blogger tentang cara memasang effect hover pada blockquote. Saya akan menjelaskan apa itu effect hover pada sobat yang newbie seperti saya, Hover adalah effect yang membuat tampilan awal suatu  link ataupun gambar menjadi berbeda saat terkena cursor pointer mouse, maka link atau gambar tersebut akan terlihat lebih menarik (jika kurang pas, tolong betulkan :D). Tetapi kita tidak memasangnya di Link ataupun gambar, melainkan kita akan memasangnya pada Blockquote atau kotak kutipan blogger, saya harap sobat semua sudah tahu apa itu Blockquote.
berikut preview blockquote milik saya dengan effect hover
Contoh saja sobat blogger
memang gaya tampilannya hampir mirip dengan milik mas Kompi Ajaib, tetapi berhubungan saya sedikit mengerti dengan CSS, akhirnya saya menerapkannya di blog saya.
ok, jika sobat semua tertarik untuk menggunakan effect hover pada blockquotenya, silahkan sobat ikuti cara berikut :
- Tempelkan kode berikut diatas kode ]]><b:skin
.post blockquote:hover{margin:5px 10px 10px 20px;padding:30px 15px 10px;line-height: 1.6em;color: #333;background: #fff;border-left: 10px solid #b20000;text-decoration:none;box-shadow:0 0 15px 1px #bbb}
Note
Ganti kode yang berwarna hijau dengan warna text blockquotenya.
Ganti kode yang berwarna orange dengan background blockquote saat terjadi effect hover.
Sesuaikan kode yang berwarna kuning dengan ukuran left border awal blockquote sobat.
Ganti kode yang berwarna biru muda dengan warna left border yang sobat inginkan.
Tambahan Sobat :
Sobat bisa sesuaikan warna bayangan saat terjadi effect Hover pada blcokquote dengan cara mengganti kode #bbb (yang paling terakhir dari kode CSS sebelum penutup)

Selesai, jika sobat kesulitan, silahkan tanyakan pada saya.
Demikian artikel dari saya, semoga bermanfaat.