How to make subscribe youtube channel button widgets

Hello Blogger user Guys, Welcome to ItsThemeWorld. If you are searching for a How to Add Subscribe Button in Blogger then this article will be very helpful for you. In this post, I'm going to guide you step by step on How to Add a Subscribe Button in Blogger. So, follow the easy steps and learn more about how to add a Subscribe Button in Blogger.

The youtube subscribe box widget this time I designed is similar to the original which we can usually find when entering the channel name on youtube, and I also added a border and radius that is not perfectly circular on the profile picture to make it seem more modern.

 
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/AVvXsEg8vNBs6uvIzXJ9b9TWZUQ5VtX4U3JoSnr3KvpL0G_DIs9mThyKMZEq0R6sGkckqPg_dgrtABbykBfvstBW-IVKD0R_ZRC5SMWIPTKqOWScOPvw7rneKIwYBlKi8A3q0VLeCjaPyg3kQ6aH/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