Pembuatan Tema

PopojiCMS - CMS Indonesia, Buat Sendiri Rasa Webmu, Karena Kami CMS Gratis Indonesia.

Sejak engine 2.0.0 dirilis, pembuatan tema menjadi lebih mudah dikarenakan developer akan lebih difokuskan pada design tema tanpa harus melakukan query database lagi.

Engine tema pada PopojiCMS dibantu oleh library templating php yaitu 'PlatesPHP' dan disokong oleh library php 'Bramus' sebagai routernya. Sehingga selain mengacu pada tutorial ini, developer bisa membaca dokumentasi dari kedua library tersebut di website officialnya.

 

I. Persiapan Awal

Sebagai persiapan awal, developer harus terlebih dahulu mempersiapkan 'Blank Theme' sebagai pondasi pembuatan tema. Caranya adalah :

1. Login ke halaman admin web.

2. Klik menu 'Tema' yang ada di sebelah kiri dashboard sampai muncul dropdown-nya lalu klik 'Tambah Baru'.

3. Isilah form tambah baru meliputi judul, pembuat dan nama folder tema, terakhir kosongkan saja pilihan unggah file .zip.

5. Setelah itu tekan tombol 'Submit' untuk membuat 'Blank Theme'.

6. Kemudian halaman akan dialihkan ke kumpulan daftar tema, pada tema yang telah dibuat tadi klik tombol 'Aktif' (icon mata), maka persiapan awal pembuatan tema telah berhasil dilakukan.

 

II. Lingkungan Pembuatan Tema

 Agar memudahkan memahami pembuatan tema pada PopojiCMS, maka di sini langsung akan dipandu dengan studi kasus pembuatan tema baru. Tema baru yang akan dibuat diberi nama 'Corlate' dimana ini adalah tema html gratis yang bisa didapatkan di internet.

1. Lakukan langkah pada tahap I di atas, dengan memasukan data pada form tambah baru :

Judul : Corlate

Pembuat : Shapebootstrap & PopojiCMS

Folder : corlate

2. Kemudian masuk ke folder po-content/themes/ maka di sana akan terdapat folder baru 'corlate' yang jika dibuka berisikan file-file default tema pada PopojiCMS.

--| 404.php - file untuk menangani jika halaman tidak ditemukan (pages, category, post, gallery, search, tag)
--| album.php - file untuk menampilkan halaman album gallery
--| category.php - file untuk menampilkan halaman category
--| contact.php - file untuk menampilkan halaman contact
--| detailpost.php - file untuk menampilkan halaman detail post
--| footer.php - file untuk menampilkan bagian footer tema
--| gallery.php - file untuk menampilkan halaman gallery
--| header.php - file untuk menampilkan bagian header tema
--| home.php - file untuk menampilkan halaman beranda
--| index.html - file 403 forbidden (bisa dihapus)
--| index.php - file utama tema yang menggambungkan bagian-bagian tema
--| pages.php - file untuk menampilkan halaman pages
--| preview.jpg - gambar preview tema
--| search.php - file untuk menampilkan halaman search
--| sidebar.php - file untuk menampilkan bagian sidebar tema
--| tag.php - file untuk menampilkan halaman tag

3. File-file di atas bisa dihapus atau ditambahkan sesuai keperluan tema. Begitupun file index.php, header.php, footer.php dan sidebar.php bisa direname sesuai keperluan.

4. Kemudian download-lah file tema 'Corlate' dari url berikut : https://shapebootstrap.net/item/1524962-corlate-free-responsive-business-html-template

5. Setelah itu unzip hasil download tersebut di folder komputer Anda. Lalu tentukanlah design-design html mana saja yang akan digunakan pada bagian tema baru ini.

 

III. Pembuatan Elemen Tema

Setelah lingkungan kerja sudah terbentuk itu berarti siap untuk memulai langkah pembuatan tema. Langkah pertama adalah dengan memindahkan file pendukung tema seperti css, javascript, dan image dari hasil unzip html tema Corlate.

1. File pendukung tema

Pindahkan folder css, fonts, images, dan js beserta isinya dari hasil unzip html tema Corlate ke dalam folder po-content/themes/corlate/. Setelah itu copy index.html (file 403 forbidden) ke dalam setiap folder yang dipindahkan tadi sebagai file pengaman folder.

Jika dilihat pada folder images yang dipindahkan terdapat banyak gambar di dalamnya. Setelah pembuatan tema selesai hapuslah gambar-gambar yang tidak terpakai pada tema.

Untuk mempermudah pembuatan setiap file elemen tema silahkan mengacu ke tutorial helper tema untuk melihat snipped apa saja yang akan dimasukan pada masing-masing file elemen.

2. Pembuatan index.php

Bukalah pada text editor (mis: notepad++)  file index.html yang ada di folder hasil unzip tema Corlate, dan buka juga file index.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi index.html yang akan diambil :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home | Corlate</title>

	<!-- core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->

<body class="homepage">

	<script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/wow.min.js"></script>
</body>
</html>

dan ini adalah hasil pemindahannya ke index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- Your Basic Site Informations -->
	<title><?=$this->e($page_title);?></title>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="robots" content="index, follow" />
	<meta name="description" content="<?=$this->e($page_desc);?>" />
	<meta name="keywords" content="<?=$this->e($page_key);?>" />
	<meta http-equiv="Copyright" content="popojicms" />
	<meta name="author" content="PopojiCMS" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="language" content="Indonesia" />
	<meta name="revisit-after" content="7" />
	<meta name="webcrawlers" content="all" />
	<meta name="rating" content="general" />
	<meta name="spiders" content="all" />

	<!-- Social Media Meta -->
	<?php include_once DIR_CON."/component/setting/meta_social.txt";?>

    <!-- Mobile Specific Meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Stylesheets -->
	<link rel="stylesheet" href="<?=$this->asset('/css/bootstrap.min.css')?>" type="text/css" />
	<link rel="stylesheet" href="<?=$this->asset('/css/font-awesome.min.css')?>" type="text/css" />
	<link rel="stylesheet" href="<?=$this->asset('/css/animate.min.css')?>" type="text/css" />
	<link rel="stylesheet" href="<?=$this->asset('/css/prettyPhoto.css')?>" type="text/css" />
	<link rel="stylesheet" href="<?=$this->asset('/css/main.css')?>" type="text/css" />
	<link rel="stylesheet" href="<?=$this->asset('/css/responsive.css')?>" type="text/css" />

	<!-- Favicons -->
	<link rel="shortcut icon" href="<?=BASE_URL.'/'.DIR_INC;?>/images/favicon.png" />

	<!-- Javascript -->
	<!--[if lt IE 9]>
	<script src="<?=$this->asset('/js/html5shiv.js')?>"></script>
	<script src="<?=$this->asset('/js/respond.min.js')?>"></script>
	<![endif]-->
	<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<?php if ($this->e($social_mod) == 'Beranda' || $this->e($social_mod) == 'Home') { ?>
<body class="homepage">
<?php } else { ?>
<body>
<?php } ?>
	<!-- Insert Header -->
	<?=$this->insert('header');?>

	<!-- Insert Content -->
	<?=$this->section('content');?>

	<!-- Insert Footer -->
	<?=$this->insert('footer');?>

	<!-- Javascript -->
	<script type="text/javascript" src="<?=$this->asset('/js/jquery.js')?>"></script>
	<script type="text/javascript" src="<?=$this->asset('/js/bootstrap.min.js')?>"></script>
	<script type="text/javascript" src="<?=$this->asset('/js/jquery.prettyPhoto.js')?>"></script>
	<script type="text/javascript" src="<?=$this->asset('/js/jquery.isotope.min.js')?>"></script>
	<script type="text/javascript" src="<?=$this->asset('/js/main.js')?>"></script>
	<script type="text/javascript" src="<?=$this->asset('/js/wow.min.js')?>"></script>
</body>
</html>

 

3. Pembuatan header.php

Masih mengambil elemen tema dari file index.html, sekarang akan diambil bagian header tema yang akan dimasukan ke header.php. Ini bagian yang akan diambil :

	<header id="header">
        <div class="top-bar">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-xs-4">
                        <div class="top-number"><p><i class="fa fa-phone-square"></i>  +0123 456 70 90</p></div>
                    </div>
                    <div class="col-sm-6 col-xs-8">
                       <div class="social">
                            <ul class="social-share">
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li> 
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-skype"></i></a></li>
                            </ul>
                            <div class="search">
                                <form role="form">
                                    <input type="text" class="search-form" autocomplete="off" placeholder="Search">
                                    <i class="fa fa-search"></i>
                                </form>
                           </div>
                       </div>
                    </div>
                </div>
            </div><!--/.container-->
        </div><!--/.top-bar-->

        <nav class="navbar navbar-inverse" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
                </div>

                <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="about-us.html">About Us</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="blog-item.html">Blog Single</a></li>
                                <li><a href="pricing.html">Pricing</a></li>
                                <li><a href="404.html">404</a></li>
                                <li><a href="shortcodes.html">Shortcodes</a></li>
                            </ul>
                        </li>
                        <li><a href="blog.html">Blog</a></li> 
                        <li><a href="contact-us.html">Contact</a></li>                        
                    </ul>
                </div>
            </div><!--/.container-->
        </nav><!--/nav-->

    </header><!--/header-->

kemudian ini hasil pemindahan ke file header.php:

	<header id="header">
		<div class="top-bar">
			<div class="container">
				<div class="row">
					<div class="col-sm-6 col-xs-4">
						<div class="top-number"><p><i class="fa fa-phone-square"></i> +0123 456 70 90</p></div>
					</div>
					<div class="col-sm-6 col-xs-8">
					   <div class="social">
							<ul class="social-share">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li> 
								<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
								<li><a href="#"><i class="fa fa-skype"></i></a></li>
							</ul>
							<div class="search">
								<form action="<?=BASE_URL;?>/search" method="post">
									<input type="text" class="search-form" autocomplete="off" placeholder="<?=$this->e($front_search);?>...">
									<i class="fa fa-search"></i>
								</form>
						   </div>
					   </div>
					</div>
				</div>
			</div><!--/.container-->
		</div><!--/.top-bar-->

		<nav class="navbar navbar-inverse" role="banner">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="<?=BASE_URL;?>"><img src="<?=$this->asset('/images/logo.png')?>" alt="logo"></a>
				</div>

				<div class="collapse navbar-collapse navbar-right">
					<?php
						echo $this->menu()->getFrontMenu(WEB_LANG, 'class="nav navbar-nav"', 'class="dropdown"', 'class="dropdown-menu"');
					?>
				</div>
			</div><!--/.container-->
		</nav><!--/nav-->
	</header><!--/header-->

