membuat author atau about me seperti bung frangky.
Sunday, May 13, 2018
Add Comment
Selamat pagi semuanya dan selamat sebentar lagi kita akan berjumpa bulan suci ramadhan, mudah-mudahan kita semua di beri kesehatan jasmani maupun rohani amin ya Allah ya rabbal alamin, nah pada kesempatan kali ini PastiPageOne akan membahas cara membuat author atau about me seperti bung frangky.
Memasang author di blog sebenernya tidak terlalu penting karena hanya untuk memperkenalkan diri saja, beda halnya dengan related post atau pun populer post dan keduanya adalah penting untuk di pasang di blog, namun jika kalian ingin membuat author seperti bung frangky simak saja tutorial yang akan admin kasih sekarang ini karena cara membuat nya sangat mudah sekali.
Tampilan dari author nya tidak terlalu mirip namun masih ada persamaan dan bukan hanya ituh author yang akan admin kasih ini tentunya responsive, elegant, simple dan tidak memberatkan loading blog, jadi sangat cocok di pasang pada blog yang memiliki niche tutorial.
Jika kalian ingin terkenal dan ingin menjadi artis dadakan:v kenapah gak di coba memasang author seperti ini? oke lah jika kalian sudah penasaran kita langsung saja menuju ke tutorialnya silahkan lihat di bawah ini.
1) Masuk Blogger.
2) Pilih Tema => Edit HTML.
3) Lalu cari kode </head> gunakan tombol Ctrl+f untuk mempermudah pencarian.
4) Jika sudah ketemu kalian copy kode di bawah ini dan pastekan tepat di atas kode </head> tadi.
5) Lalu kalian terserah mau di pasang di mana saja, jika kalian ingin memasangnya di bawah artikel atau di bawah related post kalian cari kode <data:post.body/>cari yang paling terakhir !! dan copy kode di bawah ini lalu pastekan tepat di bawah kode tadi.
6) Simpan Template.
Nah ituh dia cara membuat author seperti bung frangky, gimana mudah sekali bukan? Mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya.
1) Masuk Blogger.
2) Pilih Tema => Edit HTML.
3) Lalu cari kode </head> gunakan tombol Ctrl+f untuk mempermudah pencarian.
4) Jika sudah ketemu kalian copy kode di bawah ini dan pastekan tepat di atas kode </head> tadi.
<style type='text/css'> /* author box by duniaseoblog */ .rbz-info{display:block;padding:0;margin:0 auto;color:#999;line-height:1.3em;font-size:12.3px!important;margin:0auto} .rbz-info{background:#EAEBED;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden} .rbz-info::before{content:"";display:block;width:100%;height:88px;background:#FE634A;position:absolute;top:0;left:0;right:0;z-index:0} .author{font-size:20px;font-family:"Archivo Narrow";font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase} .author-photo{display:inline-block;float:left;position:relative;z-index:1} .author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #EAEBED} .about-author{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 125px)} .author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777} ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0} ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#fff;text-align:center;border-radius:2px} ul.sosmed-saya li {display: inline-block;} .author a, .author a:hover {color: #fff;} ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #bdc3c7;padding:0 15px;font-style:italic;font-size:14px;color:#999} @media screen and (max-width:600px){ .rbz-info {padding: 30px 15px 20px;} .author {margin: 20px 0 35px !important;} } @media screen and (max-width:480px){ .rbz-info{margin:30px auto 10px;text-align:center} .author-photo{display:block;float:none} .about-author{display:block;float:none;width:100%;text-align:center} .author{text-align:center;display:block;margin:15px 0 25px!important} .author-desc{text-align:center} ul.sosmed-saya{display:block;text-align:center} ul.sosmed-saya li{display:inline-block;text-align:center} .author a,.author a:hover{color:#888} } /* latin */ @font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 400; src: local("Archivo Narrow Regular"), local("ArchivoNarrow-Regular"), url(https://fonts.gstatic.com/s/archivonarrow/v5/DsLzC9scoPnrGiwYYMQXpkU-p1xzoRgkupcXIqgYFBc.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } </style>
5) Lalu kalian terserah mau di pasang di mana saja, jika kalian ingin memasangnya di bawah artikel atau di bawah related post kalian cari kode <data:post.body/>cari yang paling terakhir !! dan copy kode di bawah ini lalu pastekan tepat di bawah kode tadi.
<div class='rbz-info'> <span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> <span class='author-photo'> <img alt='DI ISI DENGAN NAMA KALIAN' src='DI ISI DENGAN URL GAMBAR KALIAN' title='DI SINI DENGAN NAMA KALIAN'/> </span> <span class='about-author vcard'> <span class='author'> <span class='fn'><a class='g-profile' href='' itemprop='url' rel='author' title='author profile'><span itemprop='name'>DI SINI DENGAN NAMA KALIAN</span></a></span> </span> <span class='author-desc'>DI ISI DENGAN DEKSRIPSI TENTANG DIRI KALIAN</span> <ul class='sosmed-saya'> <li class='site'>https://DI ISI DENGAN LINK.blogspot.com</li> </ul> </span> </span> </div>
6) Simpan Template.
Nah ituh dia cara membuat author seperti bung frangky, gimana mudah sekali bukan? Mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya.
Sumber: https://rebozasambirejo.blogspot.co.id/2017/08/widget-author-box-ala-bungfrangki.html?m=1
0 Response to "membuat author atau about me seperti bung frangky."
Post a Comment