Home
Blogger Codes
HTML & CSS Codes

Add social medial link in Sidebar of | Median UI Template |

Add a social medial link in Sidebar

Many of you are having trouble adding the (Median UI) Template social media sidebar.
Social media sidebar template (Median UI) that is ready to use.

What is the best way to use it?

  • Add an (HTML) gadget to the layout section.
  • Copy the script and replace the slogan and title with your own.
Let's Start

YOUTUBE

<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran1 discount dis-31" href="https://www.youtube.com/channel/______________?view_as=subscriber" target="_blank">
<div class="penawaran1-content">
<span class="title">Subcribe To Our YOUTUBE Channel</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="penawaran1-img"><span><!doctype svg  public '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewbox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M501.299,132.766c-5.888,-22.03 -23.234,-39.377 -45.264,-45.264c-39.932,-10.701 -200.037,-10.701 -200.037,-10.701c0,0 -160.105,0 -200.038,10.701c-22.025,5.887 -39.376,23.234 -45.264,45.264c-10.696,39.928 -10.696,123.236 -10.696,123.236c0,0 0,83.308 10.696,123.232c5.888,22.03 23.239,39.381 45.264,45.268c39.933,10.697 200.038,10.697 200.038,10.697c0,0 160.105,0 200.037,-10.697c22.03,-5.887 39.376,-23.238 45.264,-45.268c10.701,-39.924 10.701,-123.232 10.701,-123.232c0,0 0,-83.308 -10.701,-123.236Z" style="fill:#ed1f24;fill-rule:nonzero;"/><path d="M204.796,332.803l133.018,-76.801l-133.018,-76.801l0,153.602Z" style="fill:#fff;fill-rule:nonzero;"/></path></path></g></svg>
</!doctype></span></div></a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran1{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:3px;color:#161617;overflow:hidden}
.penawaran1 .penawaran1-img{width:50px;height:50px}
.penawaran1 .penawaran1-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}
.penawaran1 .penawaran1-content{width:calc(100% - 50px);padding-right:15px}
.penawaran1 .penawaran1-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran1 .penawaran1-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran1.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}
.penawaran1.fletro .penawaran1-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran1.fletro .penawaran1-img{width:100px;height:auto;flex-shrink:0}
.penawaran1.fletro .penawaran1-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran1.discount:after{content:'Subcribe';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:23px;padding-right:10px;background-color:#fdd929;border-radius:80px 0 0 0;color:#505050;position:absolute;bottom:0;right:0}
.dark-mode .penawaran1{color:#161617}
.night-mode .penawaran1{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div>

Whatsapp

<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran1 discount dis-31" href="ENTER YOUR URL HERE" target="_blank">
<div class="penawaran1-content">
<span class="title">ENTER YOUR SLOGAN</span>
<span class="desc">ENTER YOUR SLOGAN</span>
</div>
<div class="penawaran1-img"><span><!doctype svg  public '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewbox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M501.299,132.766c-5.888,-22.03 -23.234,-39.377 -45.264,-45.264c-39.932,-10.701 -200.037,-10.701 -200.037,-10.701c0,0 -160.105,0 -200.038,10.701c-22.025,5.887 -39.376,23.234 -45.264,45.264c-10.696,39.928 -10.696,123.236 -10.696,123.236c0,0 0,83.308 10.696,123.232c5.888,22.03 23.239,39.381 45.264,45.268c39.933,10.697 200.038,10.697 200.038,10.697c0,0 160.105,0 200.037,-10.697c22.03,-5.887 39.376,-23.238 45.264,-45.268c10.701,-39.924 10.701,-123.232 10.701,-123.232c0,0 0,-83.308 -10.701,-123.236Z" style="fill:#ed1f24;fill-rule:nonzero;"/><path d="M204.796,332.803l133.018,-76.801l-133.018,-76.801l0,153.602Z" style="fill:#fff;fill-rule:nonzero;"/></path></path></g></svg>
</!doctype></span></div></a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran1{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:3px;color:#161617;overflow:hidden}
.penawaran1 .penawaran1-img{width:50px;height:50px}
.penawaran1 .penawaran1-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}
.penawaran1 .penawaran1-content{width:calc(100% - 50px);padding-right:15px}
.penawaran1 .penawaran1-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran1 .penawaran1-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran1.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}
.penawaran1.fletro .penawaran1-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran1.fletro .penawaran1-img{width:100px;height:auto;flex-shrink:0}
.penawaran1.fletro .penawaran1-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran1.discount:after{content:'Subcribe';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:23px;padding-right:10px;background-color:#fdd929;border-radius:80px 0 0 0;color:#505050;position:absolute;bottom:0;right:0}
.dark-mode .penawaran1{color:#161617}
.night-mode .penawaran1{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div>
</div>

INSTAGRAM

<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran1 discount dis-31" href="ENTER YOUR URL HERE" target="_blank">
<div class="penawaran1-content">
<span class="title">ENTER YOUR SLOGAN</span>
<span class="desc">ENTER YOUR SLOGAN</span>
</div>
<div class="penawaran1-img"><span><!doctype svg  public '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewbox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M501.299,132.766c-5.888,-22.03 -23.234,-39.377 -45.264,-45.264c-39.932,-10.701 -200.037,-10.701 -200.037,-10.701c0,0 -160.105,0 -200.038,10.701c-22.025,5.887 -39.376,23.234 -45.264,45.264c-10.696,39.928 -10.696,123.236 -10.696,123.236c0,0 0,83.308 10.696,123.232c5.888,22.03 23.239,39.381 45.264,45.268c39.933,10.697 200.038,10.697 200.038,10.697c0,0 160.105,0 200.037,-10.697c22.03,-5.887 39.376,-23.238 45.264,-45.268c10.701,-39.924 10.701,-123.232 10.701,-123.232c0,0 0,-83.308 -10.701,-123.236Z" style="fill:#ed1f24;fill-rule:nonzero;"/><path d="M204.796,332.803l133.018,-76.801l-133.018,-76.801l0,153.602Z" style="fill:#fff;fill-rule:nonzero;"/></path></path></g></svg>
</!doctype></span></div></a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran1{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:3px;color:#161617;overflow:hidden}
.penawaran1 .penawaran1-img{width:50px;height:50px}
.penawaran1 .penawaran1-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}
.penawaran1 .penawaran1-content{width:calc(100% - 50px);padding-right:15px}
.penawaran1 .penawaran1-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran1 .penawaran1-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran1.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}
.penawaran1.fletro .penawaran1-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran1.fletro .penawaran1-img{width:100px;height:auto;flex-shrink:0}
.penawaran1.fletro .penawaran1-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran1.discount:after{content:'Subcribe';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:23px;padding-right:10px;background-color:#fdd929;border-radius:80px 0 0 0;color:#505050;position:absolute;bottom:0;right:0}
.dark-mode .penawaran1{color:#161617}
.night-mode .penawaran1{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}
</style>
</div>
</div>

Telegram

<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran2 discount dis-31" href="https://t.me/sufianamjad" target="_blank">
<div class="penawaran2-content">
<span class="title">Join our Telegram Channel</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="penawaran2-img"><span><svg enable-background="new 0 0 24 24" height="512" viewbox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z" fill="#039be5"></path></svg></span></div>
</a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran2{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:3px;color:#161617;overflow:hidden}
.penawaran2 .penawaran2-img{width:50px;height:50px}
.penawaran2 .penawaran2-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}
.penawaran2 .penawaran2-content{width:calc(100% - 50px);padding-right:15px}
.penawaran2 .penawaran2-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran2 .penawaran2-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran2.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}
.penawaran2.fletro .penawaran2-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran2.fletro .penawaran2-img{width:100px;height:auto;flex-shrink:0}
.penawaran2.fletro .penawaran2-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran2.discount:after{content:'Join';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:25px;padding-right:10px;background-color:#fdd929;border-radius:80px 0 0 0;color:#505050;position:absolute;bottom:0;right:0}
.dark-mode .penawaran2{color:#161617}
.night-mode .penawaran2{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran2 .penawaran2-img span{background-color:#003366}
</style>
</div>
</div>
Read More :
#Blogger Codes #HTML & CSS Codes

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.