Panduan Setting Widget Tambahan pada Template Median UI

Widget Slider

Pada awalnya widget ini direncanakan untuk menampilkan recent post, karena keterbatasan waktu kami tidak sempat memodifikasi bagian slider ini, jadi untuk saat ini slider ini hanya digunakan untuk menampilkan banner gambar dengan link. Tapi kabar baiknya slider ini dibuat murni menggunakan CSS dan HTML tanpa javascript jadi tidak akan berpengaruh banyak bagi performa blog.

Menambahkan link beserta gambar

Jika Anda ingin menggunakan slider ini maka ukuran gambar yang paling direkomendasikan adalah 1200px * 360px, silahkan ubah bagian yang ditandai dari kode slider dibawah ini dengan link banner Anda.

<li class='carousel-slide' id='carousel-slide1' tabindex='0'>
  <div class='carousel-snapper'>
    <!-- Tambahkan/ganti bagian ini dengan gambar Anda -->
    ...
    <!-- Sampai disini -->
  </div>
  <a aria-label='Previous' class='carousel-prev' href='#carousel-slide4' role='button'/>
  <a aria-label='Next' class='carousel-next' href='#carousel-slide2' role='button'/>
</li>

Contohnya seperti dibawah ini:

<li class='carousel-slide' id='carousel-slide1' tabindex='0'>
  <div class='carousel-snapper'>
    <!-- Tambahkan/ganti bagian ini dengan gambar Anda -->
    <a href='Url_anda_disini'>
      <img alt='Judul_alt_disini' class='lazy post-thumb' data-src='Url_gambar_disini' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    </a>
    <!-- Sampai disini -->
  </div>
  <a aria-label='Previous' class='carousel-prev' href='#carousel-slide4' role='button'/>
  <a aria-label='Next' class='carousel-next' href='#carousel-slide2' role='button'/>
</li>

Contoh penulisan link gambar yang benar dan direkomendasikan adalah seperti dibawah ini: tag gambar(<img>) pada contoh dibawah sudah dilengkapi dengan Lazysize jadi tidak akan memberatkan loading blog Anda.

<a href='Url_anda_disini'>
  <img alt='Judul_alt_disini' class='lazy post-thumb' data-src='Url_gambar_disini' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</a>

Jumlah slide yang bisa ditampilkan tidak terbatas, jika ingin menambahkan slide baru silahkan gandakan kode diatas lalu ubah ID-nya pada bagian yang ditandai. Anda bisa menghapus widget ini jika dirasa kurang bermanfaat.

Untuk menghindari adanya bug pada gambar, silahkan cari kode CSS dibawah ini lalu ubah sesuai contoh.

Cari kode CSS ini:
.carousel-snapper{position:absolute;top:0;left:0;width:100%;height:100%;scroll-snap-align:center}

Ubah menjadi seperti dibawah ini:
.carousel-snapper{position:absolute;top:0;left:0;width:100%;height:100%;scroll-snap-align:center}
.carousel-snapper{overflow:hidden}

Widget Profile Individual

Widget ini adalah widget profil standar yang tampil jika hanya ada satu penulis di blog tersebut. Kami merubah desain widget ini dengan menambahkan fungsi :hover yang aktif dan memunculkan icon social media ketia user mengarahkan cursor ke foto profil penulis.

Pada widget ini tampilan lokasi disembunyikan, jadi walaupun pada setelannya Anda mengklik centang "Tampilkan Lokasi" itu tidak akan merubah apapun pada tampilan profil.

Menambahkan deskripsi singkat pada profil

Jika Anda ingin agar widget nya tampil dengan sempurna, kami menyarankan Anda untuk melengkapi kolom "Perkenalkan Diri Anda" pada profil Blogger.

Pada Dasboard Blogger klik "Setelan"
scroll/gulir ke paling bawah sampai Anda menemukan "Profil Pengguna"
klik "Profil Pengguna" lalu lengkapi kolom "Perkenalkan Diri Anda"
Simpan profil

Mengubah batasan jumlah karakter yang muncul pada deskripsi profil

Sama halnya dengan profil penulis pada setiap akhir postingan, pada widget ini jumlah karakter untuk deksripsi profil juga dibatasi hanya 60 karakter, Anda bisa mengubahnya dengan cara temukan kode dibawah ini dan ubah bagian yang sudah ditandai:

<b:includable id='userProfileText'>
  <div class='profile-text'><b:eval expr='data:aboutme snippet {length: 60, links: false, linebreaks: false}'/></div>
</b:includable>

Menambahkan link social media pada profil

Kode link social media pada widget profil ditandai dengan tag dibawah ini :

<b:includable id='userProfileMedia'>    
  <!-- Link social media -->
  <ul class='profile-media'>
    <!-- Facebook -->
    <li>
      <a aria-label='Social Media' href='#' rel='noreferrer noopener' role='button' target='_blank'>
        <svg viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z'/></svg>
      </a>
    </li>
    <!-- Twitter -->
    <li>...</li>
    <!-- Instagram -->
    <li>...</li>
    <!-- linkedin -->
    <li>...</li>
  </ul>