jika dilihat bagian yang paling berubah adalah pemanggilan menu yang telah menggunakan engine menu PopojiCMS. Cara memindahkan menu html menjadi menu PopojiCMS adalah sebagai berikut :

Perhatikan elemen utama yang membungkus menu, jika dilihat yang membungkus menu adalah elemen :

<ul class="nav navbar-nav">

terus perhatikan elemen menu yang memiliki anakan, pada tema terlihat ada anakan :

 <li class="dropdown">

kemudian lihat juga pembungkus menu anakan tersebut :

<ul class="dropdown-menu">

Setelah mengambil informasi di atas maka cara memindahkan menu ke engine menu PopojiCMS adalah :

<div class="collapse navbar-collapse navbar-right">
	<?php
		echo $this->menu()->getFrontMenu(WEB_LANG, 'class="nav navbar-nav"', 'class="dropdown"', 'class="dropdown-menu"');
	?>
</div>

Jika dilihat ada parameter 'WEB_LANG', parameter tersebut menunjukan Group Menu yang diambil dari bahasa yang sedang aktif, untuk default PopojiCMS akan mengambil group menu 'id'.

Hasil pembuatan header dapat dilihat pada gambar berikut :

 

Masih mengambil element dari index.html, kita akan memindahkan bagian footer ke file footer.php. Elemen footer yang diambil adalah :

	<section id="bottom">
        <div class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="widget">
                        <h3>Company</h3>
                        <ul>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">We are hiring</a></li>
                            <li><a href="#">Meet the team</a></li>
                            <li><a href="#">Copyright</a></li>
                            <li><a href="#">Terms of use</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>    
                </div><!--/.col-md-3-->

                <div class="col-md-3 col-sm-6">
                    <div class="widget">
                        <h3>Support</h3>
                        <ul>
                            <li><a href="#">Faq</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Forum</a></li>
                            <li><a href="#">Documentation</a></li>
                            <li><a href="#">Refund policy</a></li>
                            <li><a href="#">Ticket system</a></li>
                            <li><a href="#">Billing system</a></li>
                        </ul>
                    </div>    
                </div><!--/.col-md-3-->

                <div class="col-md-3 col-sm-6">
                    <div class="widget">
                        <h3>Developers</h3>
                        <ul>
                            <li><a href="#">Web Development</a></li>
                            <li><a href="#">SEO Marketing</a></li>
                            <li><a href="#">Theme</a></li>
                            <li><a href="#">Development</a></li>
                            <li><a href="#">Email Marketing</a></li>
                            <li><a href="#">Plugin Development</a></li>
                            <li><a href="#">Article Writing</a></li>
                        </ul>
                    </div>    
                </div><!--/.col-md-3-->

                <div class="col-md-3 col-sm-6">
                    <div class="widget">
                        <h3>Our Partners</h3>
                        <ul>
                            <li><a href="#">Adipisicing Elit</a></li>
                            <li><a href="#">Eiusmod</a></li>
                            <li><a href="#">Tempor</a></li>
                            <li><a href="#">Veniam</a></li>
                            <li><a href="#">Exercitation</a></li>
                            <li><a href="#">Ullamco</a></li>
                            <li><a href="#">Laboris</a></li>
                        </ul>
                    </div>    
                </div><!--/.col-md-3-->
            </div>
        </div>
    </section><!--/#bottom-->

    <footer id="footer" class="midnight-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    &copy; 2013 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
                </div>
                <div class="col-sm-6">
                    <ul class="pull-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Faq</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer><!--/#footer-->

Sehingga pemindahan ke footer.php menjadi seperti ini :

	<section id="bottom">
		<div class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
			<div class="row">
				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<address>
							<?=htmlspecialchars_decode($this->pocore()->call->posetting[8]['value']);?>
						</address>
						<abbr title="Phone Number"><strong>Phone:</strong></abbr> <?=$this->pocore()->call->posetting[6]['value'];?><br>
						<abbr title="Fax"><strong>Fax:</strong></abbr> <?=$this->pocore()->call->posetting[7]['value'];?><br>
						<abbr title="Email Address"><strong>Email:</strong></abbr> <?=$this->pocore()->call->posetting[5]['value'];?>
					</div>    
				</div><!--/.col-md-3-->

				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<h3><?=$this->e($front_quick_link);?></h3>
						<ul>
							<li><a href="<?=BASE_URL;?>/category/indonesiaku"><?=$this->e($front_indonesia);?></a></li>
							<li><a href="<?=BASE_URL;?>/category/motivasi"><?=$this->e($front_motivation);?></a></li>
							<li><a href="<?=BASE_URL;?>/category/hubungan"><?=$this->e($front_relationship);?></a></li>
							<li><a href="<?=BASE_URL;?>/category/sukses"><?=$this->e($front_success);?></a></li>
							<li><a href="<?=BASE_URL;?>/album"><?=$this->e($front_gallery);?></a></li>
							<li><a href="<?=BASE_URL;?>/contact"><?=$this->e($front_contact);?></a></li>
						</ul>
					</div>    
				</div><!--/.col-md-3-->

				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<h3><?=$this->e($front_popular);?></h3>
						<ul>
						<?php
							$nopopf = 1;
							$populars = $this->post()->getPopular('2', 'DESC', WEB_LANG_ID);
							foreach($populars as $popular){
						?>
							<li><a href="<?=BASE_URL;?>/detailpost/<?=$popular['seotitle'];?>"><small><?=$this->pocore()->call->podatetime->tgl_indo($popular['date']);?></small><br /><?=$popular['title'];?></a></li>
							<?=($nopopf == '1' ? '<hr />' : '');?>
						<?php $nopopf++;} ?>
						</ul>
					</div>    
				</div><!--/.col-md-3-->

				<div class="col-md-3 col-sm-6">
					<div class="widget">
						<p><?=$this->e($front_subscribe);?> <?=$this->e($front_txt_subscribe);?>:</p>
						<form action="<?=BASE_URL;?>/subscribe" role="form" method="post">
							<div class="input-group divcenter">
								<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
								<input type="email" name="email" class="form-control" placeholder="<?=$this->e($front_email);?>">
								<span class="input-group-btn">
									<button class="btn btn-success" type="submit"><?=$this->e($front_subscribe);?></button>
								</span>
							</div>
						</form>
					</div>    
				</div><!--/.col-md-3-->
			</div>
		</div>
	</section><!--/#bottom-->

	<footer id="footer" class="midnight-blue">
		<div class="container">
			<div class="row">
				<div class="col-sm-6">
					&copy; 2015 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
				</div>
				<div class="col-sm-6">
					<ul class="pull-right">
						<li><a href="<?=BASE_URL;?>"><?=$this->e($front_home);?></a></li>
						<li><a href="<?=BASE_URL;?>/pages/tentang-kami"><?=$this->e($front_about);?></a></li>
						<li><a href="<?=BASE_URL;?>/contact"><?=$this->e($front_contact);?></a></li>
					</ul>
				</div>
			</div>
		</div>
	</footer><!--/#footer-->

dan hasilnya bisa dilihat pada gambar di bawah ini :

 jika bagian index.php, header.php dan footer.php sudah terbentuk maka pekerjaan pembuatan tema sudah mudah untuk dilakukan.

 

5. Pembuatan home.php

