rasgane

Widget LinkList

Widget LinkList

Penjelasan

LinkList merupakan salah satu Widget yang sering digunakan untuk daftar tautan.

Sumber Daya (Resources)

LinkList
title: "string"

size : number

length : number

escaped : "string"

jsEscaped : "string"

jsonEscaped : "string"

cssEscaped : "string"

sorting: "string"

size : number

length : number

escaped : "string"

jsEscaped : "string"

jsonEscaped : "string"

cssEscaped : "string"

shownum: number

shownum: number

links: [array]
target: "string"

size : number

length : number

escaped : "string"

jsEscaped : "string"

jsonEscaped : "string"

cssEscaped : "string"

name: "string"

size : number

length : number

escaped : "string"

jsEscaped : "string"

jsonEscaped : "string"

cssEscaped : "string"

Contoh Syntax Default

<b:widget id='LinkList1' locked='false' title='Belajar LinkList' type='LinkList' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='text-1'>Search</b:widget-setting>
    <b:widget-setting name='link-1'>/search</b:widget-setting>
    <b:widget-setting name='text-0'>Home</b:widget-setting>
    <b:widget-setting name='link-0'>/</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:include name='widget-title'/>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
        </b:loop>
      </ul>
    </div>
  </b:includable>
</b:widget>

Hasil dalam bentuk HTML

<div class="widget LinkList" data-version="2" id="LinkList1">
  <h3 class="title">
    Belajar LinkList
  </h3>
  <div class="widget-content">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/search">Search</a></li>
    </ul>
  </div>
</div>

Diatas merupakan versi standarnya yang sering digunakan, bisa kita lihat hasilnya begitu baku dan terlalu standar, oleh karena itu kali ini kita akan berlajar untuk merubah atau custom sesuai dengan keinginan kita.

Bedah Widget LinkList

Kita bisa lihat dibagian Sumber Daya (Resources) ada beberapa yang bisa kita custom yaitu :

  • title
  • links [target & name]

title

biasa nya Syntax Default akan seperti ini

<b:include name='widget-title'/>

Hasil dalam bentuk HTML

<h3 class="title">Title LinkList</h3>

jika seperti diatas akan susah untuk custom(sesuaikan) untuk judul widgetnya.

dan untuk memanggil(menampilkan) data judul widget kalian bisa mengunakan tag <data.title/> nah jika seperti ini kita mudah untuk custom nya.

<h1><data.title/></h1>  <!-- <h1>Title Widget</h1> -->
<h2><data.title/></h2> <!-- <h2>Title Widget</h2> -->
<h3><data.title/></h3> <!-- <h3>Title Widget</h3> -->

<span><data.title/></span> <!-- <span>Title Widget</span> -->
<p><data.title/></p> <!-- <p>Title Widget</p> -->
<div class="title"><data.title/></div> <!-- <div class="title">Title Widget</div> -->

atau juga seperti ini menggunakan operator perbandingan.

<b:if cond='data.title != ""'>
  <!-- Kosong -->
<b:else/>
  <h3><data.title/></h3>
</b:if>

Fungsi :

  • jika judul(title) widget kosong atau tidak di isi maka tidak akan menampilkan apa-apa
  • jika jika judul(title) widget tidak kosong atau di isi maka akan menampilkan dengan format <h3>Title Widget</h3>

links [target & name]

biasa nya Syntax Default akan seperti ini

<b:loop values='data:links' var='link'>
  <li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>

Hasil dalam bentuk HTML

<li><a href="/">Home</a></li>
<li><a href="/search">Search</a></li>
links [target & name]

Penjelasan :

  • data:link.name bagian nama situs
  • data:link.target bagian url situs

kita juga bisa menggunakan operator perbandingan seperti contoh dibagian judul widget

Operator perbandingan persamaan ==

contoh persamaan url

<b:loop values='data:links' var='link'>
  <li>
    <b:if cond='data:view.url == data:link.target'>
      <b:class name='active'/>
    <b:elseif cond='data:view.url == data:blog.homepageUrl path data:link.target'/>
      <b:class name='active'/>
    </b:if>
    <a expr:href='data:link.target'><data:link.name/></a>
  </li>
</b:loop>

Penjelasan :

  • Fungsi pertama jika data data:view.url sama dengan data:link.target maka akan menambah class active
  • Fungsi kedua jika data data:view.url sama dengan data:blog.homepageUrl path data:link.target maka akan menambah class active

kenapa harus menggunakan 2 fungsi? dikarena penulisan url setiap orang berbera seperti home page ada yang menggunakan https://www.rasgane.com/ dan ada juga yang menggunakan /

contoh persamaan url

<b:loop values='data:links' var='link'>
  <li>
    <a expr:href='data:link.target'>
      
      <b:if cond='data:link.name == "Home"'>
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,13H3a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V14A1,1,0,0,0,10,13ZM9,20H4V15H9ZM21,2H14a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V3A1,1,0,0,0,21,2ZM20,9H15V4h5Zm1,4H14a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V14A1,1,0,0,0,21,13Zm-1,7H15V15h5ZM10,2H3A1,1,0,0,0,2,3v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V3A1,1,0,0,0,10,2ZM9,9H4V4H9Z'/></svg>
      <b:elseif cond='data:link.name == "Pertanyaan"'/>
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M14.77,5.87a1,1,0,0,0,1.36-.37A1,1,0,0,1,18,6a1,1,0,0,1-1,1,1,1,0,0,0,0,2,3,3,0,1,0-2.6-4.5A1,1,0,0,0,14.77,5.87ZM19.07,13a1,1,0,0,0-1.12.86A7,7,0,0,1,11,20H5.41l.65-.65a1,1,0,0,0,0-1.41A7,7,0,0,1,11,6a1,1,0,0,0,0-2A9,9,0,0,0,4,18.61L2.29,20.29a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,22h8a9,9,0,0,0,8.93-7.87A1,1,0,0,0,19.07,13Zm-1.69-2.93A1,1,0,0,0,16.8,10l-.18.06-.18.09-.15.13a1,1,0,0,0-.21.32A.84.84,0,0,0,16,11a1,1,0,0,0,.07.39,1,1,0,0,0,.22.32A1,1,0,0,0,17,12a1,1,0,0,0,1-1,.84.84,0,0,0-.08-.38,1.07,1.07,0,0,0-.54-.54Z'/></svg>
      <b:elseif cond='data:link.name == "Request"'/>
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21,12a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V5A1,1,0,0,1,5,4h6a1,1,0,0,0,0-2H5A3,3,0,0,0,2,5V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM6,12.76V17a1,1,0,0,0,1,1h4.24a1,1,0,0,0,.71-.29l6.92-6.93h0L21.71,8a1,1,0,0,0,0-1.42L17.47,2.29a1,1,0,0,0-1.42,0L13.23,5.12h0L6.29,12.05A1,1,0,0,0,6,12.76ZM16.76,4.41l2.83,2.83L18.17,8.66,15.34,5.83ZM8,13.17l5.93-5.93,2.83,2.83L10.83,16H8Z'/></svg>
      <b:elseif cond='data:link.name == "Template"'/>
        <svg height='32' viewBox='0 0 8.467 8.467' width='32' xmlns='http://www.w3.org/2000/svg'><path color='#000' d='M 4.0019531 1.0039062 C 2.3572464 1.0039062 0.99609375 2.3553008 0.99609375 4 L 0.99609375 28 C 0.99609375 29.644661 2.3572464 31.003906 4.0019531 31.003906 L 28 31.003906 C 29.644706 31.003906 30.996094 29.644661 30.996094 28 L 30.996094 4 C 30.996094 2.3553008 29.644706 1.0039062 28 1.0039062 L 4.0019531 1.0039062 z M 4.0019531 2.9960938 L 28 2.9960938 C 28.571293 2.9960938 29.003906 3.4286866 29.003906 4 L 29.003906 9 L 10 9 C 8.6482928 8.9811024 8.6482928 11.018482 10 11 L 29.003906 11 L 29.003906 28 C 29.003906 28.571238 28.571293 29.003906 28 29.003906 L 4.0019531 29.003906 C 3.4306594 29.003906 2.9960938 28.571238 2.9960938 28 L 2.9960938 11 L 6 11 C 7.3517072 11.018898 7.3517072 8.9815181 6 9 L 2.9960938 9 L 2.9960938 4 C 2.9960938 3.4286866 3.4306594 2.9960938 4.0019531 2.9960938 z M 6 5 C 5.4477056 5 4.999986 5.4476976 5 6 C 5.0000068 6.5522646 5.4477203 7 6 7 C 6.5522797 7 6.9999932 6.5522646 7 6 C 7.000014 5.4476976 6.5522944 5 6 5 z M 10 5 C 9.4477056 5 8.999986 5.4476976 9 6 C 9.0000068 6.5522646 9.4477203 7 10 7 C 10.55228 7 10.999993 6.5522646 11 6 C 11.000014 5.4476976 10.552294 5 10 5 z M 14 5 C 13.447706 5 12.999986 5.4476976 13 6 C 13.000007 6.5522646 13.44772 7 14 7 C 14.55228 7 14.999993 6.5522646 15 6 C 15.000014 5.4476976 14.552294 5 14 5 z M 10.001953 15 A 1.000252 1.000252 0 1 0 10.001953 17 L 21.998047 17 A 1.000252 1.000252 0 1 0 21.998047 15 L 10.001953 15 z M 9.8984375 19 A 1.001567 1.001567 0 0 0 10.001953 21.001953 L 21.998047 21.001953 A 1.0002331 1.0002331 0 0 0 21.998047 19 L 10.001953 19 A 1.0001001 1.0001001 0 0 0 9.8984375 19 z M 9.8984375 23.001953 A 1.0015858 1.0015858 0 0 0 10.001953 25.001953 L 15.996094 25.001953 A 1.000252 1.000252 0 1 0 15.996094 23.001953 L 10.001953 23.001953 A 1.0001001 1.0001001 0 0 0 9.8984375 23.001953 z ' fill-rule='evenodd' font-family='sans-serif' font-weight='400' overflow='visible' paint-order='stroke fill markers' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal' transform='scale(.26458)'/></svg>
      <b:elseif cond='data:link.name == "Reports"'/>
        <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9L14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8z'/><circle cx='12' cy='16' r='1'/><path d='M11 7h2v7h-2z'/></svg>
      <b:elseif cond='data:link.name == "Bookmark"'/>
        <svg data-name='Layer 2' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'><path d='M60 12h-2v34a3 3 0 0 1-3 3H42.72a17 17 0 0 0-7.6 1.8l-1.78.88A2.91 2.91 0 0 1 32 52a4.17 4.17 0 0 1-2-.65c-.27-.15-.59-.32-1-.51h-.1a17 17 0 0 0-7.6-1.8H9a3 3 0 0 1-3-3V12H4a1 1 0 0 0-1 1v40a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1Z'/><path d='M30.67 10.22A21.07 21.07 0 0 0 22 8v23a1 1 0 0 1-1.55.83L18 30.2l-2.45 1.63A1 1 0 0 1 14 31V8H9a1 1 0 0 0-1 1v37a1 1 0 0 0 1 1h12.28a19 19 0 0 1 8.5 2c.52.22.9.43 1.22.6V10.38zM55 8H42.72a21.12 21.12 0 0 0-9.39 2.22l-.33.16v39.24l1.22-.62a19 19 0 0 1 8.5-2H55a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zM38 26h8.13v2H38zm0 8h8.13v2H38zm12 6H38v-2h12zm0-8H38v-2h12zm0-8H38v-2h12z'/></svg>
      <b:elseif cond='data:link.name == "Partners"'/>
        <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z'/></svg>
      <b:elseif cond='data:link.name == "Elements"'/>
        <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z'/></svg>
      <b:else/>
        <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M5,3A2,2,0,1,1,3,1,2,2,0,0,1,5,3ZM3,10A1,1,0,1,0,2,9,1,1,0,0,0,3,10Zm0,6a1,1,0,1,0-1-1A1,1,0,0,0,3,16Zm0,3a2,2,0,1,0,2,2A2,2,0,0,0,3,19ZM9,1a2,2,0,1,0,2,2A2,2,0,0,0,9,1Zm1,8a1,1,0,1,0-1,1A1,1,0,0,0,10,9ZM9,13a2,2,0,1,0,2,2A2,2,0,0,0,9,13Zm0,7a1,1,0,1,0,1,1A1,1,0,0,0,9,20ZM15,4a1,1,0,1,0-1-1A1,1,0,0,0,15,4Zm0,3a2,2,0,1,0,2,2A2,2,0,0,0,15,7Zm1,8a1,1,0,1,0-1,1A1,1,0,0,0,16,15Zm-1,4a2,2,0,1,0,2,2A2,2,0,0,0,15,19ZM21,5a2,2,0,1,0-2-2A2,2,0,0,0,21,5ZM20,9a1,1,0,1,0,1-1A1,1,0,0,0,20,9Zm1,4a2,2,0,1,0,2,2A2,2,0,0,0,21,13Zm0,7a1,1,0,1,0,1,1A1,1,0,0,0,21,20Z'/></svg>
      </b:if>

      <data:link.name/>
    </a>
  </li>
