/* ---* 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;
}
}
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 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>
Cek this code HTML :
<!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
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 ..
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 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!
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 :
Contoh gambar inti :
Contoh gambar untuk hover :
Contoh untuk yang sudah jadi seperti dibawah ini :
Selamat mencoba, anda bisa menggunakan modul custom html advance.
<?php
header("Location: http://www.google.com");
?>
simpan dengan nama file index.php
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.
WA Only : 0882 3949 9220
Email : webkunpro@gmail.com