Cara Membuat Info Box Sederhana - ACREZY

Pada tutorial sebelumnya saya membagikan cara membuat Marquee Info.

Dan pada kali ini Cara Membuat Info Box Sederhana, jadi agak mirip dengan marquee info dari sisi penyampaian informasi.

Jika marquee akan bergerak seperti running text tetapi kalo info box posisi akan tetap.

Manfaat dari info box juga besar,
berguna untuk menyampaikan informasi penting kepada pengunjung apa yang sedang terjadi berkaitan dengan situs tersebut.

Saya menjumpai info box ini pada web fansubs ataupun fanshare, dan saya pun sedikit terinspirasi.

Untuk pembuatannya pun mudah.

Silahkan ikuti langkah-langkah berikut ini

Cara Membuat Info Box Sederhana

---

Pertama kamu harus meletakan kode berikut ini sebelum </head>

Menggunakan Font Awesome untuk menampilkan icon pada Info Box

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

Selanjutnya,
Kode html dari Info Box adalah sebagai berikut

Kamu bisa memasangnya di widget atau manapun sesuai keperluan kamu sendiri!

    <div id='infocuk'>
      <div class="title">
        <h3><i class="fa fa-info"></i> Info</h3></div>
      <div class="box">
         <h4>Selamat datang di AnimeSubs</h4>
      <br><i class="fa fa-download"></i> Beberpa rilisan sudah update, silahkan pilih server Gdrive untuk mengunduh<br><i class="fa fa-question-circle-o"></i> Untuk request silahkan hubungi fanpage <a href="https://acrezyblog.blogspot.com/" target="_blank">Kami</a> atau ke halaman yang sudah disediakan<br><i class="fa fa-heart"></i> Selamat menikmati rilisan dari kami</br>
      </div>
    </div>

Yang saya tandai berwarna merah, kamu ganti dengan kata atau kalimat punyamu dan Icon yang kamu perlukan.

Kemudian letakan kode CSS berikut tepat sebelum kode ]]></b:skin> atau </style>

/* CSS Info Box - Acrezy Blog */
#infocuk{background: #736356;border-top: 4px solid #736356;margin: 2px 0px;font-family: Verdana, Geneva, sans-serif;}
#infocuk h4{font-size:16px;line-height:1.1;margin:3px 0 1px 3px;}
#infocuk .box{padding: 10px;color: #fff;font-size: 14px;}
#infocuk a{color:#ccc;}
#infocuk .title{background-color:#362e2c;color: #fff;padding: 1px 0px 5px 5px;text-align:left;}
#infocuk .title h3{font-size:16px;margin:10px;line-height:1.1;font-weight:bold;padding:0;}

Jika sudah jangan lupa Simpan dan lihat hasilnya.

Untuk demonya kamu bisa lihat di bawah ini

Result

Itulah tutorial Cara Membuat Info Box Sederhana, semoga bermanfaat dan sampai jumpa!