Belajar Desain Blog Menciptakan Kotak Baca Juga

By | Desember 10, 2017
Membuat kotak kawasan link atau atau kotak konten, sanggup juga menciptakan kotak kawasan menaruh link maupun konten blog lainnya menyerupai pada blog ini  akan menghasilkan sebuah tampilan yang keren dan indah. Serta akan memudahkan pengunjung untuk melaksanakan penelusuran pada blog.
Contoh kotak yang dimaksud menyerupai ini

diatas merupakan pola dari kotak untuk menaruh sebuah link, selain itu sanggup juga dipakai sebagai kawasan menaruh daftar isi menyerupai pada wikipedia. Bisa juga dimanfaatkan sebagai kotak menaruh konten blog. Sebagai kotak link fungsinya sangat mudah, saat teks tersebut disorot, maka akan mengarah kepada goresan pena yang dimaksudkan.

Perlu diingat bahwa kotak yang akan kita buat harus diisi secara manual, bukan otomatis

Jika anda berkehendak memasukkan secara otomatis (misalkan untuk artikel terkait). Mungkin sanggup saja, tetapi, oleh aku sendiri belum aku coba. Barangkali ada dari pembaca yang sudah mencoba sanggup di ceritakan ceritanya melalui kolom komentar dibawah postingan ini.

Bagaimana cara membuatnya?

Cara membuatnya cukup mudah, pembaca hanya perlu memasukkan isyarat CSS berikut di blog. Untuk caranya memasukkannya aku kira sudah pada tahu semua.

  1. Buka Edit Tamplate Blog anda
  2. Menggunakan Ctrl + F cara ]]></b:skin>
  3. Letakkan isyarat CSS sempurna di atas (Kelompok CSS)
  4. Terakhir simpan tamplate blog
Kode CSS Seperti berikut ini

 /* kotaklink Mulai*/ .kotaklink {background: rgb(246, 247, 249);     border-top: 7px solid #219FDE;border-bottom: 2px solid #219FDE; /* tebal dan warna garis*/     margin: 25px 20px 10px 20px;     padding: 5px 15px 0px 0;     position: relative;     color:#383838;} .kotaklink:before {display: block;border-radius: 5px;content: "Tahukah Kamu?"; /* sanggup diganti dengan kata yang anda sukai*/     text-align: center;     font-size: 16px;width: 130px;     font-weight: bold;background: #219fde;     position: absolute;     border: 2px solid #219fde;left: 25px;top: -20px; /* pengaturan posisi kotak atas*/     color: #fff;} .kotaklink cite {text-align: left;color: #999999;     font-size: 12px;     display: block;     margin-top: 5px;} .kotaklink cite:before {content: "2014 2009";}/* costumisasi pada badian bullet*/ .kotaklink ul {padding: 0 0 0 15px;} .kotaklink ul li {border-bottom:1px dashed #219FDE; /* posisi bullet*/     line-height:1.75em;     list-style:none;     padding: 0 0 0px;} .kotaklink a:visited {color: #585858;} /* warna link*/ .kotaklink ul li:before{content:'f138';font-family:fontawesome;position:absolute; /* mengatur bullet dan animasi*/     margin:0 9px 0 -28px;     color:#219fde;overflow:hidden;     transition:all .3s} .kotaklink ul li:hover:before{content:'f138';font-family:fontawesome;      -webkit-animation:bounceright .3s alternate ease infinite;     animation:bounceright .3s alternate ease infinite}/* Pengaturan abjad dalam kotak*/ /* kotaklink Selesai*/ 
Setelah dimasukkan isyarat tersebut anda hanya tinggal melaksanakan pengetikan artikel menyerupai biasanya. Jika ada bab yang anda kurang suka sanggup anda edit sendiri. Karena dalam CSS sudah aku beri keterangan.
Cara penggunaan.

Setelah melaksanakan penulisan entri diblog maka anda sanggup memanggil kotaknya memakai div class dengan isyarat panggilan kotaklink. Mungkin sudah banyak blogger yang tahu caranya. Tetapi bagi yang belum tahu caranya sanggup perhatikan pola dibawah ini

Contoh :

 <Div class=’kotaklink'> <ul> <li>...............tuliskan link disini............</li> <li>...............tuliskan link disini............</li> </ul> </div>

Bagi yang masih belum terperinci sanggup anda simak gambar berikut.

Jika masih tidak keluar costomisasi bulletnya anda diharuskan terlebih dahulu menginstal fontawesame pada tamplate blog anda

 Membuat kotak kawasan link atau atau kotak konten Belajar Desain Blog Membuat Kotak Baca Juga
Langkah Pertama
Langkah Pertama anda sanggup tulis div class=’kotaklink’ (kebetulan sebelumnya baca juga). Setelah itu ubah dari Compose menuju HTML
 Membuat kotak kawasan link atau atau kotak konten Belajar Desain Blog Membuat Kotak Baca Juga
Langkah Kedua
Langkah Kedua setelah masuk HTML Perhatikan tanda kuning lengkapi isyarat div yang masih belum lengkap tadi dengan <div class=’kotaklink’> ditutup dengan </div>


Bagitu pembaca… Semoga Bermanfaat Buat Anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *