Kelas Math – Be Smart Ya kelas Math: CSS

Enter your keyword

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Wednesday, January 1, 2020

Animasi Teks Berputar Dengan JQuery

By On January 01, 2020
Kelas Mat - Melalui blog kelasmat ini kemarin saya telah menuliskan sebuah trik untuk membuat animasi Teks Seperti Bernafas dengan CSS dan sebuah script yang bernama splitting.js dengan judul artikelnya adalah Animasi Teks Bernafas dengan CSS. Nah masih dalam konteks yang sama, yaitu tentang animasi teks, pada kali ini saya juga akan membuat sebuah animasi teks Berputar dengan Memanfaatkan Jquery.
Animasi Teks Berputar Dengan JQuery
Jadi Pastikan dalam blog kamu sudah terpasang Jquery nya berapapun versinya tidak masalah namun lebih baik lagi menggunakan jquery yang terbaru.

Cara Membuat Animasi Teks Berputar dengan CSS

Pertama-tama tentu kamu harus sudah berada pada editor template blogger kamu, kemudian baru Kita tentukan dulu gaya/style dari teks yang akan kita beri efek berputarnya. Misalnya h1 atau h2 atau yang lainnya dengan cara menambahkan kode berikut ini sebelum kode ]]></b:skin> :

Kode CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
h1 {
  margin: 0;
  padding: 0;
  font-family: 'Raleway';
  font-weight: 400;
  font-size: 3em;
  color: #9A12B3;
}
.letterDrop {
  position: relative;
  top: 0;  
  display: inline-block;
  text-transform: Uppercase;
  letter-spacing: 0em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1s ease 1 normal forwards;
}
@keyframes letterDrop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 3em;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: 3em;
        transform: rotateX(360deg);
    }
}
span:nth-child(2n) {
  color: #663399;
}

Kode Scriptnya

Setelah itu kita Buat scriptnya seperti di bawah ini. Copy dan Pastekan/Letakkan script berikut ini sebelum kode </body> :
;(function($) {
  $.fn.letterDrop = function() {
  return this.each( function() {
  var obj = $( this );
 
  var drop = {
    arr : obj.text().split( '' ),
    
    range : {
      min : 1,
      max : 9
    },
    
    styles : function() {
      var dropDelays = 'n', addCSS;
      
       for ( i = this.range.min; i <= this.range.max; i++ ) {
         dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }n';  
       }
      
        addCSS = $( '<style>' + dropDelays + '</style>' );
        $( 'head' ).append( addCSS );
    },
    
    main : function() {
      var dp = 0;
      obj.text( '' );    
      $.each( this.arr, function( index, value ) {
        dp = dp.randomInt( drop.range.min, drop.range.max );
        if ( value === ' ' )
          value = '&nbsp';
          obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' );
      });
    }
  };
   
  Number.prototype.randomInt = function ( min, max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
  };
 
  drop.styles();
  drop.main();
  });

};
}(jQuery));
$( 'h1' ).letterDrop();

Lihat tag h1 yang saya beri tanda kuning di atas, itu tag yang akan kita beri efek berputar. Jadi Sekarang kita bisa gunakan teks berputarnya pada tag html h1 misalnya seperti ini :
<h1>Kelasmat.Com</h1>

Jika langkah-langkah tadi tidak ada yang salah seharusnya hasil yang tadi kamu buat akan seperti di bawah ini:

KelasMat.COm

Semoga Bermanfaat dan jangan lupa jika artikel ini berguna, silahkan share keteman-teman kamu melalui tombol sosmed di bawah ini.
NB: Untuk melihat kembali Efek Animasi teks Berputar dengan Jquery ini, silahkan Lakukan refresh halaman ini dengan menekan tombol
f5
pada keyboard kamu.
Untuk Demo penerapannya kedalam blog untuk animasi judul blog, silahkan kunjungi halaman ini. Perhatikan Judul/Header Blognya.

Sunday, December 29, 2019

Animasi Teks Bernafas dengan CSS

By On December 29, 2019
Kelas Math - Beberapa hari yang lalu, saya telah membuat tulisan tentang Membuat Sticky Widget di Blogger dengan javascript. Nah untuk kali ini saya akan membuat tutorial sederhana mengenai cara membuat animasi Tulisan atau Text dengan CSS.
Animasi Teks Bernafas dengan CSS
Animasi ini cocok diterapkan pada judul atau Header Blog kamu yang tidak mau menggunakan image atau gambar. Kita tahu, dengan mengganti judul blog dengan gambar, maka akan sedikit memberatkan loading blog tersebut. Sehingga tentu saja ini menjadi masalah bagi beberapa orang yang sangat memperhatikan kecepatan blognya. Meskipun Sebenarnya masalah image ini bisa diakali dengan mengganti nya dengan SVG, namun tidak ada salahnya juga saya memberi sedikit alternatif bagi kamu yang tidak ingin blog nya bertambah berat namun tetap 'berkelas' dengan menambahkan sedikit animasi pada teks atau judul blog nya.

Cara Membuat Animasi Teks Bernafas dengan CSS

