Additional Widget Setting Guide on Median UI Template
|
| 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.
- On Dasboard Blogger click "Settings"
- scroll to the bottom until you find "User Profile"
- click "User Profile" then complete the column "Introduce Yourself"
- 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 <= 0'>
<li>
<div class='team-member'>
<b:include data='author' name='teamProfileLink'/>
</div>
</li>
</b:if>
<b:if cond='data:team >= 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='"+" + (data:authors.length - 1) + " more"'/></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:
- data:team <= 0 : Change to 2, to display the number of profiles on the home page
- data:team >= 1 : Change to 3, to hide the profile in the 4th order and so on
- 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 >= 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 <= 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 >= 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='"+" + (data:labels.length - 4) + " more"'/></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:
