Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Cara Membuat Kotak Pemberitahuan Responsive pada Blogger

Posting Komentar

 


HiiroDev - halo temen - temen di artikel kali ini saya akan membagikan cara membuat kotak pemberitahuan, jadi kalian bisa isi teks atau isi tulisan - tulisannya sesuai kebutuhan kalian dan juga bisa di kasih link/url.

Oke sebelum ke langkah - langkanya kalian wajib memasang stylesheet font awesome ya, untuk scriptnya seperti di bawah ini kalian bisa copy pastekan di atas kode <head> atau sandingkan dengan kode yang sama seperti ini <link href= .
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Jika kode di atas sudah ada kalian bisa melewatinya.

Kita ke tahap eksekusi, copy pastekan kode css di bawah ini di atas </style> atau </b:skin>
.notice {
    overflow: hidden;
    background: #0078c1;
    padding: 5px;
    margin: 5px 0;
    font-size: 14px;
    line-height: 23px;
    color: #fff;
    font-family: segoe ui;
}

.noticejdl {
    display: block;
    font-size: 14px;
    font-weight: 700;
    background: #504b47;
    color: #fff;
    line-height: 30px;
    margin: -5px -9px 5px;
    padding: 0 7px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-bell:before {
    content: "\f0f3";
}

.notice a {
    color: #2b2b2b;
    font-style: oblique;
}
Setelah itu kalian masukan kode htmlnya yang ada di bawah ini di bagian widget manapun 

<!-- Widget Notice By Hiirotaku -->
<div class="notifku">
<div class="notice">
<div class="noticejdl"> 
<i class="fa fa-bell"></i> Pemberitahuan</div> 
<font color="red">■</font> Menjaga Kesehatan dan Bekerjasama bersama memotong rantai Covid-19 
<br> <font color="red">■</font> Selalu mencuci tangan dan memakai Masker ketika beraktifitas
<br> ■ Request bisa disini <a href="LINK URL">Request!!</a>
<br> ■ Bingung nggak bisa download cek disini <a href="LINK URL">Cara Download</a>
<br> ■ Cara mengatasi <a href="LINK URL">Limit GoogleDrive</a>
<br> ■ Proses Re-Upload Sedang kami kerjakan jadi Dorama Lawas akan ter UP ke Home<br></div></div>
Keterangan :
Masukan LINK URL dengan url kalian.


Sekian dari tutorial yang sangat sederhana ini sebenarnya ada cara lagi membuat kotak box pemberitahuan di bawah postingan, jadi setiap kalian membuat artikel dibawahnya akan otomatis terdapat kotak pesan pemberitahuan, mungkin di next tutorial akan saya share caranya..

Untuk css yang saya dapat dari doramaindo ya.. 

Posting Komentar untuk "Cara Membuat Kotak Pemberitahuan Responsive pada Blogger"