Membuat Effect Parallax Dengan Jquery Sederhana

Parallax

Parallax, ya apa itu parallax ?
Menurut wikipedia, Parallax adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.
Baik, itu adalah pengertian parallax menurut wikipedia.
Jika kita melihat kutipan diatas, kita menemukan sebuah definisi singkat seperti yang saya tandai dengan tulisan cetak miring, iya saya harap melalui definisi singkat parallax tersebut kawan mendapatkan gambaran tentang effect parallax yang akan kita buat kali ini.

Parallax ini menurut saya adalah effect sederhana yang luar biasa keren, dengan parallax kita bisa membuat sebuah animasi saat scrolling, membuat sebuah animasi pada satu object yang akan bekerja pada saat scrolling itu sangat mungkin sekali dengan parallax. Jika masih penasaran apa itu parallax, cek demo berikut.


Bagaimana, keren bukan ?
Itu hanyalah satu dari sekian banyak effect yang bisa kita buat, dan itu adalah dasar parallalax yang saya buat supaya kawan dapat mengembangkan.
Effect parallax ini work dan kompatibel pada blogger pastinya, karena saya sudah menggunakannya pada blog saya yang lain, silahkan cek disini.


Praktek

Seperti yang tertulis pada judul,  Membuat Effect Parallax Dengan Jquery Sederhana, ya tidak ada yang sulit disini. Letakkan jQuery ini diatas </body>


<script>
$(window).scroll(function(){
 var jarak=$(this).scrollTop();
 $('.UBAHCLASS-INI').css ({
 transform : 'translate(0px,'+ jarak/1.3 +'%) rotate('+ jarak/5 +'deg)'
 });
})
</script>

Nah, tidaklah sepanjang yang kawan pikirkan bukan ?. Oh ya, pastikan kawan sudah memasang library jQuery yah supaya effect ini dapat berjalan.
Didalam jquery sangat jelas kita menjalankan sebuah CSS pada object, yaitu transform translate yang memiliki fungsi menggeser secara vertikal & horizontal object, dan transform rotate yang memiliki fungsi memutar object dengan satuan deg. Dengan penghitungan yang dinamis yang mengacu pada angka yang dihasilkan variabel, transform dapat terlihat hidup. Sebagai informasi, kita sudah membuat sebuah variabel bernama jarak.

Penyesuaian

Untuk penyesuaian, silahkan ubah class diatas dengan class atau ID object yang ingin dibuat effect parallax.

Oke itu saja, saya rasa cukup jelas

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 Smooth Scroll To Section ID

ScrollID

Entahlah apakah judul ini tepat untuk penamaannya yang pasti saya tidak terlalu tahu tentang namanya yang penting kerja =D. Cek link berikut.


Sebelumnya, ID yang saya maksudnya itu contohnya seperti #header-wrapper (yang bertanda pagar).
Cara ini biasanya digunakan pada halaman F.A.Q, pengunjung akan diberikan link pertanyaan dan jika link di klik otomatis pengunjung akan scrolling ke jawaban.
Smooth Scroll ini fungsinya hampir sama seperti scroll to top, hanya bedanya jika scroll to top mengarahkan kita ke atas blog sedangkan Smooth Scroll To ID yang saya maksud ini mengarahkan kita ke ID tertentu (silahkan lihat pada Demo). Misalnya kita ingin membuat sebuah link yang akan membawa pengunjung ke bagian post dengan cara scrolling, kita bisa gunakan <a href='#post-wrapper' class='page-scroll'>Bawa Diriku</a>. Kuncinya hanyalah pada class page-scroll, karena kita akan menambahkan fungsi pada class tersebut menggunakan jQuery.

Lagi dan lagi jQuery :D, saya beralasan menggunakan jQuery lebih mudah dalam membacanya daripada menggunakan Javascript Dasar. Jadi pastikan kawan sudah memasang Library Jquery.

Mari kita mulai.
Karena saya menggunakan effect easing, jadi pasang dulu library easingnya diatas </body>

<script src='https://rawgit.com/brayenid/borneoscript3/master/jquery.easing.1.3.js'/>

Lalu tempelken jQuery berikut ini diatas </body>

