Showing posts with label Blog. Show all posts
Showing posts with label Blog. 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 21, 2019

Cara Membuat Warna Menu Blog Berbeda Tiap Halaman

Kelas Math - Setelah kemarin kelas Math memberikan trik cara membuat background blog berubah warna secara otomatis, maka kali ini kelas math akan membagi kan sebuah script yang berfungsi untuk merubah warna suatu elemen agar berbeda warna tiap halaman dengan cara otomatis.
Cara Membuat Warna Menu Blog Berbeda Tiap Halaman
Sebenarnya trik ini bisa di gunakan untuk merubah elemen mana pun yang kita kehendaki. Hanya saja kita harus tau telebih dahulu Id atau class mana yang akan kita beri efek agar berubah warnanya secara otomatis tiap kali user pengguna melakukan reload halaman atau merefresh.

Apakah memperlambat loading blog

Menurut saya tidak begitu berpengaruh, karena scriptnya kecil dan hanya terdiri dari beberapa baris saja. Asalkan penempatannya tidak ditaruh di atas melainkan di taruh pada elemen body bisa setelah <body> atau sebelum </body>

Cara Membuatnya

Pertama tentunya, Anda harus sudah berada dalam halaman edit html tema blog anda. kemudian cari lah kode . Untuk memudahkan Anda dapat menggunakan tombol keyboard
Ctrl
+
F
lalu tuliskan </body> dan enter. Setelah ketemu, silahkan copy atau
Ctrl
+
C
kode script di bawah ini, dan letakkan/pastekan atau gunakan
Ctrl
+
V
di atas kode </body> tadi.
<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$("nav").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]></script>
Kata "nav" yang saya beri tanda, bisa anda ganti dengan id atau class elemen yang anda kehendaki. Misalnya saya ingin memberikan efek warna berubah otomatis pada area postingan, maka saya cukup mengganti "nav" dangan "#post". Untuk hasil nya anda bisa mengunjungi halaman berikut 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.
Thursday, September 26, 2019

10 Strategi Menjaring Traffic Bagi Blogger Pemula Menurut Barb Sibbing

Kelas Math - Persaingan yang ketat dalam mengejar posisi nomor 1 di hasil pencarian google, membuat beberapa orang melakukan berbagai cara untuk mengejarnya.. Mulai dari pengoptimalan seo, bertukar link dengan cara blogwalking hingga cara-cara lain yang menurut mereka yang sudah menerapkan cukup ampuh. Begitu pula menurut Barb Sibbing. Bahwa setidaknya ada  10 Strategi yang dapat dilakukan untuk menjaring Traffic/pengunjung blog. Cara ini cocok dilakukan atau dikerjakan oleh para blogger terutama Bagi para Blogger Pemula. Namun sebelum kita membahasa apa saja 10 strategi itu, alangkah baiknya terlebih dahulu kita mengenal siapa sih Barb Sibbing. Nama ini mungkin tidak familiar bagi para blogger, namun tulisan beliau mengenai strategi mengejar traffic blog menurut saya pribadi masih cukup masuk akal. oleh karena itu tidak ada salahnya saya membuat tulisan ini mengingat strategi yang beliau buat bisa sangat membantu bagi para blogger pemula seperti saya ini.
10 Strategi Menjaring Traffic Bagi Blogger Pemula Menurut Barb Sibbing

Siapa Barb Sibbing?

Barb Sibbing adalah seorang  wanita Internet Marketer yang telah jatuh cinta dengan sebuah platform wordpress. Sejak tahun 2007 beliau mengembangkan bisnisnya dengan mempelajari cara-cara yang cukup efektif dalam membangun bisnisnya hingga beliau sukses dalam bidang Internet marketing. Setelah perjalanan panjang, menurut beliau setidaknya ada 10 Strategi yang harus dilakukan oleh para blogger pemula untuk dapat sukses di internet. Apa saja 10 strategi itu, berikut ini saya uraikan satu persatu.

10 Strategi Menjaring Traffic Blog bagi Blogger Pemula 

1. Bagikan eBook Viral untuk Blogger Pemula

Strategi Pertama menurut Barb Sibbing adalah membagikan EBook secara gratis kepada para Blogger pemula. Tentu disini Anda dituntut untuk mampu membuat sebuah tulisan yang dibutuhkan oleh para blogger pemula. Biasanya para Blogger akan membutuhkan cara-cara atau tutorial membangun sebuah blog atau situs. Jadi Anda bisa membuat langkah demi langkah dalam membangun sebuah blog atau situs secara lengkap. Jangan Lupa untuk menampilkan Kata Kunci Bisnis atau Nama Brand Anda di setiap halaman, sehingga dengan secara tanpa disadari, mereka akan mengingat nama brand anda. Dan jangan lupa anda memberikan Informasi lengkap mengenai Bisnis/Blog Anda seperti alamat Website, kontak, email dan Alamat anda. Dengan demikian, suatu saat eboook tadi akan tersebar maka traffic yang akan menuju blog Anda juga akan meningkat. Perlu di ingat, Pembuatan Ebook ini harus semenarik mungkin, gunakan bahasa yang sederhana yang mudah dipahami oleh para blogger pemula, dan juga sediakan gambar-gambar atau ilustrasi yang sesuai dengan tema.

2. Self Promotion untuk Blogger Pemula

Strategi yang kedua adalah self Promotion. Ada banyak cara yang anda dapat gunakan untuk memporomsikan Situs atau Brand anda. Salah satu yang sudah lumrah dilakukan oleh para blogger adalah dengan cara Blog Walking. Blog walking ini artinya sesama blogger saling mengunjungi blog nya masing-masing secara bergantian. Biasanya blog walking dilakukan oleh mereka yang sudah tergabung dalam sebuah komunitas misalnya komunitas blogger pemula. Blog walking ini biasanya dilakukan dengan cara saling berkomentar dan meninggalkan link blog atau websitenya dikolom komentar yang telah disediakan. Dengan adanya link tersebut, maka diharapkan teman2 yang lain juga dapat berkunjung ke blog Anda. Namun, yang perlu di perhatikan dalam Blog Walking ini adalah jangan terlalu banyak meninggalkan link aktif, karena kalau terlalu sering bisa-bisa anda akan di anggap Spam atau sampah oleh pihak yang punya blog atau pun oleh situs search engine.

3. Buatlah Konten yang Berkualitas

Strategi yang keempat adalah dengan cara membuat Konten yang berkualitas. Membuat konten atau artikel untuk blog, bukan hanya banyaknya kata yang harus diperhatikan, namun juga kualitasnya. Apakah konten anda memang original ataukah hasil copy Paste. Jika anda menginginkan para pembaca anda berkunjung balik keblog atau website anda, maka kualitas konten menjadi point penting yang harus anda jaga. Jika anda sudah tercap sebagai plagiat, maka akan susah untuk mendapatkan kepercayaan dari para pembaca blog setia anda.

4. Buatlah artikel yang memiliki nilai jual

Strategi yang keempat adalah dengan membuat artikel yang memiliki nilai jual. Mungkin banyak orang menganggap membuat artikel adalah hal yang buang-buang waktu. Karena diluar sana sudah banyak orang yang membuat artikel dengan tema atau topik yang sama. Memang benar, diluar sana banyak orang yang membahas tentang topik yang sama dengan anda, namun tahukah anda tidak semua orang suka dengan artikel yang kita buat entah itu karena gaya bahasanya yang terlalu formal, atau karena faktor-faktor lain. Oleh karena disini anda disarankan dalam membuat artikel, harus memiliki daya jual, misalnya target anda adalah para pemula, maka gunakanlah bahasa yang sederhana namun tetap informatif. Berikan tips-tips atau cara-cara termudah, dengan demikian orang-orang tersebut akan betah berlama-lama diblog atau situs anda. dan tentunya diharapkan dikemudian hari akan kembali menyambangi blog anda.

5. Bangun Jejaring Sosial

Strategi yang ke lima adalah membangun Jejaring Sosial. Banyak Sosial Media yang bisa anda manfaatkan untuk menarik pengunjung agar datang keblog anda. diantara sosial media yang paling sering digunakan adalah Faceboook, twitter, linkedin, youtube, pinteres, Path, instagram dan lain-lain. Agar lebih efektif dalam menjalankan strategi ini, anda bisa menggunakan beberapa aplikasi yang bisa mengshare artikel anda secara otomatis begitu anda selesai membuatnya. Silahkan saja anda googling, sangat banyak penyedia jasa gratisan untuk mempromosikan situs anda ke situs jejaring sosial media hanya dengan cara sekali klik. Jadi anda tidak akan kewalahan dalam memanfaatkan jejaring sosial media tersebut.

6. Seo dan Keyword

Sebelum Anda menulis, setidaknya anda harus memperhatikan kata kunci relevan apa yang akan anda targetkan. Idealnya menurut Barb Sibbing, kata kunci atau keyword ini harus mencapai 8% dari konten yang anda buat. Jangan lupa menambahkan tag alt pada setiap gambar yang mewakili conten atau artikel anda. Jadi, ketika anda menuliskan sebuah artikel, anda harus ingat yang akan membaca konten anda bukan hanya manusia saja, melainkan juga robot mesin pencari yang akan membacanya. Oleh karenanya keduanya harus anda perhatikan.

7. BookMarking Sosial

Sediakan Kolom Bookmarking atau subscribe di halaman blog anda, ini bertujuan agar anda bisa mengirimkan postingan terbaru anda kepada para pelanggan anda. Cara ini memungkinkan orang yang pernah berkunjung, akan kembali mengunjungi blog anda.

8. Berbagi Dokumen

yang tak kalah pentingnya adalah dengan berbagi dokumen. dokumen ini bisa dokumen apa saja, misalnya hasil tulisan anda diblog anda kemudian anda convert ke pdf, lalu anda membaginya di situs berbagi dokumen seperti scribd, google drive dan masih banyak lagi yang lainnya. Jangan lupa untuk menuliskan alamat url blog anda disetiap dokumen yang anda sebar tadi.

9. Video Marketing

jangan lupa juga untuk membuat beberapa video untuk melengkapi konten yang anda buat. misalnya anda membuat konten tentang tutorial membuat blog dengan blogspot. maka buatlah versi videonya juga untuk mempermudah para pemula supaya lebih mudah untuk memahaminya. Anda bisa memanfaatkan youtube untuk menyimpan video-video anda.

10. Siapkan Feed RSS Blog

Menyiapkan feed RSS untuk situs web / blog Anda sangat cepat dan mudah untuk menghasilkan lalu lintas GRATIS ke situs web / blog Anda. karena dengan cara ini, orang-orang akan dengan mudah mengunjungi blog kita tanpa harus mengingat nama blognya. Mereka hanya butuh mengklik link yang tersedia didalam rss feed tersebut.

Itulah 10 Strategi yang dapat anda lakukan untuk mendapatkan Pengunjung/traffic Blog menurut Barb Sibbing. Semoga dapat bermanfaat terutama untuk para pemain blogger pemula seperti saya ini. Kebetulan saya sendiri juga belum bisa melaksanakan 10 strategi tersebut, jadi mohon jangan dibully jika blog ini masih sepi pengunjungnya. hehehe
Thursday, September 19, 2019

7 Cara Agar diterima Adsense Tanpa Menunggu Lama

Kelas Math - Tak sedikit dari para blogger yang saya tahu dan yang saya kenal, baik melalui blog walking dari blog satu keblog yang lain maupun dengan brtanya secara langsung bahwa salah satu tujuan utama mereka membuat blog atau situs adalah untuk mengembangkan bisnisnya dan juga untuk mendapatkan penghasilan tambahan melalui program google adsense. mengapa google adsense menjadi pusat perhatian para blogger? Nah pada tulisan saya kali ini, sebenarnya hanya untuk mengupdate blog saja, karena bingung mau nulis apa lagi, maka saya putuskan saja untuk iseng-iseng menulis tentang google adsense. Jadi bagi para suhu atau master blogger, mohon jangan dibully ya.
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.
Tuesday, August 20, 2019

Template Blogger Gratis Super Cepat dan Responsive - Soft Kelasmat 1

Kelas Math - Template Blogger Gratis yang Super Cepat dan Responsive ini saya beri nama Soft Kelasmat 1. Karena Template ini merupakan template pertama yang akan saya berikan kepada siapapun yang menginginkan untuk menggunakannya. Template Blogger Gratis Super Cepat dan Responsive - Soft Kelasmat 1 ini khusus untuk pengguna blogger ya. Karena saya memang masih belum bisa dalam membuat template untuk cms wordpress. Berikut ini adalah screenshoot Template Blogger Gratis Super Cepat dan Responsive - Soft Kelasmat1. Untuk dapat melihat lebih jelas atau demo nya Anda bisa mengunjungi alamat : https://softkelasmat.blogspot.com/
Monday, August 19, 2019

Bagaimana Memilih Platform yang Pas?

Bagaimana cara memilih platform blog yang Pas buat Blogger Pemula?

Alt Text!
Kelas Math - Ada banyak macam/jenis platform yang dapat anda gunakan untuk memulai ngeblog. Diantaranya adalah Wordpress, Blogger, Drupal, Joomla, prestashop dan masih banyak lagi yang lainnya. Bagi anda yang masih baru di dunia blogging, tentunya perlu mengetahui Platform mana yang pantas untuk anda. Hal ini dikarenakan masing-masing plaltform memiliki keunggulan dan kelemahannya masing-masing. Namun dari sekian banyaknya Platform, ada dua platform yang saya rekomendasikan bagi anda yang masih pemula. Yaitu Wordpress atau Blogger. Karena kedua platform ini lebih user friendly alias lebih mudah digunakan dan lebih familiar bagi para bloger pemula. Untuk itu, supaya anda tidak ragu menentukan mana yang cocok untuk anda gunakan, simak beberapa ringkasan berikut ini.

A. Blogger atau Blogspot

Kenapa Blogger atau Blogspot.com saya tempatkan pada urutan yang pertama? Karena merupakan salah satu platform blogging yang banyak digunakan selain WordPress. Selain karena gratis dan sangat mudah dibuat, tampilan dan fitur Blogger juga sangat user-friendly.

Ada banyak alasan kenapa Blogger menjadi salah satu pilihan utama bagi pemula seperti saya dalam membuat blog dengan mudah dan cepat. Salah satu alasannya adalah selain yang sudah saya ungkapkan di atas bahwa Blogger adalah salah satu produk yang dimiliki oleh perusahaan raksasa Google sehingga akan menjadi daya tarik tersendiri bagi para blogger baik yang pemula maupun yang sudah mahir dan malang melintang didunia perbloggeran.

Pada mulanya Blogger ini bukanlah milik perusahaan google, melainkan produk milik Pyra Labs, yang kalo tidak salah diluncurkan pada 23 Agustus 1999. Namun, kemudian Google mengakuisisinya atau membelinya pada tahun 2003 sehingga membuat Blogger menjadi salah satu produk andalan bagi google.

Sejak dibeli nya blogger dari Pyra Labs, banyak sekali perubahan-perubahan yang dilakukan oleh Google dalam memenuhi keinginan para penggunanya, misalnya saja:
  • mengintegrasikan Picasa di tahun 2004 sehingga Blogger memiliki fasilitas penyimpanan Foto. Fitur ini bisa digunakan untuk menyimpan foto maupun untuk berbagi.
  • Servernya datanya dipindahkan ke server Google
  • Standarisasi gadget/widget
  • penambahan template Blogger
  • penambahan fitus https
  • bisa costum domain tanpa upgrade akun di google
  • bisa ikut jadi publisher adsense
  • dan masih banyak perubahan lain yang membuat Blogger menjadi
  • platform blogging tangguh seperti yang kita kenal sekarang.
Untuk anda yang baru mencoba blogging, tidak ada salahnya untuk mempertimbangkan platform yang satu ini, apalagi kalau anda ingin memonetasi blog yang anda buat tanpa harus keluar modal terlebih dahulu.

Supaya anda tidak ragu dalam memilih Blogger sebagai penunjang blog pertama anda, berikut ini saya uraikan keunggulan-keunggulan dari blogger.

Kelebihan Blogger atau Blogspot

1. Gratis

Ini adalah salah satu alasan utama bagi kebanyakan orang memilih Blogger termasuk juga saya..hehehe
Dengan Blogger, Anda tidak perlu lagi mengeluarkan uang kecuali untuk membeli pulsa internet. Semua Fasilitas yang ada pada Blogger diberikan secara cuma-cuma alias gratis oleh perusahaan Google. Anda bahkan bisa membuat sampai 100 blog untuk setiap akun Google. 100 Blog itu bukan sedikit loh.. mengurus 1 blog saja sudah pusing apalagi sampai 100. Tapi itulah hebatnya google. Semuanya digratiskan tanpa harus membayar sepeserpun.

2. Mudah dan praktis

Kelebihan yang kedua adalah Mudah dan juga Praktis. Membuat blog di Blogger sangatlah mudah, dalam hitungan menit sudah langsung bisa jadi dan aktif. Anda hanya perlu masuk ke dalama Blogger.com dan login sebagai akun Google yang Anda punya. Cukup tuliskan judul dan alamat blog yang anda inginkan maka Anda sudah bisa memiliki blog sendiri dengan alamat standar : alamatblog.blogspot.com setelah itu Anda bisa menambahkan fungsi lain dari dalam dashbord Blogger anda. misalnya dengan menambahkan gadget/ widget pada tampilan blog Anda.
Selain kemudahan seperti yang saya sebutkan tadi, Blogger atau blogspot juga terbilang sangat praktis. Untuk Anda yang tidak mau repot-repot melakukan perawatan blog atau kostumasi tema dan hanya mau menulis konten atau atikel, Blogger bisa menjadi pilihan yang tepat buat anda. Karena didalam dashbord blogger sudah tersedia banyak tema yang bisa anda pakai dengan hanya sekali klik.

3. Terintegrasi dengan Google

Seperti yang saya sebutkan di atas, syarat membuat blog di Blogger adalah dengan diwajibkannya memiliki akun Google. hampir setiap orang di jaman sekarang ini pasti punya akun google. Mengapa? Karena hampir semua orang saat ini memiliki Smartphone di mana didalam smartphone untuk dapat mendapatkan aplikasi biasanya menggunakan play store sebagai pedoman. Kita tahu bahwa agar dapat menggunakan playstore, para pengguna smartphone diwajibkan membuat akun salah satunya adalah akun google.

Namun, jika anda belum punya akun google mungkin saat ini anda perlu membuatnya, gratis koq.  Dengan memiliki akun Google, anda akan dapat dengan mudah mendapatkan semua layanan dari Google hanya menggunakan satu akun. Kita tahu, layanan google ini sangat banyak yang diberikan secara cuma-cuma. Salah satu nya adalah Blogger.com

Blogger atau Blogspot dapat terintegrasi dengan layanan Google lainnya seperti Adsense, Google Anallytics, dan google search console dan Adwords bagi para penggiat bisnis marketing.

4. Blogger Dibackup oleh server yang handal

Sejak google mengakuisisi Blogger, baru pada semester akhir tahun 2007 Google berhasil memindahkan Blogger atau blogspot secara menyeluruh ke server google sendiri. Jadi kalau anda membuat blog di Blogger, maka secara otomatis anda juga menggunakan jasa layanan hosting dari Google. ini artinya anda memiliki dekingan
server yang super handal yang dapat menampung jumlah pengunjung blog (traffik) yang tinggi. Selain dapat menampung traffik yang tinggi, jaminan crash juga akan teratasi. dan selama ini yang saya tau, blogger sangat jarang crash atau server down.

5. Keamanan yang Terjaga dan Terjamin

Meskipun tidak ada garansi yang pasti dari pihak google untuk masalah keamanannya, namun sangat mustahil untuk dapat membobol akun Blogger yang anda buat. Karena pihak google telah memberikan pengamanan yang berlapis.

6. Blogger Bisa menggunakan kustom domain 

Bagi anda yang menjadikan blog sebagai penghasilan tambahan, alangkah baiknya merubah nama domain blog nya menjadi domain yang top level domain (TLD). Hal ini menunjukkan keseriusan seseorang dalam menjalani bisnis nya. berbeda dengan masih menggunakan domain.blogspot.com, orang lain masih akan meragukan keseriusannya.
Untuk mendapatkan nama domain TLD, sebenarnya didalam dashboard blogger sekarang ini sudah ada fasilitas beli domain langsung ke google, namun anda juga bisa mendaftarkannya pada situs yang khusus melayani pembelian nama domain seperti godaddy, NameCheap, atau pada penyedia layanan domain sekaligus hostingnya seperti Niagahoster, IDWebhost, idhostinger atau Masterweb dan masih banyak lagi. Untuk Anda yang mengingikan Domain Tld (.com) yang sangat murah, Anda bisa membelinya di MasterWeb. Terakhir saya membeli domain untuk blog ini yakni kelasmat.com hanya dengan Harga Rp 90 an ribu saja. Jadi apa lagi, Ayo buruan beli Domain dot com disini.

Kelebihan dari blogger, anda dapat dengan mudah menggunakan custom domain anda sendiri tanpa harus mengupgrade akun anda terlebih dahulu seperti yang ada pada wordpress atau platform yang lainnya.

7. Monetasi blog

kelebihan lain dari blogger selanjutnya adalah monetasi blog. Untuk Anda yang ingin membuat blog untuk dapat penghasilan tambahan dengan memakai jasa adsense, Blogger bisa menjadi pilihan yang paling tepat. Karena blogger adalah bagian dari google, tentu akan menjadi prioritas dibanding dengan platform lainnya. dengan menggunakan Blogger, anda juga dapat bebas mengikuti program afiliasi atau reseller atau bahkan menggunakan iklan PPC atau program lain nya.

Dengan segala kelebihannya, tentu saja Blogger juga memiliki banyak kelemahan. Apa sajakah kelemahannya?

Kelemahan blogger diantaranya adalah:
  1. Kekurangan atau kelemahan Blogger yang pertama adalah tampilan dari dasboard adminnya yang sangat sederhana.
  2. Dalam menulis postingan atau artikel, diblogger tidak bisa leluasa tidak seperti di dalam wordpress yang bisa ditambah dengan memanfaatkan plugin.
  3. akan sedikit sulit untuk menyesuaikan tampilan blog bagi anda yang masih baru mengenal HTML dan CSS.
  4. kelemahan yang terakhir, karena blogger merupakan salah satu produk Google, maka kita sebagai penggunanya harus patuh dan tunduk pada peraturan yang dibuat oleh Google.

B. Wordpress

WordPress merupakan platform sistem manajemen konten (CMS) yang paling banyak digunakan di dunia. CMS atau sistem manajemen konten itu artinya adalah aplikasi web dimana kita sebagai orang awam dan tidak menguasai bahasa pemogramanpun dapat untuk mengelola website atau menerbitkan konten tanpa harus menguasai istilah HTML, CSS, PHP, Javascript dll. Ada dua pilihan dalam menggunakan wordpress, yang pertama anda bisa membuat blog di wordpress.com untuk anda yang tidak memiliki hosting atau pilihan yang kedua anda bisa menggunakan wordpress.org untuk anda yang punya hosting sendiri (self Hosting). Untuk beda keduanya akan saya jelaskan pada kesempatan lain.

Bahasa dasar dari wordpress adalah dengan bahasa PHP dan MySql. Hampir setiap penyedia hosting didunia menyediakan platform wordpress ini. Karena memang lebih dari 30% dari website besar di dunia menggunakan wordpress. Alasannya tentu karena dalam wordpress banyak kelebihan dibandingkan blogger atau blogspot. Tapi itu jika anda sudah menguasai bahasa PHP dan MySql. Untuk anda yang masih belum menguasainya lebih baik menggunakan blogspot. Karena kalau salah-salah dalam pengoperasiannya bisa fatal error.
Mengapa banyak orang lebih memilih wordpress sebagai platform bog atau websitenya? Berikut ini adalah beberapa kelebihan wordpress di bandingkan dengan platform lain.

Kelebihan Wordpress

1. Gratis

Sama dengan blogger, wordpress juga menyediakan fitur gratis bagi anda yang tidak ingin mengeluarkan dana. Namun, tentu saja versi gratisan tidak selengkap fasilitas yang berbayar. Ini akan sangat mempengaruhi kinerja/dan performa blog anda. Dalam wordpress yang self host, anda bisa menginstal plugin sesuka anda. Sangat banyak plugin atau yang tersedia di internet. Mulai dari yang gratisan sampai yang berbayar.

2. memiliki software antarmuka yang intuitif/menarik dan mudah digunakan

Berbeda dengan blogger yang memiliki tampilan dashboard yang sangat sederhana, di wordpress tampilan admin nya sangat fleksibel dan menarik. Bahkan bagi yang mengerti bahasa pemograman, wordpress adalah cms yang paling direkomendasikan untuk para pengembang.

3. WordPress bersifat open-source

Kenapa wordpress adalah cms yang paling direkomendasikan untuk para pengembang? karena wordpress memang bersifat open-source. Open source artinya siapa saja boleh menggunakan dan mengembangkannya.

4. Bisa menambah atau membuat fungsionalitas sendiri

bagi Anda yang pemula sekali pun dapat dengan mudah menambah fungsi-fungsi tambahasan dari wordpress dengan memanfaatkan plugin yang tersedia. mulai dari plugin untuk mempercantik tampilan atau juga untuk bisnis atau jualan online sangat banyak tersedia secara gratis.

5. Panduan atau tutorial yang Lengkap

Wordpress memiliki komunitas internet yang sangat besar jika dibandingkan dengan komunitas sejenisnya. Oleh karena itu, hampir setiap permasalahan yang terjadi (bug) di dalam wordpress akan dapat dengan segera teratasi.

6. Proses Update yang mudah dan cepat

Seperti yang saya jelaskan diatas bahwa komunitas wordpress merupakan yang terbesar sehingga setiap kali ada masalah atau perbaikannya atau bahkan jika ada pembaruan, maka wordpress selalu melakukan update. dalam melakukan update ini, pengguna tidak akan mengalami kesulitan karena di dalam wordpress sudah tersedia fitur update ke versi yang lebih tinggi baik secara otomatis ataupun secara manual.

Meskipun banyak kelebihannya, namun wordpress tetap saja masih memiliki kekurangan. Kekurangannya itu antara lain:

Kelemahan atau Kekurangan Wordpress
1. Tingkat keamanan agak beresiko
Karena sebagian besar website besar dibuat dengan wordPress, maka risiko terserang hacker juga semakin besar. Namun, Anda bisa mencegahnya dengan menginstall beberapa plugin untuk mengamankannya.
2. Sering Bug
Masih banyak plugin yang belum suport dengan versi terbaru wordpress. akibatnya jika tidak hati-hati dalam mengupdate, bisa jadi website anda akan mengalami crash atau error.
3. Loading website berat.
Ada masalah yang sering dialamai bagi pengguna wordpress ketika Anda menginstall terlalu banyak plugin. Website atau blog akan terasa berat dan lambat ketika dibuka. Namun, anda tidak perlu khawatir, karena Anda bisa mengatasinya dengan menginstall plugin caching.

Kesimpulan :

Berdasarkan uraian di atas, saya harap anda sudah bisa menentukan pilihan untuk menggunakan Platform mana yang sesuai dengan kebutuhan dan kemampuan anda. Secara pribadi, bagi anda yang belum menguasai bahasa php dan MySql, saya lebih menyarankan anda untuk menggunakan Blogger. Namun, alangkah lebih baiknya anda tetap mencoba wordpress juga. Jadi anda bisa lebih memahami kedua platform 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.