3 Cara Menciptakan Featured Post Viomagz Keren

Cara Membuat Featured Post Keren di VioMagz

Hallo sobat blogger saya akan membahas perihal VioMagz lagi nih,kali ini perihal fitur Featured Post. Seperti yang anda semua tahu bahwa Template VioMagz buatan Mas Sugeng ini mempunyai aneka macam fitur menarik yang menciptakan tampilannya menjadi elegan dan modern. Salah satunya yaitu fitur Featured Post VioMagz yang ada di bab homepage blog.

Baca Juga : Cara Menampilkan Rating Bintang di Hasil Pencarian Google dengan Memasang Script Rich Snippet

Namun untuk desainnya sendiri masih di anggap kurang cantik bagi sebgain blogger pengguna Template VioMagz,oleh alasannya yaitu itu disini saya akan membagikan tutorial untuk menciptakan Featured Post VioMagz anda menajdi terlihat lebih Menarik.

Pengertian Widget Featured Post VioMagz

Featured Post yaitu Widget yang menampilkan artikel khsus ibarat artikel pilihan,terbaru atau lainnya yang sudah anda setting untuk tampil semoga bisa menarik minat visitor untuk membaca artikel yang sudah anda tentukan tersebut.

Mungkin itu postinagn perihal apa yang harus orang ketahui di blog anada,berita paling hangat,info paling menarik atau tutorial yang banyak di cari oleh orang,sehingga memungkinkan mereka untuk membacanya dan meningkatkan jumlah page view dari postingan tersebut.

Baca Juga : Cara Memasang Komentar Disqus Valid HTML5 di Blogger dengan Benar

Berikut ini cara menciptakan Featured Post Blogger di VioMagz menjadi lebih keren dan disukai pengunjung.

Cara Memasang Featured Post Keren di VioMagz

Di sin ada 3 (tiga) pilihan desain yang menarik untuk widget Featured Post,silahkan anda pilih mana yang anda sukai dan cocok untuk dengan tema artikel dari blog anda,ini tutorialnya :

1. Cara Membuat Featured Post VioMagz menjadi Grid

Yang pertama ini yaitu tutorial untuk menciptakan Featured Post berbentuk grid,mungkin anda semua pernah melihatnya di situs web ternama yang konsepnya magazine. Dimana mereka mempunyai tampilam Featured Post kotak-kotak atau grid.

Berikut ini cara membuatnya :

Buka Blogger.com
Sign In dengan Akun Anda
Masuk ke Dashboard Blogger
Pilih hidangan Tata Letak
Pilih Tambahkan Widget/Gadget di bab berikut :

Pilih HTML/Javascript

Beri Judul " Featured Post "

Pada kolom Konten isi dengan script berikut

<style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100% ;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://www.BLOGANDA.com",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:false,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

Edit yang saya tandai BOLD/Tebal dengan alamat blog anda
Bila sudah silahkan klik Simpan

Itulah cara menciptakan featured post pada template VioMagz menjadi Grid,pastikan anda mengikuti langkahnya dengan benar semoga tidak mengalami kesalahan.

2. Cara Membuat Featured Post VioMagz ala

Nah jikalau ini yaitu cara mengedit tampilan Featured Post VioMagz semoga ibarat mirip yang dipakai oleh saya di blog ini. Berikut ini tutorialnya :

Buka Blogger.com
Sign In dengan Akun Anda
Masuk ke Dashboard Blogger
Pilih hidangan Tema
Klik Edit HTML
Cari isyarat berikut :

/* Featured Post */
.FeaturedPost .post-summary {
background: #f7f7f7;
position: relative;
padding: 0;
min-height: 190px;
max-height: 450px;
overflow: hidden;
}
.FeaturedPost .post-summary h3 {
font: $(post.title.font);
position: absolute;
bottom: 58px;
z-index: 1;
font-size: 28px;
margin: 0 15px;
}
.FeaturedPost .post-summary h3::after {
content:"";
position:absolute;
top:-0.25em;
right:100%;
bottom:-0.25em;
width:0.25em;
}
.FeaturedPost .post-summary h3 a {
color: $(jwfp.color);
background: $(jwfp.background.color);
padding: 3px 8px;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: $(post.title.hover.color);
}
.FeaturedPost .post-summary p {
position: absolute;
background: $(jwfp.background.color);
color: $(jwfp.color);
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FeaturedPost .image {
display: block;
}

Hapus isyarat tadi,lalu ganti dengan isyarat ini :

/* Featured Post */
.FeaturedPost .post-summary {
position: relative;
padding: 0;
min-height: auto;
max-height: 400px;
overflow: hidden;
}
.FeaturedPost .post-summary:before {
bottom: 0;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
}
.FeaturedPost .post-summary h3 {
font: 500 Roboto, Arial, sans-serif;
position: absolute;
bottom:0;
padding:20px;
z-index: 99;
font-size: 31px;
margin: 0;
}
.FeaturedPost .post-summary:after {
bottom: 0;
content: "";
display: block;
height: 70%;
width: 100%;
position: absolute;
z-index: 1;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b3000000',GradientType=0);
}
.FeaturedPost .post-summary h3 a {
color: #fff;
text-shadow:1px 1px 3px rgba(0,0,0,.2);
padding:0;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: #fff;
text-decoration: none;
}
.FeaturedPost .post-summary p {
position: absolute;
background: #ffffff;
color: #5a5a5a;
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FeaturedPost .image {
display: block;
background: #e5e5e5;
}

Setelah itu klik Simpan Tema

Itulah cara menciptakan Featured Post keren ala di VioMagz,kelebihan featured post yang ini daripada yang pertama yaitu dari segi loadnya,karena untuk yang saya pakai ibarat di blog ini tidak perlu menambah isyarat HTML ataupun Javascript. Hanya merubah beberapa hal dari isyarat CSSnya saja.

3. Cara Membuat Featured Post ala Metro UI Style

Nah yang ke tiga ini yaitu Cara Membuat Featured Post dengan Style Metro UI Style,sebenarnya ini ibarat dengan yang saya pakai di blog ini,namun ini warna hotamnya tidak memudah ke atas/gradien. Berikut tutotial menciptakan Featured Post ala Metro UI Style di VioMagz :

Buka Blogger.com
Sign In akun Anda
Masuk ke Dashboard Blogger
Pilih hidangan Tema
Klik Edit HTML
Cari isyarat Berikut :

/* Featured Post */
.FeaturedPost .post-summary {
background: #f7f7f7;
position: relative;
padding: 0;
min-height: 200px;
max-height: 450px;
overflow: hidden;
}
.FeaturedPost .post-summary h3 {
font: $(post.title.font);
position: absolute;
bottom: 58px;
z-index: 1;
font-size: 28px;
margin: 0 15px;
}
.FeaturedPost .post-summary h3:after {
content:"";
position:absolute;
top:-0.25em;
right:100%;
bottom:-0.25em;
width:0.25em;
}
.FeaturedPost .post-summary h3 a {
color: $(post.title.color);
background: #fff;
padding: 2px 8px;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: $(post.title.hover.color);
}
.FeaturedPost .post-summary p {
position: absolute;
background: #ffffff;
color: #5a5a5a;
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FeaturedPost .image {
display: block;
}

Hapus isyarat tersebut,dan ganti dengan script ini :

/* Featured Post */
.FeaturedPost .post-summary {
background: #f7f7f7;
position: relative;
padding: 0;
min-height: 200px;
max-height: 350px;
overflow: hidden;
}
.FeaturedPost .post-summary h3 {
font: 500 20px Roboto, Arial, sans-serif;
background: rgba(0, 0, 0, 0.37);
position: absolute;
bottom:0;
padding:20px;
z-index: 1;
font-size: 25px;
margin: 0;
width:94%;
}
.FeaturedPost .post-summary h3:after {
content:"";
position:absolute;
top:-0.25em;
right:100%;
bottom:-0.25em;
width:0.25em;
}
.FeaturedPost .post-summary h3 a {
color: #fff;
padding:0;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: #fff;text-decoration: underline;
}
.FeaturedPost .post-summary p {
position: absolute;
background: #ffffff;
color: #5a5a5a;
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FeaturedPost .image {
display: block;
}

Bila sudah silahkan klik Simpan Tema

Itulah cara menciptakan featured post ala Metro UI Style,mungkin desainnya memang cukup keren tapi kurang responsive bila di lihat melalui perangkat mobile. Kotak hitam/shadownya akan bergeser sehingga terlihat berantakan.

Baca Juga : 5 Blogger Populer Menerima Guest Post dan Content Placement Terbaik

Bagi saya sendiri yang paling keren tentu yang saya pakai di blog ini,karena desainnya yang simpel dan elegan. Selain itu tidak membutuhkan script embel-embel ibarat HTMk atau Javascript sehingga tidak akan memperlambat loading blog anda.

Penutup

Itulah cara menciptakan Featured Post Viomagz menjadi Keren,semoga dengan tutorial ini anda bisa mengubah desain dari Template VioMagz yang anda gunakan menjadi lebih keren dan elegan. Terimakasih sudah membaca artikel saya,dan selamat mencoba merubah featured post di VioMagz menjadi keren.
Sumber https://www.dirga.id/

Wiki Dzgn