Beranda
Blogger

Cara Menambahkan Akordeon Tengah Terkait Bergaya di Postingan Blog

Artikel Terkait di tengah postingan Blog Anda akan membantu pengunjung Anda karena akan menampilkan daftar lebih banyak artikel yang cocok.
Admin

Jika Anda ingin mengoptimalkan lalu lintas dan mendorong pengunjung untuk membaca lebih banyak artikel di blog Anda, menambahkan Related Posts Accordion di tengah Posting Blog Anda pasti akan membantu Anda mencapainya.

Related Posts Accordion
Related Posts Accordion | Fineshop Design

Hari ini, kita akan membuat Akordeon Postingan Terkait Bergaya yang dapat ditambahkan di mana saja di tengah Postingan Blog Blogger Anda. Ini akan bermanfaat bagi pengunjung Anda karena akan menampilkan daftar artikel yang sesuai dengan apa yang sedang mereka baca. Karena akan menampilkan postingan terkait, kemungkinan besar pengunjung akan mengklik artikel terkait tersebut.

Bagaimana Cara Menambahkan Posting Terkait Akordeon?

Menambahkan Related Posts Accordion di postingan blog Anda tidak memerlukan banyak pengetahuan tentang HTML, CSS, atau JS karena saya sudah merancangnya untuk Anda. Yang perlu Anda lakukan adalah menerapkan kode di tempat yang tepat di XML Tema Blogger Anda dan menambahkan Kode HTML Related Posts Accordion di tengah postingan Anda.

Penting!Sebelum kita mulai menambahkan kode dalam XML, saya sarankan Anda untuk mencadangkan tema Anda saat ini. Jika terjadi masalah, Anda dapat memulihkannya kembali.

  1. Pertama-tama Masuk ke Dashboard Blogger Anda.
  2. Pada Dasbor Blogger, klik Tema.
  3. Klik ikon panah bawah di samping tombol Sesuaikan.
  4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  5. Sekarang cari kode ]]></b:skin> dan tempel Kode CSS berikut tepat di atasnya.

    Jika templat Anda memiliki fitur mode gelap, dan Anda menginginkan warna yang berbeda saat mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan. Setiap templat dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan. Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap templat Anda.

    /* Accordion by Fineshop */
.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul, .acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{margin-bottom:0} 
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
  
.darkMode .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .acdn .cont, .darkMode .acdn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}
  6. Setelah itu, cari kode </b:defaultmarkup> dan tempel Kode berikut tepat di atasnya. 
    <!--[ Automatic Related Posts Script by Fineshop ]-->
<b:includable id='auto-relatedPost'>
  <script>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
    var autoRelatedConfig = {
      homePage: &quot;<data:blog.homepageUrl.canonical/>&quot;,
      numPosts: 10,
      titleLength:&quot;auto&quot;,
      newTabLink: false,
      callBack:function(){}
    }
  </script>
  <script>/*<![CDATA[*/ var autoRelatedIndex,showAutoRelated;null!=document.getElementById("autoRelatedPost")&&function(a,n){var e,u={homePage:"https://blog.fineshop.eu.org",numPosts:7,titleLength:"auto",containerId:"autoRelatedPost",newTabLink:!1,callBack:function(){}};for(e in autoRelatedConfig)u[e]=("undefined"==autoRelatedConfig[e]?u:autoRelatedConfig)[e];function l(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function c(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var o="object"==typeof labelArray&&0<labelArray.length?"/-/"+c(labelArray)[0]:"";autoRelatedIndex=function(e){var t=e.feed.openSearch$totalResults.$t-u.numPosts,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+u.numPosts+"&callback=showAutoRelated")},showAutoRelated=function(e){var t,a,n=document.getElementById(u.containerId),l=c(e.feed.entry),o="<ul>",r=u.newTabLink?' target="_blank"':"";if(n){for(var s=0;s<u.numPosts&&s!=l.length;s++){a=l[s].title.$t,a="auto"!==u.titleLength&&u.titleLength<a.length?a.substring(0,u.titleLength)+"&hellip;":a;for(var d=0,i=l[s].link.length;d<i;d++)t="alternate"==l[s].link[d].rel?l[s].link[d].href:"#";o+='<li><a href="'+t+'" '+r+"><span>"+a+"</span></a></li>"}n.innerHTML=o+="</ul>",u.callBack()}},l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex")}((window,document),document.getElementsByTagName("head")[0]); /*]]>*/</script>
</b:includable>

    Ubah bagian yang ditandai
    10: Jumlah maksimum postingan terkait (misal, 15)
    auto: Jumlah karakter judul maksimum (misal, 30), biarkan otomatis untuk judul lengkap
    false: Ganti dengan true jika Anda ingin membuka postingan terkait di Tab Baru

  7. Tambahkan Kode berikut tepat di bawah <data:post.body/>. 
    <!--[ Automatic Related Posts by Fineshop ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>
  8. Simpan perubahan dengan mengklik ikon

Selesai! Sekarang tambahkan Kode HTML berikut di Postingan Blog Anda di mana pun Anda ingin menampilkan Postingan Terkait Accordion.

<!--[ Related Posts Accordion by Fineshop ]-->
<div class='acdn'>
  <!--[ Related Posts ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offrelPost' name='relatedposts-1' type='checkbox'/>
      <label class='acTtl' for='offrelPost'>
        <i class='acIcn'></i>
        
        <!--[ Related Posts Title ]-->
        <span>More Articles on this topic</span>
      </label>

      <!--[ Related Posts Content ]-->
      <div class='cont'>
        <div id='autoRelatedPost'></div>
      </div>
    </div>
  </div>
</div>

Posting Terkait ditampilkan sesuai Label Posting.

Penggunaan Alternatif

Anda juga dapat menggunakan ini sebagai Akordeon dalam postingan Anda, untuk itu gunakan kode HTML berikut:

<!--[ Accordion by Fineshop ]-->
<div class='acdn'>
  <!--[ Accordion 1 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
      <label class='acTtl' for='offaccor1'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_1</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 2 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
      <label class='acTtl' for='offaccor2'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_2</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 3 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
      <label class='acTtl' for='offaccor3'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_3</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
  
  <!--[ Accordion 4 ]-->
  <div class='ac'>
    <div class='acCont'>
      <input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
      <label class='acTtl' for='offaccor4'>
        <i class='acIcn'></i>
        
        <!--[ Accordion Title ]-->
        <span>Accordion_Title_4</span>
      </label>

      <!--[ Accordion Content ]-->
      <div class='cont'>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Demo

Ingin melihatnya berfungsi?
Anda dapat memeriksa Gaya Akordeon Posting Terkait sebelum menambahkannya di Posting Blog Anda.
Mari kita lihat!

Kesimpulan

Ini semua tentang menambahkan Akordeon Postingan Terkait di Postingan Blog Blogger. Semoga Anda menikmati artikel ini. Silakan bagikan artikel ini. Dan jika Anda mengalami masalah di bagian mana pun atau memiliki pertanyaan, silakan tanyakan kepada kami di kolom komentar. Terima kasih!

Copyright (c):
fineshopdesign.com

Posting Komentar