 |
| Cara Membuat Navbar Icon Social Media dan Date di Template Plus UI 2.6 |
Navbar Icon Social Media dan Date
Cara membuat icon social media dan date di Tema Plus UI 2.6 , sebagai berikut.
Tutorial
1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Masuk Edit HTML
4. Cari kode </style>
5. Salin kode script di bawah ini, kemudian tempelkan di atas atau sebelum kode </style>
/* 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)}
6. Cari kode <body>
7. Salin kode script di bawah ini, kemudian letakkan di bawah atau sesudah kode <body>
<!--[ 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>
8. Terakhir Simpan
Demikian semoga bermanfaat