Cara Memasang Video Youtube Responsive di Blog

Cara Memasang Video Youtube Responsive di Blog -  Kali ini saya akan memposting yang berkaitan dengan koding yaitu bagaimana Cara Memasang Video Youtube Responsive di Blog , mengapa harus Responsive? karena Responsive akan mengubah tampilan video yang diembed menjadi tampilan yang menyesuaikan dan dengan menggunakan responsive ini Nilai SEO blog anda tidak akan berkurang .

Youtube merupakan sebuah situs video berbagi paling populer saat ini, yang dimana anda bisa mengupload video, menonton video, atau bisa juga untuk mendapatkan penghasilan dari youtube dengan mendaftarkan Akun Google Adsense melalui youtube.

Sangat banyak kelebihan yang ditawarkan situs youtube ini, yaitu salah satunya adalah fitur embed video yang bisa anda tambahkan dan dapat ditonton langsung di blog. Tetapi dengan menambah video tersebut akan mengurangi Nilai SEO sebuah blog karena adanya elemen IFrame dan tampilannya pun belum responsive jika ukuran layar diperkecil.

Maka dari itu saya selaku penulis blog Kamsuy Blog akan memberikan trik agar video youtube menjadi responsive dan tidak akan mengurangi Nilai Seo blog anda. Berikut adalah langkah-langkah Cara Memasang Video Youtube Responsive di Blog .

Memasang Video Youtube Responsive di Blog

