Terkadang bagi seorang Bloger alasannya ialah terlalu sering melihat tampilan blognya ibarat itu-itu saja akan merasa adanya rasa bosan. Untuk memperindah tampilan dan postingan terlihat lebih rapih ada tips panduan untuk membuat kotak script yang di sematkan dalam postingan blog. Kotak box sendiri mampu disebut kutipan atau semacam blockquote, namun mampu digunakan untuk menempatkan arahan Script sejenis arahan HTML, CSS atau bahasa pemograman lainnya.
Biasanya saat menempatkan arahan script ke dalam postingan blog secara pribadi diantara isi artikel akan membuat error atau tidak tampil sama sekali. Hal tersebut diakibatkan anda menempatkan arahan script tanpa melalui metode HTML. Agar tidak menjadi error maka dibuatlah kotak script yang menjadi pemisah antara isi artikel dan arahan script.
Panduan Cara Membuat Kotak Script Dalam Postingan
Banyak sekali jenis tampilan kotak script yang mampu anda gunakan untuk merubah tampilan artikel anda menjadi lebih rapi dan terlihat keren. Jika anda akan merubah tampilan kotak script sedikit berbeda atau membuat warna yang lain sesuai kesukaan anda maka anda harus mempelajari terlebih dahulu bagaimana cara mengganti warna tampilan kotak script dan mengganti border kotak script tersebut :
- Border ialah untuk suatu garis yang membentuk kotak, ketebalan border mampu anda diganti dengan memperbesar px nya.
- Kode Double (bentuk kotak script) mampu anda ganti dengan menggunakan arahan dotted, solid, groove, inset, ridge maupun dashed.
- Padding ialah suatu arahan html yang berfungsi untuk menentukan ukuran lebar maupun panjang kotak script dengan cara mengganti ukuran px nya.
- Background Color ialah suatu arahan html yang bekerjasama dengan warna kotak script itu sendiri (contoh arahan warna 6 digit "#7d3c98" dan arahan warna 3 digit "#fff")
- Text Align ialah untuk merubah posisi text apakah akan rata kiri kanan atau ditengah dengan mengganti left atau right.
Kode HTML untuk membuat Kotak Script
Ada beberapa pola buat anda, silahkan ganti tampilan sesuai selera anda baik border atau pun mengganti warna ibarat yang sudah admin jelaskan diatas sebelumnya.
Kotak Script Style Minimalis
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Kode Script Anda Di Sini</div>
Kotak Script Style Left Border
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
Kotak Script Style Dotted
<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Kode Script Anda Disini</div>
Kode Script Anda Disini</div>
Kotak Script Style Double
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
Kotak Script Style Dashed
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
#aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
Kotak Script Style Scroll
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
Kode Script Anda Disini…… </div>
Kode Script Anda Disini…… </div>
Kotak Script Style Highlight
Panduan Cara Membuat Kotak Script Ke Dalam Postingan Blog
Posted by Segaris Informasi on Selasa, 25 Juli 2017
Agar blog anda lebih terlihat keren maka diharapkan editing pada template. Sesuai tema diatas bagaimana cara membuat widget artikel populer (popular post) semoga terlihat keren dan dapat membuat pengunjung tertarik untuk melihat artikel pada adegan widget populer pada blog anda. Banyak penyebab mengapa anda harus melaksanakan sedikit meningkatkan secara optimal pada widget-widget tertentu.
 |
| Contoh jenis widget artikel populer |
Alasan klasik mereka ingin merubah tampilan artikel populer salah satunya alasannya bosan melihat yang itu-itu saja atau ingin desain blognya menjadi lebih tampil elegan. Mengganti widget berarti anda harus mengganti arahan CSS tertentu yang bekerjasama dengan artikel populer. Setiap template memiliki arahan CSS dan HTML yang berbeda-beda, namun hampir seluruhnya dalam arahan CSS menggunakan judul yang hampir sama.
Mengganti arahan widget popular post tidak akan memberatkan loading blog anda. Tergantung dengan pengaturan anda sendiri. Dalam menu Tata Letak blogger sendiri terdapat pengaturan apakah artikel populer anda akan ditampilkan tanpa gambar, judulnya saja atau judul berikut snipet isi postingan. Jika anda belum paham silahkan menuju Tata Letak pilih Widget Popular Post (tergantung judul yang anda berikan) dan tinggal anda pilih tampilan mana yang anda sukai berapa artikel yang ingin tampil dan kemudian SIMPAN.
Saya akan menawarkan contohnya saja jenis widget artikel populer yang ada dalam blog ArtikaFile ini dan di ambil dari sebuah website penyedia template bung frangki.
Ganti Kode CSS artikel populer (popular post) dengan arahan menyerupai dibawah ini :
Mengganti arahan widget popular post tidak akan memberatkan loading blog anda. Tergantung dengan pengaturan anda sendiri. Dalam menu Tata Letak blogger sendiri terdapat pengaturan apakah artikel populer anda akan ditampilkan tanpa gambar, judulnya saja atau judul berikut snipet isi postingan. Jika anda belum paham silahkan menuju Tata Letak pilih Widget Popular Post (tergantung judul yang anda berikan) dan tinggal anda pilih tampilan mana yang anda sukai berapa artikel yang ingin tampil dan kemudian SIMPAN.
Kode CSS Widget Artikel Populer
Saya akan menawarkan contohnya saja jenis widget artikel populer yang ada dalam blog ArtikaFile ini dan di ambil dari sebuah website penyedia template bung frangki.
Ganti Kode CSS artikel populer (popular post) dengan arahan menyerupai dibawah ini :
/* Popular Post */
.PopularPosts ul{font-family:'Work Sans', sans-serif;list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em!important;list-style:none;border-top:1px solid #ddd;padding:20px 0 0}
.PopularPosts ul li a:hover {color:#999!important;}
.PopularPosts li a{color:#333 !important;font-weight:700 !important;font-size:16.40px !important;list-style:none;line-height:1.2em;display:block;overflow:hidden}
.PopularPosts ul li img {width:90px;height:90px;float:left;display:inline-block}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:90px;height:90px;border-radius:99em;overflow:hidden;float:left;margin:-10px 20px 0 0!important;position:relative}
.PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}
.PopularPosts .item-title {padding:0;margin:0;text-align:left}
.PopularPosts ul{font-family:'Work Sans', sans-serif;list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em!important;list-style:none;border-top:1px solid #ddd;padding:20px 0 0}
.PopularPosts ul li a:hover {color:#999!important;}
.PopularPosts li a{color:#333 !important;font-weight:700 !important;font-size:16.40px !important;list-style:none;line-height:1.2em;display:block;overflow:hidden}
.PopularPosts ul li img {width:90px;height:90px;float:left;display:inline-block}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:90px;height:90px;border-radius:99em;overflow:hidden;float:left;margin:-10px 20px 0 0!important;position:relative}
.PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}
.PopularPosts .item-title {padding:0;margin:0;text-align:left}
Untuk memudahkan pencarian arahan CSS cukup tekan CTRL+F pada keyboard dihalaman edit html template anda dan ketikan kata popular post.
Setelah anda ganti arahan tersebut kemudian simpan.
Dalam mengedit template sebaiknya anda backup terlebih dahulu, atau dikala anda simpan jangan keluar dari halaman edit html terlebih dahulu. Lihat jadinya dahulu kalau tidak sesuai anda cukup tekan CTRL+Z dan Kode CSS yang diganti tadi akan kembali menyerupai semula dan SIMPAN.
Cara Merubah Warna Template
Ketika anda berhasil menerapkannya berarti anda mampu mencari widget artikel populer yang anda sukai di penyedia template lainnya. Terima kasih anda sudah membaca bagaimana cara membuat widget artikel populer (popular post), silahkan berkomentar kalau belum ada yang di mengerti.
Artika Juli 11, 2017 Riyyan seo Banjarmasin, Kalimatan Selatan
