Thêm tiện ích truyền thông xã hội trong Blogger

Chào mừng đến với Nguyen Ha Blog,  nay tôi sẽ hướng dẫn tạo tiện ích truyền thông xã hội của Telegram, YouTube và WhatsApp cho Blogger. Như hình ảnh dưới đây:

them-tien-ich-truyen-thong-xa-hoi-trong-blogger
Tiện ích truyền thông xã hội trong Blogger

Tiện ích truyền thông xã hội rất quan trọng vì nó giúp khách hàng của bạn dễ dàng tiếp cận mục tiêu của  bạn hướng đến. Khi một công ty có thể sử dụng phương tiện truyền thông xã hội để kết nối với khán giả của mình, công ty có thể sử dụng phương tiện truyền thông xã hội để tạo ra lưu lượng truy cập, nhận thức về thương hiệu, khách hàng tiềm năng, doanh số bán hàng,...

Các bước thêm tiện ích truyền thông mạng xã hội cho Blogger

Các bạn vào phần Bố cục và thêm tiện ích HTML/ JavaScript và thêm những đoạn code sau:

Chú ý: Mỗi HTML/ JavaScript là một tiện ích nhé

Tiện ích Youtube


<style>
.asyoutube{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}
.asyoutube .asyoutube-img{width:50px;height:50px}
.asyoutube .asyoutube-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}
.asyoutube .asyoutube-content{width:calc(100% - 50px);padding-right:15px}
.asyoutube .asyoutube-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.asyoutube .asyoutube-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.asyoutube.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}
.asyoutube.fletro .asyoutube-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.asyoutube.fletro .asyoutube-img{width:100px;height:auto;flex-shrink:0}
.asyoutube.fletro .asyoutube-img img{position:absolute;bottom:0;right:0;max-width:110px}
.asyoutube.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:#fd2929;
border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
</style>
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="asyoutube discount dis-31" href="https://www.youtube.com/c/AbhijeetCreations" target="_blank">
<div class="asyoutube-content">
<span class="title">Subcribe To Our YOUTUBE Channel</span>
<span class="desc">To Get Video Tutorials!</span>
</div>
<div class="asyoutube-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></g></svg>
</span></div></a></div></div>

Tiện ích Telegram


<style>
/* Telegram Widget CSS */
.astelegram{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}
.astelegram .astelegram-img{width:50px;height:50px}
.astelegram .astelegram-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}
.astelegram .astelegram-content{width:calc(100% - 50px);padding-right:15px}
.astelegram .astelegram-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.astelegram .astelegram-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.astelegram.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}
.astelegram.fletro .astelegram-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.astelegram.fletro .astelegram-img{width:100px;height:auto;flex-shrink:0}
.astelegram.fletro .astelegram-img img{position:absolute;bottom:0;right:0;max-width:110px}
.astelegram.discount:after{content:'Join Now';
font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;
width:75px;height:20px;
padding-right:10px;background-color:#29c1fd;
border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
</style>
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="astelegram discount dis-31" href="https://telegram.me/asthemesworld" target="_blank">
<div class="astelegram-content">
<span class="title">Join our Telegram Channel</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="astelegram-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></div></div>

Tiện ích WhatsApp


<style>
.aswhatsapp{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}
.aswhatsapp .aswhatsapp-img{width:50px;height:50px}
.aswhatsapp .aswhatsapp-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}
.aswhatsapp .aswhatsapp-content{width:calc(100% - 50px);padding-right:15px}
.aswhatsapp .aswhatsapp-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.aswhatsapp .aswhatsapp-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.aswhatsapp.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}
.aswhatsapp.fletro .aswhatsapp-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.aswhatsapp.fletro .aswhatsapp-img{width:100px;height:auto;flex-shrink:0}
.aswhatsapp.fletro .aswhatsapp-img img{position:absolute;bottom:0;right:0;max-width:110px}
.aswhatsapp.discount:after{content:'Message';
font-weight:700;font-size:12px;display:flex;align-items:center;
justify-content:flex-end;width:75px;height:20px;padding-right:10px;
background-color:#25D366;border-radius:80px 0 0 0;
color:#ffffff;position:absolute;bottom:0;right:0}
</style>
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="aswhatsapp discount dis-31" href="https://wa.me/91XXXXXXXXXX" target="_blank">
<div class="aswhatsapp-content">
<span class="title">For Any Help Message on WhatsApp</span>
<span class="desc">We will reply in few minutes...</span>
</div>
<div class="aswhatsapp-img"><span><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31_3-whatsapp"><g><g><path d="M256.063,16.75h-0.125C124.379,16.75,17.397,124.051,17.397,256     c0,52.336,16.819,100.848,45.422,140.232l-29.732,88.873l91.716-29.394c37.725,25.063,82.731,39.538,131.26,39.538     c131.559,0,238.541-107.335,238.541-239.25C494.604,124.083,387.621,16.75,256.063,16.75L256.063,16.75z M256.063,16.75" style="fill:#5ACF5F;"/><path d="M394.896,354.596c-5.758,16.304-28.604,29.817-46.824,33.771     c-12.473,2.657-28.754,4.785-83.568-18.006c-70.125-29.127-115.28-100.575-118.795-105.21     c-3.375-4.637-28.336-37.827-28.336-72.165c0-34.331,17.386-51.052,24.398-58.223c5.751-5.897,15.267-8.583,24.394-8.583     c2.954,0,5.606,0.146,7.997,0.267c7.008,0.302,10.524,0.717,15.151,11.813c5.756,13.909,19.77,48.239,21.445,51.771     c1.701,3.53,3.396,8.311,1.012,12.945c-2.24,4.788-4.205,6.91-7.725,10.975c-3.521,4.073-6.865,7.182-10.381,11.544     c-3.219,3.798-6.859,7.867-2.801,14.896c4.055,6.879,18.07,29.812,38.707,48.235c26.641,23.775,48.229,31.372,55.957,34.604     c5.756,2.395,12.615,1.822,16.816-2.663c5.34-5.774,11.938-15.342,18.645-24.759c4.771-6.76,10.795-7.599,17.119-5.208     c6.441,2.244,40.531,19.143,47.541,22.641c7.006,3.529,11.635,5.203,13.334,8.165     C400.652,324.361,400.652,338.271,394.896,354.596L394.896,354.596z M394.896,354.596" style="fill:#FCFCFC;"/></g></g></g><g id="Layer_1"/></svg></span></div>
</a></div></div>

Đường link với title thì các bạn tự chỉnh nhé.

Kết Luận:

Như vậy đã có tiện ích truyền thông mạng xã hội xịn xò mong bài viết này sẽ hữu ích cho bạn, nếu có câu hỏi hay ý kiến bạn hãy bình luận xuống dưới. Chúc bạn thành công!

Đăng nhận xét

Mới hơn Cũ hơn

Nhận xét Mới