Home
Blogger
Tutorial

Featured Post ala Igniel - Begini Cara Membuatnya

Hallo sobat bloggers yang ada diseluruh indonesia, kali ini saya akan berbagi tutorial cara membuat Widget Featured Post mirip igniel.

Siapa sih disini yang tidak tau dengan mbak igniel, ya igniel merupakan salah satu bloggers dan sekaligus perancang template blogger, dengan karya-karyanya yang lumayan bagus. Salah satu template hasil karya mbak igniel yaitu: Igniplex 

Widget Fetured Post ala igniel ini memiliki tampilan yang keren dan menarik perhatian pengunjung, mak tak heran banyak bloggers yang memasang featured post ini ke situs blog mereka.

Trus bagaimana cara membuat widget tersebut

Cara membuat widget featured post ala Igniel

  • Pertama login ke blogger sobat.
  • Jika sudah login pilih tema > edit HTML
Sebelum melanjut ke tutorial ada kalahnya kamu menghapus CSS  Featured Post template bawaan dulu.
  • Setelah menghapus CSS Featured Post bawaan dari template kamu, silahkan copy code dibawah ini lalu tempel diatas code/tag ]]></b:skin> atau anda bisa tempel di tempat anda menghapus CSS Featured Post Bawaan template sobat.

/* Featured Post by Jagoredesign.my.id*/
.FeaturedPost .post-summary {
    background: #008080; 
    background-image:linear-gradient(110deg,rgba(255,255,255,.1) 16%,rgba(255,255,255,.1) 17%,rgba(255,255,255,.05) 17%,rgba(255,255,255,.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,.05) 78%,rgba(255,255,255,.05) 84%,rgba(255,255,255,.1) 84%,rgba(255,255,255,.1))
    position: relative;
    padding: 0;
    min-height: 190px;
    max-height: 450px;
    overflow: hidden;
    border-radius: 10px;
    transition: all .5s ease
}
.FeaturedPost .post-summary h3 {
    font: 20px Poppins, Arial, sans-serif;
    position: absolute;
    z-index: 1;
    font-size: 1.25rem;
    margin: 0;
    overflow: hidden;
    padding: 15px;
    width: 60%;
    right: -16px;
    line-height: initial
}
See also:Cara membuat live chat diblog menggunakan Tawk.to
.FeaturedPost .post-summary h3::after {
    content: "";
    position: absolute;
    top: -.25em;
    right: 100%;
    bottom: -.25em;
    width: .25em
}
.FeaturedPost .post-summary h3 a {
    color: #fff
}
.FeaturedPost .post-summary p {
    position: absolute;
    background: #fff;
    color: #000;
    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;
    border-radius: 7px 0 0 7px;
See also:Cara membuat form Contact us Keren 2020
    width: 37%;
    height: 190px;
    clear: both;
    max-width: 100%
}
.sidebar .FeaturedPost .post-summary h3 {
    font-size: 16px
}
.Night .above-post-widget h2 span {
    background: #292e38;
    color: #fff
}
.above-post-widget h2 {
    transition: all .5s ease;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 48.34 4.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23008c5f' points='27.36 0 48.34 0 45.48 4.99 24.5 4.99 27.36 0'%3E%3C/polygon%3E%3Cpolygon fill='%231d2129' points='2.86 0 23.84 0 20.98 4.99 0 4.99 2.86 0'%3E%3C/polygon%3E%3C/svg%3E"); /* Gambar Garis */
    height: 6px;
    display: flex;
    margin-bottom: 15px;
    font: 500 14px Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.15rem;
    align-items: center;
    color: #333;
    margin-top: 7px;
    position: relative
}
.above-post-widget h2 span {
    transition: all .5s ease;
    background: #ffff;
    padding-right: 10px;
    position: absolute;
See also:Cara Hosting atau Upload file JavaScript di GithHub
    font-size: 18px;
    top: -11.5px
}
.widget .title svg {
    width: 20px;
    height: 20px;
    margin-right: 3px
}
svg {
    vertical-align: middle
}
.above-post-widget svg {
    width: 17px;
    height: 17px;
    margin-right: 5px;
    fill: #1a73e8
}
div#sorotan {
    display: flex;
    margin-bottom: 20px
}
div#sorotan .right a {
    color: #fff
}
div#sorotan .right a:hover {
    text-decoration: underline
}
@media only screen and (max-width:480px) {
    .FeaturedPost .post-summary h3 {
See also:Terbaru cara memasang widget statistik corona virus update otomatis
        width: 96%;
        top: 255px;
        font-size: 16px
    }
    .FeaturedPost .image {
        width: 100%;
        max-width: 100%;
        border-radius: 7px 7px 0 0;
        height: 265px
    }
    .FeaturedPost .post-summary {
        height: 330px
    }
    .FeaturedPost .post-summary h3 {
        font-size: 20px;
        margin: 0 10px
    }
    .FeaturedPost .post-summary p {
        margin: 0 10px
    }
}
  • Setelah itu simpan dan lihat hasilnya
Jangan lupa sesuaikan warnanya menggunakan Color Picker

Pengaturan widgetnya.

Jika featured postnya error atau kebesaran ditampilan mobile, coba cari code dibawah ini.
.FeaturedPost .post-summary, .bellow-header-widget {
  width: calc(100% + 30px);
  margin: 0px 0px 15px -15px;
 }
 .FeaturedPost .post-summary, .FeaturedPost .image{
  border-radius: unset;
 }
Kemudian hapus code tersebut. Jika sudah dihapus silahkan cek kembali blog sobat apakah masih ada yang bermasalah atau tidak.

Selanjutnya memasang icon svg

  • Pertama salin code dibawah ini
<h2 class='title'><span><svg viewBox='0 0 24 24'><path d='M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z' fill='#008080'/></svg>Sorotan</span></h2>
  • Kemudian buka blogger > edit HTML > Lompat widget > Pilih Featured Post
  • Cari code <h2 class='title'><data:title/></h2> kemudian ganti dengan code tersebut. Kira-kira hasilnya seperti dibawah ini.
  • Kemudian simpan dan lihat hasilnya. 
Sekian tutorial singkat dari saya jika ada yang tidak dimengeri silahkan tulis dikolom komentar.

Post a Comment