Membuat Widget Profil Keren Di Blogger

 Hallo Sobat Blogger semuanya, selamat datang kembali di Rifai's Blog, terimakasih Saya ucapkan kepada Anda yang sudah mengunjungi blog sederhana Saya ini. Pada kesempatan ini Saya akan berbagi sebuah tutorial mengenai Cara Membuat Widget Profil Keren Di Blogger, dimana dengan adanya widget profil ini akan menjadi kan tampilan dari blog kita menjadi lebih menarik lagi dan pastinya sebagai sarana untuk memperkenalkan diri kepada pada pengunjung blog kita.

Cara Membuat Widget Profil Keren Di Blogger

Berikut merupakan langkah-langkah dalam membuat widget profil di Blogger:

• Login ke Dashboard Blogger;
• Klik pada Menu Tata Letak/Layout;

• Tambahkan Widget HTML/Java Script pada posisi dimana kita akan memasang Widget Profil nantinya (pada contoh ini Saya meletekkannya di Sidebar):

• Beri nama Widget sesuai dengan keinginan kita, contoh : Mengenai Saya.

• Copas (Copy Paste) kode di bawah ini ke dalam kotak konten widget tersebut:

<div class="mycontainer">

<div class="card">

<div class="container">

<img style="width: 50%; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.19);" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBDTivTMo54ujzrNWgkzB9_2XryYZsm9tk-CoTWfQSoIqL2lPIW6ugfRoWaVvSkuIced3EZbCWCO9J7JR_W9Mkc_qLkHtJHwc0eQXF5R9Aa-Y_haPRO8DaVE-LVmiBWA5CXJ1k7iwmjkl-mH7BShG3Wvrm7OBLLEtNxUb-cNeFuFAaP8j4NRfwacJyg/s320/63a85409445f4-shah-rukh-khan_bandung.jpg" alt="Admin Blog"/>

 

<p class="title">Hallo! Selamat datang di blog Saya, Saya Shah Rukh, Penulis sekaligus Admin blog ini.</p>

<a class="button-red" href="/p/about.html">Selengkapnya <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>

</div>

</div>

<style>

 

/*Card --------------------------*/

.card {

  width: 100%;

  margin: 0;

  text-align: center;

  background-color: #f0f4f4;

  padding: 30px 8px;

}

.mycontainer {

  padding: 0;

  width: 100%;

  position: relative;

}

.title {

  color: #666;

  font-size: 18px;

  text-align: center;

}

@media only screen and (max-width: 768px) {

.card img {

  width: 30%;

}

}

 

@media only screen and (max-width: 414px) {

.card img {

  width: 40%;

}

}

 

.card img:hover {

  animation: shake 0.5s;

  animation-iteration-count: infinite;

}

@keyframes shake {

    0% { transform: translate(1px, 1px) rotate(0deg); }

    10% { transform: translate(-1px, -2px) rotate(-1deg); }

    20% { transform: translate(-3px, 0px) rotate(1deg); }

    30% { transform: translate(3px, 2px) rotate(0deg); }

    40% { transform: translate(1px, -1px) rotate(1deg); }

    50% { transform: translate(-1px, 2px) rotate(-1deg); }

    60% { transform: translate(-3px, 1px) rotate(0deg); }

    70% { transform: translate(3px, 1px) rotate(-1deg); }

    80% { transform: translate(-1px, -1px) rotate(1deg); }

    90% { transform: translate(1px, 2px) rotate(0deg); }

    100% { transform: translate(1px, -2px) rotate(-1deg); }

}

</style></div>

Kemudian simpan.

Keterangan:

Silahkan ganti alamat/link foto Sobat blogger pada kode yang Saya beri warna merah, ganti juga teks pada kode yang Saya beri warna hijau dan ganti alamat/link halaman profil atau yang lainnya sesuai keinginan Sobat Blogger pada kode yang Saya beri warna biru.

Berikut merupakan hasil akhirnya:

Demikian artikel mengenai Membuat Widget Profil Keren Di Blogger, mudah-mudahan bisa bermanfaat untuk kita semuanya, sekian, terimakasih dan selamat mencoba.