Blogger Sosyal Medya Widget Paylaşım Kodu Ekleme
Widget takip sosyal Kod Özelleştirme Kılavuzu
Baca juga :Blogger Facebook Fanpage Eklentisi
Facebook Widget Paylaşım Kodu
Baca juga :Blogger Tam Ekran İframe Kodu
<!--[ widget follow Facebook by CODE THINK ]-->
<div class="widget-content">
<a class="stw discount dis-31" href="your_link_here" target="_blank">
<div class="stw-content">
<span class="title">Follow your_name on Fanpage Facebook</span>
<span class="desc">your_name | 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>
<style>
/* CSS */
/* 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;
;
}
</style>
</div>
Baca juga :Blogger Sitemap Oluşturma
İnstagram Widget Paylaşım Kodu
<!--[ widget follow instagram by CODE THINK ]-->
<div class="widget-content">
<a class="stw discount1 dis-31" href="your_link_here" target="_blank">
<div class="stw-content">
<span class="title">Follow your_name on Instagram</span>
<span class="desc">your_name | Instagram</span>
</div>
<div class="stw-img"><span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z'></path><circle cx='23' cy='9' r='1'></circle><path d='M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z' fill='#FF69B4'></path></svg></span></div>
</a>
<style>
/* 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.discount1: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:#FF69B4;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}
</style>
</div>
Twitter Widget Paylaşım Kodu
Baca juga :Blogger HTML Button
<!--[ widget follow Twitter by CODE THINK ]-->
<div class="widget-content">
<a class="stw discount3 dis-31" href="your_link_here" target="_blank">
<div class="stw-content">
<span class="title">Follow your_name on Twitter</span>
<span class="desc">your_name | Twitter</span>
</div>
<div class="stw-img"><span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z' fill='#00BFFF'></path></svg></span></div>
</a>
<style>
/* 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.discount3: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:#00BFFF;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}
</style>
</div>