Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Selasa, 28 Juni 2016

Cara Membuat Gambar Banner Menjadi Responsive di Blog

Cara membuat Image Banner Responsive dalam situs web Anda - Tutorial ini memandu sobat untuk menciptakan sebuah gambar pilihan Anda menjadi responsive HTML5 di blog anda. Dengan menggunakan perintah CSS sederhana kita melakukannya ini semua. Sobat tidak perlu dengan penggunaan JavaScript maupun plugin jQuery jadi sobat hanya memerlukan sedikit pengkodean CSS sehingga gambar menjadi responsif.

Artikel ini hanya sekedar panduan dasar saja yaitu bagaimana gambar bisa menjadi responsive pada blog. Untuk sobat yang blognya sudah menggunakan template responsive sobat tidak perlu melakukan apa-apa cukup upload gambar lalu publish, gambar pun langsung responsive menyesuaian dari perangkat mana blog anda di buka.

Membuat gambar/ bannner menjadi responsive ?

Kali ini saya akan menerapkan CSS3 murni untuk membuat gambar menjadi responsif. Penggunaan gambar dengan gaya dan ukuran global pun tetap gambar tersebut menjadi fit dalam layar dan menempati ruang yang tersedia. Dengan demikian, Gambar akan cukup terbaca di perangkat kecil.

Gambar-gamabr akan responsif pada semua resolusi layar seperti :

  • Layar ponsel yang lebih kecil
  • 320x480 - iPhone [Potret orientasi]
  • 360x640 - Salah satu ponsel pintar
  • 780X1024 - tablet yang lebih besar atau Desktop 17'
  • desktop yang lebih besar

Cara Membuat Banner Menjadi Responsive di Blog


Sebelumnya, silahkan dulu untuk melihat demonya disini.

Selanjutnya klik icon perangkat di sudut kanan atas untuk melihat perubahan akan responsive gambar.


Lalu Bagaimana membuat gambar/ bannner menjadi responsive?

Baiklah kita mulai!

Pengkodean yang paling utama yaitu penggunaan img. Taruh code CSS dibawah ini tepat dibawah kode <head> pada file HTML blog anda.

<style type="text/css">
img {
    width: 100%;
    height: auto;
}
</style>

Keterangan :
  • Kenapa img ? Karena img adalah pemanggilan untuk semua gambar dalam berkas/file HTML yang ditulis dalam tanda kurung.
  • Penggunaan lebar saya menggunakan width: 100%; dan tingginya auto. Untuk kebutuhan tertentu kita bisa merubah lebar gambar mungkin sekitar 50% atau lebih kecil sesuai dengan resolusi layar.

Berikutnya tulis kode berikut setelah tag <body> di file HTML.

<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />

Sampai disini sebenarnya bila dilihat hasilnya sudah responsive. Namun ada kekurangannya, yaitu gambar ukuran seberapapun akan menyesuaikan lebar dari laya perangkat. Dalam artian bila gambar yang digunakan dengan ukuran lebarnya 728px dan dibuka dengan perangkat desktop maka gambar akan besar seukuran desktop sehingga gambar akan pecah.

Untuk itu kita sedikit melakukan modifikasi pengkodean CSS yang nanti ukuran gambar yang tampil diperangkat sesuaikan dengan perintah pengkodean CSS.

Untuk melakukannya dengan menambahkan kode CSS ini :

.demo_1 { width: 300px; height: auto; } 
@media(min-width: 500px) { .demo_1 { width: 468px; height: auto; } } 
@media(min-width: 767px) { .demo_1 { width: 600px; height: auto; } } 
@media(min-width: 1023px) { .demo_1 { width: 728px; height: auto; } }

Maka penggunaan agar gambar lebih responsive menggunakan kode <div> seperti dibawah ini :
<div class="demo_1">
<img alt="Make Image responsive" height="90" src="images/728_90_panduan_blog.png" width="728" />
</div>

Silahkan lihat kembali demonya disini.

Terima kasih telah bersedia membaca artikel ini, setiap saran atau pertanyaan silahkan posting di bagian komentar di bawah.
Diposting oleh di Tidak ada komentar:
Label: , ,

Minggu, 26 Juni 2016

Cara Membuat Bullets dan Numbering Tag HTML di Blogspot

Cara membuat list HTML - Dari waktu ke waktu, Anda mungkin ingin membuat daftar bernomor atau bullet/list pada artikel halaman web Anda. Fungsi yang digunakan adalah menggunakan tombol "Numbered list" atau "Bullet list" yang terdapat pada dasbor postingan. Tag dasar yang digunakan semua sama yaitu ul, ol dan li.

Mari kita bahas sama-sama fungsi dari ke tiga tag diatas.
Semua perintah harus di apit seperti <ul>...</ul> atau <ol>...</ol>. Dimana tag <ul> untuk menampilkan list Bullet (Unordered Lists) sedangkan tag <ol> adalah untuk menampilkan list Numbered (Ordered Lists).

