Vertical menu Bootstrap

Vertical menu Bootstrap Dengan Drop down adalah alternatif lain dalam membuat navigasi link komponen ini sangat cocok digunakan pada sidebar baik sebelah kanan maupun sidebar bagian kiri, komponen ini dapat memudahkan user untuk bernavigasi mencari artikel yang ada di dalam web atau blog kita, nah berikut ini
adalah demonya:

• Bootstrap Blogger Template
• Navbar Bootstrap
• Button Bootstrap
  • Framework bootstrap
  • Button Metro Style
  • Unit Link Indonesia
  • Neon Box

Kode Htmlnya adalah seperti dibawah ini:

<div class="bs-component">
<ul class="nav nav-pills nav-stacked" style="background: #000; max-width: 300px;">
<li class="active"><a href="#">Bootstrap Blogger Template</a></li>
<li><a href="#">Navbar Bootstrap</a></li>
<li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Button Bootstrap<span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
<li><a href="#">Framework bootstrap</a></li>
<li><a href="#" target="_blank">Button Metro Style</a></li>
<li><a href="#">Unit Link Indonesia</a></li>
<li class="divider"></li>
<li><a href="#">Neon Box</a></li>
</ul>
</li>
</ul>
</div>

Pemasangannya pun sangat mudah khususnya bagi pengguna blogger template, tinggal dicopy semua kode htmlnya dan paste kedalam widget, dan jangan lupa untuk mengganti url atau link sesuai dengan keinginan anda, semoga artikel ini bermanfaat bagi anda semuanya. Keep Blogging!

Catatan: yang bertanda # warna hitam ganti dengan URL link anda

Read More

11:21 AM  component  

Navbar Bootstrap untuk Menu Navigasi

Navbar Bootstrap ini merupakan komponen penting untuk sebuah website ataupun blog, Komponen Navbar ini pada umumnya berisikan menu Navigasi yang mengarah ke sebuah artikel didalam situs tersebut, bisa juga sebagai menu link untuk kategori nah berikut ini adalah demonya:

Bootstrap

• Google
• Blogger
• Webmaster Tools
  • Taufan
  • Unit link Commonwealth Life
  • Suzuki Motogp

Kode html navbar bootstrap ini adalah seperti dibawah ini:

<div class="bs-component">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-inverse-collapse" data-toggle="collapse" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
<a class="navbar-brand" href="Home Link">Bootstrap</a></div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.google.co.id/">Google</a></li>
<li><a href="http://www.blogger.com/">Blogger</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="https://www.google.com/webmasters/tools/home?hl=en">Webmaster Tools<b class="caret"></b></a>
 <ul class="dropdown-menu">
<li><a href="Just input your url here">Taufan</a></li>
<li><a href="Url penting disini"> link Commonwealth Life</a></li>
<li><a href="Isi dengan Url">Suzuki Motogp</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Navbar bootstrap ini pada umumnya ditempatkan di atas Main wrapper atau jika anda menggunakan slide show image atau carousel, Komponen ini bisa ditempatkan tepat di atasnya.
nah demikianlah ulasan mengenai Navbar bootstrap ini semoga bermanfaat dan dapat menambah wawasan untuk anda.

Read More

8:28 AM  component  

Button Bootstrap metro style

Diantara sekian banyak jenis framework ada satu yang menjadi favorit saya yaitu Bootstrap Metro style. perbedaan dengan framework lainnya adalah jika di metro style kesan tegas dan modern sangat menonjol serta flat design kombinasi warnanya juga lebih terang.
Button merupakan component penting dalam setiap pembuatan blog atau website, kelebihan menggunakan button bootstrap adalah komposisi warnanya ada banyak sehingga penempatan button lebih bervariatif. pada umunya component blog yang membutuhkan button adalah class Read more atau next page dan prev page, bisa juga untuk button home dll.
Download kode css nya disini
Demo  button bootstrap metro style tersebut bisa dilihat dibawah ini:

Danger Button

<button class="btn btn-danger btn-lg" type="button">Large button</button>
<button class="btn btn-danger" type="button">Default button</button>
<button class="btn btn-danger btn-sm" type="button">Small button</button>
<button class="btn btn-danger btn-xs" type="button">Mini button</button>

Warning Button

<button class="btn btn-warning btn-lg" type="button">Large button</button>
<button class="btn btn-warning" type="button">Default button</button>
<button class="btn btn-warning btn-sm" type="button">Small button</button>
<button class="btn btn-warning btn-xs" type="button">Mini button</button>

Success Button

<button class="btn btn-success btn-lg" type="button">Large button</button>
<button class="btn btn-success" type="button">Default button</button>
<button class="btn btn-success btn-sm" type="button">Small button</button>
<button class="btn btn-success btn-xs" type="button">Mini button</button>

Default Button

<button class="btn btn-default btn-lg" type="button">Large button</button>
<button class="btn btn-default" type="button">Default button</button>
<button class="btn btn-default btn-sm" type="button">Small button</button>
<button class="btn btn-default btn-xs" type="button">Mini button</button>

Info Button

<button class="btn btn-info btn-lg" type="button">Large button</button>
<button class="btn btn-info" type="button">Default button</button>
<button class="btn btn-info btn-sm" type="button">Small button</button>
<button class="btn btn-info btn-xs" type="button">Mini button</button>

Primary Buton

<button class="btn btn-primary btn-lg" type="button">Large button</button>
<button class="btn btn-primary" type="button">Default button</button>
<button class="btn btn-primary btn-sm" type="button">Small button</button>
<button class="btn btn-primary btn-xs" type="button">Mini button</button>

