Kumpulan Coding

Cara membuat background responsive

/* ---* CUSTOM TOP BLOCK *--- */
#oTopBlock {
    background-image: url("http://localhost/ipe/images/header-2021.png.png");
    height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 767px)  {
    #oTopBlock {
    background-image: url("http://localhost/ipe/images/header-2021.png.png");
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
}

Membuat tombol WA melayang

Berikut adalah code html untuk membuat tombol WA melayang di sisi kiri bawah web:

<a href="https://api.whatsapp.com/send?phone=6288239499220&text=">
<img src="http://link-untuk-image" class="wabutton" alt="WhatsApp-Button">
</a>
<style>
.wabutton{
width:auto;
height:auto;
position:fixed;
bottom:20px;
right:20px;
z-index:100;
}
</style>

Script sederhana embed video di web

Script sederhana ini bisa jalan mulus di firefox, chrome dan android :

<video width="100%" height="auto" autoplay muted loop>
  <source src="http://autobacs.co.id/ab7.mp4" type="video/mp4">
  <p>Your browser does not support the video element.</p>
</video>

Membuat code HTML Responsive 2 kolom

Cek this code HTML : Cool

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.kolomkiri {
  float: left;
  width: 50%;
  overflow: hidden;
}

.kolomkanan {
  float: left;
  width: 50%;
  overflow: hidden;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .kolomkiri, .kolomkanan {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .kolomkiri, .kolomkanan {
    width: 100%;
  }
}

</style>
</head>
<body style="font-family:Verdana;">

<div style="overflow:auto">

  <div class="kolomkiri">
   <p>text/image</p>
  </div>

  <div class="kolomkanan">
    <p>text/image</p>
  </div>

</div>

<div style="background-color:#f3f3f3;text-align:center;padding:10px;margin-top:7px;font-size:20px;">Optiononal area text</div>

</body>
</html>

Selamat mencoba Cool

Cara embed video youtube full width tanpa black bars

Code html :

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SYzSz5Enn5E?rel=0&controls=0&showinfo=0&modestbranding=0&autoplay=1&mute=1&loop=1&playlist=SYzSz5Enn5E" class="pos-4 large" frameborder="0" autoplay mute loop allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

SYzSz5Enn5E --> id video youtube

Code CSS :

.video-container {
    position:relative;
    padding-bottom:55%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Slamat mencoba .. Cool

 

Cara membuat css background fix full width

Silahkan copy code dibawah ini di css template (bagian background):

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Gunakan notepad ++ untuk css editornya. Selamat Mencoba!

Cara membuat facebook comment di artikel K2

Cara membuatnya adalah copy code dibawah ini di template/nama-template/html/com_k2/template/nama-template(default)/item.php

<script type="text/javascript">
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));

</script> <div class="fb-comments" data-href="/<?php echo JURI::getInstance()->toString(array('scheme', 'host', 'port')) . $this->item->readmore_link; ?>" data-num-posts="2" data-width="576"></div>

paste di baris paling akhir --> save. Slamat Mencoba!

Cara membuat mouseover dengan gambar

Mouse over berfungsi seperti hover, saat kursor diarahkan ke area link, dia akan menimbulkan efek menyala atau meredup tergantung si pembuatnya. berikut ini saya akan membuatkan contoh mouse over tanpa menggunakan css dan menggunakan 2 gambar untuk gambar inti dan gambar hover nya.

Fungsi dari hover ini adalah tidak lain untuk mempercantik tampilan website anda. Cekidot !!

Berikut adalah codenya :

<p>

<a href="#"><img alt="" onmouseout="this.src='/images/menu/1.jpg'" onmouseover="this.src='/images/menu/11.jpg';" src="/images/menu/1.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/2.jpg'" onmouseover="this.src='/images/menu/22.jpg';" src="/images/menu/2.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/3.jpg'" onmouseover="this.src='/images/menu/33.jpg';" src="/images/menu/3.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/4.jpg'" onmouseover="this.src='/images/menu/44.jpg';" src="/images/menu/4.jpg" /></a>
<a href="#"><img alt="" onmouseout="this.src='/images/menu/5.jpg'" onmouseover="this.src='/images/menu/55.jpg';" src="/images/menu/5.jpg" /></a>

</p>

Note :

  • images/menu/1.jpg --> adalah gambar inti
  • images/menu/11.jpg --> adalah gambar untuk hover nya

Contoh gambar inti :

Contoh gambar untuk hover :

 

Contoh untuk yang sudah jadi seperti dibawah ini :

 

Selamat mencoba, anda bisa menggunakan modul custom html advance. Cool

Cara membuat file redirect

<?php

header("Location: http://www.google.com");

?>

simpan dengan nama file index.php

About Us

Sudah hampir 10 tahun lebih menekuni website berbasis CMS Joomla, dari mulai joomla versi 1.0, 1.5x, 2.5x sampai yang Versi 3x.

Berbekal ilmu otodidak, dari buku, forum, diskusi sesama pengembang joomla dan browsing2. Sampai detik ini masih tetap tekun mempelajari kekurangan dan kelebihan CMS Joomla.

Contact Info

WA Only : 0882 3949 9220
Email : webkunpro@gmail.com

Visitor Counter

Sosial Media

Awal berdiri website ini Tahun 2013, tujuan utamanya adalah sebagai lapak penyedia Jasa Pembuatan Website berbasis CMS Joomla, selain itu website ini akan berisi bermacam-macam tutorial seputar web joomla.

Temukan saya di facebook :