Tech for FTCP

Blogger portfolio Basil Theme Customization

In this article, we told you about some additional settings. But due to lack of time, we did not bring that setting to you. But in this video, we will talk about all those additional settings.

In this video, we will learn how to add buttons to the Basil theme? How to add a menu to the Basil theme? How do we add notice boards to the Basil theme? And how we will change the footer credit.

Basil Theme Customization

If you want to customer the blogger’s most loved portfolio theme Basil, then you must watch the video

Basil theme additional customization

If you want to customize the Basil theme even better like this. added the navigation menu inside the Basil theme, added the button, and also changed the footer credits. Also, know how to customize basil template

How to add buttons on Basil homepage

If you want to put buttons on the home page in the Blogger theme, you can use the code below while watching the video below.

<a href="#" target="_blank"><b><input type="button" style="background-color:#3b5998;color:#ffffff;width:150px;
height:40px;" value="JOIN GROUP" /></b></a>

How to add extra navigation menu on Basil homepage

If you want to put an extra navigation menu on the home page in the Blogger theme, you can use the code below while watching the video below.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #3a3a3a;
}

.topnav a {
  float: left;
  display: block;
  color: #ffc000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px
  position: fixed;
}

.topnav a:hover {
  background-color: #674c2f;
  color: #ffc000;
}

.topnav a.active {
  background-color: #3a3a3a;
  color: #ffc000;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: blue;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3a3a3a;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #ffc000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #674c2f;
  color: #ffc000;
}

.dropdown:hover .dropdown-content {
  display: block;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>



<div class='topnav' id='myTopnav'>
  
  <a href='#'>POST CATEGORIES</a>

  <a href='https://originals.djmthephotofactory.com/search/label/Photography'>abcd</a>
  <a href='https://originals.djmthephotofactory.com/search/label/Illustrations'>Illustrations</a>
<a href='https://originals.djmthephotofactory.com/search/label/Episodes'>Episodes</a>
<a href='https://originals.djmthephotofactory.com/search/label/Stories'>Stories</a> 
<a href='https://originals.djmthephotofactory.com/search/label/Short%20Stories'>Short Stories</a>
<a href='https://originals.djmthephotofactory.com/search/label/Love%20Stories'>Love Stories</a>
<a href='https://originals.djmthephotofactory.com/search/label/Historical%20Stories'>Historical Stories</a>
<a href='https://originals.djmthephotofactory.com/search/label/Murder%20%26%20Mystery'>Murder and Mystery</a>    
<a href='https://originals.djmthephotofactory.com/search/label/Poems'>Poems</a>
<a href='https://originals.djmthephotofactory.com/search/label/Songs'>Songs</a>
<a href='https://originals.djmthephotofactory.com/search/label/Videos'>Videos</a>
<a href='https://originals.djmthephotofactory.com/search/label/Bengali%20recitation'>Audio Drama &amp; Recitations</a>


  <a class='icon' href='javascript:void(0);' onclick='myFunction()'>
    <i class='fa fa-bars'/>
    </a>
  </div>
<script>
function myFunction() {
  var x = document.getElementById(&quot;myTopnav&quot;);
  if (x.className === &quot;topnav&quot;) {
    x.className += &quot; responsive&quot;;
  } else {
    x.className = &quot;topnav&quot;;
  }



}
</script>

How to add a notice board on Basil homepage

If you want to add a notice on the home page in the Blogger theme, you can use the code below while watching the video below.

<style> 
.div1 {
  
  display: inline-block;
  column-gap: 40px;
  width: 350px;
  height: 300px;
  border: 5px solid #3a3a3a;
  background-color: #ffd900;
}


</style>
<center>
<div class='div1'><font face='arial black' size='4'><b>NOTICE</b></font><marquee direction='up' height='80%' onmouseout='this.start();' onmouseover='();' scrollamount='1' width=''>
<a href='https://originals.djmthephotofactory.com/p/notice.html'><center>Notification 05/5-20 (We are only Revoked the PDF file feature)</center></a>
<a href='https://originals.djmthephotofactory.com/p/notice.html'><center>Notification 30/4-20 (Very few content will be published on the website due to lockdown)</center></a>
</marquee></div>

</center>

How to change footer credit on basil theme

You cannot easily change the footnote credit note of the Basil theme. If you go to change footer credits via normal HTML edit HTML. So it remains the same again as before. It does not change. So if you want to change footer credits then read this article. How to change footer credits in Blogger in hindi

Basil theme additional customization video

1 thought on “Blogger portfolio Basil Theme Customization”

  1. You told us how to add menu to this theme. but when we click on any label it goes to homepage. why you cheated us?

    Reply

Leave a Comment

x