Read More

11:00 AM  component  

Framework Bootstrap untuk blogger

Easy and simple way to create a blog with bootstrap

Cara mudah dan sederhana untuk para blogger dalam membuat atau mendesain blog dengan framework bootstrap adalah sebagai berikut:
1. Download Css bootstrap v3 serta file Java scriptnya disini
kemudian upload dan simpan file di account google drive anda, atau kalau mau mudah bisa juga langsung dengan copy link css dan java scriptnya dibawah ini

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"/>

2. Copy kedua file tersebut dan paste di template blogger seperti di contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/*
-----------------------------------------------
Blogger Template Style
Basic Css dan layout
----------------------------------------------- */
</style>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

Kemudian untuk memulai menambahkan component bootstrap anda bisa langsung ke official websitenya disini disitus tersebut sudah disediakan semua kode html untuk setiap componentnya
tinggal dicopy dan paste di bagian template sesuai kebutuhan anda.

Jika ada yang bertanya, mengapa mesti menggunakan bootstrap? jawaban saya adalah karena dengan menggunakan framework bootstrap ini dapat mempermudah dan mempercepat cara kerja dalam membuat atau mendesain sebuah website dengan hasil  yang responsive dan modern and clean tentunya.

Read More

10:16 PM  component  

Jumbotron bootstrap untuk blogger

Cara menambahkan component bootstrap Jumbotron di blogger template, caranya cukup mudah hanya dengan menambahkan beberapa kode HTML kedalam template, pada umumnya Component Jumbotron ini biasanya dipasang di halaman Home page. contoh kode HTML nya adalah sebagai berikut:

<div class="jumbotron">

<h1>Megatron</h1>

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.<br />

<span class="btn btn-primary btn-lg">Learn more</span></div>

Dan hasilnya seperti dibawah ini

Megatron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
Learn more

Kode yang berwarna merah adalah untuk tombol atau button yang bisa anda isi dengan link yang menuju ke target url halaman sesuai dengan yang anda inginkan.
Cara mengganti warna Background Jumbotron
apabila kita ingin mengganti warna background jumbotron ini caranya pun cukup mudah hanya dengan menambahkan kode style Css, contohnya seperti ini

<div class='jumbotron' style='background-color: #00CFAE;'>

maka hasilnya background akan berubah menjadi seperti dibawah ini:

Judul Utama

Disinilaah tempatnya anda memberikan informasi penting sebuah postingan jadi Isilah Dengan Deskripsi singkat tentang isi konten Artikel utama anda disini
a simple jumbotron-style component for calling extra attention to featured content or information.
Baca selengkapnya

ok cukup sekian dulu ya,
Getting Started is best practice techniques that can be introduced into your experience to give you a competitive advantage for your skill

Read More

12:41 PM  component  

Profesional Web Design

Sebuah website dapat berupa sekumpulan teks, gambar, video, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis. Halaman web dapat dapat diprogram secara dinamis sehingga menghasilkan halaman dengan konten atau tampilan visual sesuai dengan yang kita inginkan. Kami adalah Profesional Web Design full service dan creative agency yang berlokasi di Bekasi. Kami adalah tempat bagi anda untuk pembuatan website, desain logo, pembuatan multimedia graphic design. dengan mengikuti perkembangan Standar Teknologi HTML5 yang lebih responsive, interaktif dan user friendly kami berkomitmen memberikan layanan dan dukungan yang terbaik. desain website yang kami rancang siap untuk mendukung usaha dan bisnis anda. contoh website dengan konsep modern dan valid HTML5 bisa anda lihat di taufan contributor dari bootstrap blogger template ini. Terima kasih sudah berkunjung ke blog kami, salam sukses!

Read More

8:22 PM  Technology  

Pure css Animated Gear

we have made the animated gears with CSS3. The result looks very nice. I have used CSS3 keyframes, animation and transforms (rotate) in order to achieve this result. Please pay attention – current demo works well in Firefox and Chrome / Safari (webkit).


HTML Markup:

<div class="container">
<div class="gear" id="gear1"></div>
<div class="gear" id="gear2"></div>
<div class="gear" id="gear3"></div>
<div class="gear" id="gear4"></div>
<div class="gear" id="gear5"></div>
<div class="gear" id="gear6"></div>
<div class="gear" id="gear7"></div>
</div>

Css Style:

/* CSS3 keyframes */
@-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
/* gears */
.gear {
float: none;
position: absolute;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#gear1 {
background: url('../images/g1.png') no-repeat 0 0;
height: 85px;
left: 31px;
top: 45px;
width: 85px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear2 {
background: url('../images/g2.png') no-repeat 0 0;
height: 125px;
left: 105px;
top: 10px;
width: 125px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear3 {
background: url('../images/g3.png') no-repeat 0 0;
height: 103px;
left: 149px;
top: 118px;
width: 103px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}
#gear4 {
background: url('../images/g4.png') no-repeat 0 0;
height: 144px;
left: 46px;
top: 173px;
width: 144px;
-moz-animation-name: cckw;
-moz-animation-duration: 20.2s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 20.2s;
}
#gear5 {
background: url('../images/g1.png') no-repeat 0 0;
height: 85px;
left: 127px;
top: 292px;
width: 85px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
}
#gear6 {
background: url('../images/g2.png') no-repeat 0 0;
height: 125px;
left: 200px;
top: 283px;
width: 125px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 16.84s;
}
#gear7 {
background: url('../images/g3.png') no-repeat 0 0;
height: 103px;
left: 277px;
top: 217px;
width: 103px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 13.5s;
}

Read More

4:45 PM  Technology