› › ›

Cara Memasang Kotak Tentang Author Seperti DiBlog nafasmedia.my.id | nafasmedia

Update :

nafasmedia | Pernahkan kalian membaca artikel pada sebuah blog sampai habis dan melihat ada kotak mengenai penulis artikel yang kamu baca tersebut?

Tepatnya pada blog ini pun juga memiliki kotak mengenai penulis artikel diblog ini yaitu saya sendiri. Mungkin bagi kalian yang juga seorang blogger dan memiliki sebuah blog akan bertanya bagaimana cara membuatnya ya?

Kali ini saya akan memberikan cara membuat Kotak tentang penulis seperti diblog saya ini. Bisa kalian lihat, kotak tentang penulis diblog saya memiliki desain yang keren, dengan background Game Minecraft Dan ditengah tengah terdapat foto author yaitu foto saya, disertai juga tombol media sosial seperti facebook,tweeter dll.

Saya mendesain kotak tersebut hanya menggunakan HTML dan sedikit CSS jadi tidak akan memberatkan loading blog, namun karena saya menggunakan background dan foto saya,jadi akan sedikit memberatkan loading. 

Tetapi jangan khawatir background tersebut bisa diakali menggunakan base 64 image, sehingga tidak akan memberatkan loading blog. Tertarik untuk membuatnya? Jika iya silahkan simak tutorial dibawah ini.

TUTORIALNYA

Pertama kalian harus paham dan tau  dimana nanti kotak tentang author ini akan diletakkan. biasanya kotak tentang author akan diletakan dibawah kode /article, Jika sudah tau mau diletakan dimana langsung saja kita terapkan kotak tentang author ini.

Pertama kalian masuk ke dashboard blogger dan masuk kemenu tema lalu edit html, JIka sudah copy kode css dibawah ini dan letakan diatas ]]></b:skin atau juga bisa diletakan diatas kode </style>

.box-author{background:#fff;color:#222;font-weight:500;padding:10px;margin:1em 0;max-width:100%;border-radius:4px;box-shadow:0 10px 3rem -1rem rgba(0,0,0,0.5);transition:all .5s;}
.authorbox-widget{width:100%;border:0;position:relative}
.authorbox .boxauthor-header{border-top-left-radius:.25rem;border-top-right-radius:.25rem;height:135px;padding:1rem;text-align:center;color: #fff;}
.authorbox .author-username{color:#fff;font-size:25px;font-weight:300;text-align: right;margin-bottom:0;margin-top:0;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.authorbox .author-title{color:#fff;text-align: right;}
.authorbox .author-image{left:50%;margin-left:-45px;position:absolute;top:80px}
.authorbox .author-image>img{box-shadow:0 15px 3rem -10px rgba(0,0,0,0.5); border-radius:50%;border:3px solid #fff;height:auto;width:90px}
.authorbox .card-footer{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-7.5px;margin-left:-7.5px;padding-top:50px;}
.boxauthor-header{border-top-left-radius:.25rem;border-top-right-radius:.25rem;padding:1rem}
.author-username{font-size:25px;font-weight:300;margin-bottom:5px;margin-top:5px}
.author-title{margin-top:0}
.author-title,.author-username{margin-left:75px}
.author-image>img{float:left;height:auto;width:65px}
.author-deskripsi{display:block;position:relative;width:100%;margin-top: 3em;text-align: center}
.author-border-bottom{width:70%;border-bottom:1px solid #c5d0db!important;padding-top: 10px;}
.author-border-top{width:70%;border-top:1px solid #c5d0db!important;padding-bottom: 10px;}
.author-follow{font-weight: 600;text-align: center;}

Yang kedua adalah kode htmlnya. jika ditemplate blog kalian sudah terpasang maka hapus terlebih dahulu kode html dan css nya. Jika bingung mau diletakan dimana maka letakan saja tepat dibawah kode </article>. 

<div class='box-author'>
<div class='authorbox-widget authorbox'>
<!--ganti dengan gambar terserah dengan bentuk persegi panjang-->
<div class='boxauthor-header lazy' style='background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Tag0AFc7xsvXQHSxcBI8XZ6eA4Exs5BXghFlV7IJewJydiaVEccRMDm1u1IYQuU8xij5i8rHwVL2eV5fiqtgXzh6JthArB-DZQoUu-A4xPVE-tcx0wZHCfgqEg1Gb_SWf1dstkT_J5w/s1280/activity2.jpeg&#39;) center center;'>
<!--ganti dengan nama atau nama blog kamu-->
<div class='author-username'>Nafasmedia</div>
<!--ganti dengan Profesi kamu-->
<div class='author-title'>Blogger</div>
</div>
<div class='author-image lazy'>
<!--ganti dengan gambar author 160x160px-->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQacAo3U_aCQz1-FrcIA2EJGUXGKgezfcjHjbuOm8QocyEoZ-XwLdtf9QT-Zn7eDDuyzNxOkkVSo4Q7EpXAweK2sK6_28HOuuHscggFqVOEIqGusP3tKYM3n78nc25Zp5zEQWzJdWpp_8/s150/author-160x160.jpg'/>
</div>
<div class='author-deskripsi'>
<center>
<div class='author-border-bottom author-border-top'>
<span class='author-desc'>
<!--ganti dengan deskripsi blog kamu-->
      at in tellus integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit amet porttitor eget dolor morbi non arcu risus quis varius quam
    </span>
</div>
<div class='author-follow'>Follow</div>
<!--ganti dengan url media sosial kamu-->
<a href='https://facebook.com/nafasmedia/' target='blank' title='facebook'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='currentColor'></path>
</svg></a>
<a href='https://t.me/nanangwrldd' target='blank' title='telegram'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z' fill='currentColor'></path>
</svg></a>
<a href='https://twiter.com/nafasmedia' target='blank' title='twitter'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='currentColor'></path>
</svg></a>
<a href='https://instagram.com/nafasmedia_inc/' target='blank' title='instagram'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='currentColor'></path>
</svg></a>
</center>
</div>
</div>
</div>

Silahkan ganti apa yang saya beri komentar di kode diatas

Pertahtikan kode <svg tandanya diatas menggunakan icon svg dan jika tidak muncul silahkan ganti dengan font awesome. Caranya hapus kode <svg sampai </svg> lalu ganti dengan 

<i class='fa fa-facebook'/>

Ganti facebook dengan nama font awesome icon media sosial yang ingin kamu pasang. 

Jangan lupa simpan template lalu cek apakah sudah berhasil atau belum, jika belum atau error saat mau menyimpan silahkan diteliti lagi barangkali ada yang terhapus. 

Itu dia cara memsang kotak tentang author seperti diblog nafasmedia.my,id. jika ada yang kesusahan bisa tanyakan di kolom komentar yaa.

PENUTUP

Baiklah itu dia Cara Memasang Kotak Tentang Author Seperti DiBlog nafasmedia.my.id. Semoga bermanfaat, Terimakasih sudah berkujung dan Sampai jumpa di next Artikel.

0 Comments