Cara Menambahkan Widget Like dan Related Post di Blogger

Pembuka

Halo sobat YANVERS sudah lama tidak berjumpa, kali ini saya membagikan kembali tutorial menambahkan Widged Like dan Relate Post.

Cara Membuat Widget Like di Blogger

]]></b:skin> 

 </style> 

/* widget like shared by www.wendycode.com */
.wc-like-btn{position:relative;padding:20px 20px;background:#f89000;font-size:18px;border-radius:5px;color:#fff;outline:none;border:none;display:flex;align-items:center;justify-content:center}
.wc-like-btn::after{content:'';position:absolute;padding:20px 20px;background:#f89000;bottom:-15px;transform:rotate(45deg)}
.wc-like-btn svg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:25px;height:25px;margin-right:5px;z-index:2}
.wc-like-btn svg.like{fill:#fff;stroke:#fff}
#wc-liked{margin-top:5px;z-index:2}
#wc-liked::before{content:attr(data-klik)}
#wc-liked::after{content:attr(data-teks);margin-left:5px}
.wrap-center{display:flex;justify-content:center}

<data:post.body/>

<div class='pS post-body postBody' id='postBody'><data:post.body/><

Download File

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id

Referensi:

Fletro-Jagodesain

Median UI-Jagodesain

Wendycode

Cara Membuat Related Post di Tengah Artikel Blogger

]]></b:skin> 

 </style> 

/* ubah warna cari kode #f89000 dan %23f89000 */
.postTextRelated{position:relative;margin:42px 0;padding:1.5em 0;border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;display:none}
.postTextRelated a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
.postTextRelated a:hover{opacity:.8}
.postTextRelated b{font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #e6e6e6;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.postTextRelated ul{margin:8px 0 0;padding-left:20px}
.postTextRelated li:hover{margin-left:5px}
.postTextRelated li{background:url("data:image/svg+xml,") left / 20px no-repeat;list-style-type:none;padding:0 25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f89000;transition:all .4s ease}

/* css darkmode sesuaikan class (.drK) */
.drK .postTextRelated b{background-color:#1e1e1e;}
.drK .postTextRelated,.drK .postTextRelated b{border-color:rgba(255,255,255,.15)}

<data:post.body/>

<div class='pS post-body postBody' id='postBody'><data:post.body/><

Download Code