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

Pakai Credit Link ? Gengsi !

Blogger

Seperti itulah segelintir Blogger yang saya temui selama ini. Saya memulai ngeblog dari tahun 2013, saat itu saya masih kelas 1/2 SMP, saya mempunyai ketertarikan pada blog namun tidak mengerti sama sekali apa itu koding apa itu CSS/HTML, yang saya tau cuma nulis dan publikasi. (Sangat  pemula sekali).

Semakin lama saya bermain bersama Blogger, entah kenapa saya mulai tertarik untuk mempercantik tampilan blog saya, saya pun mencarinya di Google dan taraaa! saya baru mengetahui ternyata Blogger itu punya template, kebetulan template yang pertama kali saya gunakan adalah template yang berasal dari maskolis, saya terkesima dengan template buatan Maskolis yang terkenal dengan "Johny"nya =D, setelah sekian lama saya pake kok saya risih dengan link yang ada di footer yang berisi "Template by Creating Website published by Mastemplate", wah saya pun mulai coba membuka tempat sakral Blogger, yaitu kode HTMLnya, WOW saya seperti membaca aksara Jawa dan tidak ngerti apa-apa itu kode fungsinya apa, oke kemudian saya pun mulai scroll kebawah dan akhirnya menemukan sebaris kode yang sepertinya mengarah ke link footer template saya, saya pun mengubahnya menjadi link menuju ke FP Facebook saya, hahahah tanpa merasa bersalah saya setelah mengubah link tersebut.

Semakin lama saya semakin tertarik untuk mengenal kode HTML&CSS, saya pun mulai mencari referensi belajar, searching.... saya pun menemukan banyak blogger dan pandangan saya tidak jauh dari tampilan blog yang unik dan memukau, tidak lupa juga saya melihat kebawah, Wah! luar biasa templatenya udah di modifikasi sekeren ini tapi link asli sang pembuat template tidak dihapus. Seakan habis diceramahi Naruto, saya pun mulai sadar tentang pentingnya sebuah apresiasi, dan hal itu dapat dilakukan dengan tetap mencantumkan nama sang kreator.

Namun sekarang saya banyak menemukan hal yang aneh terjadi di tengah Blogger, mereka mengeluh dengan si pembuat template yang melarang menghapus link kreditnya

Anti Kredit Link
Lah, kan udah dishare gratis malah protes. (orang kaya gini memang berat gan).

Pengalaman, saya coba membuat sebuah template dan waktu yang saya habiskan adalah 1 minggu dan itu sampe larut, membuat tampilannya presisi dalam segala  jenis perangkat itu rumit dan butuh ketelitian. Itu juga yang dirasakan oleh pembuat template blogger, "udah cape-cape buat template gratis, eh malah ngamuk-ngamuk gara-gara dilarang hapus kredit".

Buanglah gengsi untuk dihargai, sekian dan terima kasih

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.

Download Blive Template Seo dan Responsive

Responsive Template

Kali ini saya akan share sebuah template yang dalam hitungan saya ini seo dan responsive (tentunya dengan menggunakan testernya masing-masing), untuk masalah seo, saya tidak mencapai 100% itu dikarenakan konten dalam blog tersebut bermasalah dan belum saya perbaiki karena sibuk desain template (FIXED). Ini adalah template kedua yang saya buat sendiri dan yang pertama saya publikasikan, template ini bukan modifikasi namun murni dari awal, dan saya harap ini layak :D, saya juga berterima kasih kepada semua yang sudah membantu.
Cek Seo
Cek Responsive
Cek Mobile Friendly untuk id-mufcnews.blogspot.com

Oke silahkan cek link berikut :


Saya menggunakan Framework Bootstrap dalam template ini, jadi ada fitur-fitur yang dapat kawan gunakan, yang anda bisa lihat disini http://getbootstrap.com/components/.
Disana kamu dapat melihat berbagai contoh penggunaan komponen-komponen bootstrap.

Meta Tag

Jangan lupa untuk mengubah Meta Tag yang berada didalam baris 17 - 90, silahkan diisi sesuai dengan fungsi meta tag masing-masing, jika masih kesulitan, silahkan tanyakan dibawah.

Menu Navigasi Hamburger

Menu hamburger yang saya maksud adalah menu yang berada di pojok kiri header, untuk mengubah isi menu silahkan ubah kode yang berwarna merah berikut.
<div class='navup'>
<div class='text-left' style='float:left'>
  <button id='tombol1'><span class='fa fa-bars'/></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>

Deskripsi 

Deskripsi bisa anda ubah melalui kode berikut.
<span class='desk'>Brayen-Man Home Coming</span>

Menu Navigasi Dropdown

Menu ini memiliki fitur multi dropdown, saya sudah berikan demonya dalam link hosting-/bundling, untuk mengubahnya silahkan ubah kode yang saya tandai dibawah ini.
<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>

Link Footer

Tepatnya, daftar link ini berada diatas footer, saya menggunakan Grid System-nya Bootstrap, System Grid Bootstrap secara full memiliki 12 kolom dan kamu cuma bisa menggunakan kurang/pas12 kolom namun tidak bisa lebih, sebagai bayangan saya menggunakan ruang 4 kolom untuk form Subscribe, 2 kolom untuk Daftar Link 1, 2 kolom untuk Daftar link 2, dan 4 kolom untuk recent posts, jika dihitung saya menggunakan semua ruang kolom yaitu 12, saya harap anda punya sedikit bayangan atau lebih lengkapnya silahkan kunjungi http://getbootstrap.com/css/#grid.  
Untuk mengubahnya sama seperti contoh diatas, kamu bisa mengubah link yang berada didalam  <div class='bloginfo'>..</div>.

Untuk yang merasa gengsi untuk menggunakan link footer, anda bisa membeli premium dengan menghubungi saya di form contact dibawah

Selesai, untuk menghargai sebuah karya saya harap credit link tidak diganggu, atau anda bisa baca tulisan diatas. Sekian, semoga bermanfaat.

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

Jangan Sering Pegang Anak Kucing ! Ini Penjelasannya

Miauwwww
Miauw
Seperti kita, anak kucing yang tentunya masih kecil tidak akan bisa berjuang hidup sendiri untuk mencari makan, tentu si anak kucing ini sangat bergantung pada induknya. Induk kucing adalah sumber gizi dari si anak kucing, karena si induk dapat memberikan makanan bergizi untuk anak kucing dalam bentuk susu. Tapi tanpa dikira tanpa dinyana, terkadang induk kucing pergi begitu saja meninggalkan anaknya tanpa ada kabar kembali seperti bang toyib yang tidak pulang 3 kali puasa 3 kali lebaran.

Apasih penyebabnya, oke akan kita ulas dibawah.

Induk Kucing Tidak Mengenali Anaknya


Kucing
Ini Kucing
Coy, kucing tidak seperti manusia yang mengenali seseorang dari penampilannya, kucing mengenali kucing lain melalui bau termasuk juga anaknya. Jadi apa hubungannya kucing mengenali melalui bau dengan tidak boleh menyentuh anaknya ?. Begini, anak kucing sudah memiliki bau asalnya yang tentunya sudah dikenali sang induk, jika kamu selalu memegang, menggendong, mengangkat si anak kucing, otomatis bau alami anak kucing itu pun terkontaminasi dengan bau kita, ya kalo kamu sudah mandi. Jadi, jangan sekali-sekali kamu megang kucing yang masih dalam keadaan bayinya (masih membutuhkan induk)

Sebagai Info :
6 Minggu : Kucing bisa makan makanan padat
8 Minggu : Waktunya pemisahan anak kucing dari induknya, namun tidak disarankan untuk yang awam (dibolehkan jika anda bisa menyusui si kucing)
12 Minggu : Nah ini waktu idealnya untuk misahin si anak dari induknya.

Nah untuk itulah kamu yang mungkin memelihara kucing harus lebih bijak lagi dalam mengurusnya, jangan dikit-dikit megang dikit-dikit megang (megang kok dikit-dikit). Jika kamu tidak ingin menyusui si anak kucing jangan sekali-sekali melakukan hal diatas. Don't This At  Home Guys !!!
Sekian artikel saya, terima kasih.

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.

Tiba-Tiba Lupa Mau Ngapain ? Ini Penjelasannya

