Tutorial Buat Tajuk Artikel Dibawah Gambar

Assalamualaikum dan salam sejahtera buat semua pembaca-pembaca yang saya kasihi sekalian. Hari ini, saya nak kongsikan secara ringkas mengenai blogger "bagaimana cara kita menukarkan, mengalihkan atau membuat gambar pertama blog posts kita berada pada paling atas dan tajuk berada dibawah".

Contohnya ialah seperti dalam gambar ini:
https://1.bp.blogspot.com/-V0UXXtr6Lbc/XUbbF076B-I/AAAAAAAABZQ/d8KPBGVDnBkHu2Xj8e5Ams_NKkXqIkCJwCLcBGAs/s1600/Tutorial%2BBuat%2BTajuk%2BArtikel%2BDibawah%2BGambar.png.

Cara Buat Gambar Berada Pada Paling Atas:

Cara ini kemungkinan tidak sama dengan template anda. Ia bergantung kepada jenis template yang anda gunakan. Sila tinggalkan ulasan anda dibawah ini jika memerlukan sebarang bantuan. TQ

Pada dashboard blogger anda. Masuk ke Tema ➝ Edit HTML.

Selepas itu, cari code ini <b:if cond='data:post.title'>.

Berhati-hati kerana kode <b:if cond='data:post.title'> ini banyak. Jadi, cara mencarinya ialah, cari kode tersebut di paling atas / paling awal berdasarkan nombor kode disebelah kiri.

Semakin besar angka nombor code, semakin jauh kedudukan code berada pada paling atas.

Selepas itu, copy kod dibawah ini dan paste diatas kod <b:if cond='data:post.title'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='coverImage'> <b:if cond='data:post.firstImageUrl'> <img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/> <b:else/> <img class='firstimage' expr:alt='data:post.title' src='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s70/picture_not_available.png'/> </b:if> </div> </b:if> <div class='kolom-author'> <div class='about-author'> <img expr:src='data:post.authorPhoto.url'/> </div> <div class='pengarang'> <data:post.author/> </div> </div>

Seterusnya, salin lagi code dibawah ini dan letakkan di atas code </b:skin> atau dibawah kode <b:skin>.

.post img.firstimage{ width:100%; height:auto; max-width:100%} .post-body .separator:nth-child(1) {display:none} .kolom-author{position:relative;background: #123;height: 40px;} .about-author{overflow: auto;padding: 0 0 10px 5px;margin-top: -30px;float: left;} .about-author img {float: left;width: 60px;height: 60px;border-radius: 100px;border: solid #1233px;} .pengarang {font-size: 12px;margin-left: 10px;padding-top:10px;color:#FF3300;float: left;}

Langkah terakhir, salin lagi code dibawah ini dan letakkan diatas code </body>.

<script type='text/javascript'> //<![CDATA[ $(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()}); //]]> </script>

Save theme dan lihat hasilnya. Jika ada bahagian yang belum anda fahami, jangan malu dan jangan segan untuk hubungi kami melalui ruangan comment dibawah sini. Sekian dan terima kasih!