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
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