Ahad, 4 Ogos 2019

Tutorial Buat Tajuk Artikel Dibawah Gambar

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 TemaEdit 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!

    1. Adakah cara ini sesuai utk semua template? Saya cari code di atas dlm html tak jumpa la. Macam mana ya?

      BalasPadam
      Balasan
      1. Tidak, bergantung kepada jenis template masing-masing. Boleh saya tahu website kamu?

        Padam
    2. saya tak jumpa la code seperti di atas. boleh tolong tengok ke? terima kasih

      www.aimanabdullah.com

      BalasPadam
      Balasan
      1. -Cari kode ini:
        mainEntityOfPage

        -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

        Padam
      2. ok dah berjaya. Kalau nak buat seperti di blog ini boleh? gambarnya dibawah title tapi di atas author and date? Nampak kemas pula hehe

        Padam
      3. Insyallah. Boleh (y), tukarkan kode pertama dengan kode ini:

        https://www.daftarturiol.com/p/asdasdas.html

        Padam
      4. saya dah guna kode di atas. tetapi sama je, masih gambar berada di atas tajuk bukan di atas author/date.

        Saya perasan, macam sama je kod yang baru ni dengan kod seperti didalam entry.

        Padam
      5. Saya dha try: tajuk & date berada pada paling atas. Namun, susunan template ada menjadi kucar-kacir. Saya cadangkan:

        TAJUK: 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

        Padam
      6. Saya dah cuba, tapi masih sama sahaja, gambar berada di atas sekali. Dah cuba guna chrome dan firefox pun. adehh

        https://1.bp.blogspot.com/-cIFlXnJ7F1w/XZ8JfnQXOHI/AAAAAAAAGW0/Rsm151FAyDsQ7B78xeofu-GHeBIqGhA5ACLcBGAsYHQ/s1600/123.PNG

        Padam
      7. Boleh tu, cuba pindahkan kode pertama. Follow step dibawah:

        Step 1:

        https://1.bLJ7c_rrxY29.png 


        Step 2:

        https://1.b529.png


        x jadi juga. PM.

        Padam
      8. https://www.daftarturiol.com/p/contact-from.html

        Padam