Lupa
"Lah, tadi aku mau ambil apa yah ? ah yaudah lah balik aja".
Pernah kah sobat merasakan hal seperti ilustrasi diatas yang tiba-tiba lupa mau ngapain dalam suatu ruangan, tiba-tiba otak stuck lupa mau buat apa, itu hal yang paling menjekelkan. Hal ini sering terjadi pada saya, terutama pada saat saya sedang memikirkan hal diluar yang saya cari, misalnya saya lagi pengen ambil kunci motor tapi yang saya pikirkan bukanlah tentang kunci motor, tetapi tentang hal lain, alhasil saya pun lupa mau ngapain. Damn kampret.

Oke, sekian lama dan sekian sering saya mengalami, akhirnya saya tahu kondisi seperti itu ada namanya, disini saya berpikir bahwa bukan hanya saya yang ngalamin hal itu. Menurut beberapa sumber, kondisi sering lupa saat berada dalam suatu ruangan tersebut dikenal dengan "Event Boundary". Menurut brainpages.org
Our brains compartmentalize events and tie them to the environment, or room, in which they occurred. By moving from one room to the next, the brain effectively creates a file containing all the information about the first room, and what you did there, and tucks it away. It then starts to focus on the second room. Thus, remembering what you intended to do upon leaving the first room is a lot harder than if you had simply crossed from one side of the room to the other.
Yang dalam bahasa Indonesianya
Otak kita akan mengelompokkan suatu peristiwa dan mengikatnya ke lingkungan, atau ruangan, di mana mereka terjadi. Dengan berpindah dari satu ruangan ke ruangan berikutnya, otak secara efektif membuat file yang berisi semua informasi tentang ruang pertama, dan apa yang Anda lakukan di sana, dan melipatnya (baca:bungkus kenangan ruang pertama). Kemudian mulai fokus pada ruang kedua. Dengan demikian, mengingat apa yang ingin Anda lakukan setelah meninggalkan ruangan pertama jauh lebih sulit daripada jika Anda baru saja menyeberang dari satu sisi ruangan ke sisi yang lain.
Intinya, otak kita harus membuat fokus baru pada ruangan yang kedua setelah kita meninggalkan ruangan pertama. Kalau kata remaja sekarang, otak kita susah move on walaupun ada yang baru (lah otak juga bisa move on).

Untuk meneliti peristiwa ini, seorang yang bernama Radvansky membuat satu eksperimen, ia menyiapkan 3 ruangan di labnya untuk dilewati para peserta, ia lalu memberi tahu apa yang harus mereka lakukan di setiap ruangan. Hasilnya setiap kali peserta melewati pintu dan memasuki ruangan selanjutnya, peserta tidak bisa mengingat apa yang harus dilakukan di ruangan tersebut. Hal ini membuktikan, melewati pintu pada suatu ruangan yang baru membuat orang lupa apa yang harus mereka lakukan disana.

Akankah dengan cuma melewati pintu para jones itu akan mudah move on ? hmmmm.
Sekian artikel saya, terima kasih.

Indonesia Tidak Dijajah Selama 350 Tahun !

Indonesia

Indonesia dijajah selama 350 tahun !, itulah selama ini yang tertanam diotak  kita tentang berapa lama kita dijajah. Selama duduk di bangku sekolah pun jika ada pertanyaan "Berapa tahun Indonesia dijajah ?" jawaban "350 tahun bu !" pun secara serentak diucapkan siswa-siswa, jawaban tersebut sudah di luar kepala. Tetapi, adakah rasa penasaran sobat tentang kebenaran hal tersebut ?, bagi saya hal ini menarik untuk kita telusuri karena ini mengenai sejarah negara kita tercinta ini!.. MERDEKA!!!

Oke, darimanakah asal mula tentang "Indonesia dijajah selama 350 tahun"?
Jawabannya, hal ini bermula ketika Bung Karno menyerukan dalam pidatonya pada tahun 1950, ia menyebutkan bahwa "Indonesia telah dijajah selama 350 tahun", ungkapan tersebut pun menjadi salah satu pelajaran di sekolah selama ini. Tetapi saya beranggapan hal itu adalah salah satu cara Bung Karno untuk membangkitkan semangat partriotisme para pejuang.

Cornelis de Houtman
Jika kita menghitung 1945 - 350, yang kita dapatkan adalah kita mulai dijajah pada tahun 1595. Pertanyaannya, benarkah kita mulai dijajah pada tahun itu ?, faktanya yang terjadi tahun 1595 sebenarnya bukanlah penjajahan, melainkan kedatangan Cornelis de Houtman yang adalah seorang kapten kapal, dan ia mendarat di Banten untuk berdagang. Cornelis de Houtman adalah kapten kapal berbendera Belanda pertama yang tercatat mendarat di Indonesia. Dia bahkan tidak membawa tentara. Kalau yang dimaksud penjajahan atau kolonisasi yang dimaksudkan untuk penguasaan politik dan militer suatu wilayah oleh orang-orang dari luar wilayah tersebut, maka tentu saja rombongan de Houtman tidak melakukannya.

Indonesia mulai dikuasai VOC pada 1602
VOC kongsi dagang yang tidak hanya pergi "berdagang", namun juga membawa pasukan didalamnya. VOC memaksakan monopoli perdagangan, membangun benteng, dan menunjuk Gubernur Jenderal Hindia Belanda. Tetapi, walau begitu VOC belum dikatakan menjajah Indonesia  karena bahkan nama Indonesia pada saat itu belum ada. Bukan hanya karena itu, juga karena VOC hanyalah sebuah kongsi dagang, atau dalam dialek lokal disebut kumpeni.
VOCWilayah di Nusantara baru resmi menjadi koloni Negeri Belanda setelah VOC bangkrut karena korupsi. Bisa dihitung sejak tahun 1796 ketika Pieter Gerardus van Overstraten menjadi Gubernur Jenderal Hindia Belanda mewakili Kerajaan Belanda (bukan perusahaan swasta).
Itupun Belanda tidak pernah menjajah dan menguasai wilayah Indonesia yang kita kenal sekarang. Koloni yang disebut Hindia Belanda tidaklah permanen dalam jangka panjang dan penguasaanya tidak sepenuh Republik Indonesia menguasai teritorinya saat ini. Bengkulu (d/h Bencoolen), misalnya, dulu dikuasai Inggris, sementara Malaka (d/h Malacca) dikuasai Belanda. Lalu mereka berdua tukar guling. Pernah juga Hindia Belanda berada di bawah kekuasaan Perancis di bawah Gubernur Jenderal Daendels, karena negeri induknya, Belanda, diduduki Perancis. Tak lama sesudahnya, selama lima tahun, Hindia Belanda sempat diambil oleh Inggris di bawah Sir Thomas Stamford Raffles.
Lain lagi dengan Kerajaan Mataram, kemudian pecah jadi Keraton Surakarta dan Yogyakarta, yang kemudian menjadi Provinsi Daerah Istimewa Yogyakarta setelah kemerdekaan. Kerajaan ini masih punya raja sendiri, tidak tunduk dan bertanggung jawab kepada Gubernur Jenderal dan Ratu/Raja Belanda, tetapi punya kontrak politik/ekonomi dengan Gubernur Jenderal. Sebagian wilayah kerajaan ini tidak pernah dikuasai sepenuhnya oleh Belanda sampai Indonesia merdeka.

Berapa Lama Sebenarnya Nusantara Dijajah ?
Jika menghitung dari awal pendudukan VOC pada 1602, lalu dikuasai oleh Inggris pada 1811, dan dikuasai kembali oleh Belanda pada 1816, kemudian dilanjutkan Jepang pada 1942-1945, yang kita dapatkan.
Belanda = 209+126=335 tahun
Inggris = 5 tahun
Jepang = 3 tahun
Yang keseluruhannya berjumlah 343 tahun. Ini faktanya dan tidak beda-beda amat dengan yang selama ini kita pelajari.

Indonesia Tidak Pernah Dijajah !
Ini enggak ngasal kawan, serius. Sebagai sebuah negara kita gak pernah dijajah, karena dulu Indonesia bernama "Hindia Belanda", karena sejarah mengatakan bahwa nama Indonesia resmi digunakan sebagai nama sebuah negara pada tahun 1945, dan itu pas merdeka.

Jangan sekali-sekali melupakan sejarah. Demikian artikel saya, semoga bermanfaat.