Additional Widget Setting Guide on Median UI Template

Sinan Tektaş
Additional Widget Settings Guide on Median UI Templates
Source: jagodesain.com

Widget Slider

At first this widget was planned to display recent posts, due to time constraints we did not have time to modify this slider section, so for now this slider is only used to display banner images with links. But the good news is this slider is made purely using CSS and HTML without javascript so it won't have much effect on the performance of the blog.

Add a link with a picture

If you want to use this slider then the most recommended image size is 1200px * 360px, please change the marked part of the slider code below with your banner link.

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

Examples of writing correct and recommended image links are as below: image tags(<img >) in the example below are equipped with Lazysize so it will not burden loading your blog.

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

The number of slides that can be displayed is unlimited, if you want to add a new slide please duplicate the code above and change the ID on the marked section. You can remove this widget if it feels less useful.

To avoid any bugs in the image, please find the CSS code below and change it according to the example.

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

This widget is a standard profile widget that appears if there is only one author on the blog. We changed the design of this widget by adding the active hover function and bringing up the social media icon ketia user directing cursor to the author's profile picture.

In this widget the location display is hidden, so even if you click the "Show Location" check it will not change anything in the profile view.

Add a short description to a profile

If you want the widget to appear perfect, we recommend that you complete the"Introduce Yourself" columnon your Blogger profile.

  1. On Dasboard Blogger click "Settings"
  2. scroll to the bottom until you find "User Profile"
  3. click "User Profile" then complete the column "Introduce Yourself"
  4. Save profile

Change the limit on the number of characters that appear in profile descriptions

Just like the author profile at the end of each post, in this widget the number of characters for profile description is also limited to 60 characters, you can change it by finding the code below and changing the marked part:

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

Add a social media link to a profile

The social media link code on the profile widget is marked with the following tag:

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

Please change the meaning of href='...' which has been marked above with your social media link.

Widget Profile Team

It is an alternative to individual profile widgets if there is more than one author on the blog. In case if on one blog there are more than 5 authors then in the previous version all profiles will be displayed lined down which looks annoying and eating place.

To that we hide a portion of the author's profile and add a pop-up function to show the entire profile of the author of the blog. Besides being more efficient, the design of this widget is also more palatable than in previous versions.

Change the limit on the number of author profiles that appear at the beginning

Since in this demo blog there are only two author profiles, so to display the pop-up function we limit only one profile that appears and hides the rest. You can add a maximum of 3 profiles on the main page, please follow the directions below:

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

In case you want to display 3 author profiles in the initial view, then change the section marked in the code above to:

  1. data:team &lt;= 0 : Change to 2, to display the number of profiles on the home page
  2. data:team &gt;= 1 : Change to 3, to hide the profile in the 4th order and so on
  3. data:authors.length - 1 : Change to 3, to display the text "+(total hidden profiles) more" on the + button on the home page
This widget is modified by utilizing the <b:loop> tag and <b:if>tag. Please note in blogger, calculation with tag <b:loop > starts from 0,therefore in the case above if you change the first code to 3 then the profile displayed at the beginning becomes 4

Bug fixes in Profile Team widget

We found a bug in this widget precisely on looping the '+ more' button that repeats if the contributor on a blog is more than 2 people, this is due to an error in writing conditional tags in the widget code. To fix it please find and change the code below

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

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

Change the sentence 'All authors/contributor'

You can change this sentence via CSS because we use Pseudo ::before to display it. The CSS code for this sentence is:

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

Cloud Label and List Widgets

Similarly to the Profile Team widget, we also modified this widget to show only a portion of the label and hide the rest with the show/hide function. This widget was also modified by utilizing the tag tag <b:loop> and the tag <b:if> as well as the tag <input> for its showhide function.

Change the number of labels that appear at the beginning

In the default settings of this template we only display 4 labels on the home page and hide the rest, the sentence "+3 more" will change automatically according to the number of labels hidden, but you can change them later if it feels less compatible with that sentence

First to change the number of labels that appear there are several codes that must be changed in the following tags:

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

In case you want to display the 8 labels at the beginning then change the marked section to:

  1. data:tags &lt;= 3 : Change to 7, to display a number of 8 labels on the home page
  2. data:tags == 4 : Change to 8, to display showhide button on label with 9th order
  3. data:alltags &gt;= 4 : Change to 8, to display hidden labels in order of 9 - so on
  4. data:labels.length - 4 : Change to 8, to display the total number of hidden labels, the meaning of this code is more or less (Total labels - 8)
The same applies to labels with a different 'CLOUD' layout, but you'll find data codes:tags &lt;= 3 and other codes on the label style

How to change the sentence on the show/hide button

There are several options you can apply to change the sentence on the show/hide button

  1. First Option Please
    search for CSS code. Label .cloud-label a{ and put this code just below that code:

    .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)}

    The code above will change the sentence on the showhide button to "Showmore " and when clicked will change to" Show less".

  2. Second Option

    .Label .label-input:checked + .label-all + label span{display: none}
    .Label .label-input:checked + .label-all + label:before{content: 'Hide';display: block}

    This option only changes the sentence when the button is clicked to"Hide",you can convert it into another sentence simply by changing the word Hide in the code above with your chosen word

  3. Third option(costume)

    .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

    The CSS code is the same as the first code only in this code you can choose to add sentences of your own choice simply by replacing the Kalimat_pilihan_Andasection, please create on your template.

FeaturedPost Widgets

We changed this widget a bit by adding a description of the post that was originally deleted, now you can specify how many characters appear in the post description (snippet) or even hide it again.

Change the limit on the number of characters that appear in a post description (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>

Find the code above and change the marked section to specify the character limit in the article description

Delete a post description

Locate and add display: none; in the code below:

.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

Some of the sections you can change on this widget include: widget title, description, and placeholder text. all are already marked in the code below:

<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>
Yorumlar
Uyarı:
1.Yorum yaparken saygı çerçevesin'den çıkmayın
2.Küfür Hakaret Siyasi propaganda içerikli yorum yapmak yasaktır.
3. Her ne şekilde olursa olsun, özel iletişim bilgilerinizi paylaşmayın, fark edildiğinde kesinlikte silinecektir.