Tutorial membuat Widget Navbar Social Media di Plus UI
|
| Navbar Icon Social Media dan Date di Template Plus UI 2.6 |
Navbar Icon Social Media dan Date
Navbar adalah singkatan dari navigation bar. merupakan komponen website yang berupa menu. yang biasanya diletakkan pada header website. Komponen navbar biasanya digunakan untuk membuat menu navigasi yang terletak pada bagian header website, bisa kita sebut sebagai menu utama dari sebuah website.
Navbar Icon Social Media dan Date adalah menambahkan media sosial dan date ke bilah navigasi blog Anda sama seperti menambahkan tautan, dengan menggunakan gambar ikon dan angka.
Tutorial
Bagaimana cara membuat Navbar Social Media ? Cara membuat Navbar Social Media dan Date di Template Plus UI. Ikuti langkah-langkahnya berikut di bawah ini.
Copy Paste Kode Script
- Pertama Masuk ke Dashboard Blogger.
- Pilih Tema.
- Pilih Edit HTML.
- Langkah #1 cari kode ]]></b:skin>, setelah ketemu salin kode CSS di bawah ini dan tempelkan sebelum atau di atas kode ]]></b:skin>.
- Langkah #2 cari kode <body> kemudian salin kode script HTML di bawah ini, kemudian letakkan di bawah atau sesudah kode <body>.
- Terakhir - Pratinjau dan Simpan .
/* Navbar */ .navbar{z-index:3;padding-top:10px;background:var(--blurB); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);box-shadow:0 5px 35px rgba(0,0,0,.07);height:var(--navH);color:var(--navT);overflow:hidden} .navR .section{justify-content:flex-end} .navIn svg, header svg{width:20px;height:20px;fill:var(--navI); opacity:.8} .navIn svg.line{fill:none;stroke:var(--navI)} .navIn .section{display:flex;align-items:center;height:100%;position:relative;width:calc(100% + 14px);left:-7px;right:-7px} .navIn .section >*{margin:0 7px} .navIn .a{color:inherit} .navIn ul{list-style:none;margin:0;padding:0} .mLang{align-items:baseline;font-size:13px} .mLang, .mSocc{display:flex;position:relative;width:calc(100% + 14px);left:-7px;right:-7px} .mLang .a{width:30px;height:30px;display:flex;align-items:center;justify-content:center} .mLang .a::before{content:attr(data-text)} .mLang li.u{font-size:12px;text-transform:uppercase} .mLang li:not(:last-child){display:flex;align-items:center} .mLang li:not(:last-child)::after{content:'';height:14px; border-left:1px solid #999; margin:0 5px;opacity:.7; flex:0 0} .mLang span, .mSocc span{opacity:.5} .mSocc >*{position:relative} .mSocc svg{z-index:1} .mSocc svg{width:19px;height:19px;opacity:.8}#dateNow{right: 10px;position: absolute;top: 5px;opacity: 0.7;}
.drK .navbar{background:var(--blurB); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);color:var(--darkT)}
<!--[ Navbar Section ]-->
<b:tag class='navbar' name='div'>
<b:tag class='navIn secIn' name='div'>
<div class='navL'>
<b:section id='navbar-left' maxwidgets='1' showaddelement='true'>
<b:widget id='LinkList004' locked='true' title='Social Media' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='text-8'>Pinterest</b:widget-setting>
<b:widget-setting name='link-7'>#</b:widget-setting>
<b:widget-setting name='link-8'>#</b:widget-setting>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='text-3'>Tiktok</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
<b:widget-setting name='text-5'>Telegram</b:widget-setting>
<b:widget-setting name='text-4'>Whatsapp</b:widget-setting>
<b:widget-setting name='text-7'>LinkedIn</b:widget-setting>
<b:widget-setting name='text-6'>Youtube</b:widget-setting>
<b:widget-setting name='shownum'>4</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='mSocc'>
<b:loop index='soc' values='data:links' var='link'>
<b:if cond='data:soc <= 5'>
<li>
<b:tag class='a tIc bIc' expr:name='data:link.target != "#" ? "a" : "span"'>
<b:attr cond='data:link.target != "#"' expr:value='data:link.target' name='href'/>
<b:attr cond='data:link.target != "#"' name='role' value='button'/>
<b:attr cond='data:link.target != "#"' expr:value='data:link.name' name='aria-label'/>
<b:attr cond='data:link.target != "#"' name='target' value='_blank'/>
<b:attr cond='data:link.target != "#"' name='rel' value='noopener'/>
<b:if cond='data:link.name == "Facebook"'>
<b:include name='facebook-icon'/>
<b:elseif cond='data:link.name == "Instagram"'/>
<b:include name='instagram-icon'/>
<b:elseif cond='data:link.name == "Twitter"'/>
<b:include name='twitter-icon'/>
<b:elseif cond='data:link.name == "Youtube"'/>
<b:include name='youtube-icon'/>
<b:elseif cond='data:link.name == "LinkedIn"'/>
<b:include name='linkedIn-icon'/>
<b:elseif cond='data:link.name == "Pinterest"'/>
<b:include name='pinterest-icon'/>
<b:elseif cond='data:link.name == "Whatsapp"'/>
<b:include name='whatsapp-icon'/>
<b:elseif cond='data:link.name == "Telegram"'/>
<b:include name='telegram-icon'/>
<b:elseif cond='data:link.name == "Tiktok"'/>
<b:include name='tiktok-icon'/>
<b:else/>
<b:include name='circle-icon'/>
</b:if>
</b:tag>
</li>
</b:if>
</b:loop>
</ul>
<!--[Navbar Right]-->
<div class='navR'>
<!--[ Date ]-->
<div id='dateNow'><script>
//<![CDATA[
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
document.getElementById("dateNow").innerHTML = dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()];
//]]>
</script>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:tag>
</b:tag>
Demikian cara membuat Navbar Icon Social Media dan Date di Template Plus UI 2.6. , semoga bermanfaat.