Hello friends welcome to AS Themes World.
In the previous part we create widget of Telegram, YouTube and WhatsApp. Today we are going to create widget of Instagram, Messanger and Twitter for blogger. The above image is the preview of the amazing 'Social Media Widget'.
What is Social Media
Social media are interactive digitally-mediated technologies that facilitate the creation or sharing/exchange of information, ideas, career interests, and other forms of expression via virtual communities and networks.
Advantages of Social Media
Social Media plays a crucial role in connecting people and developing relationships, not only with key influencers and journalists covering your company’s sector, but also provides a great opportunity to establish customer service by gathering input, answering questions and listening to their feedback.
The insight you gain from social media listening provide your organization with a better understanding of what’s working and what’s not, and goes a long way in helping your public image. It’s important to be aware real-time of what people are saying about your company as well as your competitors.
Now follow the some simple steps to Create Widget of Instagram, Messanger and Twitter for Blogger.
Create Widget for Blogger
Instagram Widget
<!--Instagram Widget-->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran4 discount dis-31" href="http://www.instagram.com/abhijeet09_" target="_blank">
<div class="penawaran4-content">
<span class="title">Follow Us on Instagram</span>
<span class="desc">To Get Latest Notification!</span>
</div>
<div class="penawaran4-img"><span><svg enable-background="new 0 0 800 800" height="800px" id="Layer_1" version="1.1" viewBox="0 0 800 800" width="800px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="21.1958" x2="776.4386" y1="23.5562" y2="774.0921"><stop offset="0" style="stop-color:#FD2C7A"/><stop offset="0.5" style="stop-color:#FE5F60"/><stop offset="1" style="stop-color:#FF7256"/></linearGradient><path d="M774.5,260.773c0-129.401-105.88-235.275-235.28-235.275H260.781 C131.38,25.499,25.5,131.373,25.5,260.773v278.453c0,129.4,105.879,235.274,235.28,235.274H539.22 c129.4,0,235.28-105.874,235.28-235.274V260.773z" fill="url(#SVGID_1_)"/><path d="M525.529,120.802H274.471c-102.033,0-185.038,83.005-185.038,185.038v251.05 c0,102.032,83.005,185.044,185.038,185.044h251.059c102.021,0,185.038-83.012,185.038-185.044V305.84 C710.567,203.808,627.551,120.802,525.529,120.802L525.529,120.802z M648.08,556.891c0,67.687-54.875,122.562-122.551,122.562 H274.471c-67.681,0-122.55-54.875-122.55-122.562V305.84c0-67.681,54.869-122.55,122.55-122.55h251.059 c67.676,0,122.551,54.869,122.551,122.55V556.891z M648.08,556.891" opacity="0.15"/><path d="M400.001,270.72c-88.585,0-160.65,72.065-160.65,160.651c0,88.574,72.065,160.639,160.65,160.639 c88.571,0,160.636-72.064,160.636-160.639C560.638,342.786,488.572,270.72,400.001,270.72L400.001,270.72z M400.001,529.522 c-54.216,0-98.168-43.94-98.168-98.151c0-54.216,43.952-98.168,98.168-98.168c54.213,0,98.148,43.952,98.148,98.168 C498.149,485.582,454.215,529.522,400.001,529.522L400.001,529.522z M400.001,529.522" opacity="0.15"/><path d="M599.443,259.376c0,21.262-17.236,38.499-38.493,38.499s-38.494-17.237-38.494-38.499 c0-21.257,17.237-38.488,38.494-38.488S599.443,238.119,599.443,259.376L599.443,259.376z M599.443,259.376" opacity="0.15"/><path d="M525.529,89.431H274.471c-102.033,0-185.038,83.006-185.038,185.039v251.056 c0,102.032,83.005,185.038,185.038,185.038h251.059c102.021,0,185.038-83.006,185.038-185.038V274.469 C710.567,172.437,627.551,89.431,525.529,89.431L525.529,89.431z M648.08,525.525c0,67.687-54.875,122.556-122.551,122.556H274.471 c-67.681,0-122.55-54.869-122.55-122.556V274.469c0-67.681,54.869-122.55,122.55-122.55h251.059 c67.676,0,122.551,54.869,122.551,122.55V525.525z M648.08,525.525" fill="#FFFFFF"/><path d="M400.001,239.355c-88.585,0-160.65,72.065-160.65,160.645c0,88.58,72.065,160.645,160.65,160.645 c88.571,0,160.636-72.064,160.636-160.645C560.638,311.42,488.572,239.355,400.001,239.355L400.001,239.355z M400.001,498.157 c-54.216,0-98.168-43.946-98.168-98.157c0-54.216,43.952-98.168,98.168-98.168c54.213,0,98.148,43.952,98.148,98.168 C498.149,454.211,454.215,498.157,400.001,498.157L400.001,498.157z M400.001,498.157" fill="#FFFFFF"/><path d="M599.443,240.557c0,21.257-17.236,38.499-38.493,38.499s-38.494-17.242-38.494-38.499 s17.237-38.494,38.494-38.494S599.443,219.3,599.443,240.557L599.443,240.557z M599.443,240.557" fill="#FFFFFF"/></g></svg></span></div>
</a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran4{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}
.penawaran4 .penawaran4-img{width:50px;height:50px}
.penawaran4 .penawaran4-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}
.penawaran4 .penawaran4-content{width:calc(100% - 50px);padding-right:15px}
.penawaran4 .penawaran4-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran4 .penawaran4-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran4.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}
.penawaran4.fletro .penawaran4-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran4.fletro .penawaran4-img{width:100px;height:auto;flex-shrink:0}
.penawaran4.fletro .penawaran4-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran4.discount:after{content:'Follow';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width: 70px;height:20px;padding-right:15px;background-color:#cd486b;border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran4{color:#161617}
.night-mode .penawaran4{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran4 .penawaran4-img span{background-color:#003366}
</style>
</div>
</div>
- Change the link with your Instagram link that we've marked.
- You can also change the sentence to your liking by changing the sentence 'Follow Us on Instagram' and 'To Get Latest Notifications! ' and others that we've marked.
- You can also customize the corner text by changing the 'Follow'. And also you can change the width, height and color of the corner text that we've marked.
Messanger Widget
<!--Messanger Widget-->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran5 discount dis-31" href="#" target="_blank">
<div class="penawaran5-content">
<span class="title">For Any Query Message on Messanger</span>
<span class="desc">We will reply in few minutes...</span>
</div>
<div class="penawaran5-img"><span><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 id="Messenger_4_"><path d="M256,0.003c-144.225,0 -256,105.645 -256,248.326c0,74.636 30.596,139.126 80.406,183.681c4.172,3.76 6.696,8.963 6.902,14.577l1.391,45.534c0.463,14.526 15.452,23.952 28.742,18.131l50.788,-22.406c4.326,-1.906 9.117,-2.266 13.65,-1.03c23.333,6.438 48.212,9.838 74.121,9.838c144.226,0 256,-105.645 256,-248.325c0,-142.681 -111.774,-248.326 -256,-248.326Z" id="Bubble_Solid_3_" style="fill:url(#_Linear1);"/><path d="M102.297,320.956l75.203,-119.295c11.95,-18.955 37.602,-23.694 55.527,-10.25l59.802,44.864c5.512,4.121 13.032,4.07 18.492,-0.051l80.766,-61.296c10.766,-8.19 24.879,4.739 17.616,16.174l-75.151,119.244c-11.951,18.955 -37.602,23.694 -55.527,10.25l-59.802,-44.865c-5.512,-4.12 -13.032,-4.069 -18.492,0.052l-80.818,61.347c-10.765,8.19 -24.879,-4.739 -17.616,-16.174Z" id="Bolt_4_" style="fill:#fff;"/></g><defs><linearGradient gradientTransform="matrix(1.45038e-13,512,-512,1.45038e-13,256,0.0032465)" gradientUnits="userSpaceOnUse" id="_Linear1" x1="0" x2="1" y1="0" y2="0"><stop offset="0" style="stop-color:#00b2ff;stop-opacity:1"/><stop offset="1" style="stop-color:#006aff;stop-opacity:1"/></linearGradient></defs></svg>
</!doctype></span></div></a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran5{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}
.penawaran5 .penawaran5-img{width:50px;height:50px}
.penawaran5 .penawaran5-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}
.penawaran5 .penawaran5-content{width:calc(100% - 50px);padding-right:15px}
.penawaran5 .penawaran5-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran5 .penawaran5-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran5.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}
.penawaran5.fletro .penawaran5-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran5.fletro .penawaran5-img{width:100px;height:auto;flex-shrink:0}
.penawaran5.fletro .penawaran5-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran5.discount:after{content:'Message';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:20px;padding-right: 5px;background-color:#006AFF;border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran5{color:#161617}
.night-mode .penawaran5{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran5 .penawaran5-img span{background-color:#003366}
</style>
</div>
</div> - Change the link with your Messanger link that we've marked.
- You can also change the sentence to your liking by changing the sentence 'For Any Query Message on Messanger' and 'We will reply in few minutes... ' and others that we've marked.
- You can also customize the corner text by changing the 'Message'. And also you can change the width, height and color of the corner text that we've marked.
Twitter Widget
<!--Twitter Widget-->
<div class="widget HTML" data-version="2" id="HTML5">
<div class="widget-content">
<a class="penawaran6 discount dis-31" href="http://www.twitter.com/abhijeet09_" target="_blank">
<div class="penawaran6-content">
<span class="title">Follow Us on Twitter</span>
<span class="desc">To get notifications of new tweet...</span>
</div>
<div class="penawaran6-img"><span><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"><rect height="400" style="fill:none;" width="400" x="56" y="56"/><path d="M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104" style="fill:#1da1f2;fill-rule:nonzero;"/></svg></span></div>
</a><!--!doctype-->
<style>
/* Widget Promo Produk */
.penawaran6{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}
.penawaran6 .penawaran6-img{width:50px;height:50px}
.penawaran6 .penawaran6-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}
.penawaran6 .penawaran6-content{width:calc(100% - 50px);padding-right:15px}
.penawaran6 .penawaran6-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran6 .penawaran6-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran6.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}
.penawaran6.fletro .penawaran6-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran3.fletro .penawaran3-img{width:100px;height:auto;flex-shrink:0}
.penawaran6.fletro .penawaran6-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran6.discount:after{content:'Follow';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:70px;height:20px;padding-right:15px;background-color:#1DA1F2;border-radius:80px 0 0 0;color:#ffffff;position:absolute;bottom:0;right:0}
.dark-mode .penawaran6{color:#161617}
.night-mode .penawaran6{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran6 .penawaran6-img span{background-color:#003366}
</style>
</div>
</div> - Change the link with your Twitter link that we've marked.
- You can also change the sentence to your liking by changing the sentence 'Follow Us on Twitter' and 'To get notifications of new tweets...' and others that we've marked.
- You can also customize the corner text by changing the 'Follow'. And also you can change the width, height and color of the corner text that we've marked.
At this point, your social media widget has been completely created, if you follow all the steps correctly we can guarantee that the social media is working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.