Modifikasi Halaman Posting Blog

1. Masuk ke blog
2. Pilih menu desain
3. Buat entri baru
4. membuat kotak yang bertulis dan bergambar
<div style="border: 1px solid #ddd; padding: 10px; background-color: #f2f2f2; text-align: left;"> Kode Script Anda Di Sini </div>
5. modifikasi background color, baik dengan warna ataupun gambar
1. WARNA
background: linear-gradient(to top, #993300 0%, #cc00cc 100%
untuk kombinasi warna yang lain, bisa mengunjungi web: https://www.w3schools.com/colors/colors_gradient.asp
2. GAMBAR
background-image: url("paper.gif"); background-color: #cccccc; untuk url(masukan alamat gambar yang diinginkan)
6. Untuk menglink-kan halaman bisa dengan pagination, menu navigasi
1. contoh menu navigasi
<table><style type="text/css"> .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </table> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">Materi Ajar</a> <a href="#">Kisi=kisi Soal</a> <a href="#">Bank Soal</a> </div> <h2> Materi Pelajaran Bahasa Arab</h2> <p> Silahkan klik menu open untuk melihat materi yang dikehendaki</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script>
2. untuk lebih bervaerasi bisa mengunjungi halaman web : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
7. Setelah selesai, publish terlebih dahulu, bila ada penimpahan, maka masukan code css "position:relative" biasanya pada bagian permulaan di style css/text