Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat tombol subscribe box youtube di blogger yang simple dan juga keren
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas berama sama
Subscribe box
Subscribe box atau box subscribe channel YouTube adalah suatu tampilan untuk menampilkan informasi channel YouTube dengan menyertai tombol follow di dalamnya, namun tidak memiliki fitur untuk menampilkan jumlah subscribe secara langsng alias realtime, jika ingin menampilkan jumlah subscribe, mungkin kamu bisa menuliskannya secara manual di dalam text kode HTML subscribe box youtube yang sedang admin bahas kali ini
Support Layout
Selain itu fitur subscribe youtube ini juga support mode atau menu layout (tata letak), sedangkan kode original yang non support layout juga akan admin tampilkan, agar jika kode yang support menu layout tidak berfungsi maka kode original yang non support menu layout bisa kamu gunakan
Menggunakan CSS
Untuk membuat dan menampilkan subscribe box YouTube di blogger, hanya di buat menggunakan kode CSS saja tanpa ada unsur penggunaan kode javascript di dalamnya, karena fungsi sebenarnya adalah untuk memberitahukan pengunjung mengenai channel YouTube saja tanpa mengembed video apapun daro channel YouTube tersebut
Contoh tampilan
Jika kamu penasaran dengan bagaimana kah contoh tampilan dari subscribe box channel youtube di blogger, silahkan periksa tampilan menggunakan tombol di bawah ini ok
Info: Bagaiamana sobat dengan contoh tampilannya keren sekali yak
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaiamana kah caranya membuat tombol subscribe box channel youtube di blogger, silahkan bca dan ikuti setiap arahan yang admin jabarkan di bawah ini
kode CSS
Langkah pertama seperti biasa silahkan salin kode CSS di bawah ini, kemudian letakan di atas kode ]]></b:skin>
/* YouTube Follow button by ICloudice.com */
.rahYtfw {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}
.rahYtfw .rahYtfw-img {width:50px;height:50px;margin-left:16px}
.rahYtfw .rahYtfw-img img{display: flex; align-items: center; justify-content: center; width: 50px;}
.rahYtfw .rahYtfw-content { width:calc(100% - 50px);padding-right:15px }
.rahYtfw .rahYtfw-content a { display: block; color: inherit; }
.rahYtbtn{font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: flex-end; width: 73px; height: 25px; padding-right: 12px; background-color: #e4393c; border-radius: 4px; color: #fff; margin-top: 12px; bottom: 0; right: 0; }
.rahYtfw .rahYtfw-content .title { display:block;font-weight:700;font-size:12px;margin:0}
.rahYtfw .rahYtbtn a { display: block; color: inherit; color:#fff; }
.rahYtfw .rahYtfw-content .desc{display:block;font-size:11px;line-height:1.5em;margin-top:2px;color:#505050}
.rahYttx{margin-left:9px}Info: Atau sivat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML (Non layout
Langkah selanjutnya silahkan salin kode HTML yang tidak support menu layout di bawah ini, kemudian letakkan pada halaman blog yang ingin kamu tampilkan, semisal postingan blog, atau sebagainya
<div class='rahYtfw' id='rahYtfw'>
<div class='rahYtfw-img'><img alt='ICloud Ice'src='Your_channel_image_link'/>
</div>
<div class='rahYtfw-content'>
<span class='title'>ICloud ICe</span>
<span class='desc'>Subscribe our Youtube Channel</span>
</div>
<div class='rahYtbtn'>
<a href='https://youtube.com/Your_channel_link?sub_confirmation=true' target='_blank'>
<span class='rahYttx'>Follow</span></a>
</div>
</div>Info: Kode di atas tidak support mode layout, dan bisa kamu gubakan pada postingan blog ataupun meletakkan nya di dalam menu Edit HTML atau sebagainya
Kode HTML (support layout)
Jika kamu ingin menggunakan kode HTML yang support menu layout, silahkan salin dan gunakan kode HTML di bawah ini, kemudian letakkan di bawah tag kode </b:section>
<b:tag class='rahYtfw' id='rahYtfw' name='div'>
<b:section cond='!data:view.isError' id='rahsubscribe-widget' showaddelement='false'>
<b:widget cond='!data:view.isPreview' id='HTML55533333' locked='true' title='Follow!' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Subscribe our Youtube Channel</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!--[ Subscribe box YouTube ]-->
<div class='rahYtfw-img'><img alt='ICloud Ice'src='Your_channel_image_link'/>
</div>
<div class='rahYtfw-content'>
<span class='title'>ICloud ICe</span>
<span class='desc'><data:content/></span>
</div>
<div class='rahYtbtn'>
<a href='https://youtube.com/Your_channel_link?sub_confirmation=true' target='_blank'>
<span class='rahYttx'><data:title/></span></a>
</div>
</b:includable>
</b:widget>
</b:section>
</b:tag>Info: Kemungkinan tag kode </b:section> ada banyak namun cari tag kode </b:section> paling bawah blog di dalam menu edit HTML tersebut, semoga bermanfaat