Sebenarnya Cara membuat animasi ini tidak murni menggunakan CSS, karena kita tetap membutuhkan script yang bernama Splitting.js Meskipun file nya kecil namun yang namanya script tetap saja membutuhkan waktu untuk meloadnya.
Untuk dapat memulai membuat Animasi Teks Bernafas ini, seperti yang saya katakan sebelumnya bahwa trik ini membutuhkan script, jadi pastikan kamu mengimport script splitting tersebut. Caranya adalah :
Pertama-tama tentu saja kamu sudah harus login diblogger dan sudah berada di halaman editor template. Kemudian silahkan cari kode </body> dan pastekan kode berikut ini tepat sebelum </body> tadi.
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script> Splitting(); </script>

Masih dalam halaman yang sama, silahkan cari </head> dan letakkan diatasnya kode berikut ini :
<style>
@font-face {
 font-family: "IBM Plex Sans Roman";
 src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}
logo { font-family: "IBM Plex Sans Roman", Times;
    font-weight: 100;
    font-size: 10vw;
    line-height: 10vw;
    font-variation-settings: 'wght' 100, 'wdth' 85;
}

logo .char {
    --delay: calc((var(--char-index) + 1) * 400ms);
    animation: breathe 4000ms infinite both;
    animation-delay: var(--delay);
}

logo:hover span {
    animation-play-state: paused;
}

@keyframes breathe {
    0% {
        font-variation-settings: 'wght' 100, 'wdth' 85;
        font-size: 10vw;
    }
    60% {
        font-variation-settings: 'wght' 700, 'wdth' 100;
        font-size: 11vw;
    }
    
    100% {
        font-variation-settings: 'wght' 100, 'wdth' 85;
        font-size: 10vw;
    }
}
</style>

Cara Menggunakannya, cukup gunakan kode berikut ini:
<logo data-splitting>Kelasmat</logo>

Jika langkahnya tidak ada yang salah, maka hasilnya akan seperti di bawah ini:
Kelasmat
Semoga bermanfaat dan silahkan kamu kembangkan lagi sesuai kebutuhan kamu serta jika artikel ini bermanfaat silahkan bantu blog ini dengan cara bagikan keteman-teman atau media sosial kamu.

Saturday, November 30, 2019

Cara Membuat Teks Warna Pelangi dengan CSS

By On November 30, 2019
Kelas Math - Cara Membuat Warna Tulisan Pelangi atau berGradasi ini sebetulnya sudah banyak yang membuat tutorialnya. Namun, dari beberapa sumber yang saya baca, mereka membuat atau memberikan efek pelangi pada teks nya menggunakan javascript. Sebetulnya cara seperti itu tidak masalah dan sah-sah saja, hanya saja bagi sebagian orang yang paham tentang teknik seo terutama pada segi kecapatan blog (karena yang saya baca kecepatan web mempengaruhi hasil indeks google) tentu saja cara Membuat Teks Warna Pelangi dengan menggunakan javascript akan mengurangi kecepatan web ataupun blognya meskipun tidak terlalu signifikan menurunkan kecepatan blog.
Cara Membuat Teks Warna Pelangi dengan CSS
Oleh karena itu, disini kelas math akan memberikan sebuat tips tentang cara Membuat Teks Warna Pelangi dengan CSS agar kecepatan blognya tetap kencang atau tidak terpengaruh. Untuk contohnya, Kamu bisa lihat pada contoh teks yang saya beri efek pelangi di bawah ini.

Teks Ini Berwarna Pelangi hanya dengan CSS

Bagaimana cara saya membuatnya?