Masih mengambil element dari index.html, kita akan memindahkan bagian antara header dan footer ke file home.php. Elemen yang diambil adalah :

	<section id="main-slider" class="no-margin">
        <div class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#main-slider" data-slide-to="0" class="active"></li>
                <li data-target="#main-slider" data-slide-to="1"></li>
                <li data-target="#main-slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">

                <div class="item active" style="background-image: url(images/slider/bg1.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
                                    <h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
                                    <a class="btn-slide animation animated-item-3" href="#">Read More</a>
                                </div>
                            </div>

                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="slider-img">
                                    <img src="images/slider/img1.png" class="img-responsive">
                                </div>
                            </div>

                        </div>
                    </div>
                </div><!--/.item-->

                <div class="item" style="background-image: url(images/slider/bg2.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
                                    <h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
                                    <a class="btn-slide animation animated-item-3" href="#">Read More</a>
                                </div>
                            </div>

                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="slider-img">
                                    <img src="images/slider/img2.png" class="img-responsive">
                                </div>
                            </div>

                        </div>
                    </div>
                </div><!--/.item-->

                <div class="item" style="background-image: url(images/slider/bg3.jpg)">
                    <div class="container">
                        <div class="row slide-margin">
                            <div class="col-sm-6">
                                <div class="carousel-content">
                                    <h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
                                    <h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
                                    <a class="btn-slide animation animated-item-3" href="#">Read More</a>
                                </div>
                            </div>
                            <div class="col-sm-6 hidden-xs animation animated-item-4">
                                <div class="slider-img">
                                    <img src="images/slider/img3.png" class="img-responsive">
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/.item-->
            </div><!--/.carousel-inner-->
        </div><!--/.carousel-->
        <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
            <i class="fa fa-chevron-left"></i>
        </a>
        <a class="next hidden-xs" href="#main-slider" data-slide="next">
            <i class="fa fa-chevron-right"></i>
        </a>
    </section><!--/#main-slider-->

    <section id="feature" >
        <div class="container">
           <div class="center wow fadeInDown">
                <h2>Features</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>

            <div class="row">
                <div class="features">
                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-bullhorn"></i>
                            <h2>Fresh and Clean</h2>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        </div>
                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-comments"></i>
                            <h2>Retina ready</h2>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        </div>
                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-cloud-download"></i>
                            <h2>Easy to customize</h2>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        </div>
                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-leaf"></i>
                            <h2>Adipisicing elit</h2>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        </div>
                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-cogs"></i>
                            <h2>Sed do eiusmod</h2>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        </div>
                    </div><!--/.col-md-4-->

                    <div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="feature-wrap">
                            <i class="fa fa-heart"></i>
                            <h2>Labore et dolore</h2>
                            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        </div>
                    </div><!--/.col-md-4-->
                </div><!--/.services-->
            </div><!--/.row-->    
        </div><!--/.container-->
    </section><!--/#feature-->

    <section id="recent-works">
        <div class="container">
            <div class="center wow fadeInDown">
                <h2>Recent Works</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a> </h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div> 

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme </a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme </a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme</a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme </a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div> 

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme </a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div>   

                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="recent-work-wrap">
                        <img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
                        <div class="overlay">
                            <div class="recent-work-inner">
                                <h3><a href="#">Business theme </a></h3>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                <a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                            </div> 
                        </div>
                    </div>
                </div>   
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#recent-works-->

    <section id="services" class="service-item">
	   <div class="container">
            <div class="center wow fadeInDown">
                <h2>Our Service</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>

            <div class="row">

                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services1.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">SEO Marketing</h3>
                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services2.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">SEO Marketing</h3>
                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services3.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">SEO Marketing</h3>
                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                        </div>
                    </div>
                </div>  

                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services4.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">SEO Marketing</h3>
                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services5.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">SEO Marketing</h3>
                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-4">
                    <div class="media services-wrap wow fadeInDown">
                        <div class="pull-left">
                            <img class="img-responsive" src="images/services/services6.png">
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">SEO Marketing</h3>
                            <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                        </div>
                    </div>
                </div>                                                
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#services-->

    <section id="middle">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 wow fadeInDown">
                    <div class="skill">
                        <h2>Our Skills</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                        <div class="progress-wrap">
                            <h3>Graphic Design</h3>
                            <div class="progress">
                              <div class="progress-bar  color1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
                                <span class="bar-width">85%</span>
                              </div>

                            </div>
                        </div>

                        <div class="progress-wrap">
                            <h3>HTML</h3>
                            <div class="progress">
                              <div class="progress-bar color2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
                               <span class="bar-width">95%</span>
                              </div>
                            </div>
                        </div>

                        <div class="progress-wrap">
                            <h3>CSS</h3>
                            <div class="progress">
                              <div class="progress-bar color3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="bar-width">80%</span>
                              </div>
                            </div>
                        </div>

                        <div class="progress-wrap">
                            <h3>Wordpress</h3>
                            <div class="progress">
                              <div class="progress-bar color4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
                                <span class="bar-width">90%</span>
                              </div>
                            </div>
                        </div>
                    </div>

                </div><!--/.col-sm-6-->

                <div class="col-sm-6 wow fadeInDown">
                    <div class="accordion">
                        <h2>Why People like us?</h2>
                        <div class="panel-group" id="accordion1">
                          <div class="panel panel-default">
                            <div class="panel-heading active">
                              <h3 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">
                                  Lorem ipsum dolor sit amet
                                  <i class="fa fa-angle-right pull-right"></i>
                                </a>
                              </h3>
                            </div>

                            <div id="collapseOne1" class="panel-collapse collapse in">
                              <div class="panel-body">
                                  <div class="media accordion-inner">
                                        <div class="pull-left">
                                            <img class="img-responsive" src="images/accordion1.png">
                                        </div>
                                        <div class="media-body">
                                             <h4>Adipisicing elit</h4>
                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                                        </div>
                                  </div>
                              </div>
                            </div>
                          </div>

                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">
                                  Lorem ipsum dolor sit amet
                                  <i class="fa fa-angle-right pull-right"></i>
                                </a>
                              </h3>
                            </div>
                            <div id="collapseTwo1" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
                              </div>
                            </div>
                          </div>

                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">
                                  Lorem ipsum dolor sit amet
                                  <i class="fa fa-angle-right pull-right"></i>
                                </a>
                              </h3>
                            </div>
                            <div id="collapseThree1" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
                              </div>
                            </div>
                          </div>

                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1">
                                  Lorem ipsum dolor sit amet
                                  <i class="fa fa-angle-right pull-right"></i>
                                </a>
                              </h3>
                            </div>
                            <div id="collapseFour1" class="panel-collapse collapse">
                              <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
                              </div>
                            </div>
                          </div>
                        </div><!--/#accordion1-->
                    </div>
                </div>

            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#middle-->

    <section id="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-8 wow fadeInDown">
                   <div class="tab-wrap"> 
                        <div class="media">
                            <div class="parrent pull-left">
                                <ul class="nav nav-tabs nav-stacked">
                                    <li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Responsive Web Design</a></li>
                                    <li class="active"><a href="#tab2" data-toggle="tab" class="analistic-02">Premium Plugin Included</a></li>
                                    <li class=""><a href="#tab3" data-toggle="tab" class="tehnical">Predefine Layout</a></li>
                                    <li class=""><a href="#tab4" data-toggle="tab" class="tehnical">Our Philosopy</a></li>
                                    <li class=""><a href="#tab5" data-toggle="tab" class="tehnical">What We Do?</a></li>
                                </ul>
                            </div>

                            <div class="parrent media-body">
                                <div class="tab-content">
                                    <div class="tab-pane fade" id="tab1">
                                        <div class="media">
                                           <div class="pull-left">
                                                <img class="img-responsive" src="images/tab2.png">
                                            </div>
                                            <div class="media-body">
                                                 <h2>Adipisicing elit</h2>
                                                 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use.</p>
                                            </div>
                                        </div>
                                    </div>

                                     <div class="tab-pane fade active in" id="tab2">
                                        <div class="media">
                                           <div class="pull-left">
                                                <img class="img-responsive" src="images/tab1.png">
                                            </div>
                                            <div class="media-body">
                                                 <h2>Adipisicing elit</h2>
                                                 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use.
                                                 </p>
                                            </div>
                                        </div>
                                     </div>

                                     <div class="tab-pane fade" id="tab3">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                                     </div>

                                     <div class="tab-pane fade" id="tab4">
                                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words</p>
                                     </div>

                                     <div class="tab-pane fade" id="tab5">
                                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures,</p>
                                     </div>
                                </div> <!--/.tab-content-->  
                            </div> <!--/.media-body--> 
                        </div> <!--/.media-->     
                    </div><!--/.tab-wrap-->               
                </div><!--/.col-sm-6-->

                <div class="col-xs-12 col-sm-4 wow fadeInDown">
                    <div class="testimonial">
                        <h2>Testimonials</h2>
                         <div class="media testimonial-inner">
                            <div class="pull-left">
                                <img class="img-responsive img-circle" src="images/testimonials1.png">
                            </div>
                            <div class="media-body">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                                <span><strong>-John Doe/</strong> Director of corlate.com</span>
                            </div>
                         </div>

                         <div class="media testimonial-inner">
                            <div class="pull-left">
                                <img class="img-responsive img-circle" src="images/testimonials1.png">
                            </div>
                            <div class="media-body">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                                <span><strong>-John Doe/</strong> Director of corlate.com</span>
                            </div>
                         </div>

                    </div>
                </div>

            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#content-->

    <section id="partner">
        <div class="container">
            <div class="center wow fadeInDown">
                <h2>Our Partners</h2>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>    

            <div class="partners">
                <ul>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms" src="images/partners/partner1.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" src="images/partners/partner2.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms" src="images/partners/partner3.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1200ms" src="images/partners/partner4.png"></a></li>
                    <li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1500ms" src="images/partners/partner5.png"></a></li>
                </ul>
            </div>        
        </div><!--/.container-->
    </section><!--/#partner-->

    <section id="conatcat-info">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                        <div class="pull-left">
                            <i class="fa fa-phone"></i>
                        </div>
                        <div class="media-body">
                            <h2>Have a question or need a custom quote?</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +0123 456 70 80</p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--/.container-->    
    </section><!--/#conatcat-info-->

Sehingga pemindahan ke home.php menjadi seperti ini :

