CARA MEMBUAT PROFILE BLOGGER KEREN DAN BERBEDA

Ini hanya buat percobaan, namun cara ini terbilang ringan dan ringkas. Hanya menampilkan tombol profile namun jika tombol "PERIHAL SAYA" tersebut di klik akan memunculkan profile pemilik blogger dengan ukuran yang hampir memenuhi ukuran halaman.
Sebenarnya saya ingin melengkapinya dengan link Php, misalnya dibawah profile ada form yang dapat dimanfatkan untuk chatting atau koresponden, akan tetapi saya masih menunggu beberapa masukan dari teman teman.

Kita langsung saja kepada cara pemasangannya:

1. TAMBAHKAN CSS

Langkah pertama masuk ke pengaturan blogspot:

  1. Masuk kepengaturan blogspot
  2. Pilih Tema atau "theme"
  3. Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML
  4. Pilih Edit HTML
Cari kode </head> letakan kode CSS berikut tepat diatasnya:

<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius:50px
z-index=1200;
}

/* Set a style for all buttons */
button {
background-color: #FFB6C1;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius:30px;
}

button:hover {
opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: ;
}

/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
border-radius:50px;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 50px;
border-radius:30px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
z-index=1200;
}
}
</style>


2. TAMBAHKAN HTML

Langkah kedua
  1. Masuk kepengaturan blogspot
  2. Pilih Tataletak atau Lay out
  3. Tambahkan atau add gadget
  4. Pilih JavaScrit/HTML
Copy seluruh kode dibawah dan pada blanko kosong JavaScript/HTML yang telah terbuka dan lalu pastekan ke dalamnya.

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">PERIHAL SAYA</button>

<div id="id01" class="modal">

<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
<img src="https://1.bp.blogspot.com/--mHPjlgbUmc/XJZYFv6C1pI/AAAAAAAAAA0/AuR33XWQ0ZMuxNxhtGMbqbVrf_DOQI3MwCK4BGAYYCw/s113/images%2B%252816%2529.jpeg" alt="Avatar" class="avatar" />
</div>

<div class="container">
<label for="uname"><b>BVANIE</b></label>
<input type="text" placeholder="mandiri, lembut, sensitif, suka pengatahuan" name="uname" required />

<label for="psw"><b>website</b></label>
<input type="password" placeholder="https://bvanie2.blogspot.com" name="psw" required />

<button type="submit">Login</button>
<label>
<input type="checkbox" checked name="remember" /> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="
https://1.bp.blogspot.com/--mHPjlgbUmc/XJZYFv6C1pI/AAAAAAAAAA0/AuR33XWQ0ZMuxNxhtGMbqbVrf_DOQI3MwCK4BGAYYCw/s113/images%2B%252816%2529.jpeg">password?</a></span>
</div>
</form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>


Ganti link Gambar yang saya sorot kuning dengan gambar profile sobat sendiri, cara mengambil gambarnya adalah dengan mengklik profile blogspot kita dan membukanya melalui halaman baru di browser, pada bar alamat web akan terlihat link gambar dengan awalan alamat: https://1.bp.blogspot.com/....DST pastekan sebagai pengganti link Nona BVANE ini.
LIHAT DEMO
www.editblogtema.net


Comments

  1. lumayan banyak juga ya gan kode nya, pengen coba tapi takut eror gan blog ane, soalnya ane masih newbi, belum begitu paham ttg blogger :)

    ReplyDelete
    Replies
    1. hanya buat pengatahuan saja. Cara pemasangan yang aman adalah dengan cara memback up template blogger terlebih dahulu melalui pengaturan blogspot.

      Delete
  2. mas yang dipajang dihalaman demo siapa tuh hehehe

    ReplyDelete
  3. Mantap tipsnya, Kakak... makasih hehehe.

    ReplyDelete
  4. keren dan mantap hasilnya. Jadi ingin menerapkannya

    ReplyDelete

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP