Membuat Author Box (Kotak Penulis) Di Blog dengan Tampilan Mirip Google
Sabtu, 08 Februari 2020
Apa itu Author Box?
Pada umumnya, author box adalah sebuah kotak yang berada di bagian bawah postingan blog. Ini berfungi untuk memberikan beberapa informasi biografis tentang Anda, atau lain sebagainya.
Layaknya author box ini ada pada setiap postingan blog, atau halaman yang Anda terbitkan di situs web / blog Anda. Ini menggunakan informasi yang Anda masukkan ke Profil blog Anda. Bisa berupa teks, dan gambar yang sebelumnya telah disiapkan dengan Akun Gravatar Anda.
Nah, sesuai dengan judul artikel kali ini "Cara Membuat Author Box", kita akan coba membuatnya dengan hanya beberapa langkah saja. Sangat mudah, simple, tidak memerlukan banyak waktu.
Namun, yang paling menariknya lagi Author Box (Kotak Penulis) ini telah didesain dengan tampilan yang sangat lumayan keren dan bagus. Temanya pun sangat mirip dengan tampilan Google, dan diberi sedikit animasi pada teksnya.
Oke, tanpa berlama-lama langsung saja kita jumping ketahap pembuatannya.
Yang pertama, disini kita buat CSS nya terlebih dahulu. Lihat penampakan berikut ini:
Silahkan kopi semua CSS diatas, dan tempatkan tepat diatas </style> atau //]]></b:skin>
Langkah selanjutnya yaitu, Pembuatan HTML nya. Lihat kodenya dibawah:
Kopi kembali dan tempel dibagian post footer yang ada ditemplate blog sobat.
Jika sudah, mari kita lanjutkan ketahap berikutnya yaitu pemasangan javascript.
Tempel tepat di atas kode </body>. Setelah itu sobat simpan tema dan lihat bagaimana hasilnya.
Begitulah cara membuat author box di blog dengan tampilan mirip google. Semoga bermanfaat!
Nah, sesuai dengan judul artikel kali ini "Cara Membuat Author Box", kita akan coba membuatnya dengan hanya beberapa langkah saja. Sangat mudah, simple, tidak memerlukan banyak waktu.
Namun, yang paling menariknya lagi Author Box (Kotak Penulis) ini telah didesain dengan tampilan yang sangat lumayan keren dan bagus. Temanya pun sangat mirip dengan tampilan Google, dan diberi sedikit animasi pada teksnya.
Oke, tanpa berlama-lama langsung saja kita jumping ketahap pembuatannya.
Cara Membuat Author Box di Blog Mirip Google
Yang pertama, disini kita buat CSS nya terlebih dahulu. Lihat penampakan berikut ini:
/* CSS Author Box Seotechman.com */
#card {
background: #f5f6f7;
width: 450px;
height: 185px;
margin: 3% auto;
padding: 20px 30px;
border-radius: 10px;
box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 6px 0px #DFE4EA;
text-align: center; }
#card h1 {
color: #dc152c;
font-weight: normal;
font-size: 48px;
margin: 0 0 10px 0; }
#card h1::first-letter {
color: #194ff7; }
#card h1 b {
color: #f1840b;
font-weight: normal; }
#card h1 b + b {
color: #194ff7; }
#card h1 b + b + b {
color: #00940e; }
.content {
text-align: left;
}
.content ul {
padding: 0;
margin: 0;
font: 16px Arial; }
.content ul li {
list-style: none; }
.content ul li a {
color: #12C; }
.content ul li span {
display: block;
width: 100%;
margin-bottom: 2px; }
.content ul li span:nth-child(2) {
margin-bottom: 10px; }
.content ul li span:nth-child(2) a {
color: #093;
text-decoration: none; }
.content ul li span:nth-child(3), .content ul li span:nth-child(4) {
font-size: 14px; }
.content .text {
border: 1px solid #7ec6fd;
float: left;
width: 100%;
margin-bottom: 10px; }
.content .text h2 {
position: relative;
float: left;
font-size: 100%;
font-weight: normal;
padding: 0;
margin: 5px 10px; }
.content .text h2 span {
position: absolute;
top: 0;
right: 0;
width: 0;
background: white;
border-left: 0.1em solid black;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite;
-moz-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite; }
.animated {
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-khtml-animation-fill-mode: both;
-ms-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.4s;
-o-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-khtml-animation-duration: 0.4s;
-ms-animation-duration: 0.4s;
animation-duration: 0.4s; }
.fadeIn {
-webkit-animation-name: fadeIn;
-o-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-khtml-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; }
@-webkit-keyframes typing {
0% {
width: 100%; }
100% {
width: 0; } }
@-moz-keyframes typing {
0% {
width: 100%; }
100% {
width: 0; } }
@-o-keyframes typing {
0% {
width: 100%; }
100% {
width: 0; } }
@keyframes typing {
0% {
width: 100%; }
100% {
width: 0; } }
@-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-o-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
Silahkan kopi semua CSS diatas, dan tempatkan tepat diatas </style> atau //]]></b:skin>
Langkah selanjutnya yaitu, Pembuatan HTML nya. Lihat kodenya dibawah:
<div id="card">
<h1>Go<b>o</b><b>g</b><b>l</b>e</h1>
<div class="content">
<span class="text">
<h2>Seotechman<span> </span></h2>
</span>
<ul>
<li>
<span><a href="https://www.seotechman.com"><b>Media Informasi Terbaru</b> - seotechman</a></span>
<span ><a href="https://www.seotechman.com">https://www.seotechman.com</a></span>
<span>Author: Virm</span>
<span>Mobile: +6285694789983</span>
</li>
</ul>
</div>
</div>
Kopi kembali dan tempel dibagian post footer yang ada ditemplate blog sobat.
Jika sudah, mari kita lanjutkan ketahap berikutnya yaitu pemasangan javascript.
$(function() {
$('ul').hide();
});
setInterval(function() {
$('ul').show().addClass("animated fadeIn");
},
1100);
Tempel tepat di atas kode </body>. Setelah itu sobat simpan tema dan lihat bagaimana hasilnya.
Begitulah cara membuat author box di blog dengan tampilan mirip google. Semoga bermanfaat!
