Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

4 Styles untuk Widget Featured Post di Blogger

Sering membuat artikel baru bisa jadi merupakan hal yang penting. Karena dengan begitu blog kita akan terlihat sering diperbarui sehingga menarik pengunjung untuk datang kembali ke blog. Namun dengan seringnya membuat artikel, artikel lama akan semakin tenggelam ke dalam arsip. Kemudian artikel tersebut menjadi jarang dibaca pengunjung apalagi jika keyword nya tidak begitu baik pada search engine.

Ada beberapa widget agar sebuah artikel tidak tenggelam ke dalam arsip, seperti widget popular post. Namun sesuai namanya, untuk bisa ditampilkan pada widget ini, sebuah artikel harus menjadi konten yang sering dibaca pengunjung. Sehingga kita tidak bisa menentukan artikel mana yang ingin ditampilkan.

Kali ini pihak Blogger menyediakan widget baru, yaitu widget Featured Post atau di Indonesia sendiri dikenal dengan istilah Entri yang Diunggulkan. Jika pada blog kamu ada sebuah artikel yang telah tenggelam ke dalam arsip, namun artikel tersebut sangat penting dan kamu ingin selalu menampilkannya pada pengunjung, kamu bisa menggunakan widget Featured Post.

4 Styles untuk Widget Featured Post

Kekurangan Widget Featured Post

Menurut saya untuk saat ini widget featured post memiliki kekurangan. Berikut adalah beberapa kekurangan widget featured post:
  • Hanya bisa menampilkan satu artikel.
  • Hanya bisa memasang satu widget.
  • Tidak bisa menentukan panjang cuplikan.
  • Memiliki tampilan yang terlalu sederhana.
Karena hanya bisa menampilkan satu artikel dan memasang satu widget saja, maka kita tidak bisa menampilkan lebih dari satu artikel yang diunggulkan. Kemudian karena panjang cuplikan tidak bisa diatur dan tampilan widget terlalu sederhana, maka widget ini memiliki tampilan yang kurang rapi pada beberapa template. Sehingga akan kurang menarik perhatian pengunjung.

Jangan khawatir, untuk mengatasi masalah tampilan, saya akan membagikan beberapa style untuk diterapkan pada widget featured post sehingga memiliki tampilan yang rapi dan menarik.

4 Styles untuk Widget Featured Post di Blogger

Style ini saya dapatkan dari salah satu rekan Blogger, yaitu pemilik domain www.bloggerguider.com kemudian ingin saya bagikan juga pada rekan Blogger lain. Personalisasi yang dilakukan masih mendasar, namun ini menjadi langkah pertama untuk membuat widget featured post memiliki tampilan yang lebih baik. Untuk selanjutnya kita tunggu saja style-style yang lebih keren lagi.

Langkah pertama untuk memasang widget ini sangat mudah. Tentunya masuk ke halaman dashboard blogger, kemudian buka menu Tata Letak. Klik tambahkan gadget di posisi widget ini akan ditampilkan. Kemudian pilih widget Featured Posts atau Entri yang Diunggulkan.

Sebelum menerapkan salah satu style pada widget featured post, kamu harus menerapkan script berikut agar Blog mendukung  font Oswald - Lobster, dan font Awesome. Jika blog kamu sudah memiliki script tersebut, maka silakan lewati tahap ini.

Pada dashboard Blogger, silakan masuk ke menu Template dan klik Edit HTML. Kemudian dengan ctrl + f carilah kode <head> dan letakkan script berikut di bawah kode <head>.
<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Kemudian dengan ctrl + f carilah kode ]]></b:skin> dan silakan terapkan salah satu script CSS berikut di bawah kode ]]></b:skin>.

Style 1

Secara default warna dominan dari style ini adalah biru di sertai tampilan yang flat dan polos. Kemudian memiliki efek seperti melayang di bagian thumbnail posting. Tampilan yang tidak terlalu mencolok dari widget ini membuatnya terkesan profesional.

Script CSS
/********************************************
Featured Post
********************************************/
.post-summary {
background: #00ACF5;
color: #FFF;
padding: 20px;
box-shadow: 2px 4px 2px 2px #E4E4E4;
margin-top: 19px;
padding-top: 10px;
}

.post-summary a {
color: #FFF;
font-family: Oswald;
font-weight: 100;
text-decoration: none;
}

