×

Owner / Author / Admin / etc

    Muhamad Arsad    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Blogger, Template, Widget, Internet, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Note Box Style Tebaru Di Blogger


Cara Membuat Note Box Style Tebaru Di Blogger - Hallo Sahabat Blogger di kesempatan kali ini saya ingin membuat Tutorial tentang Membuat Note Box Style Tebaru Di Blogger

Sebenar nya sudah banyak juga yang membut tutorial teng Cara Membuat Note Box Style Tebaru Di Blogger namun yang saya bagikan ini memiliki tampilan yang Responsive dan menarik tentunya.

Disini kita hanya perlu menambahkan FonteAwasome di template blogger milik sabat dan menambahkan css maka sudah tapil Note Box, baiklah langsung saja kita ke pembahasan nya
Jika Di Template Blogger Sahabat Sudah Memasang Code FontAwesome Maka Sahabat Tidak perlu Memasangnya Lagi

Cara Membuat Note Box Style Tebaru Di Blogger

1. Silahkan buka menu template sahabat blogger
2. Kemudian Buka Edit HTML
3. Silahkan cari kode </head>
4. Kemudian Copy kode dibawah ini dan taruh tepat diatas kode </head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Tahap Pemasangan Css Note Box Style Terbarunya 

1. Silahkan Copy Kode CSS dibawah ini 
2.Kemudian kamu cari Kode ]]></b:skin>
( Untuk mencari bisa menggunkan CTRL + F )
3. Kemudian Pastekan Kode CSS Tepat diatas ]]></b:skin>

/* MTBOX */
.mtbox{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px}
.mtbox:before{float:left;font-size:32px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:12px}
/* MTBOX 1 */
.mtbox1:before{color:#039be5;content:'\f005';}
.mtbox1{background:#e1f5fe;color:#0288d1}
/* MTBOX 2 */
.mtbox2:before{color:#536dfe;content:'\f0eb';}
.mtbox2{background:#e8eaf6;color:#3f51b5}
/* MTBOX 3 */
.mtbox3:before{color:#78909c;content:'\f1b0'}
.mtbox3{background:#eceff1;color:#546e7a}
/* MTBOX 4 */
.mtbox4:before{color:#0f9d58;content:'\f087'}
/* MTBOX 5 */
.mtbox5:before{color:#0f9d58;content:'\f00c'}
/* MTBOX 6 */
.mtbox6:before{color:#00bfa5;content:'\f19d'}
.mtbox6{background:#e0f2f1;color:#00897b}
/* MTBOX 7 */
.mtbox7{background:#f3e5f5;color:#9c27b0}
.mtbox7:before{color:#d500f9;content:'\f031'}
/* MTBOX 8 */
.mtbox8:before{color:#ff6e40;content:'\f06a'}
.mtbox8{background:#fff3e0;color:#dd2c00}
/* MTBOX 9 */
.mtbox9:before{color:#dd2c00;content:'\f088'}
/* MTBOX 10 */
.mtbox10:before{color:#dd2c00;content:'\f05e'}
/* Close Button */
.tutup{position:absolute;top:5px;right:5px;width:17px;height:17px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:.3;cursor:pointer}
.tutup b,.tutup a{font-weight:500;}
.tutup:hover{opacity:1}
.tutup:focus,.tutup:active{outline:0}
/* Note Icon Animation on Hover */
.mtbox1:hover:before,.mtbox2:hover:before,.mtbox3:hover:before,.mtbox4:hover:before,.mtbox5:hover:before,.mtbox6:hover:before,.mtbox7:hover:before,.mtbox8:hover:before,.mtbox9:hover:before,.mtbox10:hover:before{-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

Tahap Pemasangan Note Box

1. Masuk ke menu postingan
2. Kemudian pilih "Entri Baru"
3. Pilih " Mode HTML " bukan " Compose "
4. Lebih jelasnya silahkan lihat gambar dibawah ini
Mode HTML

5. Kemudian masukan kode pemanggil nya dibawah ini
<div class="mtbox mtbox#">
 ...Masukan teks anda disini... 
<div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>

6. Untuk menghilangkan tombol close nya silahkan hapus kode dibawah ini
<div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>

Ganti kode # dengan angka yang sahabat inginkan misal: 1-10

Untuk demo silahkan dilihat dibawah ini

...Masukan teks anda disini Angka 1...
...Masukan teks anda disini Angka 2
...Masukan teks anda disini Angka 3...
...Masukan teks anda disini Angka 4...
...Masukan teks anda disini Angka 5...
...Masukan teks anda disini Angka 6...
...Masukan teks anda disini Angka 7...
...Masukan teks anda disini Angka 8...
...Masukan teks anda disini Angka 9...
...Masukan teks anda disini Angka 10...

Penutup

Nah demikian lah Tutorial yang dapat saya bagikan mohon maaf jika ulasan Tentang Cara Membuat Note Box Sytle Membingungkan sahabat, silahkan tinggalkan komentar sahabat dibawah ini trimakasih sudah berkunjung.
Admin Ganteng Tapi Jomlo :v
  • Facebook
  • Twitter
  • Instagram
  • 0 Response to "Cara Membuat Note Box Style Tebaru Di Blogger"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel