Blogger Bootstrap 4 Navbar İnsert | Ebubekir Bastama
Herkese iyi günler arkadaşlar
Makalemize başlamadan önce makalelerimi yararlı buluyorsanız bizlere destek olmak için sosyal medya sayfalarınız'da paylaşırsanız sevinirim.
Bu makalemizde sizlere "blogger" temaları nasıl "bootstrap 4" "navbar" eklememiz gerektiğini göstereceğim.Öncelikle örnek bir site görmek isterseniz şuanki gezindiğiniz yani bu siteye bakabilirsiniz yukarıdaki "navbar"'dır. Şimdi gelelim nasıl yapmamız gerektiğine
Sırasıyla işlemleri yapalım arkadaşlar:
1-)Buradan blogger'ınıza ulaşın
2-)Sol tarafda bulunan "Tema"'ya basınız
3-)Sağ tarafda açılan "Htmli Düzenle"'ye tıklıyoruz.
4-)Sonra ise Sol panel Açılan bölümde ((<head>)) altına ilgili kodu ekliyoruz.
Eklenecek Kodlar:
<!--Bootstrap 4(www.ebubekirbastama.com)-->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!--Bootstrap 4(www.ebubekirbastama.com)-->
5-)Ekledikten sonra her ihtimale karşılık temamızı kaydediyoruz ve devam ediyoruz.
6-)Şimdi Sıra geldi "navbar"'ımızı eklemeye ilk başta ((<body>)) arıyoruz ve bulduktan sonra hemen altına ilgili kodu yapıştırıyoruz ve kendimize göre değiştiriyoruz.
Eklenecek Kodumuz:
<!--Navbar Kodumuz www.ebubekir Bastama.com-->
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<a class="navbar-brand" href="https://www.ebubekirbastama.com">Eçk Yazılım</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">AnaSayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkımızda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</nav>
<!--Navbar Kodumuz www.ebubekirbastama.com-->
Son olarak Yukarıdan Temayı Kaydet butonuna Basıyoruz ve çıkıyoruz.
Şimdi temanıza bakabilirsiniz.Hayırlı olsun.
Yabancı arkadaşlarımız için İngilizce anlatım
Good day friends
In this article we will show you how to add "bootstrap 4" "navbar" to your "blogger" theme. Firstly if you want to see a sample site, you can see this site on the upcoming navbar. Now how come we have to
Let's do it in order:
1-) Access your blogger from here
2-) Press "Theme" on the left side
3-) On the right-hand side, click on "Edit All".
4-) Then we add the relevant code under the left panel ((<head>)).
Codes to add:
<! - Bootstrap 4 (www.ebubekirbastama.com) ->
<link href = 'https: //maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel = 'stylesheet' />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </ script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </ script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </ script>
<! - Bootstrap 4 (www.ebubekirbastama.com) ->
5-) After adding, we record the proposal for just in case and continue.
6-) Now we are looking for "navbar" at first ((<body>)) and after we find it, we paste the related code immediately and change it by ourselves.
Our Code to Attach:
<! - Navbar Kodumuz www.ebubekir Bastama.com ->
<nav class = "navbar-expand-sm bg-success navbar-dark">
<a class="navbar-brand" href="https://www.ebubekirbastama.com"> EC Software </a>
data-toggle = "collapse" data-target = "# collapsibleNavbar"> <button class = "navbar-toggler"
<span class = "navbar-toggler-icon"> </ span>
</ Button>
<div class = "collapse navbar-collapse" id = "collapsibleNavbar">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class="nav-link" href="#"> AnaSayfa </a>
</ Li>
<li class = "nav-item">
<a class="nav-link" href="#"> About Us </a>
</ Li>
<li class = "nav-item">
<a class="nav-link" href="#"> Communications </a>
</ Li>
</ Ul>
</ Div>
</ Nav>
<! - Navbar Kodumuz www.ebubekirbastama.com ->
Finally we press the Save Top Template button and we exit.
Now you can look at your theme.
Hiç yorum yok
Yorum Gönder