All Tutorial
News Update
Loading...

Featured

[Slipknot][recentbylabel]

Featured

[korn][recentbylabel]

Sabtu, 12 September 2015

3 Efek Keren Pada Images


Sobat blogger, pada tutorial kali ini saya akan berbagi cara membuat efek images menjadi lebih keren ketika di hover dengan mouse ada 3 variasi efek yang saya bagikan kali ini yaitu tilt efek, morph efek, dan focus efek, ketiga efek ini dalam penerapannya diblog sangatlah mudah dan juga ringan karena hanya menggunkan css saja jadi tidak akan mempengaruhi loading blog sobat.

Cara Membuat 3 Efek Keren Pada Images

Langkah Ke-1: Tambahkan kode css dibawah ini sebelum kode </head>.
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !
 <style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  margin: 0; padding: 0;
}
.pic {
  height: 300px;
  width: 300px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;

  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
  float: left;
}
.pic:hover {
  cursor: pointer;
}
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style> 
Langkah Ke-2: Letakan kode HTML dibawah ini dimana sobat akan memunculkannya.
 <div class="tilt pic">
    <img src="http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
  </div>
  <div class="morph pic">
    <img src="https://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
  </div>
  <div class="focus pic">
    <img src="https://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
  </div> 
Langkah Ke-3: Terakhir Simpan.
SELESAI ! Selamat mencoba.


DEMO SILAHKAN HOVER IMAGES DIBAWAH

Aflah
Aflah
Aflah

Senin, 31 Agustus 2015

Cara Membuat Kotak Subscribe Via email Melayang Di Blog


Cara Membuat Kotak Subscribe Via email Melayang. Sobat blogger, ketika kita mengunjungi sebuah situs website pernah kita jumpai sebuah kotak subscribe yang telah disediakan oleh si empunya web tersebut melayang ditengah-tengah postingan atau blog, tetapi ada juga yang memang fixed disidebar, atau berada secara permanen disisi samping maupun di posisi paling abawah pada blog, fungsi nya adalah untuk mempermudah pengunjung berlangganan artikel dari blog sobat melalui email.

Cara Membuat Kotak Subscribe Via email Floating
Cara Membuat Kotak Subscribe Via email Floating
Kotak subscribe  ini secara default bagi yang menggunakan flatform blogger biasanya sudah tersedia dan bisa dibuat melalui http://feedburner.google.com, tetapi tampilannya tentulah sederhana saja, nah jika sobat ingin membuat tampilan kotak subscribe pada blog sobat menjadi "lebih indah dan menarik", maka sobat dapat mengikuti langkah-langkahnya diabawah ini.
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !




Bagaimana sob..tampilannya berbeda dengan kotak subscribe pada umumnya kan... dan sebenarnya cara membuat kotak subscribe seperti ini tidaklah sulit-sulit amat sob, jika sobat mengikuti langkah-langkah dibawah ini dengan benar dan teliti, lagi-lagi saya pastikan dan saya jamin akan bisa dipasang diblog kesayangan sobat.


Cara Membuat Kotak Subscribe Via email Floating

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Javascript dan Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> 

Langkah Ke-2: Tambahkan kode css dibawah ini sebelum kode </body>.

<style>
#colorbox, #cboxOverlay, #cboxWrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    overflow: hidden;
    background:rgba(0,0,0,.5) 
} 
#cboxOverlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

#subscriptionwrap { 
    width: 500px; height: 250px;  
    background: rgba(0,0,0,.8); 
    padding: 15px; 
    margin: 14px; 
    box-shadow: 0 1px 0px #333 inset,1px 1px 1px rgba(0,0,0,0.4); 
   }
.subscriptionbox h4 { 
    font-size: 30px; 
    font-family: &#39;Verdana&#39;, Arial; 
    font-variant: small-caps; 
    margin: 0 auto; 
    text-align: center; 
    line-height: 30px; 
    color: #f4f4f4; 
    font-weight: 600; 
    text-shadow: 1px 1px 5px #333; 
    text-decoration: none !important; 
}
.subscriptionbox p { 
    font-family: geogia; 
    font-style: italic; 
    font-size: 26px; 
    text-align: center; 
    margin: 0px; 
    line-height: 30px; 
    margin-top: 25px; 
    border-bottom: 1px solid #333; 
    color: #f4f4f4; 
    padding-bottom: 20px; 
}
.emailbutton1 { 
    background: #ea5c35; 
    border: 1px solid #ddd; 
    box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); 
    color: #fff !important; 
    text-shadow: 0 1px 0 #fff; 
    line-height: 1.5; 
    top: 0px; 
    margin: 10px 0 0 -15px; 
    cursor: pointer; 
    padding: 18px 15px 15px 15px !important; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none !important; 
}
.emailbutton1:hover { 
    background: #000; 
    text-decoration: none !important; 
}
.emailinput1 {
    width: 400px;height: 37px;    padding-right: 8px !important; 
    float: left; 
    margin: 10px 0 0 0px; 
    padding: 8px 40px 8px 10px; 
    background: #333; 
    font-family: georgia; 
    font-style: italic; 
    font-size: 16px; 
    color: #f4f4f4; 
    text-decoration: none!important; 
}
</style>

