- Beranda
- Komunitas
- Tech
- Templates & Scripts Stuff
AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)
![ucupgoblock](https://s.kaskus.id/user/avatar/2010/06/08/avatar1752947_1.gif)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
TS
ucupgoblock
AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)
agan-agan yang pingin belajar bareng membuat template. Monggo coret-coret di mari gan
Ane coba bikin 1 template web front page untuk kita share bareng-bareng
ane mulai dari 0% - 100%
maaf gan kalo kata-katanya berantakan
ini ane buat pake bootstrap 3.x gan
pertama download dulu folder css sama js nya
Buat agan-agan yg butuh package nya bisa request ke
BBM : 74AA8003
bakalan ane kirim terus update list learning nya
semoga bisa bermanfaat untuk bersama![Ngakak emoticon-Ngakak](https://s.kaskus.id/images/smilies/smilies_fb5ohtyfyn16.gif)
![AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)](https://s.kaskus.id/images/2014/04/29/1752947_20140429122730.jpg)
setelah di download semua foldernya kita buat index.html ini untuk menampilkan halaman utama web saat di load
<pre name="code">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dee - Themes Frontpage v1</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="dee" name="author">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dee-default.css">
</head>
<body>
<!-- Start Header -->
<header>
<nav class="navbar-fixed-top dee-navbar hidden-xs">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Navbar menu mobile -->
<nav class="navbar-default dee-navbar visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu-list">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav navbar-nav" id="menu-list">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Ends -->
</header>
<!-- Ends Header -->
<!-- Start Header Slide -->
<div id="carousel-header" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header" data-slide-to="0" class="active"></li>
<li data-target="#carousel-header" data-slide-to="1"></li>
<li data-target="#carousel-header" data-slide-to="2"></li>
</ol>
<!-- Ends -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">First</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Two</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Three</div>
</div>
</div>
<!-- Ends -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-header" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-header" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Ends -->
</div>
<!-- Ends Header Slide -->
</body>
[removed][removed]
[removed][removed]
[removed][removed]
</html>
</pre>
nie ane update lagi gan jadi 0,6%
![AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)](https://s.kaskus.id/images/2014/05/01/1752947_20140501025410.jpg)
![AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)](https://s.kaskus.id/images/2014/05/03/1752947_20140503025325.jpg)
update scriptnya gan
masukan script berikut dibawah comentar <!-- Start Content -->
![Ngakak emoticon-Ngakak](https://s.kaskus.id/images/smilies/smilies_fb5ohtyfyn16.gif)
Ane coba bikin 1 template web front page untuk kita share bareng-bareng
ane mulai dari 0% - 100%
maaf gan kalo kata-katanya berantakan
ini ane buat pake bootstrap 3.x gan
pertama download dulu folder css sama js nya
Buat agan-agan yg butuh package nya bisa request ke
BBM : 74AA8003
bakalan ane kirim terus update list learning nya
semoga bisa bermanfaat untuk bersama
![Ngakak emoticon-Ngakak](https://s.kaskus.id/images/smilies/smilies_fb5ohtyfyn16.gif)
Spoiler for 0,5 %:
![AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)](https://s.kaskus.id/images/2014/04/29/1752947_20140429122730.jpg)
setelah di download semua foldernya kita buat index.html ini untuk menampilkan halaman utama web saat di load
Spoiler for script index.html:
<pre name="code">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dee - Themes Frontpage v1</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="dee" name="author">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dee-default.css">
</head>
<body>
<!-- Start Header -->
<header>
<nav class="navbar-fixed-top dee-navbar hidden-xs">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Navbar menu mobile -->
<nav class="navbar-default dee-navbar visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu-list">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav navbar-nav" id="menu-list">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Ends -->
</header>
<!-- Ends Header -->
<!-- Start Header Slide -->
<div id="carousel-header" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header" data-slide-to="0" class="active"></li>
<li data-target="#carousel-header" data-slide-to="1"></li>
<li data-target="#carousel-header" data-slide-to="2"></li>
</ol>
<!-- Ends -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">First</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Two</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Three</div>
</div>
</div>
<!-- Ends -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-header" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-header" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Ends -->
</div>
<!-- Ends Header Slide -->
</body>
[removed][removed]
[removed][removed]
[removed][removed]
</html>
</pre>
nie ane update lagi gan jadi 0,6%
Spoiler for nolkomaenampersen:
![AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)](https://s.kaskus.id/images/2014/05/01/1752947_20140501025410.jpg)
Spoiler for update script:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dee - Themes Frontpage v1</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="dee" name="author">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dee-default.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome-ie7.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome-ie7.min.css">
</head>
<body>
<!-- Start Header -->
<header>
<nav class="navbar-fixed-top dee-navbar hidden-xs">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Navbar menu mobile -->
<nav class="navbar-default dee-navbar visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu-list">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav collapse navbar-nav" id="menu-list">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Ends -->
</header>
<!-- Ends Header -->
<!-- Start Header Slide -->
<div id="carousel-header" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header" data-slide-to="0" class="active"></li>
<li data-target="#carousel-header" data-slide-to="1"></li>
<li data-target="#carousel-header" data-slide-to="2"></li>
</ol>
<!-- Ends -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">First</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Two</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Three</div>
</div>
</div>
<!-- Ends -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-header" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-header" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Ends -->
</div>
<!-- Ends Header Slide -->
<div style="clear:both; height:10px;"></div>
<!-- Start Content -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-9" style="border:1px solid #ccc;">content</div>
<div class="col-xs-12 col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li><a href="#">Sub Menu4</a></li>
</ul>
</div>
</div>
</div>
<!-- Ends Content -->
</body>
[removed][removed]
[removed][removed]
[removed][removed]
</html>
<head>
<meta charset="utf-8">
<title>Dee - Themes Frontpage v1</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="dee" name="author">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dee-default.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome-ie7.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome-ie7.min.css">
</head>
<body>
<!-- Start Header -->
<header>
<nav class="navbar-fixed-top dee-navbar hidden-xs">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Navbar menu mobile -->
<nav class="navbar-default dee-navbar visible-xs">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu-list">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-leaf"></span> Dee</a>
</div>
<ul class="nav collapse navbar-nav" id="menu-list">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#"><i class="glyphicon glyphicon-search"></i> </a></li>
</ul>
</div>
</nav>
<!-- Ends -->
</header>
<!-- Ends Header -->
<!-- Start Header Slide -->
<div id="carousel-header" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-header" data-slide-to="0" class="active"></li>
<li data-target="#carousel-header" data-slide-to="1"></li>
<li data-target="#carousel-header" data-slide-to="2"></li>
</ol>
<!-- Ends -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">First</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Two</div>
</div>
<div class="item">
<img src="http://placehold.it/1900x600">
<div class="carousel-caption">Three</div>
</div>
</div>
<!-- Ends -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-header" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-header" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Ends -->
</div>
<!-- Ends Header Slide -->
<div style="clear:both; height:10px;"></div>
<!-- Start Content -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-9" style="border:1px solid #ccc;">content</div>
<div class="col-xs-12 col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li><a href="#">Sub Menu4</a></li>
</ul>
</div>
</div>
</div>
<!-- Ends Content -->
</body>
[removed][removed]
[removed][removed]
[removed][removed]
</html>
Spoiler for 0,7 %:
![AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)](https://s.kaskus.id/images/2014/05/03/1752947_20140503025325.jpg)
update scriptnya gan
masukan script berikut dibawah comentar <!-- Start Content -->
Spoiler for update script content:
<div class="col-xs-12 col-md-9 content">
<div class="panel panel-primary">
<div class="panel-heading dee-panhead">
<ul class="nav nav-tabs dee-tabs">
<li class="active"><a data-toggle="tab" href="#most-recent">Most Recent</a></li>
<li><a data-toggle="tab" href="#populler">Populler</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="most-recent">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">5 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">25 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">30 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">58 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">2 hour</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
</ul>
</div>
<!-- start tab content populer -->
<div class="tab-pane fade" id="populler">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">5 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">25 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">30 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">58 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">2 hour</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Ends Content -->
<!-- Start Left Menu -->
<div class="col-xs-12 col-md-3 right-side hidden-xs">
<ul class="nav nav-list dee-navlist">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li><a href="#">Sub Menu4</a></li>
</ul>
</div>
<div class="col-xs-12 col-md-3 visible-xs">
<ul class="nav nav-list">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li><a href="#">Sub Menu4</a></li>
</ul>
</div>
<!-- Ends Left Menu -->
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading dee-panhead">
<ul class="nav nav-tabs dee-tabs">
<li class="active"><a data-toggle="tab" href="#most-recent">Most Recent</a></li>
<li><a data-toggle="tab" href="#populler">Populler</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="most-recent">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">5 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">25 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">30 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">58 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">2 hour</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
</ul>
</div>
<!-- start tab content populer -->
<div class="tab-pane fade" id="populler">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">5 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">25 sec</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">30 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">58 min</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="http://placehold.it/100x100" alt="...">
</a>
<div class="media-body">
<h2 class="media-heading">Inspiration of Indonesia
<small>
03 MAY 2014, Christoper
<div class="dee-most pull-right">2 hour</div>
</small>
</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula... <a class="btn btn-primary btn-xs" href="#">read more</a></p>
</div>
<hr>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Ends Content -->
<!-- Start Left Menu -->
<div class="col-xs-12 col-md-3 right-side hidden-xs">
<ul class="nav nav-list dee-navlist">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li><a href="#">Sub Menu4</a></li>
</ul>
</div>
<div class="col-xs-12 col-md-3 visible-xs">
<ul class="nav nav-list">
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
<li><a href="#">Sub Menu4</a></li>
</ul>
</div>
<!-- Ends Left Menu -->
</div>
</div>
![Ngakak emoticon-Ngakak](https://s.kaskus.id/images/smilies/smilies_fb5ohtyfyn16.gif)
Diubah oleh ucupgoblock 12-07-2014 01:42
0
12.2K
Kutip
111
Balasan
![Guest](https://s.kaskus.id/user/avatar/default.png)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
Komentar yang asik ya
Urutan
Terbaru
Terlama
![Guest](https://s.kaskus.id/user/avatar/default.png)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
Komentar yang asik ya
Komunitas Pilihan