13 Januari 2021

Cara pindahkan nama author & label ke bawah judul postingan

Setiap orang pasti memiliki selera yang berbeda-beda,begitupun dalam hal memodifikiasi tampilan blog. Demi mempermudah akses para pengunjung blog ketika berada didalam halaman postingan maka berbagai atributpun dipasang mulai dari kolom translate,kolom pencarian artikel,label dan sebagainya. Bahkan ada pula yang memindahkan posisi nama author atau admin blog berserta keterangan label postingan yang biasanya berada di bawah artikel dialihkan posisinya menjadi di bawah judul postingan.


Pada artikel yang lalu saya telah membahas Cara sembunyikan kolom komentar blog sebagai solusi alternatif guna menghindari komentar spam dan kesempatan kali ini saya akan berbagi info mengenai cara memindahkan posisi nama author beserta keterangan label ke bagian atas artikel atau di bawah judul postingan.
Ada dua cara yang bisa anda pilih!!!

Cara pertama :

Masuk akun blogger kemudian pilih menu tema lalu klik edit html.
Selanjutnya cari kode <div class='post-header-line-1'/> kemudian tempatkan kode script berikut ini di bawahnya

<div style='margin: 10px 0;'><span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMpTNPeRQM3wwopVq4DmwPp38EULJocaclwB_9Nh51-Wekdm-fZ0tr3OS8nYV9xFa_LhAhSL3ss-MaY3Uub9n8VQnLdwm_3CSP662IvKpIcuC4CuEb-wO8Oh3F57PxZrmvMKC4LeBGldA/s1600/author.gif) no-repeat scroll top left;padding-left:20px;font-size:11px;'><a href='https://www.blogger.com/profile/1555575XXXXXXXXXXXXX'><b>Nama Profil anda</b></a></span> |  <span style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKb9eMVKq3dEp_sbcEBeXUmjdUMr0F4Tjna_uRXBATSYMmOeimj6ERscVlx0nPlSLAyP-Gl_03okwqLPCoMV5HC2dcA2q_qnbvhxrlYhkn4ynPDhEs9UK0ulki-Dk2PNBJdK5EnuOFztM/s1600/tag+icon.gif) no-repeat scroll top left;background-position:0px -1px;padding-left:23px;font-size:11px;'><b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?max-results=7"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>~</b:if></b:loop></b:if></span></div>

Sebelum menyimpannya,ubah tulisan warna biru dengan url profil blog dan tulisan warna merah dengan nama admin yang anda gunakan di blog. Setelah selesai silahkan simpan.

Cara kedua :

Cara ini lebih simple dibandingkan dengan cara pertama,yang terpenting blog anda sudah memasang font awesome. Jika belum memasang font awesome silahkan copy kode script di bawah ini dan tempatkan di atas kode </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>

Selanjutnya copy script di bawah ini lalu tempatkan di bawah kode <div class='post-header-line-1'/>

<div class='post-info'>
<span class='post-author'><i class='fa fa-user'/>&amp;nbsp;<b:if cond='data:post.authorProfileUrl'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><b><data:post.author/></b></a><b:else/><data:post.author/></b:if></span> _ <span class='post-labels'><b:if cond='data:post.labels'><i class='fa fa-tags'/>&amp;nbsp;<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><b><data:label.name/></b></a><b:if cond='not data:label.isLast'>~</b:if></b:loop></b:if></span>
</div>

Setelah selesai silahkan klik simpan dan lihat hasilnya pada tampilan postingan blog anda. Ingat !!! Tampilan postingan blog anda oke,jangan lihat punya orang karena anda pasti tidak akan menemukan perubahannya 🤗.

Tidak ada komentar:

Posting Komentar