<script>
$('.page-scroll').on('click',function(e){

  var href = $(this).attr('href');
  
  var bungkusanhref = $(href);

  $('html, body').animate({
    scrollTop: bungkusanhref.offset().top - 50}, 2000, 'easeOutExpo');
e.preventDefault()
});
</script>
Contoh penggunaan :
<a href='#main' class='page-scroll'>Scroll To Main</a>
Seperti yang saya katakan diatas, kita akan memberikan fungsi pada .page-scroll sehingga link yang kita beri class page-scroll dapat menjalankan perintah kita untuk scrolling.
Jika biasanya kita meng-klik elemen yang ber-atribut href maka halaman akan reload dan misalnya kita membuat membuat href='#main' otomatis URL yang kita buka akan menambahkan di belakangnya menjadi babla.com#main. Namun pada kasus ini hal itu tidak akan terjadi, karena kita telah menambahkan e.preventDefault(), perintah ini berfungsi untuk mencegah halaman melakukan reload, jadi jika kita mengklik link yang memiliki class page-scroll maka link tersebut tidak akan melakukan reload.

Saya harap artikel ini dapat dimengert. Sekian dari 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 Dropdown Menu Responsive Dengan Effect Float

Menu

Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float.

Kebetulan menu ini basicnya saya gak tau dari mana, yang pasti menunya ini saya dapat dari salah satu blog saya lupa namanya, maaf jika ada yang merasa pembuat menu ini bisa mengabarkan saya.
Pada dasarnya menu ini hanya berbentuk sebuah daftar menu (listed/li) yang di inline-block biasa dan posisinya statis yang artinya tidak bergerak. Nah, disini kita akan mencoba membuat menu ini dapat bergerak dalam posisi tertentu, yang artinya posisi awal menu berada bawah header namun setelah kita scroll kebawah dan kita melewati menu otomatis si menu bakal nempel diatas dan gak bakal lepas sampai kamu scroll lagi balik keatas. Silahkan klik link dibawah.


Coba di scroll saja ke bawah dan lihat menu yang dibawah header otomatis mengikuti.

Disini kita akan menggunakan sedikit jQuery, jadi pastikan kamu sudah memasang library jQuery, jika belum kamu bisa taruh kode dibawah ini diatas </head>


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Namun jika sudah dipasang, abaikan saja.
Selanjutnya kita akan membuat CSSnya dulu. Salin CSS dibawah ini kedalam <style>...</style>
 