.post-summary:hover:before {
opacity: 1;
}

.post-summary:before {
content: "Featured";
background: #000;
opacity: .7;
font-family: Lobster;
padding: 10px;
position: relative;
float: right;
top: -10px;
right: -20px;
transition: .3s;
}

.post-summary .image {
box-shadow: 2px 2px 4px 0px #0088C1;
border: 2px solid #0088C1;
}

Style 2

Dengan warna dasar hitam, style ini memiliki efek kombinasi bayangan dan kekeruhan warna. Sangat elegan karena terdapat efek warna kuning keemasan pada tulisan dan thumbnail posting.

Script CSS
/********************************************
Featured Post
********************************************/
.post-summary {
background: #1F1F1F;
color: #FFF;
padding: 20px;
box-shadow: 2px 4px 2px 2px #E4E4E4;
margin-top: 19px;
padding-top: 10px;
border-radius: 10%;
border-bottom-left-radius: 0%;
border-top-right-radius: 0%;
}

.post-summary:before {
content: "\f123 Featured";
background: #000;
opacity: .7;
font-family: Oswald, FontAwesome;
padding: 10px;
position: relative;
float: right;
color: #FFB300;
top: -10px;
right: -20px;
text-transform: uppercase;
}

.post-summary a {
color: #FFF;
font-family: Oswald;
font-weight: 100;
text-shadow: 2px 2px 2px #000;
text-decoration: none;
}

.post-summary .image {
box-shadow: 2px 2px 4px 0px #000000;
border: 2px solid #E6A200;
}

.post-summary:hover:before {
opacity: 1;
}

Style 3

Yang satu ini memiliki latar belakang berwarna putih dan teks berwarna hitam. Kemudian dengan warna kuning keemasan dan efek buram pada beberapa bagian, membuat tampilannya begitu manis.

Script CSS
/********************************************
Featured Post
********************************************/
.post-summary:before {
content: "\f123 Featured";
background: #000;
opacity: 1;
font-family: Lobster, FontAwesome;
padding: 10px;
transition: .3s;
position: relative;
float: right;
color: #FFB300;
top: -10px;
right: -20px;
}

.post-summary {
background: #FFFFFF;
color: #FFF;
padding: 20px;
box-shadow: 2px 2px 7px -1px #777777;
margin-top: 19px;
padding-top: 10px;
border-radius: 10%;
border-bottom-left-radius: 0%;
border-top-right-radius: 0%;
}

.post-summary a {
color: #000;
font-family: Oswald;
font-weight: 100;
text-shadow: 0px 0px 1px #000;
text-decoration: none;
}

.post-summary p {
color: #4A4A4A;
font-family: sans-serif;
font-size: 14px;
line-height: 20px;
}

.post-summary .image {
box-shadow: 2px 2px 4px 0px #000000;
border: 2px solid #E6A200;
}

.post-summary:hover p {
color: #000;
}

Style 4

Yang satu ini mirip dengan tampilan style pertama. Namun kali ini warna dominan yang digunakan adalah merah tua dengan efek bar di atasnya.

Script CSS
/********************************************
Featured Post
********************************************/
.post-summary {
background: #942323;
color: #FFF;
padding: 20px;
box-shadow: 2px 4px 2px 2px #E4E4E4;
margin-top: 19px;
padding-top: 20px;
}


.post-summary:before {
content: "Featured";
background: #000;
font-family: Lobster;
width: 90%;
padding: 10px;
position: relative;
overflow: hidden;
float: right;
z-index: 10;
top: -20px;
right: -20px;
box-shadow: 0px 2px 2px 0px #000;
transition: .3s;
}

.post-summary a {
color: #FFF;
font-family: Oswald;
font-weight: 100;
text-decoration: none;
}

.post-summary .image {
box-shadow: 2px 2px 4px 0px #691717;
border: 2px solid #BD1F1F;
}

.post-summary:after {
content: "\f123";
position: relative;
font-family: FontAwesome;
box-shadow: 0px 2px 2px 0px #000;
background: rgb(206, 52, 38);
top: -480px;
left: -20px;
padding-left: 14px!important;
padding: 11px;
padding-right: 14px!important;
}

Artikel terkait : 4 Styles untuk Widget Featured Post di Blogger

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved