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.

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.

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 ^_^

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.

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.

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.