Cara Menggunakan If Else dan Else If Pada JS

Menggunakan IF Else

Kali ini saya akan memberikan pembelajaran dasar pada javascript, ya gak perlu sulit sulit karena saya bukan expertnya JS :D.
Berbicara tentang pengkondisian pada JS sebenarnya sama saja pada pengkodisian pada HTML khususnya HTML Blogger yang kita kenal dengan Tag Kondosinal, namun dalam penulisannya jelas berbeda.

Baik, sebelumnya mari kita berkenalan dulu dengan syntaxnya.
if (kondisi 1){
            Fungsi Utama
        }
        else if (kondisi 2) {
            Fungsi Alternatif
        }
        else {
            Fungsi Alternatif kedua
        }
Dimulai dengan if tentunya sebagai kondisi utama lalu diikuti dengan else if yang sebenarnya adalah opsional dan gak wajib karena bisa dipake jika kamu ingin memiliki lebih dari dua kondisi, dan yang terakhir adalah else kondisi alternative kedua setelah else if.
Jadi jika nilai pada if tidak sesuai, maka otomatis dia langsung ke else if yang sebagai alternatif, namun jika yang else if masih tidak sesuai maka bergeserlah dia ke else.

Sebenarnya jika kamu hanya ingin menggunakan if dan else bisa saja menjadi.
if (kondisi 1){
            Fungsi Utama
        } else {
            Fungsi Alternatif kedua
        }

Praktek Gan !

Saya tidak akan menjelaskan secara spesifik penggunaanya, namun untuk sedikit pemahaman ini saya buatkan contohnya. Cek link berikut.


Untuk simple source code'nya gunakan kode berikut.


  var jawab = prompt('Film apa yang jargonnya "DEMI DEWA ?. (A) Film India, (B) Film JAV');
  if (jawab == 'a'){
   alert('Jawaban Benar')
  } 
  else if (jawab == 'b') {
   alert('Jawaban Salah')
  }
  else {
   alert('Pilihan Jawaban Tidak Ada')
  }

Diatas yang saya tandai dengan warna merah itu gunanya memunculkan semacam kotak dialog yang dapat diisi oleh user lalu data yang diisikan oleh user tersebut akan dijadikan variabel nantinya.
Nah setelah variabel sudah mendapatkan data maka didalam kondisi if akan disandingkan dengan nilai lain.
jawab == 'a' dapat dibaca "jawab sama dengan a" atau jika ditambah menjadi if (jawab == 'a') {fungsinya} dapat dibaca "jika jawab sama dengan a jalankan fungsi berikut".
Untuk dipahami, penggunaan string atau tanda kutip hanya digunakan pada objek seperti huruf (contoh: 'angka') kalo angka gak perlu ada string lagi tapi langsung aja tulis angkanya (contoh: 1)

Oke,sampai disini aja, silahkan kembangkan kode diatas saya harap dapat bermanfaat, sekian dan 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.

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.

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.

Cara Pasang Breadcrumb Yang Terindeks Google

Cara Blogger Breadcrumb

Kali ini saya akan memberi tutorial kepada sahabat Blogger cara memasang breadcrumb agar terindeks Google. Tutorial ini saya dapatkan dari Maskolis, tapi rubah sedikit gaya Breadcrumbnya.
Ok, apakah sobat semua mengetahui apa itu breadcrumb, kalau sobat tidak tahu apa itu Breadcrumb, saya akan jelaskan sedikit.
Breadcrumb menurut Maskolis adalah "Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.", dan juga dapat memudahkan pengunjung untuk mengetahui posisinya dalam suatu artikel, menurut Maskolis, Breadcrumb ini berfungsi untuk memudahkan web/blog kita untuk terindeks di Google, karena search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog.
Itu tadi adalah pengertian dan fungsi dari Breadcrumb, sekarang kita akan mencoba mempraktekannya.
Ikuti cara berikut :
- Cara agar kita bisa mendesainnya, sobat Cari Kode ]]></b:skin
- Lalu masukan kode dibawah ini
.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:11px;line-height:1.4em;border-bottom:2px solid #f6f6f6;}

Note :
Tulisan yang diwarnai warna merah bisa sobat ganti, itu adalah ukuran Font dari Breadcrumb.
Jika sobat ingin menghilangkan garis bawahnya, sobat bisa hilangkan kode border-bottom:2px solid #f6f6f6; .

- Setelah memasukan CSS diatas, Sobat Cari kode  <div class='post hentry'>
- Lalu Masukan kode berikut dibawahnya
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' expr:title='data:label.name' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>

Note :
Yang saya tandai warna merah itu berupa Title, jika Cursor Pointer kita geser diatas Link label, maka titlenya akan muncul.

Demikian tutorial dari saya, untuk sumbernya, sobat bisa lihat di Artikel Maskolis disini.

Cara Pasang Translator Ringan Diblog

Kali ini saya akan berbagi kepada para blogger tentang "Cara Memasang Translator Ringan" di blog.
Kenapa kita harus memasang Translator di blog kita, karena Translator itu sangat penting untuk sebuah blog karena pengunjung blog kita tidak hanya datang dari dalam saja tetapi juga dari luar apalagi jika blog kita berada dipucuk, pasti banyak pengunjung yang berasal dari luar.
Ok deh, kalau tertarik untuk memasang translatornya di blognya
silahkan Copy Kode berikut lalu pasang dimanapun anda mau
entah itu melalui Layout / Edit HTML
berikut kode scriptnya
<style type="text/css">
#translator-wrapper {
  display:block;
  width:200px;
  border:1px solid #0A340A;
  background-color:white;
  overflow:hidden;
  position:relative;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  width:100%;
  color:black;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#0A340A;
  border:none;
  color:white;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:30px;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:13px;
  margin-top:-5px;
}
#translator-wrapper a:hover {background-color:#0A2C0A}
#translator-wrapper a:active {background-color:#082408}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
</style>
<h3></h3>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected />English
        <option value="id" />Indonesian
        <option value="af" />Afrikaans
        <option value="sq" />Albanian
        <option value="ar" />Arabic
        <option value="hy" />Armenian
        <option value="az" />Azerbaijani
        <option value="eu" />Basque
        <option value="be" />Belarusian
        <option value="bn" />Bengali
        <option value="bg" />Bulgarian
        <option value="ca" />Catalan
        <option value="zh-CN" />Chinese
        <option value="hr" />Croatian
        <option value="cs" />Czech
        <option value="da" />Danish
        <option value="nl" />Dutch
        <option value="en" />English
        <option value="eo" />Esperanto
        <option value="et" />Estonian
        <option value="tl" />Filipino
        <option value="fi" />Finnish
        <option value="fr" />French
        <option value="gl" />Galician
        <option value="ka" />Georgian
        <option value="de" />German
        <option value="el" />Greek
        <option value="gu" />Gujarati
        <option value="ht" />Haitian Creole
        <option value="iw" />Hebrew
        <option value="hi" />Hindi
        <option value="hu" />Hungarian
        <option value="is" />Icelandic
        <option value="id" />Indonesian
        <option value="ga" />Irish
        <option value="it" />Italian
        <option value="ja" />Japanese
        <option value="kn" />Kannada
        <option value="ko" />Korean
        <option value="la" />Latin
        <option value="lv" />Latvian
        <option value="lt" />Lithuanian
        <option value="mk" />Macedonian
        <option value="ms" />Malay
        <option value="mt" />Maltese
        <option value="no" />Norwegian
        <option value="fa" />Persian
        <option value="pl" />Polish
        <option value="pt" />Portuguese
        <option value="ro" />Romanian
        <option value="ru" />Russian
        <option value="sr" />Serbian
        <option value="sk" />Slovak
        <option value="sl" />Slovenian
        <option value="es" />Spanish
        <option value="sw" />Swahili
        <option value="sv" />Swedish
        <option value="ta" />Tamil
        <option value="te" />Telugu
        <option value="th" />Thai
        <option value="tr" />Turkish
        <option value="uk" />Ukrainian
        <option value="ur" />Urdu
        <option value="vi" />Vietnamese
        <option value="cy" />Welsh
        <option value="yi" />Yiddish
    </select><a id="translate-me" href="#" title="Translate!"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>
Semoga bermanfaat.