<?=$this->layout('index');?>

	<section id="main-slider" class="no-margin">
		<div class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#main-slider" data-slide-to="0" class="active"></li>
				<li data-target="#main-slider" data-slide-to="1"></li>
				<li data-target="#main-slider" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active" style="background-image: url(<?=$this->asset('/images/slider/bg1.jpg')?>)">
					<div class="container">
						<div class="row slide-margin">
							<div class="col-sm-6">
								<div class="carousel-content">
									<h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
									<h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
									<a class="btn-slide animation animated-item-3" href="#">Read More</a>
								</div>
							</div>

							<div class="col-sm-6 hidden-xs animation animated-item-4">
								<div class="slider-img">
									<img src="<?=$this->asset('/images/slider/img1.png')?>" class="img-responsive">
								</div>
							</div>

						</div>
					</div>
				</div><!--/.item-->

				<div class="item" style="background-image: url(<?=$this->asset('/images/slider/bg2.jpg')?>)">
					<div class="container">
						<div class="row slide-margin">
							<div class="col-sm-6">
								<div class="carousel-content">
									<h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
									<h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
									<a class="btn-slide animation animated-item-3" href="#">Read More</a>
								</div>
							</div>

							<div class="col-sm-6 hidden-xs animation animated-item-4">
								<div class="slider-img">
									<img src="<?=$this->asset('/images/slider/img2.png')?>" class="img-responsive">
								</div>
							</div>

						</div>
					</div>
				</div><!--/.item-->

				<div class="item" style="background-image: url(<?=$this->asset('/images/slider/bg3.jpg')?>)">
					<div class="container">
						<div class="row slide-margin">
							<div class="col-sm-6">
								<div class="carousel-content">
									<h1 class="animation animated-item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit</h1>
									<h2 class="animation animated-item-2">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</h2>
									<a class="btn-slide animation animated-item-3" href="#">Read More</a>
								</div>
							</div>
							<div class="col-sm-6 hidden-xs animation animated-item-4">
								<div class="slider-img">
									<img src="<?=$this->asset('/images/slider/img3.png')?>" class="img-responsive">
								</div>
							</div>
						</div>
					</div>
				</div><!--/.item-->
			</div><!--/.carousel-inner-->
		</div><!--/.carousel-->
		<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
			<i class="fa fa-chevron-left"></i>
		</a>
		<a class="next hidden-xs" href="#main-slider" data-slide="next">
			<i class="fa fa-chevron-right"></i>
		</a>
	</section><!--/#main-slider-->

	<section id="feature" >
		<div class="container">
		   <div class="center wow fadeInDown">
				<h2>Features</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
			</div>

			<div class="row">
				<div class="features">
					<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="feature-wrap">
							<i class="fa fa-bullhorn"></i>
							<h2>Fresh and Clean</h2>
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
						</div>
					</div><!--/.col-md-4-->

					<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="feature-wrap">
							<i class="fa fa-comments"></i>
							<h2>Retina ready</h2>
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
						</div>
					</div><!--/.col-md-4-->

					<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="feature-wrap">
							<i class="fa fa-cloud-download"></i>
							<h2>Easy to customize</h2>
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
						</div>
					</div><!--/.col-md-4-->

					<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="feature-wrap">
							<i class="fa fa-leaf"></i>
							<h2>Adipisicing elit</h2>
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
						</div>
					</div><!--/.col-md-4-->

					<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="feature-wrap">
							<i class="fa fa-cogs"></i>
							<h2>Sed do eiusmod</h2>
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
						</div>
					</div><!--/.col-md-4-->

					<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="feature-wrap">
							<i class="fa fa-heart"></i>
							<h2>Labore et dolore</h2>
							<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
						</div>
					</div><!--/.col-md-4-->
				</div><!--/.services-->
			</div><!--/.row-->    
		</div><!--/.container-->
	</section><!--/#feature-->

	<section id="recent-works">
		<div class="container">
			<div class="center wow fadeInDown">
				<h2>Recent Works</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
			</div>

			<div class="row">
				<?php
					$post_by_categorys = $this->post()->getPostByCategory('1', '8', 'DESC', WEB_LANG_ID);
					foreach($post_by_categorys as $list_post){
				?>
				<div class="col-xs-12 col-sm-4 col-md-3">
					<div class="recent-work-wrap">
						<img class="img-responsive" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/medium/medium_<?=$list_post['picture'];?>" alt="">
						<div class="overlay">
							<div class="recent-work-inner">
								<h3><a href="<?=BASE_URL;?>/detailpost/<?=$list_post['seotitle'];?>"><?=$this->pocore()->call->postring->cuthighlight('title', $list_post['title'], '30');?>...</a></h3>
								<p><?=$this->pocore()->call->postring->cuthighlight('post', $list_post['content'], '50');?>...</p>
								<a class="preview" href="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/<?=$list_post['picture'];?>" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
							</div> 
						</div>
					</div>
				</div>
				<?php } ?>
			</div><!--/.row-->
		</div><!--/.container-->
	</section><!--/#recent-works-->

	<section id="services" class="service-item">
	   <div class="container">
			<div class="center wow fadeInDown">
				<h2>Our Service</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
			</div>

			<div class="row">
				<div class="col-sm-6 col-md-4">
					<div class="media services-wrap wow fadeInDown">
						<div class="pull-left">
							<img class="img-responsive" src="<?=$this->asset('/images/services/services1.png')?>">
						</div>
						<div class="media-body">
							<h3 class="media-heading">SEO Marketing</h3>
							<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-4">
					<div class="media services-wrap wow fadeInDown">
						<div class="pull-left">
							<img class="img-responsive" src="<?=$this->asset('/images/services/services2.png')?>">
						</div>
						<div class="media-body">
							<h3 class="media-heading">SEO Marketing</h3>
							<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-4">
					<div class="media services-wrap wow fadeInDown">
						<div class="pull-left">
							<img class="img-responsive" src="<?=$this->asset('/images/services/services3.png')?>">
						</div>
						<div class="media-body">
							<h3 class="media-heading">SEO Marketing</h3>
							<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
						</div>
					</div>
				</div>  

				<div class="col-sm-6 col-md-4">
					<div class="media services-wrap wow fadeInDown">
						<div class="pull-left">
							<img class="img-responsive" src="<?=$this->asset('/images/services/services4.png')?>">
						</div>
						<div class="media-body">
							<h3 class="media-heading">SEO Marketing</h3>
							<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-4">
					<div class="media services-wrap wow fadeInDown">
						<div class="pull-left">
							<img class="img-responsive" src="<?=$this->asset('/images/services/services5.png')?>">
						</div>
						<div class="media-body">
							<h3 class="media-heading">SEO Marketing</h3>
							<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
						</div>
					</div>
				</div>

				<div class="col-sm-6 col-md-4">
					<div class="media services-wrap wow fadeInDown">
						<div class="pull-left">
							<img class="img-responsive" src="<?=$this->asset('/images/services/services6.png')?>">
						</div>
						<div class="media-body">
							<h3 class="media-heading">SEO Marketing</h3>
							<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
						</div>
					</div>
				</div>                                                
			</div><!--/.row-->
		</div><!--/.container-->
	</section><!--/#services-->

	<section id="middle">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 wow fadeInDown">
					<div class="skill">
						<h2>Our Skills</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<div class="progress-wrap">
							<h3>Graphic Design</h3>
							<div class="progress">
								<div class="progress-bar  color1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
									<span class="bar-width">85%</span>
								</div>
							</div>
						</div>

						<div class="progress-wrap">
							<h3>HTML</h3>
							<div class="progress">
								<div class="progress-bar color2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
									<span class="bar-width">95%</span>
								</div>
							</div>
						</div>

						<div class="progress-wrap">
							<h3>CSS</h3>
							<div class="progress">
								<div class="progress-bar color3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
									<span class="bar-width">80%</span>
								</div>
							</div>
						</div>

						<div class="progress-wrap">
							<h3>Wordpress</h3>
							<div class="progress">
								<div class="progress-bar color4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
									<span class="bar-width">90%</span>
								</div>
							</div>
						</div>
					</div>
				</div><!--/.col-sm-6-->

				<div class="col-sm-6 wow fadeInDown">
					<div class="accordion">
						<h2>Why People like us?</h2>
						<div class="panel-group" id="accordion1">
							<div class="panel panel-default">
								<div class="panel-heading active">
									<h3 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">
											Lorem ipsum dolor sit amet
											<i class="fa fa-angle-right pull-right"></i>
										</a>
									</h3>
								</div>

								<div id="collapseOne1" class="panel-collapse collapse in">
									<div class="panel-body">
										<div class="media accordion-inner">
											<div class="pull-left">
												<img class="img-responsive" src="<?=$this->asset('/images/accordion1.png')?>">
											</div>
											<div class="media-body">
												<h4>Adipisicing elit</h4>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">
											Lorem ipsum dolor sit amet
											<i class="fa fa-angle-right pull-right"></i>
										</a>
									</h3>
								</div>
								<div id="collapseTwo1" class="panel-collapse collapse">
									<div class="panel-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
									</div>
								</div>
							</div>

							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">
											Lorem ipsum dolor sit amet
											<i class="fa fa-angle-right pull-right"></i>
										</a>
									</h3>
								</div>
								<div id="collapseThree1" class="panel-collapse collapse">
									<div class="panel-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
									</div>
								</div>
							</div>

							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">
										<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1">
											Lorem ipsum dolor sit amet
											<i class="fa fa-angle-right pull-right"></i>
										</a>
									</h3>
								</div>
								<div id="collapseFour1" class="panel-collapse collapse">
									<div class="panel-body">
										Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
									</div>
								</div>
							</div>
						</div><!--/#accordion1-->
					</div>
				</div>
			</div><!--/.row-->
		</div><!--/.container-->
	</section><!--/#middle-->

	<section id="content">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-8 wow fadeInDown">
				   <div class="tab-wrap"> 
						<div class="media">
							<div class="parrent pull-left">
								<ul class="nav nav-tabs nav-stacked">
									<li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">Responsive Web Design</a></li>
									<li class="active"><a href="#tab2" data-toggle="tab" class="analistic-02">Premium Plugin Included</a></li>
									<li class=""><a href="#tab3" data-toggle="tab" class="tehnical">Predefine Layout</a></li>
									<li class=""><a href="#tab4" data-toggle="tab" class="tehnical">Our Philosopy</a></li>
									<li class=""><a href="#tab5" data-toggle="tab" class="tehnical">What We Do?</a></li>
								</ul>
							</div>

							<div class="parrent media-body">
								<div class="tab-content">
									<div class="tab-pane fade" id="tab1">
										<div class="media">
										   <div class="pull-left">
												<img class="img-responsive" src="<?=$this->asset('/images/tab2.png')?>">
											</div>
											<div class="media-body">
												 <h2>Adipisicing elit</h2>
												 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use.</p>
											</div>
										</div>
									</div>

									<div class="tab-pane fade active in" id="tab2">
										<div class="media">
										   <div class="pull-left">
												<img class="img-responsive" src="<?=$this->asset('/images/tab1.png')?>">
											</div>
											<div class="media-body">
												 <h2>Adipisicing elit</h2>
												 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use.
												 </p>
											</div>
										</div>
									</div>

									<div class="tab-pane fade" id="tab3">
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
									</div>

									<div class="tab-pane fade" id="tab4">
										<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words</p>
									</div>

									<div class="tab-pane fade" id="tab5">
										<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures,</p>
									</div>
								</div> <!--/.tab-content-->  
							</div> <!--/.media-body--> 
						</div> <!--/.media-->     
					</div><!--/.tab-wrap-->               
				</div><!--/.col-sm-6-->

				<div class="col-xs-12 col-sm-4 wow fadeInDown">
					<div class="testimonial">
						<h2>Testimonials</h2>
						 <div class="media testimonial-inner">
							<div class="pull-left">
								<img class="img-responsive img-circle" src="<?=$this->asset('/images/testimonials1.png')?>">
							</div>
							<div class="media-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
								<span><strong>-John Doe/</strong> Director of corlate.com</span>
							</div>
						 </div>

						 <div class="media testimonial-inner">
							<div class="pull-left">
								<img class="img-responsive img-circle" src="<?=$this->asset('/images/testimonials1.png')?>">
							</div>
							<div class="media-body">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
								<span><strong>-John Doe/</strong> Director of corlate.com</span>
							</div>
						</div>
					</div>
				</div>
			</div><!--/.row-->
		</div><!--/.container-->
	</section><!--/#content-->

	<section id="partner">
		<div class="container">
			<div class="center wow fadeInDown">
				<h2>Our Partners</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
			</div>    

			<div class="partners">
				<ul>
					<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms" src="<?=$this->asset('/images/partners/partner1.png')?>"></a></li>
					<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" src="<?=$this->asset('/images/partners/partner2.png')?>"></a></li>
					<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="900ms" src="<?=$this->asset('/images/partners/partner3.png')?>"></a></li>
					<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1200ms" src="<?=$this->asset('/images/partners/partner4.png')?>"></a></li>
					<li> <a href="#"><img class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="1500ms" src="<?=$this->asset('/images/partners/partner5.png')?>"></a></li>
				</ul>
			</div>        
		</div><!--/.container-->
	</section><!--/#partner-->

	<section id="conatcat-info">
		<div class="container">
			<div class="row">
				<div class="col-sm-8">
						<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
						<div class="pull-left">
							<i class="fa fa-phone"></i>
						</div>
						<div class="media-body">
							<h2>Have a question or need a custom quote?</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation +0123 456 70 80</p>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.container-->    
	</section><!--/#conatcat-info-->

