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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3zBA27dN91DQfg2okh1X4yiv3SduPRCtgTtaseDnIFRdWeen2XcnJ1lRZPBDm8vMHDsxbkNnvUdu42FXWhpBh8pIUVUNqtovjKTgfStdxHQbprqsruSqyeU-9-lOy-8OB9ykvH4MFLWI/s113/images+%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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3zBA27dN91DQfg2okh1X4yiv3SduPRCtgTtaseDnIFRdWeen2XcnJ1lRZPBDm8vMHDsxbkNnvUdu42FXWhpBh8pIUVUNqtovjKTgfStdxHQbprqsruSqyeU-9-lOy-8OB9ykvH4MFLWI/s113/images+%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