</b:loop>

Penjelasan :

  • jika data data:link.name sama dengan data yang ditentukan(Home, Pertanyaan, Template, dll) maka nilai true(benar) atau akan menampilkan data yang sudah svg yang sudah disiapkan.

jika masih pemula kalian bisa menggunakan if only dan kode nya akan seperti ini.

<b:loop values='data:links' var='link'>
  <li>
    <a expr:href='data:link.target'>
      
      <b:if cond='data:link.name == "Home"'>
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,13H3a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V14A1,1,0,0,0,10,13ZM9,20H4V15H9ZM21,2H14a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V3A1,1,0,0,0,21,2ZM20,9H15V4h5Zm1,4H14a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V14A1,1,0,0,0,21,13Zm-1,7H15V15h5ZM10,2H3A1,1,0,0,0,2,3v7a1,1,0,0,0,1,1h7a1,1,0,0,0,1-1V3A1,1,0,0,0,10,2ZM9,9H4V4H9Z'/></svg>
      </b:if>
      
      <b:if cond='data:link.name == "Pertanyaan"'>
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M14.77,5.87a1,1,0,0,0,1.36-.37A1,1,0,0,1,18,6a1,1,0,0,1-1,1,1,1,0,0,0,0,2,3,3,0,1,0-2.6-4.5A1,1,0,0,0,14.77,5.87ZM19.07,13a1,1,0,0,0-1.12.86A7,7,0,0,1,11,20H5.41l.65-.65a1,1,0,0,0,0-1.41A7,7,0,0,1,11,6a1,1,0,0,0,0-2A9,9,0,0,0,4,18.61L2.29,20.29a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,22h8a9,9,0,0,0,8.93-7.87A1,1,0,0,0,19.07,13Zm-1.69-2.93A1,1,0,0,0,16.8,10l-.18.06-.18.09-.15.13a1,1,0,0,0-.21.32A.84.84,0,0,0,16,11a1,1,0,0,0,.07.39,1,1,0,0,0,.22.32A1,1,0,0,0,17,12a1,1,0,0,0,1-1,.84.84,0,0,0-.08-.38,1.07,1.07,0,0,0-.54-.54Z'/></svg>
      </b:if>

      <b:if cond='data:link.name == "Request"'>
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21,12a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V5A1,1,0,0,1,5,4h6a1,1,0,0,0,0-2H5A3,3,0,0,0,2,5V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM6,12.76V17a1,1,0,0,0,1,1h4.24a1,1,0,0,0,.71-.29l6.92-6.93h0L21.71,8a1,1,0,0,0,0-1.42L17.47,2.29a1,1,0,0,0-1.42,0L13.23,5.12h0L6.29,12.05A1,1,0,0,0,6,12.76ZM16.76,4.41l2.83,2.83L18.17,8.66,15.34,5.83ZM8,13.17l5.93-5.93,2.83,2.83L10.83,16H8Z'/></svg>
      </b:if>

      <b:if cond='data:link.name == "Template"'>
        <svg height='32' viewBox='0 0 8.467 8.467' width='32' xmlns='http://www.w3.org/2000/svg'><path color='#000' d='M 4.0019531 1.0039062 C 2.3572464 1.0039062 0.99609375 2.3553008 0.99609375 4 L 0.99609375 28 C 0.99609375 29.644661 2.3572464 31.003906 4.0019531 31.003906 L 28 31.003906 C 29.644706 31.003906 30.996094 29.644661 30.996094 28 L 30.996094 4 C 30.996094 2.3553008 29.644706 1.0039062 28 1.0039062 L 4.0019531 1.0039062 z M 4.0019531 2.9960938 L 28 2.9960938 C 28.571293 2.9960938 29.003906 3.4286866 29.003906 4 L 29.003906 9 L 10 9 C 8.6482928 8.9811024 8.6482928 11.018482 10 11 L 29.003906 11 L 29.003906 28 C 29.003906 28.571238 28.571293 29.003906 28 29.003906 L 4.0019531 29.003906 C 3.4306594 29.003906 2.9960938 28.571238 2.9960938 28 L 2.9960938 11 L 6 11 C 7.3517072 11.018898 7.3517072 8.9815181 6 9 L 2.9960938 9 L 2.9960938 4 C 2.9960938 3.4286866 3.4306594 2.9960938 4.0019531 2.9960938 z M 6 5 C 5.4477056 5 4.999986 5.4476976 5 6 C 5.0000068 6.5522646 5.4477203 7 6 7 C 6.5522797 7 6.9999932 6.5522646 7 6 C 7.000014 5.4476976 6.5522944 5 6 5 z M 10 5 C 9.4477056 5 8.999986 5.4476976 9 6 C 9.0000068 6.5522646 9.4477203 7 10 7 C 10.55228 7 10.999993 6.5522646 11 6 C 11.000014 5.4476976 10.552294 5 10 5 z M 14 5 C 13.447706 5 12.999986 5.4476976 13 6 C 13.000007 6.5522646 13.44772 7 14 7 C 14.55228 7 14.999993 6.5522646 15 6 C 15.000014 5.4476976 14.552294 5 14 5 z M 10.001953 15 A 1.000252 1.000252 0 1 0 10.001953 17 L 21.998047 17 A 1.000252 1.000252 0 1 0 21.998047 15 L 10.001953 15 z M 9.8984375 19 A 1.001567 1.001567 0 0 0 10.001953 21.001953 L 21.998047 21.001953 A 1.0002331 1.0002331 0 0 0 21.998047 19 L 10.001953 19 A 1.0001001 1.0001001 0 0 0 9.8984375 19 z M 9.8984375 23.001953 A 1.0015858 1.0015858 0 0 0 10.001953 25.001953 L 15.996094 25.001953 A 1.000252 1.000252 0 1 0 15.996094 23.001953 L 10.001953 23.001953 A 1.0001001 1.0001001 0 0 0 9.8984375 23.001953 z ' fill-rule='evenodd' font-family='sans-serif' font-weight='400' overflow='visible' paint-order='stroke fill markers' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal' transform='scale(.26458)'/></svg>
      </b:if>
      
      <b:if cond='data:link.name == "Reports"'>
        <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9L14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8z'/><circle cx='12' cy='16' r='1'/><path d='M11 7h2v7h-2z'/></svg>
      </b:if>

      <b:if cond='data:link.name == "Bookmark"'>
        <svg data-name='Layer 2' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'><path d='M60 12h-2v34a3 3 0 0 1-3 3H42.72a17 17 0 0 0-7.6 1.8l-1.78.88A2.91 2.91 0 0 1 32 52a4.17 4.17 0 0 1-2-.65c-.27-.15-.59-.32-1-.51h-.1a17 17 0 0 0-7.6-1.8H9a3 3 0 0 1-3-3V12H4a1 1 0 0 0-1 1v40a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1Z'/><path d='M30.67 10.22A21.07 21.07 0 0 0 22 8v23a1 1 0 0 1-1.55.83L18 30.2l-2.45 1.63A1 1 0 0 1 14 31V8H9a1 1 0 0 0-1 1v37a1 1 0 0 0 1 1h12.28a19 19 0 0 1 8.5 2c.52.22.9.43 1.22.6V10.38zM55 8H42.72a21.12 21.12 0 0 0-9.39 2.22l-.33.16v39.24l1.22-.62a19 19 0 0 1 8.5-2H55a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zM38 26h8.13v2H38zm0 8h8.13v2H38zm12 6H38v-2h12zm0-8H38v-2h12zm0-8H38v-2h12z'/></svg>
      </b:if>

      <b:if cond='data:link.name == "Partners"'>
        <svg viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z'/></svg>
      </b:if>

      <b:if cond='data:link.name == "Elements"'>
        <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z'/></svg>
      </b:if>

      <data:link.name/>
    </a>
  </li>
</b:loop>
Referensi :
pin
Comment Yukine
Yukine Juni 04, 2023
Test Pin Comment Blogger

Komentar

  1. Wernayasa
    Hmm, ternyata berbeda dari caraku.
    Caraku langsung copy paste svg di linklist.
    Screenshot
    Hasilnya.
    Screenshot
    Cara ini lebih simple karena gk perlu di buat kondisi terlebih darhulu.
    Balas Hapus
    1. Yukine
      cara itu juga bisa di atas contoh menggunkan perbandingan
      Hapus
    2. Wernayasa
      Iya, code perbandingannya dan active menarik.
      Mungkin bisa dimanfaatkan untuk hal lain.
      Makasih.
      Hapus
    Balas
  2. Wernayasa
    Info.
    Bagian ini : <b:if cond='data:view.url == data:link.target'>
    <b:class name='active'/>
    <b:elseif cond='data:view.url == data:blog.homepageUrl path data:link.target'/>
    <b:class name='active'/>
    </b:if>     bisa disederhanakan menjadi: <b:class cond='data:view.url == data:link.target' name='active'/> sejauh ini belum ada bug.
    Balas Hapus
    1. Yukine
      cara tersebut memengbisa tapi ada kendala yaitu :
      contohnya ada 2 url yang menuju ke home [myblogger.com] (Full) dan [/] (Singkatan) dan masalah kayak ini gimana?? kalok menggunakan full bisa tapi untuk Singkatan itu tidak bisa. ya tiap orang kadang ada yang suka menggunakan full url ada juga yang menggunakan singkatan url contohnya seperti saya.
      oleh karena itu saya buat 2 pengecualian yang pertama full url dan yang kedua singkatan url. ya karena saya udah coba saat pembuatan tema ini.
      Hapus
    2. Yukine
      Ada 2 cara menambahkan link/url
      1. Home Full Url https://nama_blog.blogspot.com/ menjadi /.
      2. Post Full Url https://nama_blog.blogspot.com/2022/12/cara-mengatur-template-blogger-mamakita.html menjadi /2022/12/cara-mengatur-template-blogger-mamakita.html.
      3. Page Full Url https://nama_blog.blogspot.com/p/list.html menjadi /p/list.html.
      4. Label Full Url https://nama_blog.blogspot.com/search/label/Label1 menjadi /search/label/Label1.
      Hapus
    Balas

Untuk Tutorial Pemasangan License bisa gunakan <i rel='Tutor1'>Tutor</i>
Untuk Cek Member bisa gunakan <i rel='CekMember'>Cek Member</i>
Untuk Menyisipkan Gambar bisa gunakan <i rel='img'>URL_IMAGE</i>
Untuk Menyisipkan Video/Iframe bisa gunakan <i rel='video'>URL_video</i>
Untuk Menyisipkan syntax highlighter bisa gunakan <i rel='kode'>Kode yang sudah di parse</i>

Langganan: Posting Komentar (Atom)