dan hasilnya bisa dilihat pada gambar di bawah ini :

 

6. Pembuatan pages.php

Bukalah file about-us.html yang ada di folder hasil unzip tema Corlate, dan buka juga file pages.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi about-us.html yang akan diambil :

	<section id="about-us">
        <div class="container">
			<div class="center wow fadeInDown">
				<h2>About Corlate</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
			</div>
		</div><!--/.container-->    
    </section><!--/#conatcat-info-->

dan hasil pemindahan ke pages.php menjadi seperti ini :

<?=$this->layout('index');?>

	<section id="about-us">
		<div class="container">
			<div class="center wow fadeInDown">
				<h2><?=$this->e($pages['title']);?></h2>
			</div>
			<div class="row">
				<?php if ($this->e($pages['picture']) != '') { ?>
				<div class="col-md-12 text-center" style="margin-bottom:30px;">
					<img src="<?=BASE_URL.'/'.DIR_CON.'/uploads/'.$this->e($pages['picture']);?>" alt="" />
				</div>
				<?php } ?>
				<div class="col-md-12">
					<?=htmlspecialchars_decode(html_entity_decode($this->e($pages['content'])));?>
				</div>
			</div>
		</div><!--/.container-->    
	</section><!--/#conatcat-info-->

dan hasilnya bisa dilihat pada gambar di bawah ini :

 

7. Pembuatan category.php

Bukalah file blog.html yang ada di folder hasil unzip tema Corlate, dan buka juga file category.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi blog.html yang akan diambil :

	<section id="blog" class="container">
        <div class="center">
            <h2>Blogs</h2>
            <p class="lead">Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
        </div>

        <div class="blog">
            <div class="row">
                <div class="col-md-8">
                    <div class="blog-item">
                        <div class="row">
                            <div class="col-xs-12 col-sm-2 text-center">
                                <div class="entry-meta">
                                    <span id="publish_date">07  NOV</span>
                                    <span><i class="fa fa-user"></i> <a href="#">John Doe</a></span>
                                    <span><i class="fa fa-comment"></i> <a href="blog-item.html#comments">2 Comments</a></span>
                                    <span><i class="fa fa-heart"></i><a href="#">56 Likes</a></span>
                                </div>
                            </div>
                                
                            <div class="col-xs-12 col-sm-10 blog-content">
                                <a href="#"><img class="img-responsive img-blog" src="images/blog/blog1.jpg" width="100%" alt="" /></a>
                                <h2><a href="blog-item.html">Consequat bibendum quam liquam viverra</a></h2>
                                <h3>Curabitur quis libero leo, pharetra mattis eros. Praesent consequat libero eget dolor convallis vel rhoncus magna scelerisque. Donec nisl ante, elementum eget posuere a, consectetur a metus. Proin a adipiscing sapien. Suspendisse vehicula porta lectus vel semper. Nullam sapien elit, lacinia eu tristique non.posuere at mi. Morbi at turpis id urna ullamcorper ullamcorper.</h3>
                                <a class="btn btn-primary readmore" href="blog-item.html">Read More <i class="fa fa-angle-right"></i></a>
                            </div>
                        </div>    
                    </div><!--/.blog-item-->

					<ul class="pagination pagination-lg">
                        <li><a href="#"><i class="fa fa-long-arrow-left"></i>Previous Page</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">Next Page<i class="fa fa-long-arrow-right"></i></a></li>
                    </ul><!--/.pagination-->
                </div><!--/.col-md-8-->

                <aside class="col-md-4">
				
				</aside>  
			</div><!--/.row-->
		</div>
	</section><!--/#blog-->

dan hasil pemindahan ke category.php menjadi seperti ini :

