UnPlug website for SR7Themes website's blogger widgets and codes where you can watch the demo of the blogger widget and codes.
How to make subscribe youtube channel button widgets
This widget is perfect for those who want to promote your YouTube channel on your blog, and you can place it under posts or in the sidebar or wherever it suits your taste.
Steps to Subscribe Button
- Go to blogger
- Go to Theme
- Click on Edit HTML
- Copy the CSS code
- Paste the code above the ]]</b:skin>
/* widget kotak subscribe youtube by wendy code */
.wc-ytbox-wrap{position:relative;max-width:400px;background-color:#fefefe;color:#444;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:5px;padding:15px;margin:20px 0;font-size:13px;line-height:1.7em}
.wc-ytbox-wrap img{width:70px;border:1px solid #eceff1;border-radius:0 50% 50%;padding:5px}
.wc-ytsub-nma{position:absolute;font-size:14px;font-weight:600;margin:-80px 0 0 100px}
.wc-ytsub-jmsv{margin:-55px 0 0 100px;color:#908989;font-size:12px}
.wc-ytsub-sub{margin-left:100px;color:#e17070;font-size:12px;font-weight:600;text-decoration:none}
.wc-ytsub-ttk{position:absolute;right:10px;top:5px;transform: rotate(90deg);color:#444}
.wc-ytsub-hdn{position:absolute;background-color:#fefefe;top:5px;visibility:hidden;opacity:0;transition:all .2s ease}
.wc-ytsub-cls{position:absolute;top:0;right:-10px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:25px}
#wc-ytsub-check:checked ~ .wc-ytsub-hdn{visibility:visible;opacity:1}
#wc-ytsub-check{display:none}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .wc-ytbox-wrap,.darkMode .wc-ytsub-hdn{background-color:#2d2d30;color:#fefefe}
.darkMode .wc-ytbox-wrap,.darkMode .wc-ytbox-wrap img{border-color:rgba(255,255,255,.1)}
- Copy the HTML code
- Paste the code above the </body> tag
<div class='wc-ytbox-wrap'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmJssGuuj0DBkVUACVFzw5VvNo43x7oB8YSDZ42942pTNs9Y2a4i5y4v3UASRKTbJzgUIFNIQCbzRDTuhb-0lm13EORum7CrDpbzDJMdx4GnPoPmeYNCuUuFdIxVW95Fuz1L-4nwt9rhE/s512/avatar-icon-images-4.jpg' alt='wendy code'/>
<div class='wc-ytsub-nma'>ItsThemeWorld</div>
<div class='wc-ytsub-jmsv'>27 subcriber • 3 video</div>
<a class='wc-ytsub-sub' href='https://www.youtube.com/channel/UCFa_OLX7iwfiQEdgjcX4kOw?sub_confirmation=1' target='_blank'>SUBSCRIBE</a>
<label class='wc-ytsub-ttk' for='wc-ytsub-check'>•••</label>
<input id='wc-ytsub-check' type='checkbox'/>
<div class='wc-ytsub-hdn'>
<label class='wc-ytsub-cls' for='wc-ytsub-check'></label>
<p>subscribe youtube channel saya juga ya teman teman terima kasih</p>
</div>
</div>
The parts that I marked such as image urls and youtube urls, the number of subscribers and videos, please adjust
So this is all aboutHow to make subscribe youtube channel button. In blogger, I hope you will not have any problem making it and you have created the subscribe youtube channel button well. If you find this article helpful then do share it with your friends and give us your feedback.Referensi:
Wendy Code