Membuat Widget Social Media Follow Box Responsive di Blogger

Tutorial membuat Widget Social Media Follow Box Responsive

Widget Social Media Follow Box Responsive

Social Media Follow

Follow adalah artinya mengikuti yaitu istilah populer di media sosial yang perlu diketahui pengguna medsos. Terutama bagi pemula, wajib tahu apa saja istilah dalam bermedia sosial termasuk arti follow di medsos. Follow menjadi salah satu istilah dalam bermedia sosial yang memiliki arti tersendiri. Baik untuk platform media sosial berupa Instagram, Twitter, Facebook, dan lainnya sebagian besar menggunakan kata follow untuk merujuk pada kegiatan bermedia sosial.

Sosial Media Follow adalah mengikuti sebuah akun sehingga seseorang dapat mengetahui update terbaru atau berita terbaru dari akun yang diikuti. Sehingga berbagai kabar terkini dapat dengan mudah diketahui oleh mereka. Misalnya saja untuk postingan terbaru, story, ataupun informasi lainnya yang mana beberapa jenis akun pribadi memerlukan seseorang untuk follow dulu agar bisa melihat tampilan beranda akun seseorang.

Tutorial

Cara membuat Widget Social Media Follow Box Responsive di Sidebar Blogger, diantaranya social media Telegram, Facebook, Instagram, Twitter, Youtube. Ikuti langkah-langkahnya berikut ini.

Copy Paste Kode Script

1. Pertama Masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Langkah #1 cari kode ]]></b:skin>, setelah ketemu salin kode CSS di bawah ini dan tempelkan sebelum atau di atas kode ]]></b:skin>.

/* Sidebar Social */.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background-color:white;padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden} .widget-content .scW:not(:first-child){margin-top:25px} .scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0} .scC{width:calc(100% - 50px);margin-left:8px} .scW.ig::after{background:#e1306c} .scW.yt::after{background:#ff0000} .scW.tg_or_tw::after{background:#229ed9}.scW.fb::after{background:#3b5998}.scC >*{display:block;font-size:13px;padding:1px 0} .scC >*:first-child{font-weight:600} .scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center} .scI >svg{width:28px;height:28px} .scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c} .scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000} .scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9} .drK .scW{background-color:#242424;color:white} .drK .scI{background-color:#303030}

5. Kemudian Pratinjau dan Simpan.
6. Langkah #2, terakhir salin kode html di bawah ini, dan tempelkan di widget sidebar, atau di manapun yang anda sukai.

<!--[ Telegram box ]--><a class="scW tg_or_tw" data-text="Join" href="#" target="_blank"><div class="scC"><span>Join our Telegram channel</span><span>@telegram</span></div><div class="scI"><svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z"></path></g></svg></div></a><br>

<!--[ youtube box ]--><a class="scW yt" data-text="Subscribe" href="#" target="_blank"><div class="scC"><span>Subscribe our YouTube channel</span><span>@youtube</span></div><div class="scI"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g><path d="M30,12a5.71,5.71,0,0,0-5.31-5.7C18.92,6,13.06,6,7.33,6.28,4.51,6.28,2,9,2,12a43.69,43.69,0,0,0,0,8.72,5.32,5.32,0,0,0,5.28,5.33h0q4.35.24,8.72.24t8.67-.23A5.34,5.34,0,0,0,30,20.8,31.67,31.67,0,0,0,30,12Zm-2,8.63a.49.49,0,0,0,0,.12,3.36,3.36,0,0,1-3.39,3.34,166,166,0,0,1-17.28,0A3.36,3.36,0,0,1,4,20.65a42,42,0,0,1,0-8.47.45.45,0,0,0,0-.11A3.78,3.78,0,0,1,7.38,8.28c2.86-.13,5.74-.19,8.62-.19s5.76.06,8.62.19h.05c1.71,0,3.33,1.84,3.33,3.79a.76.76,0,0,0,0,.15A30.11,30.11,0,0,1,28,20.61Z"></path><path d="M20.79,15.51l-7.14-3.68a1,1,0,1,0-.92,1.78l5.43,2.79-4,2.07V16.4a1,1,0,0,0-2,0v3.72a1,1,0,0,0,1,1,1,1,0,0,0,.46-.11l7.14-3.72a1,1,0,0,0,.54-.89A1,1,0,0,0,20.79,15.51Z"></path></g></svg></div></a><br>

<!--[ Instragrm box ]--><a class="scW ig" data-text="follow" href="#" target="_blank"><div class="scC"><span>Follow our Instragram account</span><span>@instagram</span></div><div class="scI"><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"></path></svg></div></a><br>

<!--[ facebook box ]--><a class="scW fb" data-text="follow" href="#" target="_blank"><div class="scC"><span>Like our Facebook page</span><span>@fb_page</span></div><div class="scI"><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"></path></svg></div></a><br>

<!--[ Twitter box ]--><a class="scW tg_or_tw" data-text="follow" href="#" target="_blank"><div class="scC"><span>Follow our Twitter account</span><span>@twitter</span></div><div class="scI"><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"></path></svg></div></a>

Demo

Contoh demo tampilan social media follow box responsive blog.

Join our Telegram channel@telegram

Subscribe our YouTube channel@youtube

Follow our Instragram account@instagram

Like our Facebook page@fb_page

Follow our Twitter account@twitter

Demikian cara membuat Widget Follow Box Responsive Social Media (Telegram, Facebook, Instagram, Twitter, Youtube) di Sidebar Blogger. Semoga bermanfaat.

Go to Link