Cara Membuat Featured Post Seperti di Template VioMagz

Cara Membuat Featured Post Seperti di Template VioMagz
Tuesday, October 29, 2019
cara-membuat-featured-post
Cara Membuat Featured Post Seperti di Template VioMagzFeatured Post merupakan sebuah widget yang memiliki fungsi untuk menampilkan artikel yang di favorite-kan atau yang disematkan sebagai artikel terbaik dari suatu blog. Umumnya Featured Post letaknya berada di atas postingan blog.

Pada artikel kali ini admin akan memberikan sebuah tutorial Cara Membuat Featured Post Ala Template VioMagz. Featured Post ini nantinya dapat di atur melalui Tata Letak blog, sehingga lebih mudah untuk mengaturnya. Jika kamu tertarik, kamu bisa simak tutorial ini.

Cara Membuat Featured Post

1. Masuk ke Blogger > Pilih Tema > Edit HTML.

2. Copy dan Pastekan kode CSS di bawah ini, dan taruh tepat sebelum kode ]]></b:skin> atau </style>
/* 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;
}

.sidebar .FeaturedPost .post-summary h3 {
 font-size: 16px;
}
4. Simpan Tema.

5. Masuk ke menu Tata Letak > Tambahkan Gadget > Lalu pilih Entri Yang Diunggulkan > Pilh Artikel yang akan di taruh di Featured Post.
featured-post-artikel
Entri Yang Diunggulkan

6. Selesai.

Berikut adalah tampilan Featured Post Seperti Template VioMagz yang telah terpasang di Blogger
Featured-post-viomagz
Tampilan Featured Post
Demikianlah artikel Cara Membuat Featured Post Seperti Template VioMagz yang telah admin buat untuk kamu. Semoga bermanfaat

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Featured Post Seperti di Template VioMagz"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel