Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Saturday, November 30, 2019

Cara Membuat Teks Warna Pelangi dengan CSS

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

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

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

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

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.

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:

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:

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:

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:

Segitiga

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

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:

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

Cara Membuat Daftar Isi Hanya untuk Label Tertentu 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.
Saturday, August 17, 2019

Cara Membuat Macam-macam Tombol Menggunakan CSS


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

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.