.menu {background: #4B304E;border-bottom:1px solid #2B304E;width: 100%;text-align:center;z-index: 9999}
.menu.nempel {position: fixed;top:0}
#menu1 {display: block;margin-top: 0;background: #aaa;}
.menu {display: block}
.menu li {text-align:left;display: inline-block;position: relative;z-index: 100;}
.menu li:first-child {margin-left: 0;}
.menu li a {font-weight: 400;text-decoration: none;padding: 10px 15px;display: block;color: #EC7263;transition: all 0.2s ease-in-out 0s;}
.menu li a:hover,.menu li:hover>a {color: #fff;background: #533557}
.menu ul {visibility: hidden;opacity: 0;margin: 0;padding: 0;width: 150px;position: absolute;left: 0px;background: #fff;box-shadow: 1px 1px 2px rgba(0,0,0,0.4);z-index: 99;transform: translate(0,-10px);transition: all 0.2s ease-out;}
.menu ul li {display: block;float: none;background: none;margin: 0;padding: 0;}
.menu ul li a {font-size: 12px;font-weight: normal;display: block;color: #666;background: #fff;}
.menu ul li a:hover,.menu ul li:hover>a {background: #eee;color:#666;}
.menu li:hover>ul {visibility: visible;opacity: 1;transform: translate(0,0);}
.menu ul ul {left: 149px;top: 0px;visibility: hidden;opacity: 0;transform: translate(0,-10px);transition: all .3s ease-out;}
.menu ul ul:after {left: -6px;top: 10%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(255, 255, 255, 0);border-right-color: #fff;border-width: 6px;margin-top: -6px;}
.menu li>ul ul:hover {visibiity: visible;opacity: 1;transform: translate(0,0);}
.responsive-menu {display: none;width: 100%;padding: 20px 15px;background: #ddd;color: #333;text-transform: uppercase;font-weight: 600;border-bottom: 1px solid #aaa;transition: .3s}
.responsive-menu:hover {background: #eee;color: #333;text-decoration: none;}

Kode yang bertanda merah (.menu.nempel) tidak akan berfungsi sebelum kita menaruhkan jQuerynya. Sebelum kita menaruh jQuerynya, kita taruh dulu HTML berikut.


<nav class='menu1' id='menu1' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-bars'/> Menu</a>    
    <ul class='menu'>
      <li><a href='/'>HOME</a></li> 
      <li><a href='http://id-mufcnews.blogspot.co.id/p/blog-page_16.html'>STATIC PAGE</a></li>
      <li><a href='http://id-mufcnews.blogspot.co.id/404'>ERROR 404</a></li>
      <li><a href='#'>HOSTING</a>
        <ul class='sub-menu'>
   <li><a href='#'>250 mb</a></li>
   <li><a href='#'>Bundling</a>
     <ul>
              <li><a href='#'>Website + 1000mb</a></li>
              <li><a href='#'>Website + 1500mb</a></li>
              <li><a href='#'>Website + Unlimited + .com</a></li>
            </ul>
          </li>
       </ul>
     </li>
     <li><a href='#'>OTHER</a>
 <ul class='sub-menu'>
   <li><a href='#'>Contact Us</a></li>
   <li><a href='#'>Affiliate</a></li>
   <li><a href='#'>Job</a></li>
 </ul>
     </li>
   </ul>
</nav> 

Dimana kode diatas ditaruh ? Sebenarnya peletakan beberapa baris kode seperti yang diatas tidaklah mutlak asalkan tetap berada didalam <body>...</body> itu tergantung anda ingin menaruhnya dimana, jika anda ingin menaruhnya diatas header bisa taruh diatas <header>, tapi kalau mau menaruhnya dibawah header bisa ditaruh dibawah </header>, cukup logis bukan ?

Kemudian kita akan menaruh jQuery yang isinya sebagai berikut diatas </body>.


 <script>
  $(window).scroll(function(){
    var jarak=$(this).scrollTop();

  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
});
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
</script>

Untuk kode yang merah itu berfungsi untuk menambah dan menghapus class, itulah yang akan otomatis menambah class .menu menjadi .menu.nempel, nah diatas tadi kita sudah membuat sebuah class dalam CSS yang berisi .menu.nempel {position:fixed;...} , nah sudah jelas jika sebuah elemen diberi property position dan diberi value fixed otomatis elemen tidak lagi berada/terkurung didalam sebuah container namun dia posisiya lebih fleksibel karena dia sekarang posisinya mengikuti posisi window, kemanapun anda scrolling (kebawah/keatas) elemen tersebut akan ikut, begitu sederhananya. Namun kita sudah memasang sebuah perintah dalam kondisi tertentu dalam baris kode
  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
Jika kita membacanya secara bahasa manusia isinya bisa berarti
Aku        : jQuery, jika jarak berada lebih dari (melewati) .menu1 (pembungkus menu) maka jalankanlah fungsi berikut
jQuery    : Apa fungsinya ?
Aku        : Tambahkan .nempel pada .menu (menjadi .menu.nempel)
Nah diatas adalah perintah pertama, kemudian kita tambah lagi dibawahnya perintah hilangkan class supaya dia kembali keposisi semula.
Aku : jQuery, jika jarak berada kurang dari (sebelum/diatas) .menu1 hilangkanlah .nempel (menjadi .menu saja)

Sebagai informasi, sebelumnya kita sudah membuat variabel jarak yang berisi "Seberapa jauh jarak kita scroll ke bawah dari atas yang didefinisikan dalam bentuk angka". Sebenarnya kita dapat melihat angka tersebut melalui console log, namun kita tidak penting untuk tau karena yang jalankan fungsi adalah jQuery :D.
$(window).scroll(function(){
    var jarak=$(this).scrollTop();
$(this) sama saja dengan selector yang dimaksud, atau dalam kasus ini $(this)=$(window).

Sebenarnya $('.menu1').offset().top -1 itu menghasilkan sebuah angka (namun kita hanya bisa melihatnya dengan console log), yang artinya seberapa jauh jarak dari atas ke .menu1, karena kita menggunakan offset().top-1 maka artinya menjadi "seberapa jauh jarak dari atas ke .menu1 dikurangi 1". (seandainya jaraknya adalah 300, maka akan dikurangi menjadi 299), saya harap dapat dipahami karena saya bukan expert jQuery jadi mohon dikoreksi jika salah.

Responsive Menu

Untuk kode orange itu adalah kode yang membuat si menu tadi menjadi responsive tepatnya saat ukuran window browser 767px, saat itu dia akan menjalankan #resp-menu dan mengubah menu yang inline-block tadi kedalam sebuah toggle. Toggle itu yang 4 nomor itu loh =D. Dalam jQuery toggle itu fungsinya memunculkan dan menyembunyikan elemen tertentu. Yang artinya menu akan disembunyikan dan akan dimunculkan jika ditekan tombol togglenya.

Selesai, sekali lagi saya juga masih proses belajar jquery ini :D, jadi penjelasan saya masih kelas pemula, jika ada yang salah tolong dikoreksi.
Sekian dan terima kasih.

Saya lupa menu responsive ini menggunakan font awesome, satu aja sih :D tapi dipasang aja font awesomenya gan

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 Laman Khusus Error Page

404 Error

Kali ini saya akan memberikan tutorial dasar blogger tentang Cara Membuat Laman Khusus Error Page untuk blogspot terutama, laman error page sebenarnya tidak begitu signifikan pengaruhnya terhadap SEO atau apapun itu yang berhubungan dengan Search Engine, namun adanya desain yang sedikit lebih menarik pada saat Error hal itu pun menambah kesan cantik untuk blog :D.
Oke, sebenarnya Error Page bisa kita desain dengan cara membungkus kode Error Page kedalam tag kondosional khusus Error Page yaitu <b:if cond='data:blog.pageType == &quot;error_page&quot;'>.

Apa itu Tag Kondosional ?
Tag Kondosional itu adalah tag yang ada kondosionalnya =D. Ok ralat, Tag Kondosional adalah sebuah tag yang berfungsi untuk membuat sebuah kode elemen HANYA jalan di kondisi tertentu sesuai Tag Kondosionalnya masing-masing. Tag Kondosional sebenarnya punya 2 perintah yaitu "==" (tanpa tanda kutip) yang berarti Hanya Dihalaman Yang Dimaksud dan "!=" yang berarti Kecuali Halaman Yang Dimaksud. Contohnya untuk yang "==", kita ingin menghilangkan header di halaman khusus artikel, kita bisa gunakan.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#header-wrapper {display:none}
</style>
</b:if>
Apa yang terjadi ?, iya tentu Header akan hilang entah kemana di halaman artikel namun tetap muncul dihalaman lain kecuali artikel. Saya harap anda dapat mempunyai bayangan sedikit mengenai Tag Kondosional.

Oke cukup tentang Tag Kondosionalnya, kita kembali ke bahasan. Silahkan cek link dibawah.

Demo

Sederhana saja, namun kamu bisa ubah sesuka hati kamu. Oke ikuti langkah dibawah.
Letakkan kode ini diatas </head>, namun jika templatemu sudah terdapat meta tag kamu bisa taro diatasnya supaya keliatan :D.


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <title>404 :(</title>
    <b:else/>
    <title><data:blog.pageName/></title>
</b:if>

Apa fungsi kode diatas ? Kode diatas berfungsi mengatur Title yang terletak diatas Address Bar Browser. (Silahkan diubah sesuka hati)

Yang kedua letakkan kode dibawah ini diatas </head> 


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.bloginfo, #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper,#footer-wrapper {display:none;}
.container404{transition:all .3s;margin:auto;padding-top:16%;width:400px;height:auto;text-align:center;animation: ticking 1s infinite;}
.body404 {background:#444;width:100%;height:100%;position:absolute;animation: body 2s infinite}
.container404:hover {animation:none}
.container404 h1 {font-size:150px;color:#ccc;animation: judul 1s infinite}
.container404 a {font-size:20px;color:#ccc;text-transform:uppercase}
@keyframes ticking {
    0%   {transform:scale(1.0)}
    15%  {transform:scale(1.1)}
}
@keyframes judul {
    0%   {color:#ddd}
    15%  {color:#eee}
}
@keyframes body {
    0%   {background:#444}
    15%  {background:#333}
}
</style>
</b:if>

Kode apa itu ? Itu adalah CSSnya yang mengatur desain dari Error Page nya, isinya bisa kita lihat saya menghilangkan beberapa elemen seperti bloginfo,header,outer,post-wrapper dan lain-lain. Dan juga saya menggunakan keyframes  yang berfungsi sebagai custom animation yang saya atur secara infinite yang artinya bergerak tanpa batas berhenti, tetapi akan berhenti jika kursor diatas tulisan seperti yang di perintahkan di .container404:hover {animation:none}. Dalam keyframes saya membuat salah satu perintah untuk membuat containernya membesar dan mengecil dengan menggunakan transform:translate(x.x).

Terakhir, kita letakan kode pemanggilnya.

<div class='body404'>
  <div class='container404'>
     <h1 class='error'>404 :(</h1>
     <a href='/'>Back To The Homepage</a>
  </div>
</div>

Apakah kode diatas ?  nah ini adalah HTMLnya yang fungsinya membangun elemen sesuai perintah desain dari CSS tadi. Letakan saja diatas </body>.

Selesai saya harap penjelasan ini dapat dimengerti oleh para blogger. Jika ada kode yang tidak jalan bisa komentar dibawah. Sekian terima kasih.

Buat Template Sendiri Dari 0

Template
Kali ini saya akan berbagi pengalaman tentang pembuatan  template blogger yang mandiri, maksudnya eksklusif karena kita bikin sendiri. Saya awalnya iseng-iseng saja ingin membuat sebuah template atau lebih dikenal dengan theme untuk bisa diterapkan website self-hosted, tapi semakin lama saya makin tertarik dengan template ini, saya pun berpikir "Lagian saya gak punya ide/rencana untuk build website self-hosted mending pasang di blog", saya pun memilih untuk memasangnya di blog, dengan sedikit penyesuaian upload file script & css untuk di hosting, karena saya membuat template secara offline menggunakan sebuah aplikasi yang namanya Sublime Text 3.Aplikasi ini enak banget, pluginnya lengkap, dengan adanya plugin induk untuk memasang plugin atau yang lebih dikenal dengan package control, kawan dapat memasang banyak plugin secara bebas. Aplikasi ini juga sangat efisien, dimana disana tersedia plugin yang namanya emmet, plugin ini sangat meringankan waktu untuk membuat template, contohnya jika saya ingin  membuat sebuah kerangka untuk HTML 5, saya tinggal mengetik HTML:5 lalu tab, jengjeng kerangka terbentuk. Saya sangat merekomendasikan aplikasi ini untuk kawan-kawan.

html

html

Pembentukan Kerangka

Membuat kerangka blog ini harus kamu perhatikan juga tentunya, dan juga ini menurut saya menjadi dasar pembentukan template. Kamu harus tau, kamu mau buat template dengan berapa kolom, 1/2/3, dan juga penempatan atau pemasangan elemen seperti header, sidebar,  ataupun footer, saran saya buatlah sesuai fungsi blog. Dalam project ini saya hanya membuatnya secara sederhana dengan tampilan 1 kolom dengan hanya bagian penting yang akan saya desain. contohnya saya hanya mendesain tampilan homepage dan static page saja, jika seperti post-page saya abaikan karena saya sepertinya tidak saya tidak menggunakannya.  
Kenapa saya tidak menggunakan post-page ?
Nah ini, seperti yang sudah saya sampaikan diatas, buatlah sesuai fungsi dan kebutuhan, template ini rencananya akan saya gunakan untuk blog yang bertipe galeri atau apalah itu, jadi saya tidak membutuhkan post-page, karena saya akan menampilkannya di halaman depan tanpa harus masuk post-page untuk melihat gambar.
Untuk demonya, silahkan klik link dibawah


Penggunaan Framework Bootstrap

Untuk pembentukan template saya dibantu oleh bootstrap, Bootsrap menurut saya sangatlah efektif jika ingin menghemat waktu untuk membuat elemen yang responsif dan cepat, dan juga elemen class yang banyak sudah siap sedia didalam cssnya bootstrap yang ..../boostrap.min.css, dan jangan lupa juga dengan javascript yang sudah disediakan bootstrap, karena beberapa elemen responsif tidak akan jalan jika ini tidak dipasang seperti contohnya seperti menu navbar versi mobile yang menggunakan sistem yang saya gak tau namanya ini :D, pokoknya dia menggunakan sistem navigasi buka tutup gitulah. Berbagai fitur yang sangat membantu dari bootstrap, pencatuman bootstrap sangat direkomendasikan untuk blog sobat, 

Mengenal Lebih Dalam Kode Pembangun

Nah ini dia perbedaannya kamu desain template yang sudah ada dengan kamu membuat sendiri templatenya, kamu akan jauh lebih mengenal templatemu, penempatan serta seluk beluk blog udah dikenal jadi kalau mau desain lagi anda sudah tidak kerepotan mencari id ini mencari class ini dan js yang aneh-aneh ditanam di template.
Saya mulai tertarik untuk lebih mengenal javascript, karena mau tidak mau javascript gak lepas dari penulisan si builder template, jika kamu suka dengan effect-effect cantik di blog seperti effect dropdown menu yang suka memantul, membuat sebuah effect pada saat klik link tertentu dengan menggunakan event, kamu wajib tau atau sedikit tau tentang javascript, untuk penggunaan JSnya bisa tolong google carikan.

Coba-coba aja gan buat template sendiri siapa tau jadi, kalo udah jadi dijamin bakal senyum-senyum sendiri karena akan ada pertanyaan dalam batin "lah kok jadi yah ?", terutama bagi saya yang newbie hahahaha. 
BTW, saya butuh saran untuk template saya gan untuk lebih mengembangkannya lagi :D.
Oke sekian artikel saya, terima kasih.

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.

Cara Paling Mudah Dapat Komentar Artikel Blog

Cara Blogger
Kali ini, saya akan coba memberi tips kepada sobat blogger yang kesulitan mendapatkan komentar dari pengunjung yang datang ke blog kita.
Karena, sayang sekali jika pengunjung blog kita banyak tetapi tidak dapat komentar atau tanggapan sama sekali dari pengunjung tersebut.

Jujur, komentar adalah suatu kebanggaan tersendiri bagi saya, dan sobat semua pasti akan berpendapat yang sama seperti saya, karena 1 komentar saja adalah sesuatu yang pasti sangat dinanti oleh sobat blogger yang newbie seperti saya, apalagi jika itu komentar pertamanya, pasti akan sangat bangga bukan ?

Ok, kita akan langsung menuju ke pokok pembahasan saja.
Ada beberapa cara yang bisa dilakukan untuk mendapatkan komentar dengan mudah.

Berikut ini tips dari saya untuk sobat sesama blogger newbie.
  • Rajin-rajinlah sobat blogwalking ke blog-blog lain, tetapi carilah blog yang aktif, tidak lupa berkomentar dan jangan juga sobat membuat spam, cukup berkomentar seperti biasa saja tidak usah berlebihan untuk mempromosikan blog.
  • Aktifkan semua profil komentar seperti Name/URL, Open ID, dll, dan jika blog sobat sudah rame, silahkan sobat menonaktifkan beberapa profil komentar seperti Anonymus untuk meminimalisir adanya komentar Spam.
  • Share Artikel Ke Fanspage atau Forum yang membahas tentang satu kegemaran, jika Fanspage atau Forum tersebut membahas tentang Game, maka, bagikanlah artikel yang terkait dengan Game, dan carilah yang banyak membernya.
Demikianlah tips dari saya, walaupun sederhana, tetapi saya harap bisa membantu blog newbie seperti saya.
Jika sobat ada tips lain, silahkan beri tanggapan sobat.

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.

Cara Membuat Pop Up Window Di Blog

Contoh Pop Up Window Tanpa Javascript

Tutorial yang sangat sulit dicari ini akan coba saya publikasikan, mungkin untuk seorang master, hal ini tidaklah sulit, tetapi untuk kita yang masih awam dalam masalah ini, pasti akan kesulitan tentunya, saya saja sebenarnya sempat kesulitan untuk membuat pop up window ini, tetapi lama-lama bisa juga.
Ok, pop up window yang satu ini tanpa menggunakan Javascript, walaupun kebanyakan orang memakai Javascript. Alasan saya tidak menggunakan Javascript, karena saya tidak ingin memberatkan blog saya dengan terlalu banyaknya kode-kode yang berada diatas </body> ataupun </head>, banyak Blogger lain yang bilang kalau terlalu banyak memasukan Javacript akan memberatkan blog kita, maka dari itu saya mencoba untuk mentiadakan Javascriptnya.
Ok, jika sobat ingin memasangnya sekarang, ikuti cara berikut.
- Pasang Kode ini pada : Postingan, submenu ataupun link lainnya
<a href="http://my-topsite.blogspot.com" onclick="javascript:void window.open('http://my-topsite.blogspot.com','1377457520549','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;">Ganti Dengan Text Link</a>
Note :
Ganti URL yang berwarna merah dengan URL yang sesuai dengan URL tujuan.
Ganti kode yang berwarna orange dengan ukuran yang sobat inginkan (width = Lebar | height = Tinggi).
Ganti text yang berwarna Hijau sesuai dengan text link yang sobat inginkan.
Selesai.

Demikian Tutorial dari saya, 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.

Cara Menghilangkan Kolom Pada Post Tertentu

cb

Setelah lama saya gak nulis Artikel, akhirnya saya menulis lagi artikel yang berkategori Tutorial ini, judulnya "Cara Menghilangkan Kolom Pada Post Tertentu", maksud kolom dalam artikel ini adalah, kolom Sidebar, Footer, Header. Hal seperti ini mungkin sebagian besar Blogger sudah mengetahuinya bukan ?, tetapi berhubungan saya ingin mengupdate Blog saya, akhirnya Post ini saya publikasikan.
Ok, sebenarnya hal ini tidaklah begitu sulit untuk sobat yang mengerti CSS, karena kita hanya meletakan beberapa CSS Style dibawah Post Artikel kita, misalkan kita ingin menghilangkan sidebar pada salah satu artikel kita, maka kita hanya perlu menambahkan CSS
<style type="text/css">
.sidebar-wrapper {display:none}
</style>
Note :
Ganti kode yang berwarna merah dengan kode sidebar template sobat, karena bisa saja kodenya berbeda, tetapi jika sobat memakai Templatenya Maskolis, rata-rata kodenya sama.
Taruh Kode diatas pada kondisi edit entri dalam tab HTML bukan Compose.

Tetapi, jika sobat ingin menghilangkan kolom header, sidebar, footer, credit (kode biasa muncul di template maskolis) dan ingin membuat tampilan page menjadi Full, sobat bisa gunakan kode berikut.
<style type=text/css">
.sidebar-wrapper {display:none}
.footer-wrapper {display:none}
.credit {display:none}
.header-wrapper {display:none}
.main-wraper {width:900px}
</style>
sobat bisa menambahkan atau mengurangi kode diatas dengan menyesuaikan kode dari kolom yang ingin sobat sembunyikan atau rubah.
Sekian Artikel dari saya, semoga dapat dimengerti dan bermanfaat.

Memodifikasi Tampilan Recent Post Maskolis

Memodifikasi Recent Post Maskolis

Tutorial yang satu ini berkaitan dengan Tutorial yang pernah saya tulis sebelumnya yang berjudul Cara Memasang Recent Post Dengan Pilihan Label , Setelah saya utak-atik CSSnya akhirnya saya berhasil mengubah gaya background dan fontnya (Maklum Newbie mas), tutorial diatas saya dapat dari mas kompi tetapi mas kompi dapat dari Maskolis, jadinya saya membuat nama maskolis deh hehehe.
Jika sobat pernah mempraktekan tutorial dari Kompi Ajaib yang ini dan bertanya-tanya "Cara Mengubah Backgroundnya bagaimana ?" maka saya akan memberi tipsnya, sebenarnya cara mendesainnya cukup mudah, kitak tidak perlu mendesainnya melalui ID dari recent post (Pbl_posts) tetapi kita hanya perlu menggunakan ID dari widget tersebut, jika ID widget dari recent posts tersebut adalah HTML6 (ID widget recent posts saya), maka kita akan memakai ID widget tersebut dengan style CSS
#HTML6 .widget-content {background:#fff;height:230px; padding:10px 2px 2px 7px; border: 1px solid #fff;width:auto; overflow:auto; }

Note :
- Ganti kode berwarna merah dengan ID widget dari recent posts milik sobat (semua ID widget pasti berbeda-beda)
- Ganti kode berwarna orange dengan background dari recent posts yang sobat inginkan.
- Silahkan tentukan sendiri tinggi widget dengan mengganti kode berwarna biru.

Jika kita sudah memasang Kode tersebut diatas ]]></b:skin , maka kita perlu menghapus beberapa kode didalam widget recent posts yang sudah kita pasang
<div style="background:none repeat scroll 0% 0%; border: 1px solid #999999; height: 230px; overflow: auto; padding: 10px;">
<span id="pbl_labels"></span>
<div id="pbl_posts">
Recent Posts </div>

<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>

<script type="text/javascript" src="http://yourjavascript.com/2103361588/carabloggerrecentpost.js
/">
</script>
<scipt src="http://my-topsite.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
</script></div>

Diatas adalah kode recent posts yang telah sobat pasang, dan kode yang ditandai dengan warna merah, adalah kode yang harus kita hapus, jika semuanya sudah di praktekan, sobat tinggal Save widgetnya.
Demikian artikel dari saya, semoga bermanfaat.