Pertama silahkan copy kode css di bawah ini dengan
Ctrl
+
C
.gradien {
    background: #fed369;
    background: -moz-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: -webkit-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: linear-gradient(to right,
#55acee 0,#da84ab 50%,
#fcac5e 100%);
    background-clip: border-box;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color:
    transparent;
}
Untuk Warna pelanginya silahkan Kamu sesuaikan dengan selera. Ganti saja angka-angka yang didepannya ada tanda
#
nya. Untuk Kode warna dan cara penggunaannya bisa kamu lihat di bawah ini

Cara Pemakaian:

1. Klik Tombol warna, maka akan muncul pilihan warna lain.
2. Setelah seleasi menetukan warna yang diinginkan klik OK. 3. Terakhir untuk memunculkan kode warna silahkan klik Get Color

Pick a Color:





Cara Menerapkannya, cukup berikan class='gradien' pada teks yang ingin diberi efek pelangi. Sebagai contoh, saya ingin memberikan efek pelangi pada judul blog atau kata Kelas Math yang terletak dipojok kiri blog ini.
Kode awalnya adalah
<h1 class='judulblog'>Kelas Math</h1>
maka saya cukup memberikan kata gradien pada class nya. Sehingga kode tadi menjadi :
<h1 class='judulblog gradien'>Kelas Math</h1>
Namun, Jika efek pelanginya hanya ingin dimunculkan pada teks yang didekati kursor saja, maka ada sedikit tambahan :hover pada css gradien tadi, sehingga kode nya akan menjadi seperti ini :
.gradien:hover {
    background: #fed369;
    background: -moz-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: -webkit-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: linear-gradient(to right,
#55acee 0,#da84ab 50%,
#fcac5e 100%);
    background-clip: border-box;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color:
    transparent;
}
Sedangkan untuk cara menggunakan/menerapkannya masih sama dengan cara yang tadi.
Mungkin itu saja yang perlu dilakukan untuk Membuat Teks Warna Pelangi dengan CSS, semoga tulisan ini dapat membantu bagi kamu yang ingin memberikan/membuat judul tulisannya atau teks menjadi berwarna pelangi.

Thursday, November 14, 2019

Background Blog Berganti Warna Secara Otomatis

By On November 14, 2019
Background Blog Berganti Warna Secara Otomatis
Kelas Math - Mungkin Anda pernah berkunjung kesebuah blog dengan berubah-ubah warna backgroundnya, bagaimana kira-kira menurut Anda? Menarik bukan? Menggonta-ganti warna secara otomatis ini dapat dilakukan para pembaca blog lebih merasa nyaman dan tidak merasa jenuh ataupun bosan. Namun bagaimanakah cara membuatnya? Apakah susah? Tenang, disini akan saya bantu cara membuatnya. Mudah aja koq sebenarnya hanya butuh tambahan kode css sedikit saja.

Baiklah Trik kali ini akan membantu Anda dalam mengubah warna latar belakang secara otomatis. sehingga saya kasih aja judul tulisannya Background Blog Berganti Warna Secara Otomatis
Memberikan tampilan segar untuk pengunjung blog Anda setiap kali mereka mengunjunginya dengan menunjukkan warna latar belakang yang keren agar mereka tidak cepat bosan. 

Apakah Berpengaruh pada Kecepatan blog?

Tidak. Karena Cara yang saya pakai untuk membuat warna background blog ini berubah secara otomatis tidak menggunakan Scripts ataupun kode yang memberatkan loading blog. Cara yang saya gunakan hanya menggunakan css yang tentunya tidak akan menjadikan loading blog Anda menjadi lambat.
Trik ini tidak akan mempengaruhi kecepatan halaman blog Anda. Itu hanya menambahkan kode warna setiap kali pengunjung menyegarkan blog Anda dan warna yang dipilih secara acak sebagai warna latar belakang.

Bagaimana cara membuat Background Blog Berganti Warna Secara Otomatis?

Caranya cukup mudah. Namun, Anda terlebih dahulu harus login ke akun blogger anda dan buka edit html template Anda. Jika sudah berada di halaman edit template,
  1. Cari kode ]]> </ b: skin> Gunakan saja
    Ctrl
    +
    F
    secara bersamaan pada area edit html untuk mempermudah dalam mencarinya. Maka Anda akan langsung menemukan kode ]]> </ b: skin>. 
  2. Copy kode berikut ini, dan pastekan tepat diatas kode ]]> </ b: skin> yang tadi.


body {
 animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
 -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
 -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
 -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
 }
@keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }
 @-webkit-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }
 @-moz-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }
 @-o-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }

3. Selanjutnya save template Anda, dan lihat hasilnya.

Pada kode diatas, warna tulisan akan sama dengan warna background. Jika Anda tidak menginginkannya, setiap tulisan color: #kodewarna; diakhir setiap baris kode, Silahkan disesuaikan saja. Dan untuk demo silahkan bisa lihat di blog ini.

Thursday, October 10, 2019

Cara Mudah Membuat Slider Post Otomatis di Blogspot

By On October 10, 2019
Cara Mudah Membuat Slider Post Otomatis
Kelas Math - Sesuai dengan judul tulisannya yaitu Cara Mudah Membuat Slider Recent Post Otomatis, maka kali ini saya tidak akan berbasa-basi memperpanjang cerita. Karena saya rasa judul di atas sudah sangat jelas maksudnya. Ya, disini saya akan menerapkan kode yang sudah siap pakai. Jadi menerapkannya bisa lewat widget atau pun dipasang langsung di templatenya.

Untuk Penampakannya silahkan perhatikan demonya.

Cara Membuatnya :

Silahkan Copy Kode dibawah ini, kemudian tinggal letakkan di widget HTML blog Anda.
<style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://www.kelasmat.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>
Silahkan ganti https://www.kelasmat.com dengan url blog Anda sendiri. Jika ada yang mau ditanyakan silahkan saja tinggalkan komentar dibawah.

Friday, October 4, 2019

Cara Membuat Menu Tersembunyi di Blogspot

By On October 04, 2019
Anda mungkin pernah mengunjungi beberapa website yang menu navigasinya tersembunyi dan hanya akan muncul jika kita menekan tombol open terlebih dahulu. Nah bagi yang penasaran dengan bagaimana membuatnya, silahkan simak penjelasan berikut ini.
Cara Membuat Menu Tersembunyi di Blogspot

Cara Membuat Menu Tersembunyi di Blogspot