<div style='display:none'> 
<div id='email-popup' style='position:scroll; z-index:99999;'> 
<div id='subscriptionwrap'> 
<div class='subscriptionbox'> 
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4> 
<p>Join end get our latest Tutorial</p> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=antoncabon&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'> 
<input name='uri' type='hidden' value='antoncabon'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='emailinput1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/> 
<input class='emailbutton1' title='' type='submit' value='SignUp'/> 
</form> 
</div> 
</div> 
  </div> 
  </div>
<script src='//cdn.rawgit.com/antoncabon/file/master/pop-up-subscribebox.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { 
var setDays = 1000*60*60*24*1; 
var expires = new Date((new Date()).valueOf() + setDays); 
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
//set timeout for closing the popup 
setTimeout(function () { $.fn.colorbox.close(); }, 60000);
//color box width, height and popup id   
$.colorbox({width:&quot;autopx&quot;, height:&quot;autopx&quot;, inline:true, href:&quot;#email-popup&quot;}); 
}});</script> 

Langkah Ke-3: Silahkan atur cookiesnya untuk menentukan kapan kotak ini akan dimunculkan kembali setelah pengunjung tertentu kembali lagi ke blog anda. setting pada var setDays = 1000*60*60*24*1; angka 1 diatas menunjukan jumlah hari, jika sobat ingin memunculkannya dalam 7 hari silahkan ganti angka 1 menjadi 7 dan seterusnya. dan jangan lupa untuk mengganti  uri=antoncabon dengan uri=miliksobat, dan value=antoncabon dengan value=miliksobat.

Langkah Ke-4: Terakhir simpan template sobat dan lihat hasilnya

SELESAI ! Selamat mencoba.


Sabtu, 22 Agustus 2015

Membuat Fungsi Images Slider Pada Postingan Blog


Sobat blogger, pada postingan saya sebelumnya saya pernah membuat sebuah tutorial yang berhubungan dengan images yaitu Animasi Images Berayun, nah sob kali ini masih ada hubungannya dengan images pada postingan blog, yaitu sebuah tutorial yang menjelaskan bagaimana cara membuah images slider pada postingan blog dengan hanya menggunakan CSS tanpa Javascript, jadi dijamin tidak akan membuat loading blog sobat menjadi lambat atau terganggu sama sekali.
Membuat Images Slider Pada Postingan Blog
Membuat Images Slider Pada Postingan Blog
Fungsi slider images ini menurut hemat saya adalah mengurangi penggunaan ruang pada postingan, karena images atau gambar postingan kita dapat kita letakan disatu tempat dan dapat ditampilkan dengan menggunakan fungsi slide, nah jika sobat ingin membuat tampilan images atau gambar pada blog sobat menjadi "lebih atraktif dan menarik", sobat dapat memasangnya diblog sobat. Membuat Fungsi Images Slider Pada Postingan Blog



Bagaimana sob..tampilannya dari slider images ini dan sebenarnya cara membuat atau memasang images slider seperti ini tidaklah sulit-sulit amat sob, jika sobat mengikuti langkah-langkah dibawah ini dengan benar dan teliti, sudah pasti dan saya jamin akan bisa dipasang diblog kesayangan sobat.
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Membuat Fungsi Slider Images Pada Postingan Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Tambahkan Kode Css berikut sebelum kode  </head> , lalu Simpan Template sobat.

 
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; } 
#slide { overflow: hidden; }
#slide figure img { width: 20%; float: left; }
#slide figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}
</style>

Langkah Ke-2: Letakan kode HTML dibawah ini pada halaman postingan sobat .

 <div id="slide">
<figure>
<img src="https://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
<img src="https://4.bp.blogspot.com/-1qcf-HkJC8w/Vc7SKpEX2AI/AAAAAAAAAiQ/RsgY6vzx5XQ/s640/1shadow-glow.jpg" alt="">
<img src="https://4.bp.blogspot.com/-pS_U98fYpKM/Vc7SKtZGt6I/AAAAAAAAAiU/xw7-e5FqNds/s640/1speech-bubble.jpg" alt="">
</figure>
</div> 

Langkah Ke-4: Ganti Url Images dengan Url Images milik sobat.

Publikasikan postingan sobat dan dan lihat hasilnya. Selesai! Selamat mencoba.

Sabtu, 15 Agustus 2015

Animasi Gambar Berayun Pada Blog


sobat blogger, sebetulnya jika kita ingin membuat tampil blog milik kita menjadi lebih menarik dan atraktif ada banyak cara kok yang bisa kita lakukan, seperti membuat tombol yang beraneka ragam model, membuat slide pada halaman muka, dan masih banyak lagi.
Kali ini saya akn membagikan sebuah tutorial yang sedikit nyeleh sob... yaitu membuat animasi gambar pada halaman postingan menjadi seperti berayun (Animasi Gambar Berayun Pada Blog), seperti yang sobat lihat tadi sewaktu pertama kali masuk ke halaman ini images dibawah ini bergerek layak sebuah bingkai yg tergantung. Lihat juga Cara Membuat Tombol Cantik Disini
Untuk membuatnya diblog sobat gampang banget kok, yuk ikuti langkah2nya dibawah ini.
Dan yang lebih penting ini murni menggunakan css, jadi ga akan membuat loading blog sobat jadi lemot, satu lagi sob jangan berlebihan dalam merubah tampilan blog, mau cantik nanti malah jadi jelek, ok sob...
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !
My Son M Aflah
My Son M Aflah 
DEMO RELOAD HALAMAN INI DAN PERHATIKAN GAMBAR DIATAS

Cara Membuat Animasi Gambar Berayun Pada Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Tambahkan Javascript berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Langkah Ke-2: Tambahkan kode css  dibawah ini sebelum kode </style>. atau kode
]]></b:skin>. Lalu Simpan Template Sobat.

 /* Animasi berayun */
.animasi {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode:both;}
.berayun {-webkit-transform-origin: top center;transform-origin: top center;-webkit-animation-name: berayun;animation-name:berayun;}
@-webkit-keyframes berayun {20% { -webkit-transform: rotate3d(0, 0, 1, 15deg);transform: rotate3d(0, 0, 1, 15deg);}40% {-webkit-transform: rotate3d(0, 0, 1, -10deg);transform: rotate3d(0, 0, 1, -10deg);} 60% {-webkit-transform: rotate3d(0, 0, 1, 5deg);transform: rotate3d(0, 0, 1, 5deg);}80% {-webkit-transform: rotate3d(0, 0, 1, -5deg);transform: rotate3d(0, 0, 1, -5deg);}100% {-webkit-transform: rotate3d(0, 0, 1, 0deg);  transform: rotate3d(0, 0, 1, 0deg);}}
@keyframes berayun {20% {-webkit-transform: rotate3d(0, 0, 1, 15deg);transform: rotate3d(0, 0, 1, 15deg);}40% {-webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg);}60% {-webkit-transform: rotate3d(0, 0, 1, 5deg);transform: rotate3d(0, 0, 1, 5deg);}80% {    -webkit-transform: rotate3d(0, 0, 1, -5deg);transform: rotate3d(0, 0, 1, -5deg);}100% {-webkit-transform: rotate3d(0, 0, 1, 0deg);transform: rotate3d(0, 0, 1, 0deg);}}
.option {text-align:center;-webkit-animation-duration: 3s;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: 5;}

Langkah Ke-3:  Tambahkan kode HTML dibawah ini pada halaman postingan sobat

 <div class="option animasi berayun">GAMBAR SOBAT DISINI</div>   

Langkah Ke-4: Publikasikan Postingan sobat dan lihat hasilnya.

SELESAI ! Selamat mencoba.

Jumat, 14 Agustus 2015

7 Tombol Dengan Efek Shadow Dan Glow Transisi


Cara Membuat 7 Tombol Dengan Efek Shadow Dan Glow Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 17 Tombol Dengan Efek Border Transisi.
Tombol Dengan Efek Shadow Dan Glow Transisi  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
7 Tombol Dengan Efek Shadow Dan Glow Transisi
7 Tombol Dengan Efek Shadow Dan Glow Transisi 

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 7 Tombol Dengan Efek Shadow Dan Glow Transisi 

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/Shadow-transisi.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-shadow">Shadow</a>
<a href="#" class="btn hvr-grow-shadow">Grow Shadow</a>
<a href="#" class="btn hvr-float-shadow">Float Shadow</a>
<a href="#" class="btn hvr-glow">Glow</a>
<a href="#" class="btn hvr-shadow-radial">Shadow Radial</a>
<a href="#" class="btn hvr-box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="btn hvr-box-shadow-inset">Box Shadow Inset</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.


27 Icons Tombol Dengan Berbagai Efek