</b:includable>

Silahkan ubah artibut href='...' yang sudah ditandai di atas dengan link social media Anda.

Widget Profile Team

Merupakan alternatif dari widget profil individual jika ada lebih dari satu penulis pada blog tersebut. Dalam kasus jika pada satu blog ada lebih dari 5 penulis maka pada versi sebelumnya semua profil akan di tampilkan berbaris kebawah yang terlihat mengganggu dan makan tempat.

Untuk itu kami menyembunyikan sebagian profil penulis dan menambahkan fungsi pop-up untuk menampilkan seluruh profil penulis blog tersebut. Selain lebih hemat tempat desain widget ini juga lebih enak dipandang ketimbang pada versi sebelumnya.

Mengubah batasan jumlah profil penulis yang muncul diawal

Karena di blog demo ini hanya ada dua profil penulis, maka untuk menampilkan fungsi pop-up kami membatasi hanya satu profil yang muncul dan menyembunyikan sisanya. Anda bisa menambahkan maksimal 3 profil pada halaman utama, silahkan ikuti arahan dibawah ini:

<b:loop index='team' values='data:authors' var='author'>
  <b:if cond='data:team &lt;= 0'>
    <li>
      <div class='team-member'>
        <b:include data='author' name='teamProfileLink'/>
      </div>
    </li>
  </b:if>
  <b:if cond='data:team &gt;= 1'>
    <li>
      <div class='more-member'>
        <label class='profile-more' for='offall-member'>
          <svg class='post-thumb' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z'/></svg>
        </label>
        <span><b:eval expr='&quot;+&quot; + (data:authors.length - 1) + &quot; more&quot;'/></span>
      </div>
      ...
    </li>
  </b:if>
</b:loop>

Dalam kasus Anda ingin menampilkan 3 profil penulis pada tampilan awal, maka ubahlah bagian yang ditandai pada kode diatas menjadi:

data:team <= 0 : Ubah menjadi 2, untuk menampilkan jumlah profil pada halaman awal
data:team >= 1 : Ubah menjadi 3, untuk menyembunyikan profil pada urutan ke-4 dan seterusnya
data:authors.length - 1 : Ubah menjadi 3, untuk menampilkan teks "+(total profil yang tersembunyi) more" pada tombol + di halaman awal

Widget ini dimodifikasi dengan memanfaatkan tag <b:loop> dan tag <b:if>. Perlu diketahui dalam blogger, penghitungan/kalkulasi dengan tag <b:loop> dimulai dari angka 0, karena itulah dalam kasus diatas jika Anda mengubah kode pertama menjadi 3 maka profil yang ditampilkan diawal menjadi 4

Perbaikan bug pada widget Profile Team

Kami menemukan bug pada widget ini tepatnya pada looping tombol '+ more' yang berulang jika contributor pada sebuah blog lebih dari 2 orang, hal ini disebabkan karena kesalahan penulisan tag conditional dalam kode widget. Untuk memperbaikinya silahkan cari dan ubah kode dibawah ini

Kode awal
<b:if cond='data:team &gt;= 1'>

Ubahlah menjadi seperti dibawah ini
<b:if cond='data:team == 1'>

Mengubah kalimat 'All authors/contributor'

Anda bisa mengubah kalimat ini melalui CSS karena kami menggunakan Pseudo ::before untuk menampilkannya. Kode CSS untuk kalimat ini adalah :

.Profile .team .all-member .all-memberBox:before{content:'All authors / contributors';

Widget Label Cloud dan List

Sama halnya dengan widget Profile Team, kami juga memodifikasi widget ini agar hanya menampilkan sebagian label dan menyembunyikan sisanya dengan fungsi show/hide. Widget ini juga dimodifikasi dengan memanfaatkan tag tag <b:loop> dan tag <b:if> serta tag <input> untuk fungsi showhidenya.

Mengubah jumlah label yang muncul diawal

Pada setelan bawaan template ini kami hanya menampilkan 4 label pada halaman awal dan menyembunyikan sisanya, kalimat "+3 more" akan berubah otomatis sesuai dengan jumlah label yang disembunyikan, tapi Anda bisa mengubahnya nanti jika dirasa kurang cocok dengan kalimat itu

Pertama untuk mengubah jumlah label yang muncul ada beberapa kode yang harus diubah pada tag dibawah ini:

<b:includable id='list'>
  <ul>
    <b:loop index='tags' values='data:labels' var='label'>
      <b:if cond='data:tags &lt;= 3'>
        <li>
          <a class='label-name' expr:href='data:label.url'>...</a>
        </li>
      </b:if>
      <b:if cond='data:tags == 4'>
        <li class='label-show'>
          <input class='label-input hidden' id='offall-label' type='checkbox'/>
          <div class='label-all'>
            <ul>
              <b:loop index='alltags' values='data:labels' var='label'>
                <b:if cond='data:alltags &gt;= 4'>
                  <li>
                    <a class='label-name' expr:href='data:label.url'>...</a>
                  </li>
                </b:if>
              </b:loop>
            </ul>
          </div>
          <label class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' for='offall-label'>
            <span><b:eval expr='&quot;+&quot; + (data:labels.length - 4) + &quot; more&quot;'/></span>
            <svg viewBox='0 0 512 512'>...</svg>
          </label>
        </li>
      </b:if>
    </b:loop>
  </ul>
</b:includable>

Dalam kasus jika Anda ingin menampilkan 8 label diawal maka ubah bagian yang ditandai menjadi:

data:tags <= 3 : Ubah menjadi 7, untuk menampilkan sejumlah 8 label pada halaman awal
data:tags == 4 : Ubah menjadi 8, untuk menampilkan tombol showhide pada label dengan urutan ke-9
data:alltags >= 4 : Ubah menjadi 8, untuk menampilkan label yang tersembunyi dengan urutan dari 9 - seterusnya
data:labels.length - 4 : Ubah menjadi 8, untuk menampilkan total jumlah label yang disembunyikan, arti kode ini kurang lebih adalah (Total label - 8)

Hal yang sama juga berlaku untuk label dengan tata letak 'CLOUD' hanya saja tampilan kodenya yang berbeda, tetapi Anda akan menemukan kode data:tags <= 3 dan kode lainnya yang sama pada style label tersebut

Cara mengubah kalimat pada tombol show/hide

Ada beberapa pilihan yang bisa Anda terapkan untuk mengganti kalimat pada tombol show/hide

Opsi Pertama
Silahkan cari kode CSS .Label .cloud-label a{ dan letakkan kode ini tepat dibawah kode tersebut:
```
.Label .label-show label span{display:none}
.Label .label-show label:before{content:attr(data-show);display:block}
.Label .label-input:checked + .label-all + label:before{content: attr(data-hide)}
```
Kode diatas akan mengubah kalimat pada tombol showhide menjadi "Tampilkan selengkapnya" dan ketika diklik akan berubah menjadi "Tampilkan lebih sedikit".
Opsi Kedua
```
.Label .label-input:checked + .label-all + label span{display: none}
.Label .label-input:checked + .label-all + label:before{content: 'Hide';display: block}
```
Opsi ini hanya mengubah kalimat ketika tombol diklik menjadi "Hide", Anda bisa mengubahnya menjadi kalimat lain cukup dengan mengubah kata Hide pada kode diatas dengan kata pilihan Anda

Opsi ketiga(kostum)

.Label .label-show label span{display:none}
.Label .label-show label:before{content: 'Kalimat_pilihan_Anda';display:block} // Kalimat sebelum diklik
.Label .label-input:checked + .label-all + label:before{content: 'Kalimat_pilihan_Anda'} // Kalimat sesudah diklik

Kode CSS-nya sama dengan kode pertama hanya saja pada kode ini Anda bisa memilih untuk menambahkan kalimat pilihan Anda sendiri cukup dengan mengganti bagian Kalimat_pilihan_Anda, silahkan berkreasi pada template Anda.

Widget FeaturedPost

Kami merubah sedikit widget ini dengan menambahkan deskripsi postingan yang pada awalnya dihapus, sekarang Anda bisa menentukan berapa jumlah maksimal karakter yang muncul pada deskripsi postingan (snippet) atau bahkan menyembunyikannya kembali.

Mengubah batasan jumlah karakter yang muncul pada deskripsi postingan (snippet)

<b:includable id='snippetedPostEntry'>
  <b:comment>Dont show.</b:comment>
  <div class='item-entry'>
    <b:eval expr='snippet(data:post.body, {length: 90, links: true, linebreaks: false})'/>
  </div>
</b:includable>

Temukan kode diatas dan ubah bagian yang ditandai untuk menentukan batas karakter pada deskripsi artikel

Menghapus deskripsi postingan

Cari dan tambahkan display: none; pada kode dibawah ini:

.FeaturedPost article .item-entry{margin-top:12px;font-size:90%}

// tambah display: none; hingga menjadi seperti dibawah ini:

.FeaturedPost article .item-entry{margin-top:12px;font-size:90%;display: none}

Widget FollowByEmail

Beberapa bagian yang bisa Anda ubah pada widget ini antara lain: judul widget, deskripsi, dan placeholder text. semua sudah ditandai pada kode dibawah ini:

<div class='follow-by-email-inner'>
  <label class='follow-by-email-text' for='email-input'>Get updates right in your inbox. Join to get notified with all new stuff</label>
  
  <form expr:action='&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath' method='get' target='_blank'>
    <input autocomplete='on' class='follow-by-email-address' id='email-input' name='email' placeholder='e.g. youremail@gmail.com' type='email'/>
    ...
  </form>
</div>

Dokumentasi Fitur Tutorial

Median UI