Sebelum kita belajar membuatnya, Silahkan klik kata Open di bawah sebagai contoh hasil yang akan kita buat nanti


Open


Bagaimana Cara Membuatnya?

Caranya cukup mudah, silahkan anda masuk ke edit html pada blog Anda. Kemudian, salin kode css dibawah ini dan letakkan sebelum kode </style>. Gunakan
Ctrl
+
F
untuk mencari nya.

.sembunyi {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sembunyi a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sembunyi a:hover {
  color: #f1f1f1;
}

.sembunyi .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sembunyi {padding-top: 15px;}
  .sembunyi a {font-size: 18px;}
}
setelah itu cari juga </head>, setelah ketemu, masukkan script dibawah ini.

<script>
function openNav() {
  document.getElementById("sembunyian").style.width = "250px";
}

function closeNav() {
  document.getElementById("sembunyian").style.width = "0";
}
</script>
Setelah itu, Pasang kode Html berikut ini dimanapun sesuai keinginan Anda, bisa di samping header, dalam navigasi, disidebar atau pun bisa juda didalam halaman postingan Anda.

<div id="sembunyian" class="sembunyi"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
<a href="#">About</a><br />
<a href="#">Services</a><br />
<a href="#">Clients</a><br />
<a href="#">Contact</a><br />
</div><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Open</span>
<br />

Sunday, September 29, 2019

Membuat Bentuk Bangun Datar dengan CSS

By On September 29, 2019
Dalam Pelajaran Matematika, Ada beberapa Materi yang menurut sebagian orang agak sedikit njelimet alias rumit. termasuk juga bagi pribadi saya sendiri yang kadang kala agak kesulitan dalam mempelajarinya. Salah satu materi yang menurut saya agak sulit itu adalah yang berkaitan dengan Bangun Datar atau lebih luasnya tentang Geometri. Bangun-bangun datar yang paling sering dipelajari disekolahan mulai dari SD, SMP sampai SMA bahkan sampai ditingkat perkuliahan diantaranya adalah, Persegi, persegipanjang, Lingkaran, Trapesium, Segitiga, Jajargenjang dll. Namun, pada tulisan saya kali ini, saya tidak akan membahas materi-materi tersebut. Melainkan hanya akan membahas bagaimana cara membuatnya dengan CSS agar dapat di tampilkan didalam postingan blog.
Membuat Bentuk Bangun Datar dengan CSS

Bagaimana Membuat Bangun Datar dengan CSS?

Biasanya dalam membuat bangun datar seperti yang saya sebut tadi, akan lebih mudah menggunakan software yang dikususkan untuk program matematika seperti geogebra atau sejenisnya, bahkan dengan menggunakan microsoft office word pun mudah membuatnya. Namun, bagaimana kalau kita ingin membuatnya di blog?tentunya tanpa menggunakan gambar hasil dari software tadi ya..
Nah untuk menjawab itu, maka disini saya akan memberikan sedikit tutorial cara membuat Bangun Datar Dengan menggunakan CSS.

Bangun Datar Persegi dan Persegi Panjang

Bangun Datar ini merupakan dasar dalam membuat bangun-bangun lain, untuk lebih jelasnya silahkan lihat contoh dan penerapannya di bawah ini.

1. Persegi

Cara membuatnya:
Kode pemanggilan HTML :
<div  id='persegi'></div>
Kode CSS nya :
#persegi {width:120px; height:120px;background-color:#1E8BC3;}
Contoh gambar yang dihasilkan:

2. Persegi Panjang

Cara membuatnya:
Kode pemanggilan HTML :
<div  id='persegipanjang'></div>
Kode CSS nya :
#persegipanjang {width:300px; height:120px;background-color:#3A539B;}
Contoh gambar yang dihasilkan:

3. Lingkaran

Cara membuatnya:
Kode pemanggilan HTML :
<div  id='lingkaran'></div>
Kode CSS nya :
#lingkaran {width:220px; height:120px;background-color:#67809F;border-radius:50%}
Contoh gambar yang dihasilkan:

4. Oval

Cara membuatnya:
Kode HTML :
<div  id='oval'></div>
Kode CSS nya :
#oval {width:220; height:120;background-color:#E67E22;border-radius:50%}
Contoh gambar yang dihasilkan:

5. Segitiga

a. Segitiga Sama Kaki
Cara Membuatnya :
Kode pemanggilan HTML :
<div  id='Segitiga'></div>
Kode CSS nya :
#Segitiga {width:0px; height:10px;border-bottom:140px solid #F9690E;border-left:70px solid transparent;border-right:70px solid transparent;}
Contoh gambar yang dihasilkan:
b. Segitiga Sembarang
Cara Membuatnya :
Kode pemanggilan HTML :
<div  id='segitiga1'></div>
Kode CSS nya :
#segitiga1 {width:0px; height:10px;border-top:140px solid #F9690E;border-left:150px solid transparent;border-right:70px solid transparent;}
Contoh gambar yang dihasilkan:
c. Segitiga Siku-siku
Cara Membuatnya :
Kode pemanggilan HTML :
<div  id='segitiga2'></div>
Kode CSS nya :
#segitiga2 {width:0px; height:10px;border-bottom:140px solid #F9690E;border-right:120px solid transparent;}
Contoh gambar yang dihasilkan:

6. Trapesium

Cara Membuatnya :
Kode pemanggilan HTML :
<div  id='trapesium'></div>
Kode CSS nya :
#trapesium {width: 120px; height: 0; border-bottom: 120px solid #722D6A; border-left: 60px solid transparent; border-raight: 60px solid transparent; margin-bottom:50px;}
Contoh gambar yang dihasilkan:

7. Jajargenjang

Cara Membuatnya :
Kode pemanggilan HTML :
<div  id='jajargenjang'></div>
Kode CSS nya :
#jajargenjang {width:180px;height:100px;background:#9A12B3;-webkit-transform:skew(30deg); -moz-transform:skew(30deg);-ms-transform:skew(30deg);-0-transform:skew(30deg); transform: skew(30deg);}
Contoh gambar yang dihasilkan:

Itulah beberapa contoh pembuatan Bentuk Bangun Datar dengan CSS. Untuk bentuk-bentuk lainnya anda bisa mengembangkannya sendiri dengan cara coba-coba. Banyak software yang tersedia di internet untuk mempelajarinya.

Monday, September 2, 2019

Cara Membuat Daftar Isi untuk Label Tertentu

By On September 02, 2019
Kelas Math - ScreenShot di atas adalah contoh tampilan daftar isi untuk menampilkan label tertentu dalam halaman statis blogger secara otomatis. Dalam contoh di atas, saya menampilkan Label Download. Jadi Semua postingan/artikel yang dikasih label download, akan secara otomatis masuk kedalam daftar tersebut.
Cara Membuat Daftar Isi untuk Label Tertentu

Manfaat Daftar Isi untuk Label Tertentu

Cara seperti itu diharapkan dapat membantu atau mempermudah pengunjung blog dalam menelusuri postingan/artikel berdasarkan kategori tertentu, selain itu juga dapat membantu mesin /robot google dalam mengindex semua postingan blog.
Bagaimana cara Membuatnya?

Untuk dapat membuatnya, sebenarnya cukup mudah, yaitu dengan menggunakan script dan memodifikasinya sesuai keinginan kita.

Langkah-langkah Cara Membuat Daftar isi Untuk Menampilkan Label Tertentu

1. langkah Pertama, Anda harus masuk/login kedalam akun blogger anda. 2. Kemudian Buka halaman --> Tambah Halaman baru. Lihar gambar di bawah ini. membuat daftar isi label tertentu 3. Buat judul Entri sesuai keinginan anda misalnya Daftar isi Download. Kemudian Dalam mode HTML atau bukan compose, pastekan kode skrip ini.
<div id="sitemap6">Loading....</div><script> //<![CDATA[
var label = 'Download';
var text = 'Jumlah Postingan Dalam Kategori';
var sortby = 'date'; /* 'date' OR 'title' */

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('i a=["\\f\\v\\g\\h\\r\\d","\\v\\g\\b\\e\\d\\b\\1f\\c\\b\\B\\b\\l\\d","\\f\\g\\v","\\m\\w\\b\\b\\j\\f\\m\\r\\u\\f\\d\\f\\m\\j\\b\\w\\e\\k\\c\\d\\m\\S\\m","\\1q\\e\\c\\d\\q\\I\\f\\u\\l\\R\\v\\e\\c\\c\\Z\\e\\v\\1c\\q\\f\\h\\d\\b\\B\\e\\r\\1a\\R\\f\\d\\e\\g\\d\\S\\h\\l\\j\\b\\1g\\q","\\R\\B\\e\\1g\\S\\g\\b\\f\\k\\c\\d\\f\\q","\\e\\r\\r\\b\\l\\j\\1y\\x\\h\\c\\j","\\Z\\u\\j\\P","\\f\\h\\d\\b\\B\\e\\r\\1a","\\W\\b\\d\\1f\\c\\b\\B\\b\\l\\d\\1C\\P\\1B\\j","\\h\\l\\l\\b\\g\\1A\\1z\\1D\\1E","","\\w\\b\\b\\j","\\c\\b\\l\\W\\d\\x","\\b\\l\\d\\g\\P","\\1K\\d","\\d\\h\\d\\c\\b","\\c\\h\\l\\1c","\\g\\b\\c","\\e\\c\\d\\b\\g\\l\\e\\d\\b","\\x\\g\\b\\w","\\r\\k\\f\\x","\\I\\k\\j\\k\\c","\\f\\u\\g\\d","\\p\\c\\h\\o\\p\\e\\y\\x\\g\\b\\w\\q\\t","\\k\\g\\c","\\t\\y\\d\\h\\d\\c\\b\\q\\t","\\t\\o","\\p\\m\\e\\o\\p\\m\\c\\h\\o","\\p\\j\\h\\Y\\y\\v\\c\\e\\f\\f\\q\\t\\I\\k\\j\\k\\c\\t\\o","\\y","\\1h\\y","\\p\\m\\j\\h\\Y\\o\\p\\u\\c\\o","\\p\\m\\u\\c\\o"];i T=1,H=1G,K=1F 1H();V M(){i U=O[a[1]](a[0]);U[a[2]]=a[3]+1b+a[4]+T+a[5]+H;O[a[7]][a[6]](U)}V 1x(X){i J=O[a[9]](a[8]);C(!J){1d};J[a[10]]=a[11];i A=X[a[12]];C(A[a[14]][a[13]]>0){N(i G=0;G<A[a[14]][a[13]];G++){i D=A[a[14]][G];i E=D[a[16]][a[15]];N(i z=0;z<D[a[17]][a[13]];z++){C(D[a[17]][z][a[18]]==a[19]){i F=D[a[17]][z][a[1o]];C(F&&F[a[13]]>0&&E&&E[a[13]]>0){K[a[1I]]({"\\k\\g\\c":F,"\\I\\k\\j\\k\\c":E})};1l}}};C(A[a[14]][a[13]]>=H){T+=H;M()}1i{i Q=a[11],n;i n=(1J===a[16]?K[a[1w]](V(n,1e){1d n[a[L]]>1e[a[L]]?1:-1}):K);N(i s=0;s<n[a[13]];s++){Q+=a[1L]+n[s][a[1v]]+a[1s]+n[s][a[L]]+a[1k]+n[s][a[L]]+a[1j]};J[a[10]]=a[1u]+1m+a[1t]+1b+a[1r]+n[a[13]]+a[1n]+Q+a[1p]}}}M()',62,110,'||||||||||_0x73e9|x65|x6C|x74|x61|x73|x72|x69|var|x64|x75|x6E|x2F|_0x6718x10|x3E|x3C|x3D|x70|_0x6718x12|x22|x6F|x63|x66|x68|x20|_0x6718xd|_0x6718x9|x6D|if|_0x6718xb|_0x6718xc|_0x6718xe|_0x6718xa|max|x6A|_0x6718x8|sitemap6Arr|22|runSitemap6|for|document|x79|_0x6718xf|x26|x2D|start|_0x6718x5|function|x67|_0x6718x7|x76|x62|||||||||||x36|label|x6B|return|_0x6718x11|x45|x78|x3A|else|28|27|break|text|32|20|33|x3F|31|26|30|29|25|23|sitemap6|x43|x54|x48|x49|x42|x4D|x4C|new|150|Array|21|sortby|x24|24'.split('|'),0,{}));
//]]> </script>
Perhatikan pada var labe di atas, kode itu saya gunakan untuk menampilkan semua postingan yang ada pada label Download. Silahkan sesuaikan dengan label yang akan anda tampilkan. Perlu di ingat, penulisan label ini harus sama persis dengan yang anda buat. jadi harus teliti penggunaan spasi atau tanda lainnya.
4. Kemudian Publikasikan/simpan Halaman. Lihat hasilnya.
5. Untuk Mempercantik tampilannya, saya menambahkan beberapa pengaturan dengan menambahkan CSS atau stylenya. Caranya : Simpan Kedo Style Berikut ini dalam template anda, Masuk kedalam Template --> Edit Html, kemudian Cari Kode <style> letakan kode ini dibawahnya atau bisa juga ditambahkan sebelum kode </style> .
#sitemap6 {font-family: 'Exo', sans-serif;font-size:16px; font-weight:400; background-color: #92dff4;}
#sitemap6 .judul {font-family: 'Exo', sans-serif;font-size:150%; background-color:#3498db; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap6 a {font-family: 'Exo', sans-serif;color:#666; background-color: #92dff4; text-decoration:none; transition:all .3s ease;}
#sitemap6 a:hover {color:#000;}
#sitemap6 ol {margin:30px; padding:0px; background-color: #92dff4;}
#sitemap6 ol li {color:#666; list-style-type:decimal; background-color: #92dff4; margin-left:20px; padding:5px; line-height:1.5em; -webkit-margin-start:40px !important;}
6. Kemudian Simpan Tema anda dan lihat hasilnya.
Sekian saja bagaimana cara membuat daftar isi blog khusus untuk menampilkan kategori atau label tertentu nya. Semoga dapat membantu. Untuk demo nya anda bisa mengunjungi halaman download pada blog ini. atau bisa juga dengan klik

Saturday, August 17, 2019

Cara Membuat Macam-macam Tombol Menggunakan CSS

By On August 17, 2019

Alt Text!
Contoh Tombol

Ada beberapa macam cara yang dapat digunakan untuk membuat link download. Bisa langsung menggunakan link biasa atau menggunakan gambar. Namun yang saya ketahui dari beberapa sumber mengatakan bahwa, link eksternal yang menggunakan gambar selain membuat loading blog agak lambat namun juga kurang baik dalam seo (Search engine optimation). Padahal Bentuk-bentuk tombol download yang unik tentu dapat mempercantik tampilan template suatu blog. Oleh karena itu, disini saya coba membagikan cara membuat macam-macam tombol download untuk blog tanpa menggunakan gambar. Cara ini murni menggunakan CSS.