Cara Membuat 27 Icons Tombol Dengan Berbagai Efek. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 18 Icons Tombol Dengan Berbagai Efek.
27 Icons Tombol Dengan Berbagai Efek ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
27 Icons Tombol Dengan Berbagai Efek
27 Icons Tombol Dengan Berbagai Efek

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 27 Icons Tombol Dengan Berbagai Efek 

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/icons.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-icon-back">Icon Back</a>
<a href="#" class="btn hvr-icon-forward">Icon Forward</a>
<a href="#" class="btn hvr-icon-down">Icon Down</a>
<a href="#" class="btn hvr-icon-up">Icon Up</a>
<a href="#" class="btn hvr-icon-spin">Icon Spin</a>
<a href="#" class="btn hvr-icon-drop">Icon Drop</a>
<a href="#" class="btn hvr-icon-fade">Icon Fade</a>
<a href="#" class="btn hvr-icon-float-away">Icon Float Away</a>
<a href="#" class="btn hvr-icon-sink-away">Icon Sink Away</a>
<a href="#" class="btn hvr-icon-grow">Icon Grow</a>
<a href="#" class="btn hvr-icon-shrink">Icon Shrink</a>
<a href="#" class="btn hvr-icon-pulse">Icon Pulse</a>
<a href="#" class="btn hvr-icon-pulse-grow">Icon Pulse Grow</a>
<a href="#" class="btn hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
<a href="#" class="btn hvr-icon-push">Icon Push</a>
<a href="#" class="btn hvr-icon-pop">Icon Pop</a>
<a href="#" class="btn hvr-icon-bounce">Icon Bounce</a>
<a href="#" class="btn hvr-icon-rotate">Icon Rotate</a>
<a href="#" class="btn hvr-icon-grow-rotate">Icon Grow Rotate</a>
<a href="#" class="btn hvr-icon-float">Icon Float</a>
<a href="#" class="btn hvr-icon-sink">Icon Sink</a>
<a href="#" class="btn hvr-icon-bob">Icon Bob</a>
<a href="#" class="btn hvr-icon-hang">Icon Hang</a>
<a href="#" class="btn hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
<a href="#" class="btn hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
<a href="#" class="btn hvr-icon-buzz">Icon Buzz</a>
<a href="#" class="btn hvr-icon-buzz-out">Icon Buzz Out</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.

4 Tombol Dengan Efek Curls


Cara Membuat 4 Tombol Dengan Efek Curls. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 8 Tombol Dengan Efek Speech Bubble.
Tombol Dengan Efek Curls  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
4 Tombol Dengan Efek Curls
4 Tombol Dengan Efek Curls

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 4 Tombol Dengan Efek Curls 

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/curls.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-curl-top-left">Curl Top Left</a>
<a href="#" class="btn hvr-curl-top-right">Curl Top Right</a>
<a href="#" class="btn hvr-curl-bottom-right">Curl Bottom Right</a>
<a href="#" class="btn hvr-curl-bottom-left">Curl Bottom Left</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.

17 Tombol Dengan Efek Border Transisi


Cara Membuat 17 Tombol Dengan Efek Border Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 27 Icons Tombol Dengan Berbagai Efek.
17 Tombol Dengan Efek Border Transisi  ini sama seperti tombol2 sebelumnya secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
17 Tombol Dengan Efek Border Transisi
17 Tombol Dengan Efek Border Transisi

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 17 Tombol Dengan Efek Border Transisi

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/border-transisi.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-border-fade">Border Fade</a>
<a href="#" class="btn hvr-hollow">Hollow</a>
<a href="#" class="btn hvr-trim">Trim</a>
<a href="#" class="btn hvr-ripple-out">Ripple Out</a>
<a href="#" class="btn hvr-ripple-in">Ripple In</a>
<a href="#" class="btn hvr-outline-out">Outline Out</a>
<a href="#" class="btn hvr-outline-in">Outline In</a>
<a href="#" class="btn hvr-round-corners">Round Corners</a>
<a href="#" class="btn hvr-underline-from-left">Underline From Left</a>
<a href="#" class="btn hvr-underline-from-center">Underline From Center</a>
<a href="#" class="btn hvr-underline-from-right">Underline From Right</a>
<a href="#" class="btn hvr-reveal">Reveal</a>
<a href="#" class="btn hvr-underline-reveal">Underline Reveal</a>
<a href="#" class="btn hvr-overline-reveal">Overline Reveal</a>
<a href="#" class="btn hvr-overline-from-left">Overline From Left</a>
<a href="#" class="btn hvr-overline-from-center">Overline From Center</a>
<a href="#" class="btn hvr-overline-from-right">Overline From Right</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.



http://kyleandkelsey.blogspot.com/2015/08/27-icons-tombol-dengan-berbagai-efek.html

Featured

[Featured][recentbylabel2]

Featured

[Featured][recentbylabel2]
Notification
This is just an example, you can fill it later with your own note.
Done