Artikel Blog Yang Berkolom-kolom

Artikel seperti dalam koran atau majalah dapat kita buat dalam sebuah artikel blog, bentuk tulisan ini seperti tulisan pada koran atau majalah yang berkolom-kolom, banyaknya kolom bisa kita atur sesuai dengan kebutuhan yang kita perlukan dalam penulisan sebuah artikel blog.

Untuk membuat tulisan yang berkolom-kolom kita menggunakan perintah css yang menurut saya sederhana dan pendek, kurang lebih seperti ini css yang kita pergunakan untuk membuat artikel blog kita menjadi berkolom-kolom.

column-count: 3;
column-gap: 30px;

column-count mengindikasikan banyaknya kolom yang akan kita buat dalam sebuah artikel yang akan kita tulis, sedangkan column-gap merupakan jarak antara kolom yang satu dengan kolom lainnya.

Sebagai contoh kita akan aplikasikan penggunaan column-count dan column-gap tersebut, untuk menerapkannya kita harus membuat nama id atau class untuk kolom tersebut.

Sebagai contoh kita menggunakan id dengan nama koran, sehingga cssnya menjadi seperti ini:

#koran {
column-count: 3;
column-gap: 30px;
}

dan html yang kita pergunakan menjadi seperti ini:

<div id="koran">isi artikel</div>

Dan kurang lebih hasilnya menjadi seperti ini, dalam hal ini baik dilayar besar atau dilayar kecil seperti layaknya layar mobile hasilnya akan menjadi tetap tiga kolom.

Hasil dengan tiga kolom pada layar kecil akan membuat yang membaca arikel ini akan kesulitan, kita bisa saja mengubah kolom yang banyaknya tiga kolom ini menjadi satu kolom pada layar mobile dengan menambahkan @media-screen untuk layar mobile ukuran tertentu ( untuk bahasan @media-screen bisa mencari literatur di tempat yang lain, karena saya tidak membahasnya).

Dengan artkel yang berkolom-kolom ini kita bisa kasih tambahan style seperti garis pembatas antar tiap kolom dan kita juga bisa memberikan warna pada garis pembatas tersebut.

oh iya hampir lupa jenis garis pun bisa kita sesuaikan dengan selera kita.

Untuk menambahkan garis pembatas kita bisa menambahkan css ini:

column-rule: 4px double blue;

Nilai column-rule 4px merupakan tebalnya garis, double merupakan jenis garis yang dipergunakan, masih ada beberapa jenis pilihan untuk jenis garis ini sepeti contoh dotted atau dashed, kalian bisa menentukan sendiri jenis garis ini, sedangkan blue merupakan warna garis.

Bagaimana Menerapkanya

Kita bisa menerapkan css ini bisa hanya dalam satu halaman post saja atau pada keseluruhan halaman post.

Satu Halaman Post

Menerapkan hanya pada satu halaman saja dalam postingan blog, kita bisa langsung masukan css ini pada halaman post pada mode html

<style type="text/css">
#koran{
column-count: 3;
column-gap: 30px;
column-rule: 4px double blue;
}
</style>
<div id="koran">ISI ARTIKEL</div>

Seluruh Halaman Post

Sebenarnya sama saja dengan menerapkan pada satu halaman post, cuma sedikit perbedaannya terletak pada css nya kita simpan dalam template pada pada urutan css dan untuk memanggilnya tetap menggunakan html ini:

<div id="koran">ISI ARTIKEL</div>

Ketika kita menulis artikel jangan lupa dalam mode html ya.

Tambahan

Selain dengan kode css diatas, kita bisa menggunakan kode css ini

columns: 50px 4;

Nilai 50px merupakan nilai minimal lebar tiap kolom dan 4 merupakan nilai maksimum banyaknya kolom.

Semoga tulisan ini bisa bermanfaat dan mudah untuk dimengerti.

Memotong Kalimat Dengan Baik dan Rapi

Ketika kita membuat sebuah kalimat yang begitu panjang dan sampai keluar dari pembungkus (elemen) tentunya akan menghasilkan bentuk kalimat yang kurang rapi dan berkesan acak-acakan.

Hal tersebut karena kurangnya perintah css untuk memperbaiki bentuk dari kalimat yang panjang tersebut.

Memang kerapihan bukan unsur utama dari isi kalimat, tapi dengan membuatnya rapi akan membuat yang melihat akan menyenangi dan tertarik untuk menindaklanjuti apa yang meraka cari. Untuk itu kita akan buat kalimat yang panjang terpotong dengan baik dan rapi menggunakan css.

Memotong

Dalam hal ini kita abaikan bagi yang tidak menyukai kerapihan, kita akan membuat sebuah kalimat panjang terpotong rapi dengan menggunakan css.

Mungkin kalian masih binggung dari maksud memotong kalimat dengan rapi ini, untuk itu saya akan memberikan gambaran seperti apa kalimat yang terpotong dengan baik dan rapi tersebut.

Contoh

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
}

Dengan ukuran elemen panjang 200px dan tinggi 18px akan menghasilkan kalimat yang akan keluar dari elemen tersebut turun kebawah, karena tidak cukup ruang untuk kalimat yang panjang.

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Jika kita tambah properti white-space:nowrap akan menghasilkan kalimat keluar memanjang seperti contoh dibawah ini:

#text {
    white-space: nowrap; 
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Keadaan ini akan membuat kalimat yang keluar dari pada cangkangnya, kita bisa membuat kalimat yang panjang tersebut tidak keluar dari cangkang, yaitu dengan memotong kalimat tersebut sesuai dengan lebar ruang (cangkang) dengan menambah properti overflow:hidden, properti overflow:hidden akan memotong kalimat yang panjang menyesuailan panjang dari ruang kalimat tersebut, sehingga menjadi seperti ini:

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: hidden;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Sebenarnya dengan properti overflow:hidden, kalimat yang panjang sudah bisa terpotong dengan rapi, tapi tidak ada salahnya kita tambah properti lagi untuk membuat kalimat panjang terpotong rapi dengan baik,yaitu menambahkan properti text-overflow:ellipsis seperti dibawah ini:

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Nah seperti terlihat dalam contoh, kalimat panjang akan terpotong dengan rapi dan baik dari segi tampilan.

Masalah

Perlu diperhatikan properti text-overflow:ellipsis tidak berjalan baik jika ruang (cangkang) dari kalimat tersebut menggunakan nilai dalam bentuk % selain itu wajib ada properti overflow:hidden dan properti white-space:nowrap.

Selain text-overflow dengan nilai ellipsis, masih ada beberapa nilai text-overflow dengan nilai clip, initial, inherit dan string kalian bisa mencoba mengganti nilai text-overflow dengan nilai yang lain dan lihat hasilnya.

Seperti sebelumnya, akhir kata semoga tulisan ini bisa bermanfaat dan mudah untuk dimengerti.

Menu Horizontal Dengan Rata Kanan Kiri atau Tengah

Bagi anda penganut kesederhanaan dalam membuat sebuah menu tentunya akan menyukai menu sederhana ini, karena penggunaan script cssnya sedikit dan hasilnya sederhana dari segi tampilannya, walaupun begitu menu sederhana ini bisa kita ubah kerataanya sesuai kebutuhan, baik itu rata kanan, kiri ataupun pada posisi tengah.

Menampilkan sebuah menu dalam sebuah weblog sangatlah utama, karena merupakan sebuah navigasi untuk menyusuri seruluh isi weblog tersebut, baik itu sebuah menu navigasi sederhana atau pun menu navigasi wahhh... keren, itu merupakan sebuah pilihan bagi pemiliknya.

