Blogger sayfanıza Facebook Fanpage (Hayran) sayfanızı takip etme gadgeti nasıl oluşturulur onu anlatacağım.
Öncelikle aşağıda ki CSS kodlarını ]]></b:skin> kodunun üzerine ekleyelim.
/* CSS */
.stw{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px;border-radius:10px;color:#161617;overflow:hidden;box-shadow:0 -10px 25px -5px rgba(0,0,0,.1)}
.stw .stw-img{width:50px;height:50px}
.stw .stw-img span{display:flex;align-items:center;justify-content:center;height:100%;background-color:#ebeced;border-radius:8px;color:#505050;font-weight:700;font-size:28px}
.stw .stw-content{width:calc(100% - 50px);padding-right:15px}
.stw .stw-content .title{display:block;font-weight:550;font-size:14px;margin:0}
.stw .stw-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.stw.fletro{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.stw.fletro .stw-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.stw.fletro .stw-img{width:100px;height:auto;flex-shrink:0}
.stw.fletro .stw-img img{position:absolute;bottom:0;right:0;max-width:110px}
.stw.discount:after{content:'Follow';font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:22px;padding-right:10px;background-color:#1E90FF;border-radius:80px 0 0 0;color:#fff;position:absolute;bottom:0;right:0}
.drK .stw{color:#161617}
.night-mode .stw{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
Aşağıda ki HTML kodunu da görünmesini istediğiniz HTML/JavaScript Gadgetine ekleyin.
<a class="stw discount dis-31" href="https://www.facebook.com/sitenizinadı/" target="_blank">
<div class="stw-content">
<span class="title">Follow Fanpage Facebook</span>
<span class="desc">Sitenizin adı | Facebook</span>
</div>
<div class="stw-img"><span><svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z' fill='#1E90FF'></path></svg></span></div>
</a>