Hosting Unlimited Indonesia
Go Blogging!Panduan membuat blog hingga menghasilkan uang!

Style CSS Untuk Mempercantik Tampilan Blog/Website

Style CSS Untuk Mempercantik Tampilan Blog/Website | juraganblog.com – Salah satu tips untuk membuat pengunjung blog betah berlama-lama membaca postingan kamu adalah dengan mempercantik tampilan blog mulai dari pengaturan tema hingga pemilihan font.

Oleh karena itu, pada artikel kali ini saya akan memberikan beberapa kode CSS yang bisa kamu gunakan untuk mempercantik tampilan dari blog kamu.

Jika kamu masih awam tentang CSS (Cascade Style Sheet), baca terlebih dahulu artikel Mengenal Dasar-Dasar Cascading Style Sheet (CSS).

Kalau kamu belum memahami cara menyisipkan CSS ke blog baik WordPress atau pun Blogspot.com (Blogger), baca artikel Cara Menambahkan Custom CSS di Blogger dan WordPress.

Jika sudah paham..

Lanjut membaca tutorial berikut ini..

Style CSS Untuk Mempercantik Tampilan Blog/Website

#1. CSS Membuat Sudut Tumpul Atau Circle Pada Gambar Di Blog

Efek tumpul ataupun circle (lingkaran) pada gambar pada kondisi tertentu bisa mempercantik tampilan pada blog kamu. Misalnya untuk dijadikan thumbnail seperti thumbnail Widget Popular dan Recent pada blog ini.

Bagaimana CSS membuat sudut tumpul atau circle pada gambar di blog?

Simak tutorial berikut ini.

Efek Sudut Tumpul

Letakkan script berikut ini di Custom CSS blog kamu.

img {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-height:100%;
}

Keterangan :
Nilai 5 px adalah ukuran radius ketumpulan sudut. Kamu bisa menambah atau menguranginya sesuai keinginanmu.

Pada dasarnya ketiga properti di atas memiliki fungsi yang sama. Mengapa ketiganya dipasang bersamaan?

Penjelasannya dibawah ini.

Baca Juga : Cara Menambah Custom CSS Di Blogger Dan Di WordPress.

  • -web-border-radius : Properti milik Safari dan Chrome. Jika Safari atau Chrome tidak bisa membaca properti border-radius, maka akan membaca properti -webkit-border-radius.
  • -moz-border-radius : Properti milik Mozilla Firefox. Jika Firefox tidak bisa membaca properti border-radius, maka akan membaca properti -moz-border-radius.
  • border-radius : Adalah standar W3C. Suatu saat semua peramban harus bisa membaca properti ini.
CSS Membuat Sudut Tumpul Atau Circle Pada Gambar Di Blog
Contoh Sudut Tumpul

Properti border-radius ini juga bisa digunakan untuk membuat foto circle atau foto berbentuk lingkaran seperti yang lagi trend saat ini. Contohnya foto profil dari instant messenger populer baik Whatsapp ataupun BBM menggunakan foto profil berbentuk lingkaran.

Efek Circle (Lingkaran)

Cara membuatnya hampir sama dengan script efek tumpul di atas, bedanya hanya nilai pada properti-nya dan syaratnya gambar kamu harus berbentuk square (persegi)

Contoh : Jika ukuran foto kamu 200px, maka untuk mendapatkan efek circle atau lingkaran, nilai propertinya harus setengah dari ukuran foto kamu. Artinya nilai properti-nya adalah 100px.

img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    max-height:100%;
}
CSS Membuat Sudut Tumpul Atau Circle Pada Gambar Di Blog
Contoh Circle

Gimana?

Keren kan ya.. Hehe..

Kustomisasi Efek Sudut Tumpul

Kalau kamu ingin lebih kreatif lagi, kamu juga bisa mengatur bagian mana yang ingin dibuat tumpul dan yang tidak.

CSS Membuat Sudut Tumpul Atau Circle Pada Gambar Di Blog CSS Membuat Sudut Tumpul Atau Circle Pada Gambar Di Blog

img {
-webkit-border-radius: 20px 0 20px 0;
-moz-border-radius: 20px 0 20px 0;
border-radius: 20px 0 20px 0;
max-height:100%;
}

img {
-webkit-border-radius: 0 20px 0px 20px;
-moz-border-radius: 0 20px 0px 20px;
border-radius: 0 20px 0px 20px;
max-height:100%;
}

Membuat Border Sudut Tumpul

Selain untuk gambar, border-radius ini juga bisa untuk membuat kotak atau box dengan sudut tumpul atau lingkaran. Berikut ini contoh border dengan berbagai tipe sudut tumpul.

border-radius: 20px 20px 20px 20px;

border-radius: 20px 0 20px 0;

border-radius: 0 20px 0px 20px;

border-radius: 20px 0 0 0;

border-radius: 0 20px 0 0;

border-radius: 0 0 0 20px;

border-radius: 50px 20px;

border-radius: 20px 50px;

border-top-right-radius: 50px 20px;

border-top-left-radius: 50px 20px;

border-bottom-right-radius: 50px 20px;

border-bottom-left-radius: 50px 20px;

Demikian cara membuat sudut tumpul pada gambar dengan CSS.

#2. Style CSS Untuk Menulis Script Di Dalam Postingan

Pada tulisan kali ini saya akan membuat tutorial tentang bagaimana cara memasukkan script ke dalam postingan agar memasangnya lebih mudah, ga ribet, tidak menyita space artikel dan kelihatan lebih menarik.

Cara yang saya pakai disini adalah dengan menyisipkan CSS langsung ke dalam template.

Tampilan script di postingan kamu nanti akan menjadi seperti di bawah ini.

/* Style CSS untuk Memasang Script HTML di Artikel by juraganblog.com */
pre { overflow: auto }
code, pre {
 font-family: monospace, monospace;
 font-size: 1em;
 font-weight: normal;
 font-style: normal;
}
pre {
 line-height: 1.3;
 overflow: auto;
 background: #F7F7F7 url('https://i0.wp.com/www.juraganblog.com/wp-content/uploads/2016/12/code.png') 10px 2px no-repeat!important;
 padding: 2em 1em 1em 1em!important;
 border: 1px solid #DDD;
 margin: 15px 0;
 color: #555!important;
}
code {
 padding: 0 8px;
 line-height: 1.5;
}
/* End Script */

 

Setelah itu, disetiap kali kamu ingin memasukan script HTML ke dalam postingan, parse terlebih dahulu kode HTML tersebut terlebih dahulu.

Jika belum tahu cara mem-parse, bisa baca di artikel Apa Itu Parse HTML Dan Fungsinya?

Setelah itu, letakkan script hasil parse pada script seperti di bawah ini.

Untuk tag <pre>

<pre>
script sobat di sini..
</pre>

Atau untuk tag <code>


<code>
script sobat di sini..
</code>

Jika kamu masih belum puas dengan style di atas, kamu bisa mengopreknya sendiri sesuai selera kamu.

Misalnya dengan mengganti font-family dengan font kesukaanmu. Mengubah ukuran font dengan mengganti value dari font-size, atau mengganti warna background dengan mengubah value pada background : #F7F7F7.

Demikian style CSS untuk menulis script dalam postingan.

#3. Style CSS Untuk Mempercantik Tabel Di Blogger

CSS (Cascade Style Sheet) adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Jadi dengan menyisipkan CSS pada template, kamu bisa mengatur tampilan blog dengan mudah dan seragam. Misalnya pengaturan huruf, heading, warna latar, warna huruf untuk tautan, tabel, dan lain-lain.

Namun di tulisan kali ini saya akan memberikan tutorial untuk mempercantik tabel saja. Contohnya seperti tabel di bawah ini.

Host IP Google
omkepo.com 216.239.32.21
omkepo.com 216.239.34.21
omkepo.com 216.239.36.21
omkepo.com 216.239.38.21

Bagaimana ?

Cakep ga style tabelnya ?

Hehe

Kalau sobat blogger memasang script CSS-nya di artikel, maka setiap kali sobat ingin membuat style tabel seperti di atas, sobat harus menulis ulang script yang sama pada setiap artikel yang sobat tulis.

Berbeda kalau sobat memasang script CSS nya pada template, cukup hanya memasang id nya saja di setiap tabel.

Biar lebih mudah dipahami, langsung lihat contoh saja ya.. 🙂

Memasang CSS Di Dalam Artikel

Ini adalah script CSS untuk membuat style tabel seperti di atas.

<style>
#tabel1 {
    
    border-collapse: collapse;
    width: 100%;
}

#tabel1 td, #tabel1 th {
    border: 1px solid #ddd;
    padding: 8px;
}

#tabel1 tr:nth-child(even){background-color: #f2f2f2;}

#tabel1 tr:hover {background-color: #ddd;}

#tabel1 th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #36a69c;
    color: white;
}
</style>

Ini adalah script untuk tabelnya :

<table id="tabel1">
  <tbody>
<tr>
    <th>Host</th>
    <th>IP Google</th>
  </tr>
<tr>
        <td>omkepo.com</td>
        <td>216.239.32.21</td>
    </tr>
<tr>
        <td>omkepo.com</td>
        <td>216.239.34.21</td>
    </tr>
<tr>
        <td>omkepo.com</td>
        <td>216.239.36.21</td>
    </tr>
<tr>
        <td>omkepo.com</td>
        <td>216.239.38.21</td>
    </tr>
</tbody></table>

Kalau kamu memasang script-nya di artikel, maka setiap kali ingin membuat style tabel seperti di atas, maka script CSS ini harus selalu disisipkan di dalam setiap artikel, ribet kan ya.

Namun kalau script CSS tersebut dipasang pada template, sobat cukup menambahkan id-nya saja, sehingga menjadi <table id="tabel1">.

Untuk mengujinya, coba buat sebuah tabel kemudian diberikan id=tabel1 seperti contoh di atas, jika style-nya berubah, berarti script CSS nya berhasil.

Namun perlu diingat bahwa setiap browser menyimpan cache untuk mempercepat loading website, oleh karena itu, terkadang kamu perlu menghapus cache browser kamu terlebih dahulu agar style CSS-nya langsung kelihatan hasilnya.

Atau untuk menghemat waktu, kamu bisa coba di browser lain misalnya jika saat ini menggunakan Chrome, coba lihat hasilnya menggunakan Firefox.

Jika sobat sudah advance dalam CSS, cara ini juga bisa sobat terapkan dalam mengatur style lainnya pada blog sobat, seperti jenis huruf, warna latar blog, heading, dll.

Demikian Style CSS Untuk Mempercantik Tabel Di Blogger,

#4. Cara Mengubah Desain Blockquote Dengan CSS Di Blog

Ditulisan kali ini saya akan membahas tentang mengubah desain atau tampilan quote dengan CSS. Tujuannya tentu agar setiap kita membuat quote kelihatan lebih menarik. 🙂

#1. Awesome Blockquote

Salah satu keuntungan memotret dengan menggunakan format RAW adalah kita dapat mengkoreksi White Balance pada foto dengan mudah tanpa merusak kualitas fotonya. Sumber : kamerashot.com

Script untuk blockquote di atas :

  blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #ee3b24;
  border-right: 2px solid #ee3b24;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #fff;
  cursor: pointer;
  padding: 0 3px;
  color: #ee3b24;
}

blockquote a:hover{
 color: #005b8b;
}

blockquote em{
  font-style: italic;
}

#2. Simple Style

Salah satu keuntungan memotret dengan menggunakan format RAW adalah kita dapat mengkoreksi White Balance pada foto dengan mudah tanpa merusak kualitas fotonya. Sumber : kamerashot.com

Script untuk blockquote di atas :

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Sementara 2 jenis style dulu ya..

Ntar saya update dilain kesempatan.. 🙂

Kalau ada yang kurang jelas, silahkan bertanya di kolom komentar..

Demikian Style CSS Untuk Mempercantik Tampilan Blog/Website.

Semoga bermanfaat…

Tags:,

Add a Comment

Your email address will not be published. Required fields are marked *