dalam hal ini saya akan bagikan menu navigasi yang sederhana namun bisa mewakili keseluruhan ini weblog kalian dan menu ini bisa diubah kerataannya sesuai keinginan, baik itu rata kanan, kiri ataupun tengah seperti gambar dibawah ini.

Menu Horizontal Rata Tengah

Sepertinya penggunaan menu navigasi yang dengan rata tengah jarang dipergunakan, walaupun begitu saya akan tetap bagikan bagaimana caranya membuat menu navigasi berada pada posisi rata tengah.

Pada umumnya menu navigasi berada pada rata kanan atau rata kiri, namun begitu menu navigasi dengan rata tengah tidak menutup kemungkinan untuk dipergunakan.

Menu navagasi yang saya bagikan sangat sederhana dari penggunaan css nya sehingga menghasilkan tampilan yang sederhana pula, untuk memberikan tampilan yang lebih sesuai dengan selera bisa menambahkan css untuk menu navigasi rata tengah ini.

Scriptnya seperti ini:

HTML

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact</a></li>
</ul>

dan css nya pun sederhana seperti ini:

CSS

.menu{
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.menu li{
    display:inline;
}
.menu a{
    display:inline-block;
    padding:10px;
    color:black;
}

Seperti saya sebutkan diatas, untuk menyesuaikan tampilan bisa tambah atau kurangi css tersebut.

Menu Horizontal Rata Kanan

Masih menggunakan script css tersebut diatas untuk membuat menu horizontal rata kanan, kita hanya mengganti nilai center menjadi right seperti ini:

.menu{
    text-align:right;
}

Menu Horizontal Rata Kiri

Seperti menu horizontal rata kanan, untuk membuat menjadi rata kiri, kita hanya mengganti nilai center atau right menjadi left, seperti ini:

.menu{
    text-align:left;
}

Untuk lebih jelasnya seperti apa bentuk tampilan menu horizontal sederhana ini, bisa melihat melalui gambar diatas.

Semoga menu horizontal rata kanan kiri atau tengah ini bisa dipergunakan dan bisa menjadi salah satu pilihan yang bisa dipergunakan di dalam template blog.

Akhir kata semoga menu navigasi ini bisa bermanfaat.

Versi Baru Tag Kondisional Blogger

Pada dasarnya fungsi dari tag kondisional versi baru ini tak ubahnya seperti tak kondisional versi lama hanya dari script nya saja yang lebih simpel dan mudah diingat.

Kenapa saya selalu share hal-hal mengenai tag kondisional ini, tag kondisional bagi saya sangatlah penting karena dari fungsinya.

tentu saja saya pun banyak menggunakan tag kondisional dalam setiap template yang saya buat atau template yang saya pergunakan ini.

untuk melihat perbandingan tag kondisional versi lama bisa melihat melalui link dibawah.

Tag Kondisional Versi Lama

Berikut ini beberapa tag kondisional yang merupakan versi baru yang bisa dipergunakan pada template kalian, baik itu untuk keperluan menampilkan atau menyembunyikan widget.

Tag Kondisional Halaman Utama

<b:if cond='data:view.isHomepage'>

...

</b:if>

Tag Kondisional Halaman Index

<b:if cond='data:view.isMultipleItems'>

...

</b:if>

Tag Kondisional Halaman Item

<b:if cond='data:view.isSingleItem'>

...

</b:if>

Tag Kondisional Halaman Statis

<b:if cond='data:view.isPage'>

...

</b:if>

Tag Kondisional Halaman Label

<b:if cond='data:view.isLabelSearch'>

...

</b:if>

Tag Kondisional Halaman Posting

<b:if cond='data:view.isPost'>

...

</b:if>

Tag Kondisional Halaman Pencarian

<!-- Hanya halaman pencarian -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'>

...

</b:if>

<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'>

...

</b:if>

Tag Kondisional Halaman Kesalahan

<b:if cond='data:view.isError'>

...

</b:if>

Tag Kondisional Halaman Arsip

<b:if cond='data:view.isArchive'>

...

</b:if>

Tag Kondisional Halaman Pratinjau

<b:if cond='data:view.isPreview'>

...

</b:if>

Nah setelah mengetahui tag kondisional versi baru ataupun versi lama kalian bisa membandingkan mau menggunakan versi yang mana, yang pada dasarnya versi lamapun masih aktif dan masih bisa dipergunakan pada template kalian dan untuk cara penggunaannya pun sama seperti kita menggunakan tag kondisional versi lama.

untuk postingan selanjutnya kalau sempat saya akan share mengenai tag kondisional versi mobile, yang tidak menutup kemungkinan tag kondisional versi mobile ini dipergunkan pada template kalian.

Akhir kata semoga tag kondisional versi bari ini bisa menjadi referensi untuk modifikasi template blog kalian...salam

Mengganti Fonts Dengan Menggunakan Fonts Google

Mengganti Fonts Dengan Menggunakan Fonts Google - Ini merupakan hanya sebuah update dari tulisan sebelumnya mengenai cara menggunakan font dari google font, walupun pada dasarnya sama cara penggunaannya, dalam hal ini karena situs font google berubah yang dulunya http://google.com/webfont yang sekarang di redirect menjadi https://fonts.google.com.

Secara tampilan antar muka webfont tersebut ada perubahan tampilan sehingga bagi kalian yang baru menggunakan atau sudah pernah menggunakan fonts google dari webfont mungkin agak sedikit binggung, disini saya akan memberikan sedikit gambaran yang mungkin bisa membantu kalian dalam menggunakan fonts google tersebut.

Dalam hal ini karena saya menggunakan blogspot dari google, maka penjelasan ini mengkhususkan bagi mereka yang menggunakan blogger dari blogspot google.

Menggunakan Font Google

• Pertama masuk pada situs font google melalui https://fonts.google.com, pada halaman tersebut disuguhkan berbagai jenis dan bentuk font, kalian pilih salah satu jenis font yang akan dipergunakan.
• Setelah memilih salah satu jenis font yang akan dipergunkan, arahkan pandangan pada pojok kanan atas, disitu ada tombol pilihan +Select This Font, klik tombol tersebut.
• Setelah mengkilik tombol +Select This Font, arahkan pandangan pada kanan bawah layar, klik kotak dialog Family Selected.

Kotak dialog tersebut memberikan link font yang terpilih untuk dipergunakan pada weblog, seperti ini contoh link font terpilih tersebut:

<link href="https://fonts.googleapis.com/css?family=Mogra" rel="stylesheet"/>

Letakan kode link tersebut dibawah <head> dan save template kalian.

Dalam kotak dialog tersebut memberikan keterangan kecepatan loading dari link fonts yang dipilih, jadi pilihlah fonts yang cocok untuk dipergunakan dan cepat loadingnya supaya tidak mengganggu kecepatan loading weblog.

Penggunaan Font Google Dalam CSS

Dalam kotak dialog tersebut sudah disebutkan font family yang bisa kita pergunakan dalam css, seperti contoh yang saya ambil adalah font-family: 'Mogra', cursive;

contoh penggunaan dalam css seperti ini:

.fontgoogle, #fontgoogle {
     font-family: 'Mogra', cursive;
     ...
     css lainnya
     ...
}

Mudah bukan cara menggunakan font google tersebut, selain font dari google, kalian bisa menggunakan font yang berupa ikon dari font awesome yang bisa untuk mengganti ikon-ikon berupa gambar dengan ikok-ikon berupa karakter.

① Cara menggunakan fonts ikon karakter yang cantik dari font awesome

Semoga tips menggunakan fonts google dan font awesome bisa membantu dalam mengganti font-font yang biasa dipergunakan sehingga bisa berbeda dengan font yang dipergunakan weblog pada umumnya dan tentunya tampilan weblog pun lebih cantik dan bagus, terima kasih semoga bermanfaat.