Cara Membuat Bullets dan Numbering Tag HTML di Blogspot

Menampilkan list Bullet (Unordered Lists):

Type Atribut penggunakan tag <ul> menentukan jenis bullet yang akan terlihat pada halaman blog. Meskipun melalui pemanggilan CSS kita dapat menentukan berbagai-macam model bullet dan bahkan menggunakan gambar sendiri, secara default di HTML memiliki 3 jenis bullet :

  • type="circle" – Lingkaran terisi
  • type="disc" – Lingkaran penuh
  • type="square" – Persegi terisi

Sebagai contoh seperti dibawah ini :

<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Daftar di atas saya ditempatkan di masing-masing <ul> tetapi masing-masing <li> juga mendukung jenis atribut, sehingga bisa terlihat seperti :

  • Square
  • Disc
  • Circle

Menampilkan list Numbered (Ordered Lists):
Jika Anda ingin menyajikan daftar artikel dengan cara penggunaan tag <ol>. Secara default langsung memberikan daftar nomor.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Hasilnya..
  1. Item 1
  2. Item 2
  3. Item 3

Tetapi jenis atribut ini kita juga bisa melakukan perubahan tapilan secara fleksibilitas seperti dibawah ini :

<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Hasilnya..
  1. Item 1
  2. Item 2
  3. Item 3

Berikutnya..

<ol start="4">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Hasilnya
  1. Item 1
  2. Item 2
  3. Item 3

Selanjutnya membalikkan ordered dengan penambahan type reversed

<ol reversed="reversed">
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Five LI</li>
</ol>

Hasilnya..
  1. First LI
  2. Second LI
  3. Third LI
  4. Fourth LI
  5. Five LI

Dibeberapa kasus ada beberapa artikel penggunaan tag <ol> (list Numbered) penampilan nomor terpisah oleh beberapa paragraf.

Contoh seperti dibawah ini :
  1. Item 1
  2. Item 2
Ini adalah alinea yang memisahkan penggunaan tag <ol>, sehingga penggunan tag berikutnya tetap mengikuti dan menampilkan angka selanjutnya dari penggunaan tag <ol> sebelumnya.
  1. Item 3
  2. Item 4
  3. Item 5

Contoh penerapannya dari hasil diatas adalah :
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Ini adalah alinea yang memisahkan penggunaan tag <ol>, sehingga penggunan 
tag berikutnya tetap mengikuti dan menampilkan angka selanjutnya dari penggunaan tag <ol> 
sebelumnya.
<ol start="3">
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>

Silahkan gunakan daftar bullet atau numbering yang sesuai pada halaman HTML Anda. Jika Anda memiliki pertanyaan atau sekedar berdiskusi jangan ragu untuk meninggalkan komentar.
Diposting oleh di Tidak ada komentar:
Label:

Minggu, 12 Juni 2016

Cara Membuat Huruf Besar Drop Cap di awal Kata di Blogspot

Membuat Huruf Besar Drop Cap - Untuk memperindah artikel blog banyak cara yang bisa kita lakukan, dari mengubah jenis fonts, memberikan font effect dan banyak lagi.

Nah kali ini saya akan berbagi trik Efek Huruf Besar ( Drop Cap ) pada awal kata sehingga memberikan kesan ekslusif dan menarik. Biasanya huruf besar ini ditampilkan diawal artikel blog, sebagai contoh seperti gambar dibawah ini.



Untuk Demo live bisa lihat disini atau disini
Baca Juga : Jadikan tampilan Blog anda dengan Google Font Effect
...Ingin membuatnya?

Berikut langkah - langkahnya dalam membuat Efek Huruf Besar ( Drop Cap ) :
  • Masuklah ke akun Blogger anda
  • Pilih "Template" pada menu Blogger
  • Klik " Edit Template"
  • Tambahkan script dibawah ini tepat diatas kode </b:skin> atau </style>

.only_drop {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;}


Untuk format penggunaanya seperti dibawah ini :

<span class="only_drop">Huruf awal disini</span>untuk huruf berikutnya

Contoh :
Untuk penerapannya agar efek huruf (drop cap) besar pada awal kata di blog adalah sebagai berikut :

<span class="only_drop">M</span>engecilkan ukuran file JPG....

Catatan:
Ada baiknya klik tombol "Pratinjau" untuk melihat bagaimana hasilnya, bila dianggap telah sesuai seperti yang di harapkan silahkan anda Publikasikan postingan tersebut.

Demikian Cara membuat efek huruf besar pada awal huruf sebuah kata. semoga bermanfaat.

Salam Drop Cap!
Diposting oleh di Tidak ada komentar:
Label: ,
Langganan: Komentar (Atom)