Grid Tabbed Menu Widget For Blogger

December 11, 2020 February 05, 2021

Grid style Menu for Blogger.

Grid Tabbed Menu Widget For Blogger

Hello Guys,In This Post I'll Show you How to add Grid Style tab Menu in Blogger.So,If you want to know how to add this widget and Get Cde then keep reading This Post.

Demo Telegram Group Telegram Channel

Table Of Content

Steps to add this widget
1. Method 1
2. Method 2
Video Tutorial
Conclusion

Steps to add this widget in your blogger's blog

I will tell you two method two add this widget one is "In a static page" and second is Homepage.

Method 1(Add in page)

If you want this to add this widget in a static page or post then,Simply Login to you blogger dashboard and create a new page or post then goto Html Mode and Paste the code which is given below and publish it.

<link href='https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css' rel='stylesheet'/>
<style>
.brand_wrapper{margin:30px auto;width:100%;padding:0;overflow:hidden;clear:both}
.brand_wrapper ul{position:relative;overflow:hidden;margin:0 -10px;padding:0}
.brand_wrapper li{width:16.666%;position:relative;overflow:hidden;float:left;display:block;box-sizing:border-box;margin:0;padding:0 2px}
.post-menu{text-align:center;margin:10px 0;padding:15px;-webkit-box-shadow:0 11px 10px -7px rgb(228,230,233);-moz-box-shadow:0 11px 10px -7px rgb(228,230,233);box-shadow:0 11px 10px -7px rgb(228,230,233);border-radius:5px;background:#ffffff;overflow:hidden}
.post-menu i{font-size:30px;padding:5px;vertical-align:middle}
.post-menu i{font-size:auto;padding:5px;vertical-align:middle}
a.menu-link{color:blue}
.titlemenu{line-height:1.5;padding:0;color:red;font-weight:bold;}
.dark-mode .post-menu{background:black;} 
.dark-mode a.menu-link{color:lightgreen;} 
.dark-mode .titlemenu{color:lightblue;} 
  
@media screen and (max-width:360px){
.brand_wrapper li {
width: 33%;
}

  
@media screen and (max-width:480px){
.brand_wrapper li {
width: 25%;
}

</style>

<div class='clr'></div>
<center>
<div class='brand_wrapper'>
<ul>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-neos'></i><div class='titlemenu'>News</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-heart-rate'></i><div class='titlemenu'>Healt</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-buffer'></i><div class='titlemenu'>Feature</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='far fa-blog'></i><div class='titlemenu'>Blog</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-credit-card-blank'></i><div class='titlemenu'>Template</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-hips'></i><div class='titlemenu'>Hips</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-eraser'></i><div class='titlemenu'>Trick</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-shopping-cart'></i><div class='titlemenu'>Shop</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-buromobelexperte'></i><div class='titlemenu'>Indeks</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-camera-retro'></i><div class='titlemenu'>Photo</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-play'></i><div class='titlemenu'>Videos</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-accusoft'></i><div class='titlemenu'>Theme</div></a>
</div>
</li>
</ul>
</div></center>
<div class='clr'></div>

Method 2(Add in Mainpage)

To add this widget in Homepage,At first you need to copy below code and paste below <head>

Click Me To See Code!!

<link href='https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css' rel='stylesheet'/>

After That copy the below code and paste it above]]></b:skin>

Click Me To See Code!!

.brand_wrapper{margin:30px auto;width:100%;padding:0;overflow:hidden;clear:both}
.brand_wrapper ul{position:relative;overflow:hidden;margin:0 -10px;padding:0}
.brand_wrapper li{width:16.666%;position:relative;overflow:hidden;float:left;display:block;box-sizing:border-box;margin:0;padding:0 2px}
.post-menu{text-align:center;margin:10px 0;padding:15px;-webkit-box-shadow:0 11px 10px -7px rgb(228,230,233);-moz-box-shadow:0 11px 10px -7px rgb(228,230,233);box-shadow:0 11px 10px -7px rgb(228,230,233);border-radius:5px;background:#ffffff;overflow:hidden}
.post-menu i{font-size:30px;padding:5px;vertical-align:middle}
.post-menu i{font-size:auto;padding:5px;vertical-align:middle}
a.menu-link{color:blue}
.titlemenu{line-height:1.5;padding:0;color:red;font-weight:bold;}
.dark-mode .post-menu{background:black;} 
.dark-mode a.menu-link{color:lightgreen;} 
.dark-mode .titlemenu{color:lightblue;} 
  
@media screen and (max-width:360px){
.brand_wrapper li {
width: 33%;
}

  
@media screen and (max-width:480px){
.brand_wrapper li {
width: 25%;
}

After That copy the below code and paste it above</header>

Click Me To See Code!!

<div class='clr'></div>

<div class='brand_wrapper'>
<ul>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-neos'></i><div class='titlemenu'>News</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-heart-rate'></i><div class='titlemenu'>Healt</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-buffer'></i><div class='titlemenu'>Feature</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='far fa-blog'></i><div class='titlemenu'>Blog</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-credit-card-blank'></i><div class='titlemenu'>Template</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-hips'></i><div class='titlemenu'>Hips</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-eraser'></i><div class='titlemenu'>Trick</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-shopping-cart'></i><div class='titlemenu'>Shop</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-buromobelexperte'></i><div class='titlemenu'>Indeks</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-camera-retro'></i><div class='titlemenu'>Photo</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fal fa-play'></i><div class='titlemenu'>Videos</div></a>
</div>
</li>
<li class='brand_icon'>
<div class='post-menu'>
<a class='menu-link' href='#'><i class='fab fa-accusoft'></i><div class='titlemenu'>Theme</div></a>
</div>
</li>
</ul>
</div>
<div class='clr'></div>

Video Tutorial

Comming soon

Conclusion

Hopefully you are able to add this widget,but i prefer you to custimize this code accrording to your theme color

Widget

22 comments

yasir 19 May 2022 at 10:37

healthy and informative article thank you sir

Balas
Anshul 25 June 2022 at 04:19

NEMC is one of leading organisation is India, This political consultancy’s critically deals with consultancy services such as election management and political PR agency services, we contribute in political affairs without having part of any political party.

Balas
aslkard.eu 9 August 2022 at 14:07

kacaqq
visiqq
makauqq
ratupoker
kacakiu
ilmuqq
maxxqq

Balas
information bd site 21 August 2022 at 03:12

To establish a community to spot a promoting objective for your tiny business. buy facebook ads accounts

Balas
Deker Wilan 3 September 2022 at 09:37

Nice share
Shorten url tool
useful link
Logo

Balas
12 September 2022 at 00:01

thank you for share the informative blog article for us.

Balas
13 September 2022 at 00:17

thank you for posting amazing blogs ,its helpful for us

Balas
Emu 15 September 2022 at 04:47

Thank you for share a best article for us its very helpful for us. keep sharing.
nhvita
Natural and herbal supplement
Nhvita Blog
Nhvita Dream Boat

Balas
M.UMER 24 November 2022 at 03:42

Developed with cutting-edge technology, Smadav Pro 2022 is able to scan multiple file formats and folders at once. This smart tool can recognize the type of files and intelligently pick the best action for each file, such as repair, translate, or extract. Its powerful search engine allows you to quickly grab what you are looking for.Download Smadav Pro 2022 Crack With Serial Key

Balas
Moazam Zia 4 January 2023 at 04:06

Keep hard working and keep learning... Kurulus Osman Season 4 in urdu

Balas
anhar 10 August 2023 at 12:00

شركة سيراميك و الواح بورسلان ورخام وادوات صحية وحمامات ومطابخ وارضيات وواجهات وجدران

Balas
anhar 10 August 2023 at 12:03

منتجات العناية بالشعر التالف الجاف الكيرلي في موقع امازونس السعودية

Balas
anhar 10 August 2023 at 12:04

شركة سيراميك و الواح بورسلان ورخام وادوات صحية وحمامات ومطابخ وارضيات وواجهات وجدران
https://emac.sa/

Balas
anhar 10 August 2023 at 12:04

منتجات العناية بالشعر التالف الجاف الكيرلي في موقع امازونس السعودية
https://amazonas.sa/

Balas
Robert 28 September 2023 at 11:53

Excellent work. This information was just what I was looking for. Now I'm going to add some widgets to beautify my blog. Thanks for sharing

Balas
Shreya Sharma 16 October 2023 at 02:07

Recycling in India is a growing concern, with a focus on e-waste management companies in india and plastic waste recycling, as well as battery waste management. Form for filing annual return help track progress in these areas, aiding India's journey toward a more sustainable future.

Balas
Fishingsaga 17 January 2024 at 08:54

Ready to revamp my Blogger site with the Grid Tabbed Menu Widget! It's the perfect solution for those who want a clean and organized menu structure. Grid Tabbed Menu Widget

Balas
Addictivesunayna 1 March 2024 at 04:52

Love this innovative tabbed menu widget! 💡 Makes navigation a breeze. How about incorporating color-coded tabs for even quicker access? 🎨🚀
For digital marketing company in noida Visit:- https://www.artattackk.com

Balas
Acemakers Technologies 26 April 2024 at 01:38

Acemakers Technologies is a reliable and reputed website development company in Jaipur, India offering innovative web development services to businesses. We can create any kind of website, from WordPress and HTML pages to unique online platforms and inventory management systems that include driver monitoring.

Balas
Universe Public School 26 April 2024 at 04:36

At Universe Public School, we believe in providing a holistic education that fosters academic excellence, character development, and personal growth. With a focus on innovation and individualized learning, we strive to empower students to reach their full potential and become responsible global citizens."

Balas
IndiaTime lines 2 May 2024 at 05:52

In the hustle and bustle of daily life, it's easy to overlook the importance of maintaining a healthy heart. But the foods we eat play a crucial role in keeping our cardiovascular system in top shape. Incorporating heart-healthy foods into your diet can significantly reduce the risk of heart disease and promote overall well-being. Here are 10 delicious and nutritious foods that can help improve your heart health:
India time lines

Balas