Hi,
If you came here after watching my YouTube video on the same topic as in the title, then you will know what the following codes are and where to put them.
I am sharing here three different codes to be put in different sections of the Blogger.com theme. Please watch the video for the details.
- Code to be put in <head></head> Tags – Bootstrap and CSS stylesheet Links:
<!-- My Edits Starts-->
<!-- Bootstrap CSS -->
<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css' integrity='sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We' rel='stylesheet'/>
<link href='css/bootstrap.min.css' media='screen' rel='stylesheet'/>
<!-- My Edits End-->
2. Put the Following Code just before the </body> tag in the Blogger.com theme.
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script crossorigin='anonymous' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' src='https://code.jquery.com/jquery-3.2.1.slim.min.js'/>
<script crossorigin='anonymous' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'/>
<script crossorigin='anonymous' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'/>
<script crossorigin='anonymous' integrity='sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj' src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js'/>
<!-- My Edits -->
3. The following code is to be put after the </header> tag.
Please edit the Name/text and Links ( ‘href’ ) according to your needs.
<!-- My Edit -->
<!-- Dropdown -->
<nav class='navbar navbar-expand bg-dark navbar-dark' style='height:50px;'>
<div class='navbar-brand nav-item dropdown'>
<a class='nav-link dropdown-toggle' data-toggle='dropdown' href='#' id='navbardrop'>
<span style='color:blue; background-color:yellow; height:30px; padding:5px;'>Solution Manuals of Books</span>
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='https://civilengineering-softstudies.com/free-book-solutions-strength-of-materials-by-dr-r-k-bansal.html' style='color:white; background-color:#84760A;'>Strength of Materials by R K Bansal</a>
<a class='dropdown-item' href='https://civilengineering-softstudies.com/book-solutions-of-mechanics-of-materials-by-r-c-hibbeler.html' style='color:white; background-color:red;'>Mechanics of Materials by R C Hibbeler</a>
</div> </div>
<div class='navbar-brand nav-item dropdown'>
<a class='nav-link dropdown-toggle' data-toggle='dropdown' href='#' id='navbardrop'>
<span style='color:blue; background-color:yellow; height:30px; padding:5px;'>Laboratory Tests</span>
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='https://civilengineeringmaterials2012.blogspot.com/2013/09/vicats-apparatus-consistency-and.html#' style='color:white; background-color:green;'>Vicat's Aparatus - Consistency Test of Cement</a>
<a class='dropdown-item' href='https://civilengineeringmaterials2012.blogspot.com/2013/11/compaction-factor-test-for-concrete.html' style='color:white; background-color:red;'>Compaction Factor Test for Concrete</a>
<a class='dropdown-item' href='https://civilengineeringmaterials2012.blogspot.com/2013/11/concrete-slump-test.html' style='color:white; background-color:green;'>Concrete Slump Test</a>
</div>
</div>
</nav>