Demo Tombol 1



Cara Membuat Tombol 1
Tombol ini yang paling sering saya jumpai dikala saya blogging kesana-kemari. Bagaimana cara membuatnya? Silahkan ikuti langkah-langkah berikut ini.

Cara Membuatnya
Simpan kode di bawah ini kedalam template blog atau sebelum kode </style>

input#gobutton{
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding:5px 25px; /*add some padding to the inside of the button*/
    background:#35b128; /*the colour of the button*/
    border:1px solid #33842a; /*required or the default border for the browser will appear*/
    /*give the button curved corners, alter the size as required*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    /*style the text*/
    color:#f3f3f3;
    font-size:1.1em;
    }
    /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
    input#gobutton:hover, input#gobutton:focus{
    background-color :#399630; /*make the background a little darker*/
    /*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
    box-shadow: 0 0 1px rgba(0,0,0, .75);
    }

Contoh Cara Menggunakannya :
<input id="gobutton" type="submit" value="download!" />

Silahkan Ganti kata Download yang sudah saya tandai dengan warna Kuning tersebut dengan kata-kata anda sendiri. Misalnya Go! atau Klik disini.

Demo Tombol 2



Tombol yang kedua ini juga sering saya jumpai dikala saya blogging. Bagaimana cara membuatnya? Silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Tombol ke2
Silahkan salin css berikut ini, tempatkan pada tag setelah </style>

input#bigbutton {
width:500px;
background: #3e9cbf; /*the colour of the button*/
padding: 8px 14px 10px; /*apply some padding inside the button*/
border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
/*style the text*/
font-size:1.5em;
font-family:Oswald, sans-serif; /*Oswald is available from https://www.google.com/webfonts/specimen/Oswald*/
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/***SET THE BUTTON'S HOVER AND FOCUS STATES***/
input#bigbutton:hover, input#bigbutton:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

Cara Menggunakannya seperti di bawah ini:
<input id="bigbutton" type="submit" value="Download" />

Demo Tombol 3


Cara Membuatnya:
Salinlah kode dibawah ini dan tempatkan pada sebelum kode </style>

input#round{
    width:100px; /*same as the height*/
    height:100px; /*same as the width*/
    background-color:#ff0000;
    border:1px solid #ff0000; /*same colour as the background*/
    color:#fff;
    font-size:1.6em;
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
    }
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
    input#round:hover{
    background:#c20b0b;
    border:1px solid #c20b0b;
    /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    }

Cara Memanggilnya seperti ini:
<input id="round" type="submit" value="Go!" />
Gimana Teman-teman Contoh Tombol Downloadnya?

Untuk Menginputkan link downloadnya silahkan teman-teman pelajari sendiri cara membuat link eksternal. Browsing aja lagi digoogle banyak koq yang sudah membuat panduannya. Jika Anda masih belum puas, berikut ini saya contoh lagi beberapa contoh.

Demo Tombol 4, 5, 6, 7

30K Android Daftar sekarang & Download Free Player Join for Free & Download $20 DVD Register right now & Download $5 web code Log in Now & Download
















