Create Icon Table On Blogger - UNPLUG.DOC

Hello dear friends! In this blog post, I am going to tell you about a useful trick that is very important to know for the Blogger platform. You would eagerly think what would it be? But now, without further ado, I'm going to tell you about that trick. As every blogger knows the importance of drawing or creating a table in the field of blogging. So this blog post will cover all the information on how to create a table in Blogger with few steps.

How to create an icon table in Blogger with a few steps?

Sometimes it is very important to create a table in Blogger that helps users to get a quick idea of ​​the data inserted into the table. The table is a well-formed structure that contains rows, columns, and cells. Grab the attention of post readers. Because with the help of a table, the reader can get information more easily than without a table publication. It also makes your blog post beautiful and the reader does not get bored reading your article.

ADD ON BLOGGER :

1. Copy the below CSS Code And Paste It Before ]]></b:skin> Into Your Theme.
2. Next Copy The HTML And Past Code Which You Want Selected Layout

HTML CODE

<nav class='main-nav-wrap'> 
<ul class='main-nav group'> 
<li class='articles'><a href='#'>Home<span>Home Page</span></a></li> 
<li class='forums'><a href='#'>Blogger<span>Blogger Tricks</span></a></li> 
<li class='snippets'><a href='#'>TEMPLATES<span>BLOGGER TEMPLATES</span></a></li> 
<li class='videos'><a href='#'>Cool Tricks<span>Tricks</span></a></li> 
<li class='almanac'><a href='#'>Guest Post<span>Write For Us</span></a></li> 
<li class='gallery'><a href='#'>Sitemap<span>List Of Posts</span></a></li> 
<li class='downloads'><a href='#'>Tools<span>Blogger Tools</span></a></li> 
<li class='deals'><a href='#'>Contact<span>Contact Admin</span></a></li> 
</ul> 
</nav>

CSS CODE

 body{background:#333;}
.main-nav{list-style:none;width:auto;margin:0px auto;z-index: 9999999999999999999;-webkit-transition:all 0.8s ease-in-out;
-moz-transition:all 0.8s ease-in-out;}
.main-nav li{float:left;width:150px;padding:15px 5px 15px 5px;position:relative;-moz-transition:background-color .4s ease;-o-transition:background-color .4s ease;-webkit-transition:background-color .4s ease;-ms-transition:background-color .4s ease;background:#434343}
.main-nav li:hover{background:rgba(0,0,0,0.4);-moz-transition:background-color .1s ease;-o-transition:background-color .1s ease;-webkit-transition:background-color .1s ease;-ms-transition:background-color .1s ease}
.main-nav a{border-top:0;display:block;position:relative;z-index:2;color:#FFF;font:bold 15px kulturista-web-1,kulturista-web-2,Serif;text-decoration:none;text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-align:center!important;padding:10px!important}
.main-nav a:before{content:"";display:block;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgACWKyEe9UCx-nub08OjIy_pS-pqEDkBFnrl4YwBZounZSidXcvV_ZnRNjXKVBRxFrWctoJxE5wHGcimsDFq3LHDTbKexHLJt-3nHhIJb07H5XZ09iuia307lmqqXFq7nq2f4Z40VsA/s1600/nav-sprite.png) top center no-repeat}
.ie8 .main-nav a{padding:10px!important}
.main-nav span{text-align:center;font-size:9px;white-space:nowrap;display:block}
.main-nav .forums a:before{background-position:center -40px}
.main-nav .snippets a:before{background-position:center -80px}
.main-nav .almanac a:before{background-position:center -160px}
.main-nav .videos a:before{background-position:center -280px}
.main-nav .gallery a:before{background-position:center -200px}
.main-nav .downloads a:before{background-position:center -240px}
.main-nav .deals a:before{background-position:center -120px}
.home .main-nav .articles a,.single-post .main-nav .articles a,.Vanilla .main-nav .forums a,.page-template-page-snippet-cat-php .main-nav .snippets a,.page-template-page-snippet-php .main-nav .snippets a,.page-template-video-archive-php .main-nav .videos a,.page-template-video-single-php .main-nav .videos a,.page-template-page-almanac-group-php .main-nav .almanac a,.page-template-page-almanac-single-php .main-nav .almanac a,.post-type-archive-screenshot .main-nav .gallery a,.single-screenshot .main-nav .gallery a,.page-template-page-downloads-php .main-nav .downloads a,.page-template-page-deals-php .main-nav .deals a{color:#000}
.main-nav li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.page-template-video-archive-php .main-nav .videos,.page-template-video-single-php .main-nav .videos,.main-nav .videos:hover{background:#01b0ec}
.page-template-video-archive-php .main-nav .videos:before,.page-template-video-single-php .main-nav .videos:before{background:#0484b0}
.home .main-nav .articles,.single-post .main-nav .articles,.main-nav .articles:hover{background:#ef7901}
.home .main-nav .articles:before,.single-post .main-nav .articles:before{background:#cf7000}
.Vanilla .main-nav .forums,.main-nav .forums:hover{background:#d54421}
.Vanilla .main-nav .forums:before{background:#bb2904}
.page-template-page-snippet-cat-php .main-nav .snippets,.page-template-page-snippet-php .main-nav .snippets,.main-nav .snippets:hover{background:#98bf0d}
.page-template-page-snippet-cat-php .main-nav .snippets:before,.page-template-page-snippet-php .main-nav .snippets:before{background:#87a812}
.page-template-page-almanac-group-php .main-nav .almanac,.page-template-page-almanac-single-php .main-nav .almanac,.main-nav .almanac:hover{background:#7449f1}
.page-template-page-almanac-group-php .main-nav .almanac:before,.page-template-page-almanac-single-php .main-nav .almanac:before{background:#5531bf}
.post-type-archive-screenshot .main-nav .gallery,.single-screenshot .main-nav .gallery,.main-nav .gallery:hover{background:#b147a3}
.post-type-archive-screenshot .main-nav .gallery:before,.single-screenshot .main-nav .gallery:before{background:#922a84}
.page-template-page-downloads-php .main-nav .downloads,.main-nav .downloads:hover{background:#f6b402}
.page-template-page-downloads-php .main-nav .downloads:before{background:#d49b00}
.page-template-page-deals-php .main-nav .deals,.main-nav .deals:hover{background:#8d8d8d}
.page-template-page-deals-php .main-nav .deals:before{background:#5e5e5e}
.home .main-nav .articles{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1}
.home .main-nav .forums{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1}
.home .main-nav .snippets{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1}
.home .main-nav .videos{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1}
.home .main-nav .almanac{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1}
.home .main-nav .gallery{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1}
.home .main-nav .downloads{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1}
.home .main-nav .deals{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}
.main-nav li:nth-child(n+7){border-bottom:0}
.main-nav-wrap{margin:-21px 0 0 -21px}
.ie8 .main-nav-wrap{margin:0}
.main-nav li a,.main-nav li a:hover{color:#fff;text-decoration:none}
.ie8 .main-nav a:before,.ie8 .main-nav li:before{display:none}

This Blogger Website Is Provide You Blogger Template Documentation And Widget And Theme Editting Documentation So Subscribe And Follow For Up To Date With New Post