Blogs
on June 19, 2020
Silahkan tonton video Membuat Template Responsive – Header di atas untuk mengikuti tutorial. Untuk mempermudah dalam pembelajaran, salin source code di bawah ini sesuai tutorial Membuat Template Responsive – Header yang ada dalam video
Kode 1
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
<meta name="keywords" content="<?php echo $keyword; ?>">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo base_url('aset/css/styles.css');?>">
<link rel="stylesheet" href="<?php echo base_url('aset/fontawesome/css/all.css');?>">
<script>
function mnrespon() {
var x = document.getElementById("atnav");
if (x.className === "mnatas") {
x.className += " resps";
} else {
x.className = "mnatas";
}
}
</script>
</head>
<body>
<div class="maincon">
<header>
<a href="<?php echo base_url(); ?>"><img src="<?php echo base_url('aset/gambar/logo.jpg');?>" alt="logo" class="logoweb"></a>
<span class="flxbetween">
<div class="kotak-cari">
<form action="<?php echo base_url('berita/cari');?>">
<input type="text" placeholder="Cari.." name="cari">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="lgheader">
<?php if (!session()->logged_in) {
echo anchor('user/login', 'Login').' | '.anchor('user/daftar', 'Daftar');
} else {
echo anchor('user/profil', 'Profil').' | '.anchor('user/logout', 'Logout');
}
; ?>
</div>
</span>
</header>
<div class="clear"></div>
<div class="mnatas" id="atnav">
<a href="<?php echo base_url();?>">Home</a>
<a href="<?php echo base_url('berita/kate/bisnis');?>">Bisnis</a>
<a href="<?php echo base_url('berita/kate/politik');?>">Politik</a>
<a href="<?php echo base_url('berita/kate/teknologi');?>">Teknologi</a>
<a href="<?php echo base_url('berita/kate/olahraga');?>">Olahraga</a>
<a href="<?php echo base_url('berita/kate/otomotif');?>">Otomotif</a>
<a href="<?php echo base_url('berita/kate/peristiwa');?>">Peristiwa</a>
<a href="<?php echo base_url('fakta');?>">Cek Fakta</a>
<a href="<?php echo base_url('fakta/kate/fakta');?>">Fakta</a>
<a href="<?php echo base_url('fakta/kate/hoax');?>">Hoax</a>
<a href="javascript:void(0);" class="icon" onclick="mnrespon()">
<i class="fa fa-bars"></i>
</a>
<div class="clear"></div>
<div class="newsticker"><marquee behavior="scroll" direction="left">
SEKARANG BELAJAR MEMBUAT WEBSITE PROFESIONAL GRATIS BERSAMA CREGASIA</marquee>
</div>
<div class="link-ats">
<div><a href="<?php echo base_url() ;?>">Home</a> <?php if (isset($menu_link)) {echo $menu_link;} ;?></div>
<?php if (isset($tombol) && session()->logged_in) {echo '<div class="tombol">'.$tombol.'</div>';} ;?>
</div>
</div>
<div class="clear"></div>
<div class="badan">
Kode 2
body {
margin: 0;
}
a {
text-decoration: none;}
a:visited {
color: black;}
a:hover {
color: orange;}
header {
padding-top: 20px;
}
header .logoweb {
width: 170px;
height: 35px;
padding: 5px 5px 5px 20px;
}
h2 {
margin-top: 5px;
margin-bottom: 5px;
}
h4 {
margin-top: 5px;
margin-bottom: 5px;
}
.clear {
clear: both;
}
.mnatas {
overflow: hidden;
background-color: white;
}
.mnatas a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
}
.mnatas a:hover {
background-color:rgb(221,221,221);
color: black;
}
.mnatas a.active {
background-color:rgb(230,255,204);
}
.mnatas .icon {
display: none;
}
@media screen and (max-width: 600px) {
.mnatas a:not(:first-child) {display: none;}
.mnatas a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.mnatas.resps {position: relative;}
.mnatas.resps .icon {
position: absolute;
right: 0;
top: 0;
}
.mnatas.resps a {
float: none;
display: block;
text-align: left;
}
}
.mnatas .kotak-cari {
float: right;
}
.mnatas input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.mnatas .kotak-cari button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.mnatas .kotak-cari button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.mnatas .kotak-cari {
float: none;
}
.mnatas input[type=text], .mnatas .kotak-cari button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.mnatas input[type=text] {
border: 1px solid #ccc;
}
}
header .kotak-cari {
width: 250px;
margin-left: 20px;
}
header .lgheader {
font-size: 17px;
margin-top: 13px;
}
header .lgheader a {
color: black;
}
header .lgheader a:hover {
color: orange;
}
header input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: 1px solid #ccc;
border-radius:10px;
}
header .kotak-cari button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: 1px solid #ccc;
cursor: pointer;
border-radius:10px;
}
header .kotak-cari button:hover {
background: #ccc;
}
.maincon {
max-width: 1000px;
margin: auto;
}
.flxbetween {
display: flex;
justify-content: space-between;
float: right;
margin-right: 20px;
}
@media screen and (max-width: 600px) {
header .kotak-cari {
float: none;
}
header .lgheader {
float: none;
}
.flxbetween {
float: none;
}
}
.newsticker {
width: 100%;
color: white;
font-weight: bold;
background-color:rgb(255,64,0);
height: 35px;
line-height: 35px;
border-radius:0px 0px 7px 7px;
}
.link-ats {
width: 100%;
display: flex;
justify-content: space-between;
color:rgb(89,89,89);
font-weight: normal;
}
.link-ats div {
margin-top: 5px;
margin-bottom: 5px;
height: 35px;
line-height: 35px;
}
.link-ats a {
padding: 0 7px ;
color:rgb(89,89,89);
font-weight: normal;
}
.link-ats .tombol a {
background-color:rgb(76,175,80);
color: white;
padding-right: 10px;
border-radius: 4px;
cursor: pointer;
}
.link-ats .tombol a:hover{
background-color:rgb(0,102,0);
font-weight: bold;
}
File pendukung download di lampiran
Posted in: CodeIgniter 4
Topics:
web berita
Be the first person to like this.
Hotelempfehlung
Hotel & Restaurant Schloss Weißenburg
869 | Hotels
Das Hotel & Restaurant Schloss Weißenburg befindet sich in Weißen 3 Schloss Weißenburg - Forsthaus - Uhlstädt. Besteht aus 23 Zimmern
Uhlstädt - Deutschland
Boutiquehotel Schloßpalais
864 | Hotels
Das Boutiquehotel Schloßpalais befindet sich in Johann-Sebastian-Bach-Str.11 - Wernigerode. Besteht aus 27 Zimmern
Wernigerode - Deutschland
Hotel Landgasthof Simon
890 | Hotels
Das Hotel Landgasthof Simon befindet sich in Bahnhofstrasse 14 - Waldrach. Besteht aus 21 Zimmern
Waldrach - Deutschland