Download Template Plus UI + mode Translate v3

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

• Periksa

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

ICloud ICe Subscribe our Youtube Channel

Follow