1. Hal pertama yang harus anda lakukan adalah Membuka Dashboard Blog kalian masing-masing > Lalu klik Menu Tema > Dilanjutkan dengan Edit HTML > Lalu tambahkan kode CSS berikut ini dan letakkan di atas </style> atau ]]></b:skin> .

 /* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} 

2. Tambahkan kode Javascript di bawah ini sebelum </body> .

 <script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script> 

3. Setelah kode diatas terpasang dengan benar silahkan Simpan Template .

4. Selanjutnya untuk menambah video pada postingan, gunakan kode html berikut ini.

 <div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div> 

Contoh kode iframe video youtube sebagai berikut.

<iframe width="640" height="360" src="https://www.youtube.com/embed/nfs8NYg7yQM" frameborder="0" gesture="media" allowfullscreen></iframe>

Lalu Anda Salin link embed seperti kode di atas, kemudian simpan di dalam kode HTML di atas seperti ini :

 <div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/nfs8NYg7yQM">
</div>
</div>
</div> 

5. Terakhir simpan postingan dan lihat hasilnya untuk demo Responsive Youtube Video ada dibawah.

DEMO Responsive Youtube Video

Kesimpulan

Kesimpulan jadi Cara Memasang Video Youtube Responsive di Blog sangat mudah dilakukan, cukup dengan menambahkan kode HTML,JAVASCRIPT dan CSS , yang ada diatas maka tampilan Video Youtube yang di Embed akan tampil responsive dan tanpa mengurani Nilai SEO.

Mungkin cukup sekian tutorial bagaimana Cara Memasang Video Youtube Responsive di Blog , semoga tutorial diatas dapat bermanfaat dan menjadi bahan pembelajaran khususnya bagi para blogger. Apabila tutorial diatas kurang paham silahkan tanyakan lewat berkomentar dibawah postingan ini terima kasih.

Cara Memasang Widget Terjemahan Dengan CSS

Cara Memasang Widget Terjemahan Dengan CSS - Mempunyai visitor dari luar dan berbeda bahasa mungkin sangatlah menguntungkan, namun karena berbeda bahasa tersebut maka membuat mereka tidak bisa membaca artikel atau postingan dari blog kita. Terkecuali jika mereka bisa menggunakan bahasa dalam bahasa artikel tersebut. Mungkin anda memiliki banyak pengunjung dari luar negeri, pasti mereka bingung dengan bahasa yang anda gunakan dalam Artikel/Postingan.

Namun jika mereka ingin menyalin Isi Artikel anda dan membawanya ke Google Translate untuk mengetahui isi dari artikel tersebut. Tapi tentunya pengunjung suka dengan hal yang simple dan tidak ribet. Maka dari itu Anda bisa membantu mereka untuk tanpa harus membuat mereka menyalisan Isi Artikel ke Google Translate. Hal yang harus kita atasi adalah dengan memasang Widget Terjemahan pada blog.

Tapi kita masih membutuhkan Google Translate supaya Widget Terjemahan Kita berfungsi. Ada banyak bahasa yang bisa dipilih. Dan tentu saja ada Bahasa Inggris sebagai bahasa pokok yang penting. Dengan dipasangnya Widget Terjemahan ini  maka pengunjung anda bisa Menerjemahkan Artikel dengan mudah. Walaupun hasil terjemahan kurang baik.

Nah selanjutnya saya akan sajikan tutorial Cara Memasang Widget Terjemahan Dengan CSS sebagai berikut ini.

Cara Memasang Widget Terjemahan  CSS

Widget Terjemahan ini bisa anda letakkan dibilah kanan/kiri atau yang disebut sidebar. Mengapa harus di sidebar? Agar pengunjung mudah melihat, Bagaimana tertarik untuk memasang Widget Terjamahan? Dalam langkah pertama Anda hanya perlu membuat Widget/Gadget Baru dan memasukkan kode koding dibawah ini ke dalam Widget tersebut. Berikut langkah-langkah Memasang Widget Terjemahan Dengan CSS .

1. Masuk Ke Akun Blogger Masing-Masing > Klik Menu Tata Letak -> Tambah Gadget Baru > Pilih Opsi HTML/Javascript.

2. Salin kode dibawah ini dan letakan kedalam Widget/Gadget Baru anda .

Kode Widget Terjemahan

 <style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;  
  border:none;  
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%; 
  transition:all 0.3s ease;  
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script> 

3. Terakhir Simpan Widget dan lihat hasilnya

Kesimpulan

Kesimpulan Jadi cara memasang Widget Terjemahan dengan CSS ini cukup mudah untuk dipraktekan, hanya dengan mencopy-paste kode diatas ke dalam Widget/Gadget . Dan hasilnya akan memuaskan.

Mungkin cukup disini artikel tentang Cara Memasang Widget Terjemahan Dengan CSS Semoga apa yang saya sampaikan ini bermanfaat tentunya bagi anda khususnya bagi para blogger, Apabila anda masih kurang paham dengan tutorial diatas silahkan berkomentar dibawah postingan ini.

Cara Mengubah Tampilan Warna Address Bar Browser Saat Membuka Blog di Android

Cara Mengubah Tampilan Warna Address Bar Browser Saat Membuka Blog di Android - Pernahkan anda melihat warna Address Bar yang berubah-ubah saat membuka sebuah situs. Ternyata tersebut bukan disebabkan dari browsernya yang menyesuaikan tema warna dari blog tersebut tetapi ternyata memang sudah ditata (desain) oleh pemilik situs. Saat pertama menyaksikan saya sempat heran karena melulu blog yang saya kunjungi  itu saja yang addressnya berwarna untuk blog beda tetap berwarna latar putih.

Dari keheranan itu saya menggali info Bagaimana Mengganti Warna Address Bar di browser android dan ketemulah caranya. Namun sayang teknik ini bekerja untuk browser di perangkat seluler saja kalau untuk desktop tidak bisa. Dan hanya browser tertentu saja yang Warna Addres Bar nya bakal berubah. Bagi pengguna iOS atau Apple belum support atau belum mendukung untuk mengolah Warna Address Bar. Tertarik memembuat di blog anda? berikut langkah-langkah Cara Mengubah Tampilan Warna Addres Bar silahkan baca sampai bawah agar anda paham.

Cara Mengubah Tampilan Warna Address Bar

Untuk mengubah Warna Address Bar pada Browser anda, hanya cukup menambahkan kode tema warna ditemplate blog anda. Cukup salin kode dibawah ini dan letakan diatas kode </head> cara nya Masuk Ke Akun Blogger > Klik Menu Tema > Lalu Edit HTML > Selanjutnya cari kode </head> untuk mempermudah pencarian anda cukup tekan CTRL+F pada keyboard anda nanti akan muncul kolom pencarian dan anda ketikan dikolom tersebut. Jangan lupa untuk menggubah kode warna sesuai dengan keinginan anda.

 <!-- Chrome, Firefox OS, Opera and Vivaldi -->
<meta name="theme-color" content="#fo0fo0">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#fo0fo0">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

Catatan : Ganti kode #fo0fo0 dengan kode warna yang anda inginkan, untuk memudah kan mencari kode warna anda bisa kunjungi : Color Picker Flat UI atau anda bisa cari digoogle dengan kata kunci "Color Hex".

Dan terakhir simplan template dan lihat hasilnya, nah mungkin cukup sekian tutorial bagaimana Cara Mengubah Tampilan Warna Address Bar Browser Saat Membuka Blog di Android semoga tutorial yang saya sampaikan ini bermanfaat sekian terima kasih.

Cara Memasang Slide Button dengan CSS

Cara Memasang Slide Button dengan CSS - Halo pembaca setia kamsuy blog, kali ini saya selaku penulis kamsuy blog akan membahas seputar CSS yaitu bagaimana cara memasang slide button dengan CSS. Pada postingan kali ini anda hanya perlu meletakan kode CSS saja, berbeda dengan yang lain, button ini menggunakan efek "HOVER" dan "INSET" sederhana sehingga tidak akan membebani kinerja pada blog.

Nah selanjutnya kita langsung saja ke tutorialnya, berikut langkah-langkah memasang slide button dengan css .

Memasang Slide Button dengan CSS

1. Masuk Ke Akun Blogger > Klik Menu Tema > Edit HTML > dan letakan kode CSS dibawah ini tepat pada kode </style> .

 #wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;} 

2. Selanjutnya untuk menampilkan Slide Button anda cukup tambahkan kode HTML dibawah ini dan letakan di Post Editor pada tab HTML .

 <div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div> 

3. Setelahnya simpan dan lihat hasilnya, untuk demo script anda bisa melihat pada link dibawah ini.

DEMO 

Nah mungkin cukup sekian tutorial bagaimana cara memasang slide button dengan CSS, semoga tutorial ini bermanfaat bagi anda. apabila anda masih kurang mengerti atau kurang paham dengan tutorial diatas, silahkan anda bertanya lewat berkomentar dibawah postingan ini.

Cara Membuat Responsive Flat UI Color Picker

Cara Membuat Responsive Flat UI Color Picker - Pada postingan kali ini saya selaku penulis kamsuy blog akan membahas tentang CSS yaitu bagaimana cara membuat responsive flat ui color picker, mungkin postingan kali ini kita berkaitan dengan CSS . Flat UI Color Picker mempunyai fungsi untuk mengetahui lebih cepat kode warna pilihan anda, jika saat anda memodifikasi template.

Kode Flat UI Color Picker sudah menjadi tampilan yang responsive, jadi akan menyesuaikan dengan ukuran layar ditambah widget ini hanya menggunakan kode HTML dan CSS saja, jadi tidak akan mempengaruhi loading pada blog. Selanjutnya untuk tutorial cara membuat responsive flat ui color picker ini bisa ikuti langkah-langkah dibawah ini.

Responsive Flat UI Color Picker

Hal yang pertama anda lakukan adalah masuk ke akun blogger masing-masing.

1. Masuk Ke Akun Blogger > Buat Postingan Baru > atau juga anda bisa membuat dalam Halaman Statis di menu laman pada blogger > Kemudian anda tambahkan kode HTML dan CSS berikut ini dan buat pada tab HTML pada postingan entri blogger.

Kode HTML : 

 <div id="flatuarlina">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
      </li>
    </ul>
</div> 

Kode CSS :

 <style scoped="" type="text/css">
/* Flat UI Color by www.arlinadzgn.com */
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style> 

