- Beranda
- Templates & Scripts Stuff
AYO BANGUN TEMPLATE SENDIRI GAN (yang mau belajar bareng silahkan masuk)
...
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
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%
update scriptnya gan
masukan script berikut dibawah comentar <!-- Start Content -->
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
Spoiler for 0,5 %:
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:
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 %:
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>
Diubah oleh ucupgoblock 12-07-2014 01:42
0
12.2K
Kutip
111
Balasan
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Templates & Scripts Stuff
2.5KThread•656Anggota
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru