Cara Mendapatkan Kode Kupon Domain .com Seharga $1 2017

Kode Kupon Domain .com Seharga $1 - Seperti pada judul diatas, kali ini cara-mei akan memberikan kode kupon yang bisa kalian gunakan untuk membeli domain .com di godaddy.com. Dengan kode voucer ini, nantinya kalian hanya perlu membayar $1 untuk mendapatkan domain .com selama satu tahun. Mungkin bagi blogger-blogger pemula masih belum tau apa itu godaddy, namun sebaliknya, blogger-blogger yang sudah bertahun-tahun malang melintang di dunia blogging, pasti sudah tidak asing lagi dengan layanan web hosting godaddy.

Cara untuk Mendapatkan Kode Kupon Domain .com Seharga $1 ini cukup mudah saja, kalian hanya perlu memasukkan kode yang cara-mei berikan pada saat chekout pembelian domain. Ini adalah saat yang pas bagi kalian yang masih baru dalam dunia blogging untuk memulai mengembangkan blog kalian, dimulai dari membeli domain .com murah ini. Namun pasti kalian juga bertanya-tanya, kenapa cara-mei share cara-cara mendapatkan domain gratis maupun murah, sedangkan di blog cara-mei sendiri masih menggunakan domain bawaan dari blogger. Perlu kalian ketahui bahwa cara-mei sudah banyak mempunyai website dengan platform lain, dan cara-mei ingin merasakan suasana baru yaitu menggunakan domain bawaan dari blogger.

Baiklah, dari pada berlama-lama silahkan ikuti langkah-langkah dibawah ini, untuk mendapatkan domain .com murah dengan harga $1 atau jika di rupiahkan sebesar Rp13.000. Cara mendapatkannya cukup mudah dan simpel, silahkan ikuti tutorial dibawah ini.

Kode Kupon Domain .com Harga  $1 

1. Silahkan kalian langsung menuju ke godaddy.com
2. Masukkan nama domain seperti biasa (kode hanya berlaku untuk domain .com)
3. Lanjutkan sampai ke proses chekout.
4. Masukkan kode promosi dibawah ini
5. Kode Promo Domain .com : CJCCOUP99

Dan silahkan lanjutkan ke proses pembayaran seperti biasa.

Dan selamat, kalian sudah mendapatkan domain .com dengan harga $1.

Sekian tutorial tentang cara mendapat domain .com murah harga $1. Kini blog kalian bisa terlihat lebih profesional dengan domain internasional .com. Jika kalian masih merasa bingung, silahkan berkomentar dibawah ini.

Read More

Membuat Kotak Border dalam Postingan Blog Dengan Berbagai Macam Style

Membuat Kotak Border dalam Postingan Blog - Cara membuat kotak border dalam postingan blog ini sebenarnya sudah cara-mei terapkan kedalam beberapa postingan sebelumnya. Internal link yang terdapat dalam postingan cara-mei sebelumnya sebenarnya juga menggunakan css kotak border untuk meletakkan link artikel terkait. Cara membuat kotak border ini bisa kalian manfaatkan untuk berbagai keperluan. Selain untuk menjadikan background internal link, kalian juga bisa menggunakannya untuk membuat pengumuman di blog di widget atau didalam artikel maupun di halaman blog.

Degan membuat kotak border didalam blog kalian, tentu akan menjadikan tampilan blog kalian terkesan menarik dan membuat betah pengunjung yang datang ke blog kita, namun dengan catatan, gunakan seperlunya saja. Dibawah ini adalah contoh pengunaan kotak border yang ada dalam postingan cara-mei sebelumnya.

Border dalam Postingan Blog style 1

Border dalam Postingan Blog style 2

Border dalam Postingan Blog style 2

Jika kalian ingin membuat style seperti contoh diatas, kalian bisa baca Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Ke tiga style tersebut pada dasarnya mempunyai konsep yang sama, hanya bagian warna yang membedakan style satu dengan yang lain. Pada ketiga style diatas, cara-mei hanya menggunakan satu saja properti css, yaitu border. Border sendiri bisa ditambahkan dengan berbagai properti lain, agar membentuk tampilan border yang berbeda. Dibawah ini contohnya.

Dari ke empat style border pada gambar diatas masing-masing memakai style border yang berbeda, silahkan praktekkan tutorial dibawah ini.

Cara Membuat Kotak Border

Langsung saja cara-mei akan memberikan kode dari ke empat style border seperti gambar diatas. Kode html dan css akan cara-mei pisah, supaya kalian lebih mudah memahami.

 #bordersemuasisi{border:1px solid #000;padding:10px}
#borderbawah{border-bottom:1px solid #ff0000;padding:10px}
#borderbulat{border:1px solid #b3b1b1;padding:10px;border-radius:12px}
#borderkiri{border-left:7px solid #22a1f1;padding:10px;background-color:#b7dbf2} 

 <div id="bordersemuasisi">Ini adalah border semua sisi | cara-mei.blogspot.com</div>
<br />
<div id="borderbawah">Ini adalah border bawah | cara-mei.blogspot.com</div>
<br />
<div id="borderbulat">Ini adalah border bulat | cara-mei.blogspot.com</div>
<br />
<div id="borderkiri">Ini adalah border kiri | cara-mei.blogspot.com</div> 

Nah kode diatas jika dijalankan akan menjadi seperti dibawah ini :

Ini adalah border semua sisi | cara-mei.blogspot.com

Ini adalah border bawah | cara-mei.blogspot.com

Ini adalah border bulat | cara-mei.blogspot.com

Ini adalah border kiri | cara-mei.blogspot.com

Sampai disini kalian sudah membuat kotak border dengan berbagai macam style seperti diatatas. Lalu pertanyaannya, bagaimana cara menerapkan kode tersebut kedalam postingan blog? Silahkan lanjut simak tutorial berikutnya dibawah ini.

Cara membuat kotak border dalam postingan blog

1. Salin kode css diatas, dan paste tepat diatas kode ]]></b:skin>
2. Tulis artikel seperti biasa dan masuk ke menu HTML bukan Compose
3. Paste salah satu kode html diatas, pilih sesuai selera.
4. Sisipkan kata-kata sesuka kalian diantara kode html tadi.

Contoh : 

<div id="borderkiri">Baca juga : <a href="#">Cara membuat border didalam post blog</a></div>

Dengan kode diatas, maka akan tampil dalam postingan blog seperti dibawah ini :

Baca juga : Cara membuat border didalam post blog

Nah, bagaimana? cukup mudah bukan. Kalian bisa menggunakan kotak border ini untuk berbagai macam fungsi. Selain untuk dijadikan background internal link seperti contoh diatas, kalian juga bisa menggunkannya untuk membuat pengumuman di blog yang bisa dipasang di widget. Seperti yang cara-mei pasang di blog ini juga menggunakan cara diatas, namun dengan sedikit tambahan fungsi close didalamnya.

Baca juga : Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close

Jika kalian masih merasa bingung tentang tutorial diatas, silahkan berkomentar dibawah. Dengan senang hati cara-mei akan pandu dan bantu. Sampai disini dulu tutorial kali ini tentang Membuat Kotak Border dalam Postingan Blog Dengan Berbagai Macam Style. Semoga dengan tutorial diatas, membuat pengunjung betah berlama-lama di blog kalian. Terimakasih dan Happy Blogging.

Read More

Daftar Kode Kupon Diskon Hosting & Domain Terbaru Update 2017

Kode Kupon Diskon Hosting & Domain - Siapa sih yang gak mau diskon? pasti semua orang mau. Terlebih lagi artikel yang akan cara-mei bagikan ini adalah daftar kode kupon diskon hosting dan domain dari berbagai web hosting luar negeri. Tidak bisa dipungkiri bahwa penyedia layanan web hosting luar negeri memang lebih stabil dibanding web hosting lokal, hal inilah yang membuat banyak orang indonesia lebih memilih layanan web hosting luar.

Untuk kode kupon hosting dan domain yang akan cara-mei bagikan ini bersifat update, yang artinya artikel ini akan terus cara-mei update jika ada perubahan kode kupon ataupun jika ada kode kupon yang sudah tidak berlaku. Untuk itu cara-mei sarankan kalian bookmark artikel ini, dan cek setiap saat jika ingin mendapat kode diskon dari berbagai penyedia web hosting luar negeri.

Daftar Kode Kupon yang ada disini, berasal dari berbagai sumber yang cara-mei rangkum menjadi satu artikel. Tidak semua penyedia layanan web hosting akan cara-mei share disini kuponnya. Hanya beberapa layanan web hosting ternama dan paling populer dikalangan internet publisher indonesia saja yang akan cara-mei share disini.

UPDATE MARET 2017

---

Hosting & Domain Coupon Discount Voucher Promo Codes 2017

Voucher Promo Codes HOSTING 2017

Voucher Promo Codes ARVIXE.COM

1. CYBERMONDAY For any shared hosting plan receive 20% off the lifetime of the account.

Voucher Promo Codes STABLEHOST.COM

1. WHT75ONLY 75% off one time.
2. FB For any shared hosting plan receive 40% off one time of the account.
3. LOVESTABLEHOST 30% off one time.
4. US-WHT2012-25 25% off recurring.

Voucher Promo Codes HOSTGATOR.COM

1. UNLIMITED994 $9.94 off one time for first month or just penny for try hostgator hosting.
2. UPGRADE For any shared hosting plan receive 45% off one time of the account.
3. UNLIMITED25 For any shared hosting plan receive 25% off one time of the account.

Voucher Promo Codes FROGHOST.COM

1. TWITTER 30% off

Voucher Promo Codes DOMAIN 2017

Voucher Promo Codes DYNADOT

1 - 7 December

$9 .TV

Coupon: TakeTV

8 - 14 December

$7.99 .NET Register and Transfer

Coupon: Magnet

15 - 21 December

$8.75 .ORG Register and Transfer

Coupon: Cyborg

22 - 28 December

$8.15 .COM REGISTER and Transfer

Coupon: ComCrazy

$29 December - 1 January

$0.25 Off Domain Renewal

Coupon: RenewYear

Voucher Promo Codes NAMESILO.COM

Kupon Desember

BUCK Just registered and it was quick and easy.

Register or transfer a .NET domain for $7.69.

Register or transfer a .COM domain for $7.99.

Register or transfer a .ORG domain for $8.19

Voucher Promo Codes GODADDY.COM

gofkid01 Rp24,000 .COM

149word $1.49 .COM

cjcdef149u $1.49 .COM

GTNIB029 $2.95 .COM

gtnibs011 $2.95 .COM

Voucher Promo Codes NAME.COM

Kupon Abadi

PRIVACYPLEASE Free Whois Privacy Protection

Kupon Desember

JAZZERCISE Use it to receive $10.25 pricing on .COM and .NET renewals and registrations. The promo code is valid through December 31, 2014.

Voucher Promo Codes NAMECHEAP.COM

Kupon Desember

1. ICICLES (SAS Coupon) EXTRA 20% OFF Shared Hosting Original Price: $38.88 Promotional Price: $9.88 Extra Discount Price $7.90 
2. SNOWDAY (CJ Coupon) EXTRA 20% OFF Shared Hosting Original Price: $38.88 Promotional Price: $9.88 Extra Discount Price $7.90 
3. DOMFLAKES Discounted COM, NET, ORG, BIZ Registrations and Transfers
4. The coupon code entitles you to register or transfer your .com, .net, .org, .biz, .info at the following discounted rates:

- COM Registration $9.66 + $0.18 ICANN Fee

- COM Transfer $8.84 + $0.18 ICANN Fee

- NET Registration $10.71 + $0.18 ICANN Fee

- NET Transfer $9.91 + $0.18 ICANN Fee

- ORG Registration $10.21

- ORG Transfer $9.41

- INFO Registration and (or) Transfer $9.66

- BIZ Registration $10.21

- BIZ Transfer $10.03

Voucher Promo Codes SEEUNEXTYR 10% OFF VPS Hosting

The coupon code entitles you to a 10% discount for the first billing cycle of any VPS Hosting package.

Voucher Promo Codes HOSTCATS.COM

SANTASGIFT Register .NET domain at just $2.91.

---

Itulah daftar kode kupon untuk mendapatkan diskon hosting dan domain. Silahkan berkomentar jika ada kode voucer yang tidak bisa digunakan untuk mendapatkan diskon. Daftar kode kupon diatas akan cara-mei update setiap satu minggu sekali. Silahkan Bookmark halaman ini untuk memudahkan kalian mencari kode voucer hosting dan domain.

Read More

Cara Terbaru Membuat Daftar Isi Blog yang Support HTTPS

Cara Membuat Daftar Isi Blog Support HTTPS - Beberapa waktu lalu cara-mei dibuat pusing dengan pembuatan daftar isi pada blog yang selalu gagal, dan tidak muncul. Sudah lebih dari 30 yang menyediakan tutorial pembuatan daftar isi/sitemap yang cara-mei kunjungi, tak satupun yang membuahkan hasil. Setelah cara-mei pelajari, ternyata script-script daftar isi/sitemap tersebut tidak bisa dibaca atau ditampilkan dengan blog yang menggunakan protokol https. Jika sebelumnya kalian sudah memasang daftar isi/sitemap pada blog kalian, lalu kalian mengubah protokol http menjadi https, maka daftar isi yang semula bisa tampil, sekarang tidak lagi bisa tampil.

Namun cara-mei menemukan cara yang bisa menampilkan daftar isi pada protokol https, yang didapat dari forum blogger luar. Caranya cukup simple, dan hasilnya juga sama seperti tutorial-tutorial yang ada di internet, hanya saja yang ini khusus blog dengan protokol https. Berikut tutorialnya.

Baca juga : Cara Mudah Membuat Loading Effect Ala Jalantikus

Cara Membuat Daftar Isi Blog Support HTTPS

Untuk demo sitemap bisa kalian lihat langsung pada halaman sitemap di blog ini.

1. Masuk ke Blog masing-masing.
2. Pilih menu laman, dan buat laman baru.
3. Masuk ke mode HTML.
4. Copy paste kode dibawah ini.
5. Ganti url kode dibawah dengan alamat blog kalian.
6. Save dan lihat hasilnya.

 <script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script><script src="https://cara-mei.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

Dengan begitu kalian sudah bisa membuat daftar isi/sitemap yang bisa tampil dengan blog https. Berterimakasih lah kepada para pembuat tutorial update ini, karena pembuatan sitemap ini juga merupakan salah satu syarat mutlak dalam mendaftarkan blog kita ke google adsense. Cara-mei sendiri berterimakasih banyak kepada pembuat tutorial yang ada di forum blackh**world.

Sekian tutorial Cara Terbaru Membuat Daftar Isi Blog HTTPS, semoga bermanfaat dan memberi jalan keluar bagi kalian yang pusing mencari cara membuat daftar isi supaya tampil di blog. Jangan lupa share ke teman-teman seperjuangan kalian, siapa tau mereka juga membutuhkan. Happy Blogging.

Read More

Cara Mendapat Domain .design Gratis Maret 2017

Jika gagal dalam proses chekout, silahkan coba bersihkan semua riwayat browser. Gunakan Mozila dan ubah ip menjadi US, atau BACA SOLUSI EROR DIBAWAH!. Sampai hari ini 25 Maret 2017 cara-mei berhasil mendaftarkan 4 domain.

Cara Mendapat Domain .design Gratis Maret 2017 - Kali ini cara-mei akan memberikan tutorial mendapat domain gratis. Tentu saja ini merupakan kabar gembira bagi para blogger yang terbatas dana untuk mendapatkan domain. Tutorial yang cara-mei publikasikan disini didapat dari forum internet publisher terbesar di indonesia ads.id. Karena mungkin ini adalah kesempatan langka, dan masih belum banyak yang tau, maka cara-mei akan berikan tutorial bagaimana mendapat domain gratis ini.

Sejauh ini cara-mei belum menemukan cara bagaimana mengaitkan domain gratis ini ke blogspot, namun demikian, kalian masih bisa membuat web dengan platform weebly. Atau jika tidak ingin repot, kalian bisa transfer domain ke web hosting lokal. Baiklah kita langsung saja ke tutorial.

Cara Mendapat Domain .design Gratis

1. Silahkan daftar di https://www.designernews.co/
2. Jika sudah mendaftar, segera verifikasi akun melalui link yang dikirim ke email.
3. Jika sudah verifikasi langsung ke https://www.designernews.co/me/deals
4. Scroll kebawah sampai kalian melihat .design domain lalu claim deal
5. Masukkan nama domain yang kalian inginkan
6. Klik add to cart
7. Lalu pilih chekout
8. Sampai disini kalian harus membuat akun baru. Isi sesuai data diri kalian.
9. Dan selesai. Silahkan tunggu 5-10 menit sampai ada pemberitauan melalui email.

Jika kalian berhasil maka akan terlihat seperti dibawah ini :

Sampai disini kalian sudah bisa membuat website weebly dengan meng-klik tombol paling kiri yang berwarna hijau. Untuk konfigurasi supaya bisa dipakai di blogger, cara-mei belum menemukan caranya, mungkin kalian bisa kontak langsung ke adminnya. Atau nanti jika sudah menemukan caranya, akan cara-mei share di blog ini.

---

UPDATE SOLUSI ERROR PENDAFTARAN DOMAIN .DESIGN

Solusi Error Something went wrong :(

Banyak yang belum berhasil mendapat satupun domain .design gratis karena permasalahan error. Cara-mei sendiri sampai saat ini berhasil mendapatkan 4 domain dengan email berbeda. Pesan eror yang ditemui biasanya seperti dibawah ini :

Uh Oh! We are unable to process your order due to potential suspicious activity detected. Please contact support if you believe you're receiving this message in error. (001)

Permasalahan tersebut terjadi karena mungkin kalian sudah mendaftarkan domain, dan kalian ingin mendaftarkan domain lagi (ternak domain gratisan) Perlu diketahui juga bahwa penyedia layanan tersebut sangat ketat, kita dilarang untuk mendaftarkan lebih dari satu domain gratis dalam satu akun. Meskipun hal ini tidak mereka jelaskan, namun sudah pasti hal ini merupakan larangan bagi penyedia domain gratis tersebut.

Permasalahan kedua yang muncul adalah munculnya halaman dengan gambar hewan babi pada saat kalian klik tombol claim deal. Terus terang cara-mei juga mendapati sendiri eror tersebut, dan cara-mei punya solusi sendiri bagi kalian yang akan ternak domain gratis ini, mumpung ada kesempatan langka. Caranya silahkan ikuti dibawah.

1. Bersihkan semua riwayat semua browser, termasuk cache, Cookie dan data situs.
2. Gunakan aplikasi pengubah ip addres, seperti anonymoX pada mozila, dll.
3. Silahkan rubah ip addres kalian.
4. Lalu ulangi proses pendaftaran domain .design

Jika cara tersebut masih gagal. Solusi paling ampuh adalah, gunakan koneksi jaringan lain, misalnya di warnet,pinjam hp teman. Sejauh ini cara-mei menerapkan dua cara diatas dan berhasil mendapatkan 4 domain .design gratis. Semoga berhasil teman.

Sekian tentang "Cara Mendapat Domain .design Gratis Maret 2017 dan solusi eror pendaftaran domain .design gratis"

Read More

Cara Mudah Membuat Loading Effect Ala Jalantikus

Cara Mudah Membuat Loading Effect Ala Jalantikus - Kali ini cara-mei akan memberikan tutorial tentang membuat loading effect seperti yang diterapkan di salah satu situs terbesar di indonesia, yaitu jalantikus. Jika kalian perhatikan pada menu navigasi web tersebut, maka akan ada animasi seperti loading effect ketika kursor diletakkan di salah satu menu navigasi di web tersebut. Nah karena terlihat menarik dan terkesan keren, maka cara-mei akan membuat tutorialnya. Mungkin tidak bisa persis seperti yang ada di web tersebut, namun setidaknya kita juga bisa membuat loading effect yang mirip seperti jalantikus.

Kode yang akan kita gunakan terdiri dari kode css,html dan javascript. Bagi kalian yang tidak ingin loading blognya tambah lama, kalian bisa skip tutorial ini, dan baca tutorial lain tentang mempercantik tampilan blog.

Baca juga : Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Langsung saja kita menuju ke tutorial Cara Mudah Membuat Loading Effect Ala Jalantikus

1. Edit template blog kalian, dan copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>

  

/* Page Loader cara-mei*/
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}} 
 

2. Copy kode javascript dibawah ini dan paste tepat diatas kode </body>

 <script type='text/javascript'>
//<![CDATA[
// Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script> 

3. Terakhir copy kode dibawah ini, dan letakkan dimanapun kalian mau. Misalkan dibawah menu navigasi, maka cari kode menu navigasi, dan letakkan dibawah kode menu navigasi, biasanya menu navigasi di akhiri dengan kode </nav> , </navigation> , </menu> dll, tergantung template masing-masing.

 

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/> 
 

4. Save dan lihat hasilnya.

Jika kalian binggung soal penempatan kode nomor 4, silahkan berkomentar dibawah, akan saya pandu sampai bisa.
Sekian tutorial kali ini, semoga bisa mempercantik blog kalian, dan membuat kalian semangat dalam dunia blog. Jangan lupa share ke teman-teman kalian. Happy Blogging ^_^

Read More

Cara Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript

Cara Membuat Button Style Bootstrap - Bootstrap memang terkenal dengan style yang bagus,unik dan elegan, banyak sekali blog-blog yang menggunakan bootstrap sebagai pondasi blog mereka. Namun disisi lain sebelum menggunakan bootstrap, kita diwajibkan untuk memasang terlebih dahulu script bootstrap. Perlu diketahui juga bahwa pemasangan javascript hanya akan memberatkan loading blog, memang dari segi tampilan terlihat keren, namun apa gunanya jika keren namun memilki loading blog yang lambat.

Button style bootstrap sendiri bisa digunakan untuk berbagai macam fungsi, seperti tombol download,notifikasi peringatan dan lain-lain. Seperti yang sudah cara-mei bahas kemarin tentang membuat alert style bootstrap. Disini kita hanya akan menggunakan kode css saja, mengingat kita hanya akan membuat sebagian kecil dari fungsi bootstrap, yaitu membuat button dengan style bootstrap, supaya terlihat lebih elegan.

Baca juga : Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Dengan pembuatan button menggunakan css ini kita tidak perlu khawatir akan loading blog, karena kode css yang akan kita gunakan hanya sedikit, berbeda dengan script bootstrap yang jumlah kode didalamnya sangat banyak, hal itu tentunya akan membuat loading blog menjadi lambat. Silahkan simak tutorial dibawah ini.

Cara Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript

1. Pertama silahkan salin kode dibawah ini dan paste tepat dibawah kode <head>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 

2. Untuk memanggil kode button didalam artikel ataupun di widget, menggunakan html dibawah ini

  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>      

Script CSS diatas jauh lebih baik dari pada menggunakan kode javascript yang hanya akan memberatkan loading blog

Kalian hanya tinggal mengganti kata-kata didalam button tersebut dengan "Download,Unduh,Upload,dsb" dan menambahkan link sesuai kebutuhan blog kalian. Jika kalian mengalami kesulitan dalam pemasangan kode-kode diatas, silahkan tinggalkan komentar.

Sekian tutorial tentang Membuat Button Style Bootstrap Hanya Dengan CSS Tanpa Javascript. Semoga menjadikan blog kalian menjadi tidak membosankan.

Read More

Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close

Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close - Seperti yang sudah cara-mei jelaskan di artikel sebelumnya, Notifikasi alert ini berfungsi untuk memberitahukan sesuatu pada pengunjung blog, jika si admin blog mempunyai sebuah informasi yang memang ditujukan kepada para pengunjung blog. Selain itu, dengan menggunakan sistem alert di blog, maka blog kalian akan terlihat lebih elegan dan profesional.

Pada tutorial kali ini, kita hanya akan menggunakan kode css dan html saja, tanpa menggunakan kode javascript. Tentunya hal ini tidak akan berpengaruh terhadap kecepatan loading blog, mengingat pembuatan sistem alert di blog hanya menggunakan css dan html saja.

Masih sama seperti artikel sebelumnya, pemasangan notifikasi alert ini bisa kalian terapkan didalam artikel, atau didalam postingan. Baca postingan sebelumnya jika belum paham.

Baca juga : Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Perlu diketahui juga, bahwa sistem alert yang akan kita buat sudah mobile friendly atau responsive, jadi kalian tidak perlu takut ukuran akan rusak, jika dibuka melalui perangkat mobile. Jika nantinya kalian kurang suka dengan komposisi warna, kalian juga bisa merubah sendiri sesuka hati, disini cara-mei akan memberikan kodenya yang nanti bisa kalian edit atau kembangkan sendiri.

Cara Membuat Notifikasi Alert Dengan Tombol Close

1. Silahkan salin kode css dibawah ini, dan pastekan tepat diatas kode ]]></b:skin>

 .alertmerah {
    padding: 20px;
    background-color: #f44336;
    color: white;
}
.alerthijau {
    padding: 20px;
    background-color: #6abc6e;
    color: white;
}
.alertbiru {
    padding: 20px;
    background-color: #47a8f5;
    color: white;
}
.alertorange {
    padding: 20px;
    background-color: #ffa92c;
    color: white;
}
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.closebtn:hover {
    color: black;
} 

2. Letakkan kode html berikut kedalam widget dimana kalian ingin memasang alert ini. Bisa di header,sidebar,footer dan semua yang ada kolom widget.

 <h2>Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close</h2>

<p>Klik tombol "x" untuk menutup pesan</p>
<div class="alertmerah">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<br />
<div class="alerthijau">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<br />
<div class="alertbiru">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<br />
<div class="alertorange">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div> 

3. Jika kalian ingin memasang kedalam postingan, maka gunakan mode HTML dalam menulis artikel, bukan melalui mode Compose.

Kalian bisa memodifikasi sendiri css diatas, misalkan ingin menambahkan border,mengganti warna, dll. Sistem Alert ini cocok digunakan untuk blog yang sudah ramai pengunjung, namun jika hanya untuk menambah kesan elegan, kalian juga bisa menerapkan cara ini untuk blog kalian.

Read More

Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Cara Membuat Alert di Blog - Halo sahabat blogger dimanapun kalian berada, kali ini cara-mei.blogspot.com akan berbagi cara membuat sistem alert di blog. Cara ini nantinya bisa kalian terapkan dimanapun, baik wordpress,blogspot dan cms lainnya yang mendukung html dan css. Cara membuat alert ini sebenarnya terinspirasi dari sebuah tutorial di www.w3schools.com, hanya saja di sana diharuskan memasang script bootstrap terlebih dahulu, dan seperti yang kalian ketahui bahwa script bootstrap itu berbentuk javascript dan didalamnya terdapat banyak sekali kode javascript,html,css, tentunya hal ini akan memberatkan loading blog kita.

Nah pada tutorial ini, saya akan mencoba membuat alert dengan style bootstrap tersebut tanpa menggunakan script apapun, hanya menggunakan css saja, karena yang kita buat hanya alert, maka kita tidak memerlukan script-script bootstrap lainnya.

Style alert ini juga sudah banyak dipakai website-website ternama seperti lk21 lho, website tersebut menggunakan sistem alert sebagai pemberitauan kepada seluruh pengunjung website. Kalian nanti juga bisa menggunakan style alert ini untuk membuat pengumuman di blog kalian.

Oke tanpa panjang lebar, langsung saja kita menuju ke tutorial pembuatan alert dengan style bootstrap.

Cara Membuat Alert di Blog

1. Silahkan buka blog kalian, dan masuk ke edit template.

2. Copy kode dibawah ini dan paste kedalam template kalian. Paste tepat diatas kode ]]></b:skin>

#sukses{background-color:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;padding:15px}
#info{background-color:#d9edf7;border:1px solid #bce8f1;border-radius:5px;padding:15px}
#warning{background-color:#fcf8e3;border:1px solid #faebcc;border-radius:5px;padding:15px}
#danger{background-color:#f2dede;border:1px solid #ebccd1;border-radius:5px;padding:15px} 

3. Save template.

Nah dengan 3 cara diatas kalian sudah mendapatkan kode css untuk membuat notifikasi alert di blog, sekarang tinggal bagaimana penerapannya kedalam tampilan blog. Kalian bisa menampilkannya didalam postingan seperti contoh dibawah, dan kalian juga bisa menempatkkannya didalam widget blog kalian.

Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Untuk cara menempatkan alert didalam widget kalian cukup copy kode html dibawah ini dan tempelkan ke widget blog kalian.

<div id="info">cara-mei.blogspot.com kini berganti domain menjadi cara-mei.org</div>

Keterangan : kalian bisa mengganti kode info dengan kode lain di css, seperti sukses,warning dan danger, kalian juga bisa edit sesuka hati, seperti mengganti warna background warna border dan menambahkan elemen css lainnya.

Jika kalian ingin menempatkan alert didalam postingan caranya sama, kalian cukup copy kode html diatas dan kalian paste di dalam artikel kalian (paste dalam mode html, bukan compose).
Dengan memasang alert di blog pasti akan membuat blog kalian terlihat lebih elegan dan keren, pemasangan alert di blog ini sebenarnya bertujuan untuk menginformasikan kepada para pengunjung website, jika pemilik website mempunyai suatu informasi yang harus ditujukan kepada pengunjung website.

Nah sekian dulu tutorial kali ini tentang Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript. Semoga menjadikan blog kalian lebih elegan dan profesional.

Read More