Kode CSS nya :
.a-btn{
    background: #275713;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background: -webkit-linear-gradient(top, #3C5A3C 0%, #508148 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:90px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#bde086;
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    opacity:0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn-text{
    padding-top:13px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #5d81ab;
    color: #fff;
font-family: Oswald;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#5b5b5b url(http://2.bp.blogspot.com/-M7lYlHaBzc0/VGvVsR11GDI/AAAAAAAAIhs/U_7VAcGB1J4/s1600/arrow_down.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    opacity:0;
}
.a-btn:hover .a-btn-slide-text{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
    background-color: #45BC32;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}
Sedangkan Kode Html nya :
<a href="#" class="a-btn">
      <span class="a-btn-slide-text">30K</span>
      <img src="http://3.bp.blogspot.com/-9u1k9OCRfKQ/VGvU6yZgtiI/AAAAAAAAIhM/62030J7RATM/s1600/Android-FileTransfer-icon.png" alt="Android" />
      <span class="a-btn-text"><small>Daftar sekarang &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">Free</span>
      <img src="http://2.bp.blogspot.com/-OLGIrTGU8nc/VGvU7d_uH6I/AAAAAAAAIhQ/5FYYzJitAj0/s1600/DivXPlayer-icon.png" alt="Player" />
      <span class="a-btn-text"><small>Join for Free &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">$20</span>
      <img src="http://4.bp.blogspot.com/-2WqXLgTKM7I/VGvU8Xd_nDI/AAAAAAAAIhc/M5XEbT0eyEw/s1600/DVD-icon.png" alt="DVD" />
      <span class="a-btn-text"><small>Register right now &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">$5</span>
      <img src="http://2.bp.blogspot.com/-0MbZyIBlbM0/VGvU-D42KiI/AAAAAAAAIhk/_3Ji_yqBOzU/s1600/seo-web-code-icon.png" alt="web code" />
      <span class="a-btn-text"><small>Log in Now &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>

Itu lah contoh tombol download yang bisa saya bagikan untuk hari ini. Jika ada pertanyaan silahkan aja tuliskan pada kolom omentar di bawah. atau juga anda bisa menghubungi saya melalui halaman kontak yang sudah saya sediakan.

Wednesday, August 14, 2019

Cara Mempercantik Postingan Blog dengan CSS

By On August 14, 2019
Alt Text!
Kalau Anda perhatikan hampir pada setiap blog saya ini, selalu saya tampilkan beberapa variasi tampilan postingannya (seperti tampak pada gambar di atas). Hal ini saya lakukan agar para pembaca kelas matematika tidak cepat bosan dan jenuh karena memang cara penyampaian atau tulisan saya masih belum memenuhi standar seperti penulis yang profesional. Dengan tampilan yang tidak monoton, saya harap para pembaca blog saya ini dapat lebih berlama-lamaan.
Cara Mempercantik Postingan Blog dengan CSS
Cara yang saya terapkan ini murni hanya dengan CSS dan html biasa, alias tidak menggunakan javascript atau jquery tertentu
Karena ini murni hanya menggunakan CSS, maka sebenarnya cukup mudah menerapkannya. Namun, mungkin bagi sebagian orang yang masih awam, arti CSS saja ada yang belum tau. Nah Bagi yang belum tau, ijinkan saya melalui kelasmat.com ini menjelaskan sedikit tentang CSS.
Apa Itu CSS

CSS adalah sebuah singkatan dari Cascading Style Sheet. CSS ini digunakan untuk mengatur/memisahkan tulisan atau konten dengan tampilan visualnya dalam sebuah halaman situs, dalam bahasa markup seperti HTML. Tanpa CSS, website/blog akan terlihat polos hanya terlihat tulisan hitam dan latarbelakang putih polos. Jadi, jika website atau blog anda ingin tampil menarik, maka anda wajib menggunakan CSS
Begitu juga dengan tampilan postingan Blog. Jika ingin tampak agak menarik atau punya gaya, maka anda dapat menerapkan CSS didalamnya.
Bagaimana Caranya

Caranya anda dapat mengikuti Langkah-langkah berikut ini, namun sebelumnya untuk jaga-jaga, silahkan backup dulu template/tema blog anda.

Langkah-langkah Cara Mempercantik Postingan Blog dengan CSS

1. Membuat Kotak yang Pertama atau yang berwarna Orange
Pertama, Anda Copy CSS berikut ini, kemudian pastekan kode tersebut di atas </style>

 .definition-title {
    padding: 20px;
    background: #E19729;
    color: #fff;
    font-weight: bold;
}
.definition-content {
    padding: 20px;
    background: rgb(245, 207, 165) none repeat scroll 0% 0%;
    color: rgb(112, 68, 10);
}
Kedua, Anda tinggal panggil css tersebut dengan menambahkan kode berikut ini pada postingan yang akan anda Percantik.
<div class="definition-title">
Ini judul konten</div>
<div class="definition-content">
ini isi kontennya</div>
2. Membuat Kotak Dialog atau kotak tanya jawab
Pertama, Anda Copy CSS berikut ini, kemudian pastekan kode tersebut di atas </style>
 .dialog{padding:3%!important;border:2px dashed #e0e0e0;background-color:#a5b99f;text-align:left}
.tanya-wrapper,.jawab-wrapper{position:relative}
.tanya-wrapper{padding-left:60px}
.jawab-wrapper{padding-right:60px}
.tanya-bg,.jawab-bg{width:50px;height:40px;background-image:url("https://3.bp.blogspot.com/-e93jyUY9MWA/WFcEUPUPLqI/AAAAAAAABBY/bbiJMQpgDEY99O-rZWQbxpMv9_WP8ADMgCLcB/s1600/dialogbg.png");background-repeat:no-repeat;background-size:auto 100%;position:absolute;top:0}
.tanya-bg{background-position:left top;left:0}.jawab-bg{background-position:right top;right:0}
.tanya-content{padding:10px;background:#53e057;color:#555;border:1px solid #0d8531;border-radius:5px}
.jawab-content{padding:10px;background:#f9f9f9;color:#555;border:1px solid #e0e0e0;border-radius:5px}
.jawab-content b{color:#333}
Kedua, Anda tinggal panggil css tersebut dengan menambahkan kode berikut ini pada postingan yang akan anda Percantik.
<div class="dialog">
<div class="tanya-wrapper">
<div class="tanya-bg">
</div>
<div class="tanya-content">
ini pertanyaan</div>
</div>

<div class="jawab-wrapper">
<div class="jawab-bg">
</div>
<div class="jawab-content">
isi jawaban</div>
</div>
</div>

Keterangan : yang saya beri tanda gray itu silahkan sesuaikan dengan kebutuhan anda.
Mungkin hanya itu saja yang perlu dilakukan untuk mempercantik postingan blog dengan CSS seperti yang saya terapkan pada blog ini, jika masih ada yang kurang jelas bisa ditanyakan melalui kolom komentar dibawah yang sudah tersedia.