<?=$this->layout('index');?>

	<section id="blog" class="container">
		<div class="center">
			<h2><?=$this->e($page_title);?></h2>
		</div>

		<div class="blog">
			<div class="row">
				<div class="col-md-8">
					<?php
						$categorys = $this->post()->getPostFromCategory('3', 'id_post_category DESC', 'post.id_post DESC', $category, $this->e($page), WEB_LANG_ID);
						foreach($categorys as $post){
					?>
					<div class="blog-item">
						<div class="row">
							<div class="col-xs-12 col-sm-2 text-center">
								<div class="entry-meta">
									<span id="publish_date"><?=$this->pocore()->call->podatetime->tgl_indo($post['date']);?></span>
									<span><i class="fa fa-user"></i> <a href="javascript:void(0)"><?=$this->post()->getAuthorName($post['editor']);?></a></span>
									<span><i class="fa fa-comment"></i> <a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>#comments"><?=$this->post()->getCountComment($post['id_post']);?> <?=$this->e($front_comment);?></a></span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-10 blog-content">
								<a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>"><img class="img-responsive img-blog" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/medium/medium_<?=$post['picture'];?>" width="100%" alt="" /></a>
								<h2><a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>"><?=$post['title'];?></a></h2>
								<h3><?=$this->pocore()->call->postring->cuthighlight('post', $post['content'], '200');?>...</h3>
								<a class="btn btn-primary readmore" href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>">Read More <i class="fa fa-angle-right"></i></a>
							</div>
						</div>    
					</div><!--/.blog-item-->
					<?php } ?>
					<div class="text-center">
						<ul class="pagination pagination-lg">
							<?=$this->post()->getCategoryPaging('3', $category, $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
						</ul><!--/.pagination-->
					</div>
				</div><!--/.col-md-8-->

				<aside class="col-md-4">
					<!-- Insert Sidebar -->
					<?=$this->insert('sidebar');?>
				</aside>  
			</div><!--/.row-->
		</div>
	</section><!--/#blog-->

 

8. Pembuatan sidebar.php

Masih mengambil dari file blog.html, akan kita pindahkan elemennya ke file sidebar.php.

Berikut ini isi blog.html yang akan diambil :

                    <div class="widget search">
                        <form role="form">
                                <input type="text" class="form-control search_box" autocomplete="off" placeholder="Search Here">
                        </form>
                    </div><!--/.search-->
    				
    				<div class="widget categories">
                        <h3>Recent Comments</h3>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="single_comments">
                                    <img src="images/blog/avatar3.png" alt=""  />
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
                                    <div class="entry-meta small muted">
                                        <span>By <a href="#">Alex</a></span> <span>On <a href="#">Creative</a></span>
                                    </div>
                                </div>
                                <div class="single_comments">
                                    <img src="images/blog/avatar3.png" alt=""  />
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
                                    <div class="entry-meta small muted">
                                        <span>By <a href="#">Alex</a></span> <span>On <a href="#">Creative</a></span>
                                    </div>
                                </div>
                                <div class="single_comments">
                                    <img src="images/blog/avatar3.png" alt=""  />
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </p>
                                    <div class="entry-meta small muted">
                                        <span>By <a href="#">Alex</a></span> <span>On <a href="#">Creative</a></span>
                                    </div>
                                </div>
                                
                            </div>
                        </div>                     
                    </div><!--/.recent comments-->

                    <div class="widget categories">
                        <h3>Categories</h3>
                        <div class="row">
                            <div class="col-sm-6">
                                <ul class="blog_category">
                                    <li><a href="#">Computers <span class="badge">04</span></a></li>
                                    <li><a href="#">Smartphone <span class="badge">10</span></a></li>
                                    <li><a href="#">Gedgets <span class="badge">06</span></a></li>
                                    <li><a href="#">Technology <span class="badge">25</span></a></li>
                                </ul>
                            </div>
                        </div>                     
                    </div><!--/.categories-->
    				
    				<div class="widget archieve">
                        <h3>Archieve</h3>
                        <div class="row">
                            <div class="col-sm-12">
                                <ul class="blog_archieve">
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> December 2013 <span class="pull-right">(97)</span></a></li>
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> November 2013 <span class="pull-right">(32)</a></li>
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> October 2013 <span class="pull-right">(19)</a></li>
                                    <li><a href="#"><i class="fa fa-angle-double-right"></i> September 2013 <span class="pull-right">(08)</a></li>
                                </ul>
                            </div>
                        </div>                     
                    </div><!--/.archieve-->
    				
                    <div class="widget tags">
                        <h3>Tag Cloud</h3>
                        <ul class="tag-cloud">
                            <li><a class="btn btn-xs btn-primary" href="#">Apple</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Barcelona</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Office</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Ipod</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Stock</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Race</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">London</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Football</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Porche</a></li>
                            <li><a class="btn btn-xs btn-primary" href="#">Gadgets</a></li>
                        </ul>
                    </div><!--/.tags-->
    				
    				<div class="widget blog_gallery">
                        <h3>Our Gallery</h3>
                        <ul class="sidebar-gallery">
                            <li><a href="#"><img src="images/blog/gallery1.png" alt="" /></a></li>
                            <li><a href="#"><img src="images/blog/gallery2.png" alt="" /></a></li>
                            <li><a href="#"><img src="images/blog/gallery3.png" alt="" /></a></li>
                            <li><a href="#"><img src="images/blog/gallery4.png" alt="" /></a></li>
                            <li><a href="#"><img src="images/blog/gallery5.png" alt="" /></a></li>
                            <li><a href="#"><img src="images/blog/gallery6.png" alt="" /></a></li>
                        </ul>
                    </div><!--/.blog_gallery-->

dan hasil pemindahan ke sidebar.php menjadi seperti ini :

<div class="widget search">
	<form action="<?=BASE_URL;?>/search" method="post">
		<input type="text" name="search" class="form-control search_box" value="" placeholder="<?=$this->e($front_search);?>...">
	</form>
</div><!--/.search-->

<div class="widget categories">
	<h3><?=$this->e($front_comment);?></h3>
	<div class="row">
		<div class="col-sm-12">
		<?php
			$comments_side = $this->post()->getComment('5', 'DESC');
			foreach($comments_side as $comment_side){
			$comment_post = $this->post()->getPostById($comment_side['id_post'], WEB_LANG_ID);
		?>
			<div class="single_comments">
				<img class="img-responsive" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/medium/medium_avatar.jpg" alt="" width="80" />
				<p><?=$this->pocore()->call->postring->cuthighlight('post', $comment_side['comment'], '80');?>...</p>
				<div class="entry-meta small muted">
					<span>By <a href="<?=BASE_URL;?>/detailpost/<?=$comment_post['seotitle'];?>#comment"><?=$comment_side['name'];?></a></span> <span>On <a href="<?=BASE_URL;?>/detailpost/<?=$comment_post['seotitle'];?>#comment"><?=$comment_post['title'];?></a></span>
				</div>
			</div>
		<?php } ?>
		</div>
	</div>                     
</div><!--/.recent comments-->

<div class="widget categories">
	<h3><?=$this->e($front_categories);?></h3>
	<div class="row">
		<div class="col-sm-6">
			<ul class="blog_category">
			<?php
				$categorys_side = $this->category()->getAllCategory(WEB_LANG_ID);
				foreach($categorys_side as $category_side){
			?>
				<li><a href="<?=BASE_URL;?>/category/<?=$category_side['seotitle'];?>"><?=$category_side['title'];?></a></li>
			<?php } ?>
			</ul>
		</div>
	</div>                     
</div><!--/.categories-->

<div class="widget tags">
	<h3><?=$this->e($front_tag);?></h3>
	<ul class="tag-cloud">
		<?=$this->post()->getAllTag('RAND()', '30', '&nbsp;', true, '<li>', '</li>', 'btn btn-xs btn-primary');?>
	</ul>
</div><!--/.tags-->

<div class="widget blog_gallery">
	<h3><?=$this->e($front_gallery);?></h3>
	<ul class="sidebar-gallery">
	<?php
		$gallerys = $this->gallery()->getAllGallery('RAND()', '6');
		foreach($gallerys as $gal){
	?>
		<li><a href="javascript:void(0)"><img class="img-responsive" src="<?=BASE_URL.'/'.DIR_CON.'/thumbs/'.$gal['picture'];?>" alt="<?=$gal['title'];?>" width="107" /></a></li>
	<?php } ?>
	</ul>
</div><!--/.blog_gallery-->

sehingga setelah digambungkan dengan step pembuatan category.php hasilnya menjadi seperti pada gambar di bawah ini :

 

9. Pembuatan tag.php

Masih mengambil dari file blog.html, akan kita pindahkan elemennya ke file tag.php. Isi file html yang di ambil sama seperti pada langkah pembuatan category.php tadi.

Sehingga hasil pemindahannya seperti berikut :

<?=$this->layout('index');?>

	<section id="blog" class="container">
		<div class="center">
			<h2><?=$this->e($page_title);?></h2>
		</div>

		<div class="blog">
			<div class="row">
				<div class="col-md-8">
					<?php
						$tags = $this->post()->getPostFromTag('3', 'post.id_post DESC', $this->e($tag_seo), $this->e($page), WEB_LANG_ID);
						foreach($tags as $post){
					?>
					<div class="blog-item">
						<div class="row">
							<div class="col-xs-12 col-sm-2 text-center">
								<div class="entry-meta">
									<span id="publish_date"><?=$this->pocore()->call->podatetime->tgl_indo($post['date']);?></span>
									<span><i class="fa fa-user"></i> <a href="javascript:void(0)"><?=$this->post()->getAuthorName($post['editor']);?></a></span>
									<span><i class="fa fa-comment"></i> <a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>#comments"><?=$this->post()->getCountComment($post['id_post']);?> <?=$this->e($front_comment);?></a></span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-10 blog-content">
								<a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>"><img class="img-responsive img-blog" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/medium/medium_<?=$post['picture'];?>" width="100%" alt="" /></a>
								<h2><a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>"><?=$post['title'];?></a></h2>
								<h3><?=$this->pocore()->call->postring->cuthighlight('post', $post['content'], '200');?>...</h3>
								<a class="btn btn-primary readmore" href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>">Read More <i class="fa fa-angle-right"></i></a>
							</div>
						</div>    
					</div><!--/.blog-item-->
					<?php } ?>
					<div class="text-center">
						<ul class="pagination pagination-lg">
							<?=$this->post()->getTagPaging('3', $this->e($tag_seo), $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
						</ul><!--/.pagination-->
					</div>
				</div><!--/.col-md-8-->

				<aside class="col-md-4">
					<!-- Insert Sidebar -->
					<?=$this->insert('sidebar');?>
				</aside>  
			</div><!--/.row-->
		</div>
	</section><!--/#blog-->

 

10. Pembuatan search.php

Masih mengambil dari file blog.html, akan kita pindahkan elemennya ke file search.php. Isi file html yang di ambil sama seperti pada langkah pembuatan category.php tadi.

Sehingga hasil pemindahannya seperti berikut :

<?=$this->layout('index');?>

	<section id="blog" class="container">
		<div class="center">
			<h2><?=$this->e($page_title);?></h2>
		</div>

		<div class="blog">
			<div class="row">
				<div class="col-md-8">
					<?php
						$search = $this->post()->getPostFromSearch('3', 'post.id_post DESC', $this->e($query), $this->e($page), WEB_LANG_ID);
						foreach($search as $post){
					?>
					<div class="blog-item">
						<div class="row">
							<div class="col-xs-12 col-sm-2 text-center">
								<div class="entry-meta">
									<span id="publish_date"><?=$this->pocore()->call->podatetime->tgl_indo($post['date']);?></span>
									<span><i class="fa fa-user"></i> <a href="javascript:void(0)"><?=$this->post()->getAuthorName($post['editor']);?></a></span>
									<span><i class="fa fa-comment"></i> <a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>#comments"><?=$this->post()->getCountComment($post['id_post']);?> <?=$this->e($front_comment);?></a></span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-10 blog-content">
								<a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>"><img class="img-responsive img-blog" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/medium/medium_<?=$post['picture'];?>" width="100%" alt="" /></a>
								<h2><a href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>"><?=$post['title'];?></a></h2>
								<h3><?=$this->pocore()->call->postring->cuthighlight('post', $post['content'], '200');?>...</h3>
								<a class="btn btn-primary readmore" href="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>">Read More <i class="fa fa-angle-right"></i></a>
							</div>
						</div>    
					</div><!--/.blog-item-->
					<?php } ?>
					<div class="text-center">
						<ul class="pagination pagination-lg">
							<?=$this->post()->getSearchPaging('3', $this->e($query), $this->e($page), WEB_LANG_ID, '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
						</ul><!--/.pagination-->
					</div>
				</div><!--/.col-md-8-->

				<aside class="col-md-4">
					<!-- Insert Sidebar -->
					<?=$this->insert('sidebar');?>
				</aside>  
			</div><!--/.row-->
		</div>
	</section><!--/#blog-->

 

Jika dilihat pada langkah pembuatan category.php, tag.php dan search.php scriptnya sama saja yang berbeda hanya pada pemanggilan data dan pagingnya saja :

category.php

<?php
	$categorys = $this->post()->getPostFromCategory('3', 'id_post_category DESC', 'post.id_post DESC', $category, $this->e($page), WEB_LANG_ID);
	foreach($categorys as $post){
	
	}
?>

<?=$this->post()->getCategoryPaging('3', $category, $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>

 tag.php

<?php
	$tags = $this->post()->getPostFromTag('3', 'post.id_post DESC', $this->e($tag_seo), $this->e($page), WEB_LANG_ID);
	foreach($tags as $post){
	
	}
?>

<?=$this->post()->getTagPaging('3', $this->e($tag_seo), $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>

 search.php

<?php
	$search = $this->post()->getPostFromSearch('3', 'post.id_post DESC', $this->e($query), $this->e($page), WEB_LANG_ID);
	foreach($search as $post){
	
	}
?>

<?=$this->post()->getSearchPaging('3', $this->e($query), $this->e($page), WEB_LANG_ID, '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>

 

11. Pembuatan detailpost.php

Bukalah file blog-item.html yang ada di folder hasil unzip tema Corlate, dan buka juga file detailpost.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi blog-item.html yang akan diambil :

	<section id="blog" class="container">
		<div class="center">
			<h2>Blogs</h2>
			<p class="lead">Pellentesque habitant morbi tristique senectus et netus et malesuada</p>
		</div>

		<div class="blog">
			<div class="row">
				<div class="col-md-8">
					<div class="blog-item">
						<img class="img-responsive img-blog" src="images/blog/blog1.jpg" width="100%" alt="" />
						<div class="row">  
							<div class="col-xs-12 col-sm-2 text-center">
								<div class="entry-meta">
									<span id="publish_date">07  NOV</span>
									<span><i class="fa fa-user"></i> <a href="#"> John Doe</a></span>
									<span><i class="fa fa-comment"></i> <a href="blog-item.html#comments">2 Comments</a></span>
									<span><i class="fa fa-heart"></i><a href="#">56 Likes</a></span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-10 blog-content">
								<h2>Consequat bibendum quam</h2>
								<div class="post-tags">
									<strong>Tag:</strong> <a href="#">Cool</a> / <a href="#">Creative</a> / <a href="#">Dubttstep</a>
								</div>
							</div>
						</div>
					</div><!--/.blog-item-->

					<div class="media reply_section">
						<div class="pull-left post_reply text-center">
							<a href="#"><img src="images/blog/boy.png" class="img-circle" alt="" /></a>
						</div>
						<div class="media-body post_reply_content">
							<h3>Antone L. Huges</h3>
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariaturp</p>
							<p><strong>Web:</strong> <a href="http://www.shapebootstrap.net">www.shapebootstrap.net</a></p>
						</div>
					</div>

					<h1 id="comments_title">5 Comments</h1>
					<div class="media comment_section">
						<div class="pull-left post_comments">
							<a href="#"><img src="images/blog/girl.png" class="img-circle" alt="" /></a>
						</div>
						<div class="media-body post_reply_comments">
							<h3>Marsh</h3>
							<h4>NOVEMBER 9, 2013 AT 9:15 PM</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
							<a href="#">Reply</a>
						</div>
					</div>

					<div id="contact-page clearfix">
						<div class="status alert alert-success" style="display: none"></div>
						<div class="message_heading">
							<h4>Leave a Replay</h4>
							<p>Make sure you enter the(*)required information where indicate.HTML code is not allowed</p>
						</div> 

						<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php" role="form">
							<div class="row">
								<div class="col-sm-5">
									<div class="form-group">
										<label>Name *</label>
										<input type="text" class="form-control" required="required">
									</div>
									<div class="form-group">
										<label>Email *</label>
										<input type="email" class="form-control" required="required">
									</div>
									<div class="form-group">
										<label>URL</label>
										<input type="url" class="form-control">
									</div>                    
								</div>
								<div class="col-sm-7">                        
									<div class="form-group">
										<label>Message *</label>
										<textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
									</div>                        
									<div class="form-group">
										<button type="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
									</div>
								</div>
							</div>
						</form>     
					</div><!--/#contact-page-->
				</div><!--/.col-md-8-->

				<aside class="col-md-4">
					
				</aside>  
			</div><!--/.row-->
		</div>
	</section><!--/#blog-->

dan ini hasil setelah dipindahkan ke file detailpost.php :

<?=$this->layout('index');?>

	<section id="blog" class="container">
		<div class="center">
			<h2><?=$this->e($page_title);?></h2>
		</div>

		<div class="blog">
			<div class="row">
				<div class="col-md-8">
					<div class="blog-item">
						<img class="img-responsive img-blog" src="<?=BASE_URL;?>/<?=DIR_CON;?>/uploads/<?=$post['picture'];?>" width="100%" alt="" />
						<?php if ($post['picture_description'] != '') { ?>
						<p class="text-center" style="padding:10px; background:#eee;"><i><?=$post['picture_description'];?></i></p>
						<?php } ?>
						<div class="row">  
							<div class="col-xs-12 col-sm-2 text-center">
								<div class="entry-meta">
									<span id="publish_date"><?=$this->pocore()->call->podatetime->tgl_indo($post['date']);?></span>
									<span><i class="fa fa-user"></i> <a href="javascript:void(0)"> <?=$this->post()->getAuthorName($post['editor']);?></a></span>
									<span><i class="fa fa-comment"></i> <a href="#comments"><?=$this->post()->getCountComment($post['id_post']);?> <?=$this->e($front_comment);?></a></span>
								</div>
							</div>
							<div class="col-xs-12 col-sm-10 blog-content">
								<?=htmlspecialchars_decode(html_entity_decode($post['content']));?>
								<div class="post-tags">
									<strong><?=$this->e($front_tag);?> :</strong> <?=$this->post()->getPostTag($post['tag'], ' / ');?>
								</div>
							</div>
						</div>
					</div><!--/.blog-item-->

					<div class="media reply_section">
						<div class="pull-left post_reply text-center">
							<?php
								$editor = $this->post()->getAuthor($post['editor']);
								if ($editor['picture'] != '') {
									$editor_avatar = BASE_URL.'/'.DIR_CON.'/uploads/'.$editor['picture'];
								} else {
									$editor_avatar = BASE_URL.'/'.DIR_CON.'/uploads/user-editor.jpg';
								}
							?>
							<a href="javascript:void(0)"><img src="<?=$editor_avatar;?>" class="img-circle" alt="" /></a>
						</div>
						<div class="media-body post_reply_content">
							<h3><?=$editor['nama_lengkap'];?></h3>
							<?=htmlspecialchars_decode(html_entity_decode($editor['bio']));?>
						</div>
					</div>

					<?php if ($post['comment'] == 'Y') { ?>
					<?php if ($this->post()->getCountComment($post['id_post']) > 0) { ?>
					<h1 id="comments_title"><?=$this->post()->getCountComment($post['id_post']);?> <?=$this->e($front_comment);?></h1>
					<?php
						$com_parent = $this->post()->getCommentByPost($post['id_post'], '3', 'DESC', $this->e($page));
						$com_template = array(
							'parent_tag_open' => '<div class="media comment_section">',
							'parent_tag_close' => '</div>',
							'child_tag_open' => '<div class="media comment_section">',
							'child_tag_close' => '</div>',
							'comment_list' => '
								<div class="pull-left post_comments">
									<a href="{$comment_url}"><img src="{$comment_avatar}" class="img-circle" alt="" /></a>
								</div>
								<div class="media-body post_reply_comments">
									<h3>{$comment_name}</h3>
									<h4>{$comment_datetime}</h4>
									<p>{$comment_content}</p>
								</div>
							'
						);
					?>
					<?=$this->post()->generateComment($com_parent, 'DESC', $com_template);?>
					<div class="text-center">
						<ul class="pagination pagination-lg">
							<?=$this->post()->getCommentPaging('3', $post['id_post'], $post['seotitle'], $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
						</ul><!--/.pagination-->
					</div>
					<?php } ?>

					<div id="contact-page clearfix">
						<?=$this->pocore()->call->poflash->display();?>
						<div class="message_heading">
							<h4><?=$this->e($front_leave_comment);?></h4>
						</div> 
						<form name="contact-form" class="contact-form" action="<?=BASE_URL;?>/detailpost/<?=$post['seotitle'];?>#contact-page" method="post" id="main-contact-form">
							<input type="hidden" name="id_parent" id="id_parent" value="0" />
							<input type="hidden" name="id" name="id" value="<?=$post['id_post'];?>" />
							<input type="hidden" name="seotitle" id="seotitle" value="<?=$post['seotitle'];?>" />
							<div class="row">
								<div class="col-sm-5">
									<div class="form-group">
										<label><?=$this->e($comment_name);?> *</label>
										<input type="text" class="form-control" value="<?=(isset($_POST['name']) ? $_POST['name'] : '');?>" required="required" />
									</div>
									<div class="form-group">
										<label><?=$this->e($comment_email);?> *</label>
										<input type="email" class="form-control" value="<?=(isset($_POST['email']) ? $_POST['email'] : '');?>" required="required" />
									</div>
									<div class="form-group">
										<label><?=$this->e($comment_website);?></label>
										<input type="url" class="form-control" value="<?=(isset($_POST['url']) ? $_POST['url'] : '');?>" />
									</div>                    
								</div>
								<div class="col-sm-7">                        
									<div class="form-group">
										<label><?=$this->e($comment_text);?> *</label>
										<textarea name="message" id="message" required="required" class="form-control" rows="3"><?=(isset($_POST['comment']) ? $_POST['comment'] : '');?></textarea>
									</div>
									<div class="form-group">
										<div class="g-recaptcha" data-sitekey="<?=$this->pocore()->call->posetting[21]['value'];?>"></div>
									</div>  
									<div class="form-group">
										<button type="submit" class="btn btn-primary btn-lg" required="required"><?=$this->e($comment_submit);?></button>
									</div>
								</div>
							</div>
						</form>     
					</div><!--/#contact-page-->
					<?php } ?>
				</div><!--/.col-md-8-->

				<aside class="col-md-4">
					<!-- Insert Sidebar -->
					<?=$this->insert('sidebar');?>
				</aside>  
			</div><!--/.row-->
		</div>
	</section><!--/#blog-->

Sehingga hasilnya dapat dilihat pada gambar berikut ini :

 

12. Pembuatan album.php

Bukalah file portfolio.html yang ada di folder hasil unzip tema Corlate, dan buka juga file album.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi portfolio.html yang akan diambil :

	<section id="portfolio">
        <div class="container">
            <div class="center">
               <h2>Portfolio</h2>
               <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>

            <ul class="portfolio-filter text-center">
                <li><a class="btn btn-default active" href="#" data-filter="*">All Works</a></li>
                <li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a></li>
                <li><a class="btn btn-default" href="#" data-filter=".html">Photography</a></li>
                <li><a class="btn btn-default" href="#" data-filter=".wordpress">Web Development</a></li>
            </ul><!--/#portfolio-filter-->

            <div class="row">
                <div class="portfolio-items">
                    <div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
                        <div class="recent-work-wrap">
                            <img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
                            <div class="overlay">
                                <div class="recent-work-inner">
                                    <h3><a href="#">Business theme</a></h3>
                                    <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                    <a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
                                </div> 
                            </div>
                        </div>
                    </div><!--/.portfolio-item-->
                </div>
            </div>
        </div>
    </section><!--/#portfolio-item-->

dan ini hasil setelah dipindahkan ke file album.php :

<?=$this->layout('index');?>

	<section id="portfolio">
        <div class="container">
            <div class="center">
               <h2><?=$this->e($front_gallery);?></h2>
            </div>

            <div class="row">
                <div class="portfolio-items">
					<?php
						$albums = $this->gallery()->getAlbum('8', 'id_album ASC', $this->e($page));
						foreach($albums as $alb){
					?>
                    <div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
                        <div class="recent-work-wrap">
                            <img class="img-responsive" src="<?=BASE_URL.'/'.DIR_CON.'/uploads/medium/medium_'.$alb['picture'];?>" alt="">
                            <div class="overlay">
                                <div class="recent-work-inner">
                                    <h3><a href="<?=BASE_URL.'/gallery/'.$this->e($alb['seotitle']);?>"><?=$alb['title'];?></a></h3>
									<a class="preview" href="<?=BASE_URL.'/gallery/'.$this->e($alb['seotitle']);?>"><i class="fa fa-eye"></i> View</a>
								</div> 
                            </div>
                        </div>
                    </div><!--/.portfolio-item-->
					<?php } ?>
                </div>
				<div class="text-center">
					<ul class="pagination pagination-lg">
						<?=$this->gallery()->getAlbumPaging('8', $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
					</ul><!--/.pagination-->
				</div>
            </div>
        </div>
    </section><!--/#portfolio-item-->

Sehingga hasilnya dapat dilihat pada gambar berikut ini :

 

Masih mengambil dari file portfolio.html, akan kita pindahkan elemennya ke file gallery.php. Isi file html yang di ambil sama seperti pada langkah pembuatan album.php tadi.

Sehingga hasil pemindahannya seperti berikut :

<?=$this->layout('index');?>

	<section id="portfolio">
        <div class="container">
            <div class="center">
               <h2><?=$this->e($page_title);?></h2>
            </div>

            <div class="row">
                <div class="portfolio-items">
					<?php
						$gallerys = $this->gallery()->getGallery('12', 'id_gallery DESC', $album, $this->e($page));
						foreach($gallerys as $gal){
					?>
                    <div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
                        <div class="recent-work-wrap">
                            <img class="img-responsive" src="<?=BASE_URL.'/'.DIR_CON.'/uploads/medium/medium_'.$gal['picture'];?>" alt="">
                            <div class="overlay">
                                <div class="recent-work-inner">
                                    <h3><a href="javascript:void(0)"><?=$gal['title'];?></a></h3>
									<a class="preview" href="<?=BASE_URL.'/'.DIR_CON.'/uploads/'.$gal['picture'];?>" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
								</div> 
                            </div>
                        </div>
                    </div><!--/.portfolio-item-->
					<?php } ?>
                </div>
				<div class="text-center">
					<ul class="pagination pagination-lg">
						<?=$this->gallery()->getGalleryPaging('12', $album, $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
					</ul><!--/.pagination-->
				</div>
            </div>
        </div>
    </section><!--/#portfolio-item-->

dan hasilnya dapat dilihat pada gambar berikut ini :

14. Pembuatan 404.php

Bukalah file 404.html yang ada di folder hasil unzip tema Corlate, dan buka juga file 404.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi 404.html yang akan diambil :

	<section id="error" class="container text-center">
		<h1>404, Page not found</h1>
		<p>The Page you are looking for doesn't exist or an other error occurred.</p>
		<a class="btn btn-primary" href="index.html">GO BACK TO THE HOMEPAGE</a>
	</section><!--/#error-->

dan ini hasil setelah dipindahkan ke file 404.php :

<?=$this->layout('index');?>

	<section id="error" class="container text-center">
		<h1>404</h1>
		<p><?=$this->e($front_404_text);?></p>
		<a class="btn btn-primary" href="<?=BASE_URL;?>">GO BACK TO THE HOMEPAGE</a>
	</section><!--/#error-->

Sehingga hasilnya dapat dilihat pada gambar berikut ini :

 

15. Pembuatan contact.php

Bukalah file contact-us.html yang ada di folder hasil unzip tema Corlate, dan buka juga file contact.php yang ada di folder tema yang telah dibuat tadi.

Berikut ini isi contact-us.html yang akan diambil :

	<section id="contact-info">
        <div class="center">                
            <h2>How to Reach Us?</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </div>
        <div class="gmap-area">
            <div class="container">
                <div class="row">
                    <div class="col-sm-5 text-center">
                        <div class="gmap">
                            <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&amp;aq=0&amp;oq=joomshaper&amp;sll=37.0625,-95.677068&amp;sspn=42.766543,80.332031&amp;ie=UTF8&amp;hq=JoomShaper,&amp;hnear=Dhaka,+Dhaka+Division,+Bangladesh&amp;ll=23.73854,90.385504&amp;spn=0.001515,0.002452&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=1073661719450182870&amp;output=embed"></iframe>
                        </div>
                    </div>

                    <div class="col-sm-7 map-content">
                        <ul class="row">
                            <li class="col-sm-6">
                                <address>
                                    <h5>Head Office</h5>
                                    <p>1537 Flint Street <br>
                                    Tumon, MP 96911</p>
                                    <p>Phone:670-898-2847 <br>
                                    Email Address:info@domain.com</p>
                                </address>

                                <address>
                                    <h5>Zonal Office</h5>
                                    <p>1537 Flint Street <br>
                                    Tumon, MP 96911</p>                                
                                    <p>Phone:670-898-2847 <br>
                                    Email Address:info@domain.com</p>
                                </address>
                            </li>

                            <li class="col-sm-6">
                                <address>
                                    <h5>Zone#2 Office</h5>
                                    <p>1537 Flint Street <br>
                                    Tumon, MP 96911</p>
                                    <p>Phone:670-898-2847 <br>
                                    Email Address:info@domain.com</p>
                                </address>

                                <address>
                                    <h5>Zone#3 Office</h5>
                                    <p>1537 Flint Street <br>
                                    Tumon, MP 96911</p>
                                    <p>Phone:670-898-2847 <br>
                                    Email Address:info@domain.com</p>
                                </address>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>  <!--/gmap_area -->

    <section id="contact-page">
        <div class="container">
            <div class="center">        
                <h2>Drop Your Message</h2>
                <p class="lead">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div> 
            <div class="row contact-wrap"> 
                <div class="status alert alert-success" style="display: none"></div>
                <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label>Name *</label>
                            <input type="text" name="name" class="form-control" required="required">
                        </div>
                        <div class="form-group">
                            <label>Email *</label>
                            <input type="email" name="email" class="form-control" required="required">
                        </div>
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="number" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" class="form-control">
                        </div>                        
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label>Subject *</label>
                            <input type="text" name="subject" class="form-control" required="required">
                        </div>
                        <div class="form-group">
                            <label>Message *</label>
                            <textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
                        </div>                        
                        <div class="form-group">
                            <button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Submit Message</button>
                        </div>
                    </div>
                </form> 
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#contact-page-->

dan ini hasil setelah dipindahkan ke file contact.php :

<?=$this->layout('index');?>

	<section id="contact-info">
		<div class="center">                
			<h2><?=$this->e($front_contact);?></h2>
		</div>

		<div class="gmap-area">
			<div class="container">
				<div class="row">
					<div class="col-sm-5 text-center">
						<div class="gmap">
							<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&amp;aq=0&amp;oq=joomshaper&amp;sll=37.0625,-95.677068&amp;sspn=42.766543,80.332031&amp;ie=UTF8&amp;hq=JoomShaper,&amp;hnear=Dhaka,+Dhaka+Division,+Bangladesh&amp;ll=23.73854,90.385504&amp;spn=0.001515,0.002452&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=1073661719450182870&amp;output=embed"></iframe>
						</div>
					</div>
					<div class="col-sm-7 map-content">
						<ul class="row">
							<li class="col-sm-6">
								<address>
									<h5>Head Office</h5>
									<p>1537 Flint Street<br>Tumon, MP 96911</p>
									<p>Phone:670-898-2847<br>Email Address:info@domain.com</p>
								</address>
								<address>
									<h5>Zonal Office</h5>
									<p>1537 Flint Street<br>Tumon, MP 96911</p>                                
									<p>Phone:670-898-2847<br>Email Address:info@domain.com</p>
								</address>
							</li>
							<li class="col-sm-6">
								<address>
									<h5>Zone#2 Office</h5>
									<p>1537 Flint Street<br>Tumon, MP 96911</p>
									<p>Phone:670-898-2847<br>Email Address:info@domain.com</p>
								</address>
								<address>
									<h5>Zone#3 Office</h5>
									<p>1537 Flint Street<br>Tumon, MP 96911</p>
									<p>Phone:670-898-2847<br>Email Address:info@domain.com</p>
								</address>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>  <!--/gmap_area -->

	<section id="contact-page">
		<div class="container">
			<div class="center">        
				<?=htmlspecialchars_decode($this->e($alertmsg));?>
			</div> 
			<div class="row contact-wrap"> 
				<?=htmlspecialchars_decode($this->e($alertmsg));?>
				<form class="contact-form" id="main-contact-form" name="contact-form" action="<?=BASE_URL;?>/contact" method="post">
					<div class="col-sm-5 col-sm-offset-1">
						<div class="form-group">
							<label><?=$this->e($contact_name);?> *</label>
							<input type="text" name="contact_name" class="form-control" value="<?=(isset($_POST['contact_name']) ? $_POST['contact_name'] : '');?>" required="required">
						</div>
						<div class="form-group">
							<label><?=$this->e($contact_email);?> *</label>
							<input type="email" name="contact_email" class="form-control" value="<?=(isset($_POST['contact_email']) ? $_POST['contact_email'] : '');?>" required="required">
						</div>
						<div class="form-group">
							<label><?=$this->e($contact_subject);?> *</label>
							<input type="text" name="contact_subject" class="form-control" value="<?=(isset($_POST['contact_subject']) ? $_POST['contact_subject'] : '');?>" required="required">
						</div>                        
					</div>
					<div class="col-sm-5">
						<div class="form-group">
							<label><?=$this->e($contact_message);?> *</label>
							<textarea name="contact_message" id="message" required="required" class="form-control" rows="7"><?=(isset($_POST['contact_message']) ? $_POST['contact_message'] : '');?></textarea>
						</div>                        
						<div class="form-group">
							<button type="submit" name="contact_submit" class="btn btn-primary btn-lg" required="required"><?=$this->e($front_contact_btn);?></button>
						</div>
					</div>
				</form> 
			</div><!--/.row-->
		</div><!--/.container-->
	</section><!--/#contact-page-->

Sehingga hasilnya dapat dilihat pada gambar berikut ini :

 

VI. Distribusi Tema

Jika keseluruhan bagian theme telah selesai dikerjakan maka waktunya untuk mempaket theme tersebut. Berikut cara mempaketnya :

1. Masuk ke folder po-content/themes/corlate kemudian buat preview.jpg yang baru dengan screenshoot gambar tema corlate yang sudah selesai dibuat.

2. Buat file README untuk menerangkan cara penginstalan dan informasi dari si pembuat tema.

3. Kemudian paket semua file tema menjadi file zip (ingat harus file zip), kemudian beri nama file zip tersebut dengan nama corlate.zip

Contoh pemaketan tema bisa di download pada link berikut ini : corlate.zip.