2. Tambahkan kode HTML berikut dalam sebuah postingan dengan HTML dan tempatkan kode CSS di atas tepat dibawah kode HTML diatas.

Untuk demo dari responsive flat ui color picker ini anda bisa langsung melihat nya dalam link berkut.

DEMO Default

DEMO Responsive Mobile

Kesimpulan 

Jadi kesimpulan nya, responsive flat UI color picker ini sangat mudah diterapkan dalam sebuah Web/Blog dengan menambah kode HTML dan CSS di atas, maka hasilnya seperti pada demo, hal yang harus dingat adalah anda wajib meletakan kode CSS diatas agar tampilan dari script responsive flat ui ini akan terlihat bagus dan enak dilihat.

Demikian lah artikel tentang CSS yaitu bagaimana cara membuat responsive flat ui color picker, semoga apa yang saya sampaikan ini dapat bermanfaat dan menjadi bahan pembelajaran anda dalam per kodingan, apabila anda belum paham atau mengerti silahkan berkomentar dibawah postingan ini terima kasih.

Bagaimana Cara Membuat Tombol Download dan Demo Flat UI, Ini Langkahnya

Cara Membuat Tombol Download dan Demo Flat UI - Pada kesempatan kali ini saya akan membahas seputar bagaimana cara membuat tombol download dan demo tampilan flat ui, nah mungkin anda sedang mencari tutorial ini, kali ini saya akan menjelaskan cara membuat tombol download dan demo flat ui secara rinci dan dapat dipahami. Sudah tahu apa itu flat ui?kalau belum tahu saya akan menjelaskan nya sebagai berikut.

Penjelasan Flat UI 

Penjelasan sedikit tentang flat ui, flat ui adalah tampilan minimalis dengan bahasa desain yang menghilangkan penggunaan efek 3D seperti bayangan, gradients, textures, dan sejenisnya yang membuat design menjadi tiga dimensi, jadi flat ui design ini nantinya akan terlihat 2 dimensi dengan warna yang flat juga. Ada juga fitur flat ui ini adalah Font Awesome.  Nah itulah sedikit penjelasan tentang flat ui semoga mengerti dapat dipahami.


Selanjutnya bagaimana cara membuat tombol download dan demo flat ui design? berikut saya akan menjelaskan langkah-langkah nya sebagai berikut ini.

Bagaimana Cara Membuat Tombol Download dan Demo Flat UI

Pertama-tama hal yang harus dingat widget atau script ini memerlukan Font Awesome agar tampilan enak dilihat dan bagus, nah jadi silahkan anda tambahkan kode link css berikut ini.

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

 

Tempatkan kode diatas tepat di atas kode </head> .

Selanjutnya pakai kode berikut untuk membuat tombol download dan demo flat ui sebagai berikut.

1. Masuk ke Akun Blogger > Klik Menu Tema >  Edit HTML .
2. Pastikan di blog anda terdapat script css style font awesome seperti dibawah ini yang terletak di atas kode </head> . Jika tidak ada, silahkan anda letak kan script CSS style font awesome di bawah ini diatas kode </head> .
3. Pasang kode CSS terlebih dahulu agar tampilan tombol menjadi flat ui .

 /* CSS Button Style 1 by www.arlinadzgn.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'} 

4. Dan Tempatkan kode CSS diatas, diatas kode </style> atau ]]><[/b:skin> . Agar cepat pencarian mencari kode  </style> dan ]]><[/b:skin> cukup tekan tombol pada keyboard CTRL+F lalu isikan kata kunci </style> atau ]]><[/b:skin> .

5. Simpan Template.

Selanjutnya agar tombol flat ui tampil silahkan ikuti langkah berikut.

1. Letak kan  kode HTML di bawah ini lalu simpan dalam entri atau postingan artikel dengan format HTML.

 <div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://tornesia.blogspot.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://amsuyblog.blogspot.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div> 

Catatan : Ganti URL : http://tornesia.blogspot.com dengan URL tujuan anda.

2. Lalu lihat hasilnya, untuk demo anda bisa lihat di link dibawah ini.

 DEMO 

Demikian lah tutorial bagaimana cara membuat tombol download dan demo flat ui, semoga apa yang saya sampaikan ini dapat bermanfaat bagi anda dan menjadi bahan pembelajaran anda dalam ilmu koding. Apabila anda belum paham dengan tutorial diatas, silahkan anda berkomentar dibawah postingan ini terima kasih.

Cara Mudah Menghapus Atribusi di Blogger

Cara Mudah Menghapus Atribusi di Blogger - Atribusi Blogger merupakan salah satu widget di blogger yang tidak bisa dihapus karena bawaan dari template blog, Dari sekian banyak nya template yang disediakan di berbagai sumber atau pihak ketiga memang sudah tidak lagi mencatumkan Widget Atribusi Blogger, Namun halnya, jika kita masih menggunakan template bawaan dari blogger maka template tersebut akan secara otomatis terpasang atribusi blogger yang tidak bisa dihilangkan secara manual.

Yang jadi permasalahnya muncul ketika blogger yang masih ingin menggunakan bawaan blogger, namun tetapi juga ingin menghapus atribusi blogger ditemplatenya tersebut untuk beberapa alasan.

Walaupun tidak dapat dihapus secara manual, akan tetapi kita masih dapat menghapus atribusi blogger pada template bawaan dengan menambahkan kode untuk menyembunyikan widget atribusi melalui pengeditan di HTML template secara langsung.


Ada pun cara untuk menghapus atribusi blogger pada template bawaan blogger adalah sebagai berikut.

Hal yang pertama anda lakukan adalah masuk ke dalam akun blogger masing-masing. Selanjutnya
Buka Edit HTML di blog pada menu tema atau theme biar proses pencarian cepat gunakan tombol CTRL+F pada keyboard . Langkah berikutnya Klik Menu Template Pada Blogger > Edit HTML > Lalu cari kode atau kata kunci ]]></skin> Selanjutnya Masukan kode dibawah ini .

Kode CSS

 #Attribution1 {height:0px;visibility:hidden;display:none}  

Letakan Kode tersebut di atas kata kunci ]]></skin>  > lalu simpan template > Selesai dan lihat hasilnya.

Nah mungkin demikian apa yang saya sampaikan kali ini semoga tutorial ini dapat membantu anda dan juga bermanfaat, mohon maaf apabila ada kata yang kurang dipahami. Apabila anda belum mengerti atau belum paham silahkan bertanya lewat berkomentar dibawah postingan ini terima kasih.

Cara Membuat Menu Dropdown Dengan CSS

Cara Membuat Menu Dropdown Dengan CSS -  Halo pembaca setia kamsuy blog, kali bang kamsuy akan membahas tentang CSS yaitu bagaiman cara membuat dropdown menu dengan css, mungkin pada tutorial ini sangat mudah untuk dicoba, tapi sebelumnya kita ketahui dulu apa itu CSS? berikut penjelasan css dan tutorial cara membuat dropdown menu dengan CSS.

Penjelasan CSS

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.


Nah itulah penjelasan sedikit tentang CSS berikut nya langsung saja ke pembahasan bagaimana cara membuat menu dropdown dengan css. Hal yang harus kita ketahui adalah kode css nya terlebih dahulu berikut kode css menu dropdown.

Kode CSS

 <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> 

Nah letakan kode css diatas dibagian tag atau dibawah <head> dan diatas </head>.

Kode Menu Dropdown

 <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> 

Nah untuk menampilkan menu dropdown silahkan copy-paste kode menu dropdown diatas, letakan kode tersebut dibagian atau dibawah tag <body> dan diatas kode </body>. Sebagai contoh atau demo script bisa dilihat dibawah ini.

Demo :

Link 1 Link 2 Link 3

Nah itulah tutorial bagaimana cara membuat menu dropdown dengan css semoga tutorial css ini dapat bermanfaat dan menjadi bahan pembelajaran anda, Apabila tutorial diatas kurang jelas silahkan bertanya lewat komentar. Selebihnya saya mohon maaf apabila ada kata yang kurang dipahami atau dimengerti sekian terima kasih.

Cara Membuat Button Bagus Dengan CSS

Cara Membuat Button Bagus Dengan CSS -  Pada kesempatan kali ini kita akan membahas seputar CSS yaitu cara membuat button bagus dengan CSS,Sebelum ke materi kita harus ketahui dulu apa itu CSS? mungkin disini ada yang tahu dan juga belum tahu, maka dari itu yang belum tahu saya akan menjelaskannya lebih lanjut dibawah ini.

Pengertian CSS

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.


nah selanjutnya kita akan lanjut ke materi yaitu "Cara Membuat Button Bagus Dengan CSS" berikut saya akan menjelaskan tutorialnya, tutorial ini sangat mudah untuk praktekan dan dipahami, lebih lengkap silahkan ikuti langkah-langkah berikut ini.

Kode Button Style CSS

 <style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style>

Catatan :

Terlebih dahulu kita letakan kode diatas sebagai style css, cara meletakan kode <style> setelah tag <head> atau <body> contoh :
<head>

<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style>

</head>

atau

<body>

 <style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style>


</body>

Kode Button CSS

<a href="http://tornesia.blogspot.com/"><button class="button">Hijau</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button2">Biru</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button3">Merah</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button4">Abu-Abu</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button5">Hitam</button></a>

Contoh Demo Kode Button CSS dengan Style :

 

Catatan : 

Letakan kode Button CSS diatas setelah tag <body> dan sebelum </body> sebagai contoh :

<body>

<a href="http://tornesia.blogspot.com/"><button class="button">Hijau</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button2">Biru</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button3">Merah</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button4">Abu-Abu</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button5">Hitam</button></a>

</body>

Anda juga bisa mengganti link tujuan sesuai keinginan anda caranya ganti dibagian href="link web kamu"> selesai deh.

Nah mungkin cukup sekian penjelasan mengenasi CSS yaitu cara membuat button bagus dengan CSS, semoga apa yang kami sampaikan ini bermanfaat bagi anda dan menjadi bahan pembelajaran anda dalam koding. Sebelumnya saya mohon maaf apabila ada kata yang kurang dimengerti, apabila anda belum mengerti silahkan tanyakan saja lewat komentar dibawah postingan ini. Sekian terima kasih.

Cara Membuat Table Bagus Dengan CSS

Cara Membuat Table Bagus Dengan CSS - Pada kesempatan kali ini saya selaku penulis akan menjelaskan tentang CSS yaitu cara membuat Table bagus dengan CSS, mungkin anda tahu apa itu table? table yaitu objek utama dalam database yang dipergunakan untuk menyimpan berbagai data sejenis objek. Table juga terdiri atas : a.Field Name (Nama Tabel) : artibut dari sebuah table yang menempati dibagian kolom. Sebelum ke materi kita harus ketahui dulu apa itu CSS? mungkin disini ada yang tahu dan juga belum tahu, maka dari itu yang belum tahu saya akan menjelaskannya lebih lanjut dibawah ini.

Pengertian CSS

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

nah selanjutnya bagaimana cara membuat Table dengan CSS? berikut tutorialnya saya sajikan dengan mudah dipahami dan dimengerti.

Kode Table CSS

  <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link> <div class="w3-container"> <h2> Contoh Tabel CSS</h2> <table class="w3-table-all"> <thead> <tr class="w3-red"> <th>Nama Depan</th> <th>Nama Belakang</th> <th>Pekerjaan</th> </tr> </thead> <tbody> <tr> <td>Rey</td> <td>Marten</td> <td>Artis</td> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>Pengusaha Microsoft</td> </tr> <tr> <td>Adam</td> <td>Levine</td> <td>Musisi Band</td> </tr> </tbody></table> </div>

sebagai contoh demo script CSS sebagai berikut.

Contoh Tabel CSS

Nama Depan	Nama Belakang	Pekerjaan
Rey	Marten	Artis
Bill	Gates	Pengusaha Microsoft
Adam	Levine	Musisi Band

Catatan :

Table CSS ini memerlukan kode khusus CSS yaitu yang terdapat pada link CSS: <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link> jadi anda jangan hapus kode link yang ditandai MERAH ini. Agar table CSS ini akan tampil bagus dan relevan enak dilihat.

Anda juga bisa menambah kolom tabel dengan cara memasukan kode <td> dan di akhiri </td> .
Nah mungkin demikian tutorial CSS cara membuat table bagus dengan CSS, semoga artikel pada kali ini bermanfaat bagi anda dan menjadi pembelajaran dalam ilmu koding anda, sebelumnya saya mohon maaf apabila ada kata yang kurang dipahami. Apabila masih bingung atau tidak mengerti silahkan berkomentar dibawah postingan ini. Sekian terima kasih.