DDunia Komputer

Cara Mengaplikasikan Css di Blog. Mudah dan Lengkap

  • 8 September 2019
0
Shares
0
0
0
0
0
0
0
CSS and Blog

Hai sobat inspirasi, sebelumnya terimakasih telah berkunjung dan lihatlah artikel kami lainnya yang sangat menginspirasi. disini kami akan membahas Cara Mengaplikasikan Css di Blog. Mudah dan Lengkap atau Cara menggunakan Css untuk Blog.

Jika Anda belum memahami  HTML dan CSS bisa lihat dulu artikel dibawah ini :

Baca juga : Belajar bahasa pemrograman HTML, CSS mudah dan lengkap
Baca juga : Kamus bahasa pemrograman dasar tag-tag HTML

oke sampai disini saya harap anda sudah memahami HTML dan CSS. langsung saja kami akan berikan contohnya untuk mengaplikasikan CSS pada Blog anda :
Biasanya penggunaan Css pada Blog membuat frame untuk postingan. contoh gambar dibawah ini :

cara menggunakanikan css di blog

Untuk script CSS nya berikut ini

Example

.w3-example{background-color:#f1f1f1;padding:0.01em 16px} .w3-code{font-family:Consolas,”courier new”;font-size:16px;line-height:1.4;width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #009688;word-wrap:break-word} .w3-btn,.w3-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none !important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap} .w3-btn.w3-disabled,.w3-btn-block.w3-disabled,.w3-btn-floating.w3-disabled,.w3-btn:disabled,.w3-btn-floating:disabled,.w3-btn-floating-large.w3-disabled,.w3-btn-floating-large:disabled{cursor:not-allowed;opacity:0.3} .w3-btn.w3-disabled *,.w3-btn-block.w3-disabled,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none} .w3-btn.w3-disabled:hover,.w3-btn-block.w3-disabled:hover,.w3-btn:disabled:hover,.w3-btn-floating.w3-disabled:hover,.w3-btn-floating:disabled:hover, .w3-btn-floating-large.w3-disabled:hover,.w3-btn-floating-large:disabled:hover{box-shadow:none} .w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .w3-btn-block{width:100%} .w3-btn,.w3-btn-floating,.w3-btn-floating-large{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px} .w3-btn-floating{width:40px;height:40px;line-height:40px} .w3-btn-floating-large{width:56px;height:56px;line-height:56px} .w3-btn-group .w3-btn{float:left} .w3-btn.w3-ripple{position:relative} .w3-margin-bottom{margin-bottom:16px !important}

Copy Script CSS diatas lalu pastekan di blog anda dengan cara :
1. login ke akun blog anda di bloger
2. Setelah masuk, klik – Tema
3. Klik – Sesuaikan
4. Klik – Lanjutan
5. Scrol kebawah sampai menemukan tambahkan CSS dan Klik
6. Pastekan Script CSS di dalamnya.

Image result for css bloger

Tahap memasukan Script CSS di dalam Blog sudah selesai sekarang tinggal di gunakan dalam postingan sobat dengan cara memanggilnya menggunakan tag HTML dengan cara buat postingan baru.  Setelah isi postingan lalu pilih HTML, Carilah hal yang sobat ingin masukan ke dalam frame dan panggil/link an CSS yang telah dibuat tadi dengan cara dibawah ini :

Example

<div class=”w3-example”>
<h3>Example</h3>
<div class=”w3-code notranslate htmlHigh”>
#isi dalam frame
</div>
</div>

Setelah selesai coba sobat simpan lalu pratinjau, dan lihatlah perbedaannya.
Sampai disini semoga sobat sudah memahami cara Mengaplikasikan Css di Blog.  Script CSS di atas bisa sobat modifikasi atau diubah sesuai keinginan sobat.  Jika anda belum bisa merubah CSS nya bisa sobat belajar dahulu di artikel sebelumnya yaitu :

Baca juga : Kamus bahasa pemrograman dasar CSS lengkap dan mudah

Mungkin itu saja Cara Mengaplikasikan Css di Blog dengan Mudah dan Lengkap . Semoga artikel ini bermanfaat, Jika tidak keberatan mohon clik iklan di web blog ini, demi keberlangsungan web blog ini.. 🙂 terimakasih

0 Shares:
Share 0
Tweet 0
Pin it 0
Share 0
Share 0
Share 0
5 comments
Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

You May Also Like