Cara membuat flat button 3d cantik di blogger

Cara membuat flat button 3d cantik di blogger atau blogspot anda, Untuk trik disini kita cukup memanfaatkan efek ketebalan box-shadow ketika button normal, di hover atau ketika button aktif. Logikanya ketika button normal box-shadow akan terlihat tebal, ketika pengunjung menghover button maka box-shadow di button akan terlihat lebih tipis dan ketika button aktif maka box-shadow akan hilang.

Dengan memanfaat warna metro dan tampilan yang flat button akan semakin cantik dan membuat blog kita akan terlihat sedikit cantik dan profesional.

Langsung berikut adalah langkah langkah nya:

1. Silahkan backup terlebih dahulu template bawaan anda,

2. Selanjut anda edit template blogger anda,

3. Setelah masuk ke halaman editor template anda, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:

/* CSS button */
.gmr-btn {background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-webkit-transition: none;-moz-transition: none;transition: none;display: inline-block;padding:10px 40px;margin: 0 0 10px 0;vertical-align: middle;font-size: 16px;border:none !important;color: #fff !important;text-decoration: none !important;}
.gmr-btn:hover{top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.gmr-btn-red{background-color: #E74C3C;box-shadow: 0px 6px #BD3E31;-moz-box-shadow: 0px 6px #BD3E31;-webkit-box-shadow: 0px 6px #BD3E31;}
.gmr-btn-red:hover{box-shadow: 0px 2px #BD3E31;-moz-box-shadow: 0px 2px #BD3E31;-webkit-box-shadow: 0px 2px #BD3E31;}
.gmr-btn-green{background-color: #82BF56;box-shadow: 0px 6px #669644;-moz-box-shadow: 0px 6px #669644;-webkit-box-shadow: 0px 6px #669644;}
.gmr-btn-green:hover{box-shadow: 0px 2px #669644;-moz-box-shadow: 0px 2px #669644;-webkit-box-shadow: 0px 2px #669644;}
.gmr-btn-yellow{background-color: #F2CF66;box-shadow: 0px 6px #D1B358;-moz-box-shadow: 0px 6px #D1B358;-webkit-box-shadow: 0px 6px #D1B358;}
.gmr-btn-yellow:hover{box-shadow: 0px 2px #D1B358;-moz-box-shadow: 0px 2px #D1B358;-webkit-box-shadow: 0px 2px #D1B358;}
.gmr-btn-gray{background-color: #95a5a6;box-shadow: 0px 6px #7f8c8d;-webkit-box-shadow: 0px 6px #7f8c8d;-moz-box-shadow: 0px 6px #7f8c8d;}
.gmr-btn-gray:hover{box-shadow: 0px 2px #7f8c8d;-moz-box-shadow: 0px 2px #7f8c8d;-webkit-box-shadow: 0px 2px #7f8c8d;}
.gmr-btn-purple{background-color: #9b59b6;box-shadow: 0px 6px #8e44ad;-moz-box-shadow: 0px 6px #8e44ad;-webkit-box-shadow: 0px 6px #8e44ad;}
.gmr-btn-purple:hover{box-shadow: 0px 2px #8e44ad;-moz-box-shadow: 0px 2px #8e44ad;-webkit-box-shadow: 0px 2px #8e44ad;}
.gmr-btn-orange{background-color: #e67e22;box-shadow: 0px 6px #d35400;-moz-box-shadow: 0px 6px #d35400;-webkit-box-shadow: 0px 6px #d35400;}
.gmr-btn-orange:hover{box-shadow: 0px 2px #d35400;-moz-box-shadow: 0px 2px #d35400;-webkit-box-shadow: 0px 2px #d35400}
.gmr-btn-dark{background-color: #34495e;box-shadow: 0px 6px #2c3e50;-moz-box-shadow: 0px 6px #2c3e50;-webkit-box-shadow: 0px 6px #2c3e50;}
.gmr-btn-dark:hover{box-shadow: 0px 2px #2c3e50;-moz-box-shadow: 0px 2px #2c3e50;-webkit-box-shadow: 0px 2px #2c3e50;}
.gmr-btn-block{width:100%;position:relative;display:block;text-align:center;}
.gmr-btn:active{top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}

4. Cara penggunaannya anda cukup memasukkan kode class nya saja di button anda class='gmr-btn' pada template anda, atau kalau memasukkan di postingan anda bisa memasukkan kode class="gmr-btn". Untuk block button atau button dengan width 100% anda bisa memasukkannya class class="gmr-btn gmr-btn-block". Untuk memasukkan warna anda bisa cukup memasukkan class="gmr-btn gmr-btn-red gmr-btn-block" maka button anda berwarna merah dengan width 100%. Berikut adalah contoh html yang sudah saya buat.

<button class="gmr-btn">Button 1</button>
<button class="gmr-btn gmr-btn-red">Button 2</button><br />
<button class="gmr-btn gmr-btn-green">Button 3</button>
<button class="gmr-btn gmr-btn-yellow">Button 4</button><br />
<button class="gmr-btn gmr-btn-gray">Button 5</button>
<button class="gmr-btn gmr-btn-purple">Button 6</button><br />
<button class="gmr-btn gmr-btn-orange">Button 7</button>
<button class="gmr-btn gmr-btn-dark">Button 8</button><br />
<button class="gmr-btn gmr-btn-dark gmr-btn-block">Button 9</button>

Dibawah adalah hasil dari kode diatas:







Mudah bukan silahkan anda berkreasi sendiri dengan css anda.

Sumber : http://www.gianmr.com/

Read More

Tombol chat Whatsapp atau WA dan SMS langsung ke admin blog

Dengan tombol ini konsumen tidak perlu input nomor kontak admin untuk memesan barang baik dengan WA atau SMS. Chat WA atau SMS konsumen akan langsung masuk ke admin blog, sehingga lebih memudahkan konsumen dalam memesan barang.
Tentunya tombol ini bisa berjalan ketika konsumen menggunakan hp untuk mengakses halaman.

Jika Anda memang sedang memerlukan tombol seperti ini, silahkan copy kode di bawah ini.

Silahkan copy kode di bawah ini dan simpan di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}
.btn-purple{background-color:#8E24AA;border-bottom:2px solid #6A1B9A;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}
.btn-purple:active,.btn-purple:focus,.btn-purple:hover{background-color:#6A1B9A;color:#fff}
#cara_belanja{margin-top:30px;background:#F3E5F5;padding:15px 15px 5px;border-radius:3px!important;}
#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden}
#cara_belanja h4{font-size:16px;font-weight:600;color:#8E24AA;margin:0;line-height:1}
#cara_belanja p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}
#cara_belanja a{margin-bottom:10px;margin-right:10px}
#cara_belanja svg{width:24px;height:24px;vertical-align:-15%;}
/*]]>*/
</style>
</b:if>

Kemudian simpan kode HTML ini di edit HTML di bawah postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cara_belanja'>
<span id='carabelanja'/>
  <h4>Cara Belanja Di KIOSIANA</h4>
  <p>Silahkan pesan item ini dengan menghubungi Contact Toko yang tertera di sidebar kanan (untuk device mobile ada di bagian bawah), harap disertakan Kode Item atau Nama Item ketika order barang. Barang dikirimkan sehari setelah transaksi selesai. Atau silahkan pesan langsung via tombol Whatapps dan SMS di bawah ini. Admin toko akan langsung merespond pesanan Anda.</p>
<a class='btn btn-purple btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=6281312815xxx&amp;text=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
    <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='#fff'/>
</svg> Pesan Sekarang</a>
<a class='btn btn-purple btn-lg' expr:href='&quot;sms://+6281312815xxx?body=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
    <path d='M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z' fill='#fff'/>
</svg> SMS Sekarang</a>
  </div>
</b:if>

Silahkan ganti kode 6281312815xxx dan +6281312815xxx dengan nomor hp admin yang digunakan untuk WA dan SMS.

Dengan kode di atas, maka pesan yang dikirim akan seperti berikut: "Saya pesan bla bla bla". bla bla bla adalah nama item atau nama produk yang dijadikan judul postingan.

Kalimat lainnya silahkan sesuaikan.

Selamat mencoba.

Sumber : https://www.kompiajaib.com/

Read More

CSS Miniefer

Apa itu CSS Minifier / minify CSS Minifier adalah tools untuk mengompres css menjadi lebih rapat yang konon katanya bisa mempercepat loading blog kalian.
Tapi buat kalian yang ingin merubah atau mengembalikan css yang sudah di minifier bisa gunakan tools yang sudah saya posting di artikel sebelumnya

CSS Beautifier Tool Untuk Merapihkan CSS Yang Sudah Di Minifier

Tools CSS Beautifier ini akan merapihkan css yang berantakan atau css yang sudah di kompres, minifier. Jadi kalian kalian dapat dengan mudah memodifnya lagi.

Strip all comments Super compact Keep indentation Remove the last semicolon

Read More

Parse convert kode html blogger

Untuk Memasukkan kode Adsense ke blog melalui Edit HTML, Anda tidak bisa langsung copy paste. Caranya salin Adsense Anda baik Google Adsense atau pun Kode Javascript yang lain, kemudian klik tombol KONVERSI. Setelah itu salin dan pastekan di blog Anda.

Read More

Mempercepat Loading Blog anda dengan Script jQuery LazyLoad

Script jQuery Lazy Load adalah salah satu plugin yang ada pada wordpress namun kali ini akan saya jelaskan untuk blog agar loading blog Anda menjadi lebih cepat dari sebelumnya.

Tahukah anda jQuery Lazy Load mulanya digunakan pada blog dengan platform Wordpress. Lama kelamaan, ada juga script lazy load yang diciptakan untuk Blogger.

Berikut Cara Mudah Mempercepat Loading Blog dengan jQuery LazyLoad

1. Pertama Buka Blogger, dan masuk ke menu Template => Edit Html
2. Cari kode </head>, (gunakan CTRL+F, atau klik disini untuk mengetahui cara mencari kode di Edit HTML) dan letakkan/pastekan kode berikut tepat diatasnya.
   

   <script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='https://googledrive.com/host/0ByoCwyjwB1aDTXhnVVlxcTBadVk' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200}); }); </script>

3. Yang Terkahir Klik Simpan template.

Catatan penting brow script lazyload ini tidak menjamin bisa mempercepat waktu loading blog 100% fast loading Anda akan tetapi menjadi lebih cepat daripada sebelumnya. Adakalanya script ini menyebabkan blog menjadi lebih lambat dan berat. Namun, tak ada salahnya untuk mencoba script lazyload ini. Bila lazy load ini tidak berpengaruh pada blog anda sebaiknya jangan pasang saja

Sumber : http://www.masyadi.com/

Read More

Meta Tag SEO Friendly yang di Pakai Blog Masyadi

Sebenarnya meta tag yang Blog Masyadi gunakan saat ini adalah meta tag yang telah di share oleh kang kapuk , meta tag ini cukup bikin greget dari meta tag yang lainya .

Sebenarnya di google sudah ada yang membagikanya , namun letaknya terpisah - pisah , seperti rel cannocial sendiri , meta tag keyword dan deskripsi sendiri , meta tag title sendiri , kemudian saya jadikan satu .

Kalaupun ada yang bilang kalau saat ini meta tag udah gak ada efeknya sama sekali , pendapat seperti itu kurang tepat dengan meta tag yang di pakai blog masyadi ataupunoleh master blog yang lain ini sangat berpengaruh pada pengunjung visitor blog setiap harinya.

Berikut Mea Tag SEO Friendly untuk Blogger dan Cara Memasang nya

1. Untuk memasang meta tag ini , pastikan sobat udah login ke dasbhor dulu
2. Masuk menu template => edit html  , temukan kode <title><data:blog.pageTitle/></title>
3. Silahkan di ganti dengan kode dibawah ini

   <b:if cond='data:blog.isMobile'>
         <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
      <meta content='noindex,nofollow' name='robots'/>
       </b:if>
   <b:include data='blog' name='all-head-content'/>
   <meta content='####################' name='google-site-verification'/>
   <meta content='####################' name='msvalidate.01'/>
   <meta content='####################' name='alexaVerifyID'/>
   <meta content='index, follow, noodp, noydir' name='robots'/>
   <meta content='id' name='geo.country'/>
   <meta content='Mas Yadi' name='author'/>
   <meta content='1 days' name='revisit-after'/>
   <meta content='Indonesia' name='geo.placename'/>
   <meta content='blogger' name='generator'/>
   <meta content='general' name='rating'/>
   <meta content='index, follow, snipet' name='googlebot'/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='website' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='id_id' property='og:locale'/>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <title><data:blog.pageTitle/></title>
    <meta content='KEYWORD+BLOG_ANDA' name='keywords'/>
   </b:if>
   <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='id_id' property='og:locale'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
     <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    </b:if>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    <meta expr:content='data:blog.pageName' name='keywords'/>
   </b:if>

Silahkan sobat sesuaikan meta tag diatas sesuai dengan blog sobat.

Read More