Hello everyone, on this occasion I will share a youtube channel subscribe box widget with html and css on the blog.
In my previous post, I have also shared how to make a pop up subscribe to youtube channel on blog you can read in my previous post if you want to make a pop up model.
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.
Youtube Channel Subscribe Box Code
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 for the demo you can see through the button below, ok for those of you who want to make it, let's see how below.
Please go to blogger > Themes > edit html copy the css below and place it above the code ]]></b:skin>
/* widget box subscribe youtube by TrickPk */
.trickpk-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}
.trickpk-ytbox-wrap img{width:70px;border:1px solid #eceff1;border-radius:0 50% 50%;padding:5px}
.trickpk-ytsub-nma{position:absolute;font-size:14px;font-weight:600;margin:-80px 0 0 100px}
.trickpk-ytsub-jmsv{margin:-55px 0 0 100px;color:#908989;font-size:12px}
.trickpk-ytsub-sub{margin-left:100px;color:#e17070;font-size:12px;font-weight:600;text-decoration:none}
.trickpk-ytsub-ttk{position:absolute;right:10px;top:5px;transform: rotate(90deg);color:#444}
.trickpk-ytsub-hdn{position:absolute;background-color:#fefefe;top:5px;visibility:hidden;opacity:0;transition:all .2s ease}
.trickpk-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}
#trickpk-ytsub-check:checked ~ .trickpk-ytsub-hdn{visibility:visible;opacity:1}
#trickpk-ytsub-check{display:none}
/* CSS darkmode adjust the class if different or delete this section */
.darkMode .trickpk-ytbox-wrap,.darkMode .trickpk-ytsub-hdn{background-color:#2d2d30;color:#fefefe}
.darkMode .trickpk-ytbox-wrap,.darkMode .trickpk-ytbox-wrap img{border-color:rgba(255,255,255,.1)}
Then put this html where you want to display the youtube subscribe box widget, if you want to put it under the post then you can put it under the code <data:post.body/> usually this code has more than 1, depending on the template you are using, just look for the one are in post-entry or postEntry if you don't know just one 1.
<div class='trickpk-ytbox-wrap'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDsql554ycdC0pHDxwuJHrVDmuZZh6RMi-b1spmSc88fHVdf6Hk69fcfB6Snaskel4MRFMCZcvybwj-7kU-adT-sgwsozGQl707lSHfR3S_gbT4gXlhY9gL0_bdDtzsHosflZWEMgHwRU/s320/TrickPk.com.jpg' alt='TrickPk'/>
<div class='trickpk-ytsub-nma'>TrickPk</div>
<div class='trickpk-ytsub-jmsv'>1000 subcriber • 30 videos</div>
<a class='trickpk-ytsub-sub' href='https://www.youtube.com/channel/UCpLQpU3VZOcBWyUQUMuFGWA?sub_confirmation=1' target='_blank'>SUBSCRIBE</a>
<label class='trickpk-ytsub-ttk' for='trickpk-ytsub-check'>•••</label>
<input id='trickpk-ytsub-check' type='checkbox'/>
<div class='trickpk-ytsub-hdn'>
<label class='trickpk-ytsub-cls' for='trickpk-ytsub-check'></label>
<p>subscribe to my youtube channel too, friends, thank you</p>
</div>
</div>
The parts that I marked such as image urls and youtube urls, the number of subscribers and videos, please adjust, ok, so that's the youtube channel subscribe box widget that I can share this time, hopefully it's useful and thank you for visiting.
Copyright © TrickPk