Download Template Plus UI + mode Translate v3

Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar dunia blogger untuk anda, yakni dalam membahas bagaiamana sih membuat full screen di blogger atau tampilan layar penuh di blog

Info: Oke bagi kamu yang sudah penasaran yuk langsung aja kita bahas bersama sama

Tampilan Layar penuh

Emangnya membuat Tampilan layar penuh di blog bisa? Hohoho 😁, tentu bisa dong! Yang kamu perlukan adalah sebuah kode yang khusus dibuat untuk membuat tampilan layar penuh diblogger

Info: Penggunaan layar penuh biasa diterapkan dan dijumpai pada layanan internet seperti website dan juga aplikasi

Mode Mengambang

Pada pembahasan kita kali ini yaitu mengenai cara pembuatan full screen diblogger, admin sendiri sudah membuat agar tampilan full screen diblogger memiliki gaya mengambang ataupun biasa disebut Sticky

Info: Bagaimana semakin penasaran, dengan pembuatan full screen diblogger, baca hingga selesai ok

Show in post only

Mengapa admin menggunakan bahasa Inggris hehehe, biar pendek kalimatnya, jadi tampak rapi penulisannya, tidak bermaksud apa-apa kok, ok lanjut membahas full screen diblogger, jadi nih ya sobat IcloudZer sekalian, bahawa tampilan Full screen nya hanya akan tampil didalam postingan saja, lah pada tampilan home atau beranda tidak akan muncul ya sobat

Contoh demo

Nah sebagai pelengkap biar kamunya tidak penasaran admin akan memberikan contoh demo atau contoh tampilannya kepada kalian, contoh dari tampilan layar penuh nya sebagai berikut

Periksa

Info: Bagaimana keren bukan, hehehe 😁

Cara pembuatan

Baiklah sekarang admin akan mulai membahas cara pembuatan full screen diblogger dengan gaya mengambang (Sticky mode), simak dan pelajari hingga selesai oke

Kode CSS

Pertama Tama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian simpan atau letakkan diatas kode ]]></b:skin> atau menggunakan kode <style>

/* Layar Penuh oleh Icloudice */
#rahFullScreen53,#rahDefeaultScreen53{background:#fffdfc;border:none;cursor:pointer;align-items:center;text-align:center;border-radius:50px;box-shadow:0px 8px 60px -10px rgba(13, 28, 39, 0.6);width:53px;height:53px}#rahFullScreen53:active,#rahDefeaultScreen53:active,#rahFullScreen53:focus,#rahDefeaultScreen53:focus{outline:0}#rahFullScreen53 svg,#rahDefeaultScreen53 svg{vertical-align:middle}#rahDefeaultScreen53{display:none}

kode HTML

Langkah selanjutnya adalah meletakkan kode HTML berikut ini tepat diatas kode </header>

<b:if cond='data:view.isPost'>
<button aria-label='Open Fullscreen' id='rahFullScreen53' onclick='openFullscreen();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z' fill='#f80000'/></svg></button><button aria-label='Exit Fullscreen' id='rahDefeaultScreen53' onclick='closeFullscreen();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z' fill='#f80000'/></svg></button></b:if>

Saran: Mungkin kamunya sedikit pusing nyari kode </header> cari secara perlahan ok

Kode JavaScript

Kemudian langkah selanjutnya adalah menyimpan dan meletakkan kode javascript berikut ini tepat diatas kode </body> atau sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();}
document.getElementById("rahFullScreen53").style.display = "none";
document.getElementById("rahDefeaultScreen53").style.display = "block";}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();}
document.getElementById("rahFullScreen53").style.display = "block";
document.getElementById("rahDefeaultScreen53").style.display = "none";}
//]]></script>

Info: Jika sudah kemudian simpan template nya, dan lihat bagaiamana hasil dari tampilan layar penuh diblogger