Blogger Sosyal Medya Widget Paylaşım Kodu Ekleme

<!--[ 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>
  

 <!--[ 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>
  

 <!--[ 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>