Pada postingan yang pertama ini sebenarnya saya masih bingung mau nulis tentang apa, karena terus terang saja sebenarnya alasan saya membuat blog ini agar apa yang saya pahami mengenai cara edit html atau css template dari para master blog tidak hilang. Sehingga jika sewaktu-waktu saya membutuhkan kembali kode-kode tersebut tanpa repot-repot lagi saya harus blogging kembali. Jadi tinggal buka blog ini saja.
Namun karena saat ini saya sedang mengerjakan perbaikan atau merubah template sekolah Smp satu atap mempura, maka saya simpen saja kode tentang kartu Team. Cara membuat kartu nama ini saya hanya membagikan ulang yang sudah ada dalam sebuah template shezan buatan kang Basri matindas dari goomsite. Hanya saja dalam postingan saya ini warna pada backgrounnya saya berikan gambar supaya lebih beda dan adem aja di liatnya...hehehe Es kali adem...
Langkah membuat Kartu Nama Team
Langsung saja ke cara membuatnya. Tentunya kamu sudah harus berada pada halaman posting atau halaman statis pada mode html ya bukan mode compose. Kemudian Silahkan copy saja kode html di bawah ini, dan pastekan dihalaman tadi pada posisi yang diinginkan.Kode HTML nya
<div class="box"> <div class="info_abouth"> <ul class="infoms_abouth"> <li> <span class="ms_abouth1"><div class="client-image" id="abdul"><a href="https://www.kelasmat.com/"><amp-img alt="amp" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSutSW6y4A44UtmRre9P4YxdUW0L_2TkUGYDxnr3J3n8e5_CzAqIJ8mLVBtqxfYVIFvDrr6ZB7tmS6zEqDNd_v4OQLoquzTPwxS1BT46BfZCIGgBGu2lrhV6daSM5NP03bKJ99tx4BjLxv/w140-h140-p/rohim.jpg" width="150" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 150px; height: 150px; --loader-delay-offset:183ms !important;" i-amphtml-layout="fixed"><img decoding="async" alt="amp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSutSW6y4A44UtmRre9P4YxdUW0L_2TkUGYDxnr3J3n8e5_CzAqIJ8mLVBtqxfYVIFvDrr6ZB7tmS6zEqDNd_v4OQLoquzTPwxS1BT46BfZCIGgBGu2lrhV6daSM5NP03bKJ99tx4BjLxv/w140-h140-p/rohim.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></a></div></span> <span class="infox">Abdul Rahim</span> <p>Web Developer</p> <a class="fbgoo icon" href="https://www.facebook.com/kelasmat" rel="nofollow"></a> <a class="twitgoo icon" href="https://www.twitter.com/kelasmat" rel="nofollow"></a> <a class="gplusgoo icon" href="https://www.deviantart.com/kelasmat" rel="nofollow"></a> </li> <li> <span class="ms_abouth2"><div class="client-image" id="yunasri"><a href="http://landingpage-goomsite.blogspot.com/p/about-sara-bry.html"><amp-img alt="amp" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzWKLf-oaA63FraV3PwxDlSnrXUKxXXMWuIY2Yw9Hl0Whj7M_bFtAK48G3EZM1rdazwSiWnC7D8aJ0oDJcSNtvY5hwhSiQn2dOQZbWwn_JQx725c3baxXgf4Y7YMNDAFxJvmGwshvlcUu/s1600/yunasri.jpeg" width="150" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 150px; height: 150px; --loader-delay-offset:184ms !important;" i-amphtml-layout="fixed"><img decoding="async" alt="amp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzWKLf-oaA63FraV3PwxDlSnrXUKxXXMWuIY2Yw9Hl0Whj7M_bFtAK48G3EZM1rdazwSiWnC7D8aJ0oDJcSNtvY5hwhSiQn2dOQZbWwn_JQx725c3baxXgf4Y7YMNDAFxJvmGwshvlcUu/s1600/yunasri.jpeg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></a></div></span> <span class="infox">Yunasri. L, S.Pd</span> <p>Kepala Sekolah</p> <a class="fbgoo icon" href="#" rel="nofollow"></a> <a class="twitgoo icon" href="#" rel="nofollow"></a> <a class="gplusgoo icon" href="#" rel="nofollow"></a> </li> <li> <span class="ms_abouth3"><div class="client-image" id="sayus"><a href="http://landingpage-goomsite.blogspot.co.id/p/about-mark-henry.html"><amp-img alt="amp" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPt-NCd6h6QkIfdfShIZIyHFFnDwNwXhP_A8I7GV_RsXswErdf5mM8LXv91TwpDlQTuGkjItQH_U37oG7GT6f_ClAhOP6eR_39OzAWzGWi-9iLHo8peJITFI_kbLBqmpP6cAsq6OF76D7/s1600/sayusmaini.jpg" width="150" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 150px; height: 150px; --loader-delay-offset:185ms !important;" i-amphtml-layout="fixed"><img decoding="async" alt="amp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPt-NCd6h6QkIfdfShIZIyHFFnDwNwXhP_A8I7GV_RsXswErdf5mM8LXv91TwpDlQTuGkjItQH_U37oG7GT6f_ClAhOP6eR_39OzAWzGWi-9iLHo8peJITFI_kbLBqmpP6cAsq6OF76D7/s1600/sayusmaini.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></a></div></span> <span class="infox">Sayusmaini</span> <p>PPKn Teacher</p> <a class="fbgoo icon" href="https://www.facebook.com/sayusmaini.nobella" rel="nofollow"></a> <a class="twitgoo icon" href="#" rel="nofollow"></a> <a class="gplusgoo icon" href="#" rel="nofollow"></a> <a class="linkgoo icon" href="#" rel="nofollow"></a> </li> </ul> </div> </div> </div>
Kode CSS style nya
Silahkan ganti tulisan yang sudah saya beri tanda kuning dengan nama dan pekerjaannya masing-masing. Setelah itu simpan kode css nya pada template yang kamu gunakan. simpan di antara <style> dan </style> pada template blog kamu.
.box{width:100%;padding:30px 0 50px;overflow:hidden;word-break:break-word}
.box .info_abouth{margin:20px auto;position:relative}
.box ul.infoms_abouth{margin:0;padding:0;overflow:hidden}
.box ul.infoms_abouth li{width:30.6%;float:left;height:400px;list-style:none;padding:0;margin:5px;overflow:hidden;text-align:center;border-bottom:3px solid #e0e0e0;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;background:#eef0f1}
ul.infoms_abouth li span.ms_abouth1,ul.infoms_abouth li span.ms_abouth2,ul.infoms_abouth li span.ms_abouth3{color:#fff;width:100%;font-size:30px;font-weight:300;text-transform:uppercase;text-align:center;margin-bottom:10px;padding:0}
ul.infoms_abouth li span.ms_abouth1{background:#ee2b49 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgNtmrZcfbYT9BYOtull7LANumHrDvk-MWAdMc29rlnQpOan2BGABdmc3fItOCRjuBIWj8CCCyDbw_QlcKFzpp-PcVaKlkh8zZEcz_r2LsfGe1jUaAPhinvvXxmV2nQut-81hn7oel_o/s1600/footer-kelasmat.webp)}
ul.infoms_abouth li span.ms_abouth2{background:#3498db url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgNtmrZcfbYT9BYOtull7LANumHrDvk-MWAdMc29rlnQpOan2BGABdmc3fItOCRjuBIWj8CCCyDbw_QlcKFzpp-PcVaKlkh8zZEcz_r2LsfGe1jUaAPhinvvXxmV2nQut-81hn7oel_o/s1600/footer-kelasmat.webp)}
ul.infoms_abouth li span.ms_abouth3{background:#3bd47a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgNtmrZcfbYT9BYOtull7LANumHrDvk-MWAdMc29rlnQpOan2BGABdmc3fItOCRjuBIWj8CCCyDbw_QlcKFzpp-PcVaKlkh8zZEcz_r2LsfGe1jUaAPhinvvXxmV2nQut-81hn7oel_o/s1600/footer-kelasmat.webp)}
ul.infoms_abouth li span.ms_abouth4{background:#dcdcdc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgNtmrZcfbYT9BYOtull7LANumHrDvk-MWAdMc29rlnQpOan2BGABdmc3fItOCRjuBIWj8CCCyDbw_QlcKFzpp-PcVaKlkh8zZEcz_r2LsfGe1jUaAPhinvvXxmV2nQut-81hn7oel_o/s1600/footer-kelasmat.webp)}
ul.infoms_abouth li a.ms_abouth p{margin:10px;font-size:50px}
.box ul.infoms_abouth li a { display: inline-block;margin: 5px;text-decoration: none; color: #151414; position: relative; font-size: 18px; line-height: 2.3em; text-align: center; }
.box ul.infoms_abouth li span.infox { color: #333; font-size: 20px; margin-top: 35px; font-weight: 500; text-align: center; text-transform: uppercase; }
.box ul.infoms_abouth li span{display:block;padding:0;color:#333;text-align:center;font-size:15px;font-weight:300;line-height:22px}
.box ul.infoms_abouth li p{display:block;color:#333;padding:0 20px;text-align:center;font-size:15px;font-weight:300;line-height:22px}
.box .client-image amp-img{border-radius:50%;margin:20px 0}
.fbgoo:before,.gplusgoo:before,.linkgoo:before,.rssBtn:before,.twitgoo:before{font-family:FontAwesome}
.amp-soc{margin:30px}
.amp-soc a{color:#bbb;margin:5px}
.icon{position:relative;width:40px;height:40px;padding:0;border:2px solid #fff;font-size:20px;font-weight:300;line-height:2em;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px}
.fbgoo:before{content:"\f09a"}
.fbgoo:hover,.gplusgoo:hover,.linkgoo:hover,.pintgoo:hover,.twitgoo:hover{color:#ddd}
.twitgoo:before{content:"\f099"}
.gplusgoo:before{content:"\f1bd"}
.linkgoo:before{content:"\f0e1"}
.pintgoo:before{content:"\f0d2"}