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 == "item"'> <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!
Adakah cara ini sesuai utk semua template? Saya cari code di atas dlm html tak jumpa la. Macam mana ya?
BalasPadamTidak, bergantung kepada jenis template masing-masing. Boleh saya tahu website kamu?
Padamsaya tak jumpa la code seperti di atas. boleh tolong tengok ke? terima kasih
BalasPadamwww.aimanabdullah.com
-Cari kode ini:
PadammainEntityOfPage
-Copy kode pertama yang telah saya sediakan diatas.
-paste kode tersebut diatas kode ini:
<b:if cond='data:post.title'>
Check gambar ini untuk lebih detail:
https://1.bp.blogspot.com/-8GoSdeKUdgw/XZ1HJR-EwaI/AAAAAAAABow/d0fzqRlpRfcbiHkxjAvO5Rvydd2IMR58ACLcBGAsYHQ/s1600/Capture.PNG
Yang selebihnya, Follow seperti biasa. TQ
ok dah berjaya. Kalau nak buat seperti di blog ini boleh? gambarnya dibawah title tapi di atas author and date? Nampak kemas pula hehe
PadamInsyallah. Boleh (y), tukarkan kode pertama dengan kode ini:
Padamhttps://www.daftarturiol.com/p/asdasdas.html
saya dah guna kode di atas. tetapi sama je, masih gambar berada di atas tajuk bukan di atas author/date.
PadamSaya perasan, macam sama je kod yang baru ni dengan kod seperti didalam entry.
Saya dha try: tajuk & date berada pada paling atas. Namun, susunan template ada menjadi kucar-kacir. Saya cadangkan:
PadamTAJUK: atas
Gambar: tengah
Date: Bawah
- - - Caranya: - - - -
Pindahkan kode pertama dan letakkan dibawah kode
<b:if cond='data:post.title'>
https://1.bp.blogspot.com/-2xceAqf_irA/XZ78GzaT1oI/AAAAAAAABp4/M7qO4ultBdElYiLh5b5t-yaJUXTEX04zQCLcBGAsYHQ/s1600/Screenshot%2B%252813%2529.png
Semoga kali ini berjaya! (y)(y) hehehe
Saya dah cuba, tapi masih sama sahaja, gambar berada di atas sekali. Dah cuba guna chrome dan firefox pun. adehh
Padamhttps://1.bp.blogspot.com/-cIFlXnJ7F1w/XZ8JfnQXOHI/AAAAAAAAGW0/Rsm151FAyDsQ7B78xeofu-GHeBIqGhA5ACLcBGAsYHQ/s1600/123.PNG
Boleh tu, cuba pindahkan kode pertama. Follow step dibawah:
PadamStep 1:
https://1.bLJ7c_rrxY29.png
Step 2:
https://1.b529.png
x jadi juga. PM.
https://www.daftarturiol.com/p/contact-from.html
Padam