Skip to main content

Buat Border Dalam Postingan Blog

Dalam membuat postingan sebuah blog, kita biasanya terbiasa untuk bereksperimen mencoba semua fitur penulisan yang di sediakan oleh blogger. Selain karena latar belakang coba-coba, kegiatan kita dalam mengeksplorasi semua fitur penulisan postingan juga dikarenakan oleh keinginan kita untuk membuat tampilan postingan blog terlihat lebih menarik dan mengundang pengunjung untuk membaca. Menyisipkan gambar, memberi tabel dalam postingan, memberi video, memberi quote (keterangan kata), dsb. Akan tetapi, karena keterbatas fitur kita juga cenderung terpaku pada kreasi yang itu-itu saja. Kita harus menemukan sendiri bagaimana cara membuat ini, cara menambahkan itu dalam rangka mengemas tampilan postingan blog agar terlihat lebih menawan.


Salah satu contohnya adalah membuat border dalam postingan blog. Border berguna untuk memberikan bingkai pada tulisan agar terlihat lebih terfokus dan menawan. Dengan pemberian border juga akan membuat tulisan lebih mudah untuk dipahami poin pentingnya. Akan tetapi, karena fitur untuk membuat border belum disediakan oleh blogger, maka kita harus membuatnya sendiri dengan beberapa kode HTML yang perlu ditambahkan.

Bagaimana cara membuat border dalam postingan blog ini?

Pertama, masuk ke akun blogger kita.
Klik entri baru.
Saat masuk dalam halaman untuk menulis postingan blog, jangan masuk ke bagian compose, tetapi masuk lah ke bagian edit HTML untuk menuliskan kode HTML yang digunakan untuk membuat border yang diinginkan beserta tulisan yang akan muncul di dalam border tersebut. Setidaknya ada empat pilihan jenis border yang dapat kita gunakan, yaitu ;

Bentuk I

Kode HTMLnya adalah sebagai berikut ;

<div style="border: 1px #000000 solid; padding: 10px; background-color: #CEF6CE; text-align: left;"> isi tulisan yang tampil dalam border </div>

Contoh hasilnya ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)

Bentuk II

Kode HTMLnya adalah sebagai berikut ;

<div style="border: 1px #000000 dotted; padding: 10px; background-color: #CEF6CE; text-align: left;"> isi tulisan yang tampil dalam border </div>

Contoh hasilnya ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)


Bentuk III

Kode HTMLnya adalah sebagai berikut ;

<div style="border: 1px #000000 dashed; padding: 10px; background-color: #CEF6CE; text-align: left;"> isi tulisan yang tampil dalam border </div>

Contoh hasilnya ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)

Bentuk IV

Kode HTMLnya adalah sebagai berikut ;

<div style="border: 2px #000000 solid; padding: 10px; background-color: #CEF6CE; overflow: auto; height: 50px; width: 300px; text-align: left;"> isi tulisan yang tampil dalam border </div>

Contoh hasilnya ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)

Keterangan :
  1. Kode HTML border: 1px #000000, menunjukan warna dari border yang kita gunakan.
  2. Kode HML padding: 10px, menunjukan jarak bagian dalam dari border dengan body.
  3. Kode HTML background-color: #CEF6CE, menunjukan warna yang digunakan sebagai background dalam border yang kita buat.
  4. Kode HTML text-align: left, akan menampilkan pemerataan tulisan dalam border yang dibuat, apakah rata kanan (right), rata kanan kiri (justify), atau rata tengah (center).
  5. Kode HTML height: 50px, menunjukan tinggi dari boder. Sedangkan kode HTML width: 300px, menunjukan lebar border yang kita buat.

Mudah untuk membuatnya bukan? Yuk kita buat bersama-sama!
Kalau ada pertanyaan silakan tulis lewat kotak komentar ya kawan..
Salam blogger!
Labels:

Comments

Post a Comment

Popular posts from this blog

Memberi Emoticon Pada Postingan Blogspot

Hallo kawan blogger semuanya.. Apa kabar hari ini? Baik-baik bukan? Yup, pada hari jum’at yang indah ini kita akan membahas pengetahuan bagaimana menampilkan emoticon pada postingan blogspot milik kita. Sebelumnya, ada yang sudah tahu? Kalau sudah, siapa tahu langkah ini berbeda dengan yang selama ini kalian lakukan. Lumayan bukan untuk menambah pengetahuan baru? Bagi yang belum tahu, dengan penambahan emoticon dalam postingan blog kita niscaya akan membuat lebih semarak dan interaktif dengan pembaca! Penasaran? Yuk, langsung saja kita lihat penjelasannya.. Langkah-langkah yang perlu untuk dilakukan yaitu; Log in ke akun blogger milik kita. Klik buat entri untuk mulai membuat postingan baru. Nah, saat kita menulis dan ingin memasukan emoticon, masukan saja kode emoticon yang sesuai dengan keinginan kita pada bagian edit HTMLnya. <img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif"> <img src="http://photos1.blogger.com/blogger/7678/802/1600/b...
Post a Comment
Read more

Situs URL Expander

Situs URL Expander – Situs URL expander memiliki peran penting dalam rangka menjaga keamanan aksesibilitas kita sebagai pengguna internet ketika ingin mengunjungi sebuah halaman blog atau situs tertentu. Hal ini dikarenakan situs yang menyediakan layanan URL expander akan memberikan informasi kepada kita mengenai URL yang sebenarnya dari sebuah URL yang disingkat menggunakan layanan dari situs penyingkat URL . Jika kita hendak bepergian ke sebuah tempat, tentu kita harus tahu banyak hal mengenai tempat tersebut. Setidaknya, kita mengetahui informasi yang jelas, lengkap, dan terpercaya dari tempat yang akan kita kunjungi. Manfaatnya yaitu kita akan diberikan jaminan rasa aman jika tempat yang kita kunjungi tersebut tidak akan membahayakan keselamatan kita. Selain itu, kita juga berpotensi untuk mendapatkan kepuasan lebih dengan mengeksplorasi dan mendayagunakan informasi yang kita miliki dari tempat kunjungan tersebut. Hal ini merupakan sebuah analogi yang dapat kita terapkan ketika ki...
Post a Comment
Read more

Widget Total Posts dan Total Comments

Kadang baik kita sebagai pemilik blog maupun pengunjung blog kita ingin mengetahui berapa banyak postingan yang sudah dipublikasikan dan total komentar untuk semua postingan tersebut. Sebagai pemilik blog, kita tentu ingin menampilkan seberapa banyak postingan yang sudah kita publikasikan dan seberapa banyak komentar yang sudah kita dapatkan. Karena, semakin banyak kita mendapatkan keduanya maka akan semakin menunjukan eksistensi blog kita. Sebagai pengunjung blog, kita juga akan mendapatkan semacam suggesti jika semakin baik dalam arti semakin banyak jumlah postingan dan jumlah komentar untuk semua postingan dalam sebuah blog, maka kita dapat menyimpulkan jika blog yang sedang kita kunjungi tersebut adalah blog yang eksis dan berkualitas. Memang tidak ada standar baku yang menentukan batas berapa total posts dan total comments sebuah blog agar blog tersebut dinyatakan bagus, atau dengan melihat perbandingan di antara keduanya. Karena semua ini sifatnya hanya suggesti dan pelengkap. B...
Post a Comment
Read more