Bread Crumb Navigation Menu Guardian Style

Saturday, 30 November 2013

Bread Crumb Navigation Menu Guardian Style

---------------------------------------------------------------------------------

CODE BELOW
------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Breadcrumb Navigation Menu Guardian Style</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style>
#breadcrumbs {
padding: 0;
margin: 0;
height: 30px;
font: normal 16px/30px georgia;
list-style-type:none;
background: #EDEDED;
color: #005689;
}
#breadcrumbs li {
float: left;
}
#breadcrumbs a {
float: left;
position:relative;
padding: 0 20px 0 10px;
color: #FFFFFF;
text-decoration: none;
outline: none;
background: #d61d00;
}
#breadcrumbs a.odd {
background: #801100;
}
#breadcrumbs span {
position: absolute;
display: block;
line-height: 0px;
height: 0px;
width: 0px;
right: 0px;
top: 0px;
border-left: 10px solid #d61d00;
border-right: none;
border-top: 15px solid #801100;
border-bottom: 15px solid #801100;
}
#breadcrumbs a.odd span {
border-left: 10px solid #801100;
border-top: 15px solid #d61d00;
border-bottom: 15px solid #d61d00;
}
#breadcrumbs a span.last {
border-left: 10px solid #d61d00;
border-top: 15px solid #EDEDED;
border-bottom: 15px solid #EDEDED;
}
#breadcrumbs a.odd span.last {
border-left: 10px solid #801100;
border-top: 15px solid #EDEDED;
border-bottom: 15px solid #EDEDED;
}
/* classes for jquery hover */
#breadcrumbs a.hover {
text-decoration: none;
background: #000000;
}
#breadcrumbs a span.hover {
border-left: 10px solid #000000;
}
#breadcrumbs a.odd span.hover {
border-left: 10px solid #000000;
}
#breadcrumbs a span.pre_hover {
border-top: 15px solid #000000;
border-bottom: 15px solid #000000;
}

</style>
</head>
<body>
<ol id="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#" class="odd">World news</a></li>
<li><a href="#">America</a></li>
<li><a href="#" class="odd">Economics</a></li>
<li><a href="#">Home</a></li>
<li><a href="#" class="odd">World news</a></li>
<li><a href="#">America</a></li>
<li><a href="#" class="odd">Economics</a></li>
<li><a href="#">Home</a></li>
<li><a href="#" class="odd">World news</a></li>
<li><a href="#">America</a></li>
<li><a href="#" class="odd">Economics</a></li>
<li><a href="#">Home</a></li>
<li><a href="#" class="odd">World news</a></li>
<li><a href="#">America</a></li>
<li><a href="#" class="odd">Economics</a></li>
</ol>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SPAN MENUE</title>
<style>
.breadcrumbs {
list-style:none;
margin:0;
}
.breadcrumbs a:last-child {
border-right-width:1px !important;
border-right-width:1px;
border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
}
.breadcrumbs a {
color:#666;
display:block;
float:left;
font-size:12px;
padding:7px 16px 7px 19px;
position:relative;
text-decoration:none;
border:1px solid #D9D9D9;
border-right-width:0px;
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.45,#F1F1F1),color-stop(0.73,whiteSmoke));
background-image:-moz-linear-gradient( center bottom,#F1F1F1 45%,whiteSmoke 73%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,endColorstr=#f5f5f5)";
background-repeat:no-repeat;
background-position:100% 0;
z-index: 1;
}
.breadcrumbs a:hover {
border-top-color:#c4c4c4;
border-bottom-color:#c4c4c4;
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.45,rgb(241,241,241)),color-stop(0.73,rgb(248,248,248)));
background-image:-moz-linear-gradient( center bottom,rgb(241,241,241) 45%,rgb(248,248,248) 73%);
/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1);
/* For Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8,endColorstr=#f1f1f1)";
color:#333;
-moz-box-shadow:0px 2px 2px #e8e8e8;
-webkit-box-shadow:0px 2px 2px #e8e8e8;
box-shadow:0px 2px 2px #e8e8e8;
}
.first,.first:hover {
z-index:30 !important;
border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}

.label-size a {
color:#46EC7D;
border:1px solid #DDA13C;
display:inline-block;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.4);
padding:4px 7px;
font-family:'Helvetica Neue',helvetica,sans-serif;
font-size:12px;
line-height:14px;
height:14px;
vertical-align:middle;
margin-bottom:6px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;

background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-s4u-pNdHfnZCw_Ogg_y2BnsxGPMf6FgCrgsjzcWKlDaKiNx3nlVJR0gQhyphenhyphenMxrjHP3asC2J_6o6Ot9P5xFci-j3ULo5O25wgePZJfswQyFJ0Cr2tFtL5le57tFiGD9NwTu-fvsTa_p5J/s1600/PinkLine.png');
background-repeat:repeat-y;
}
.label-size a:before {
content:'\2022';
color:#FFFFFF;
margin-right:4px;
font-size:15px;
line-height:13px;
height:13px;
vertical-align:text-top;
text-shadow:0 -1px -1px rgba(0,0,0,0.2);
}
.label-size a:hover {
text-decoration:none;
background: Blue;
}
</style>
</head>
<body>
<ul class="breadcrumbs">
<li><a href="#1">CSS</a></li>
<li><a href="#2" class="current">CSS Menus</a></li>
<li><a href="#3">Menu</a></li>
<li><a href="#4">Single Level</a></li>
<li class="lastItem"><a href="#5">CSS Menu</a></li>
</ul>
<div style='clear:both'></div>
<div class='widget-content cloud-label-widget-content'>

<a dir='ltr' href=''>Announcement</a>


<a dir='ltr' href=''>CSS</a>


<a dir='ltr' href=''>Deals</a>


<a dir='ltr' href=''>Design</a>


<a dir='ltr' href=''>Fix</a>


<a dir='ltr' href=''>Giveaway</a>


<a dir='ltr' href=''>Guest Post</a>


<a dir='ltr' href=''>Infographic</a>


<a dir='ltr' href=''>JavaScript</a>


<a dir='ltr' href=''>jQuery</a>


<a dir='ltr' href=''>Lightbox</a>


<a dir='ltr' href=''>Mootools</a>


<a dir='ltr' href=''>News</a>


<a dir='ltr' href=''>Plugin</a>


<a dir='ltr' href=''>Prototype</a>


<a dir='ltr' href=''>Quick Tip</a>


<a dir='ltr' href=''>Resources</a>


<a dir='ltr' href=''>SEO</a>


<a dir='ltr' href=''>Slider</a>


<a dir='ltr' href=''>Template</a>


<a dir='ltr' href=''>Tips</a>


<a dir='ltr' href=''>Widgets</a>


<a dir='ltr' href=''>YUI</a>


<a dir='ltr' href=''>Zepto</a>


<a dir='ltr' href=''>Zoom</a>

</div>
</body>
</html>

--------------------------------------------------------------------------------------------------
OR USE BELOW CODE
---------------------------------------------------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SPAN MENUE</title>
<style>
.breadcrumbs {
list-style: none;
margin: 0;
}
.breadcrumbs a {
padding: 10px 22px 10px 30px;
float: left;
text-decoration: none;
color: #444;
position: relative;
z-index: 1;
float: left;
margin: 0px -16px 0px 0px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-moz-border-radius: 0px 100px 100px 0px;
-webkit-border-radius: 0px 100px 100px 0px;
border-radius: 0px 100px 100px 0px;
}
.breadcrumbs a:nth-child(odd) {
border: 1px solid #BFC0B0 ;
box-shadow: 4px 0px 6px 0px #999A8A;
background-image: -ms-linear-gradient(top left, #BFC0B0 0%, #CECFC1 100%);
background-image: -moz-linear-gradient(top left, #BFC0B0 0%, #CECFC1 100%);
background-image: -o-linear-gradient(top left, #BFC0B0 0%, #CECFC1 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #BFC0B0), color-stop(1, #CECFC1));
background-image: -webkit-linear-gradient(top left, #BFC0B0 0%, #CECFC1 100%);
background-image: linear-gradient(to bottom right, #BFC0B0 0%, #CECFC1 100%);
}
.breadcrumbs a:nth-child(even){
color:white;
border: 1px solid #999A8A ;
box-shadow: 4px 0px 6px 0px #BFC0B0;
background-image: -ms-linear-gradient(top left, #999A8A 0%, #A5A895 100%);
background-image: -moz-linear-gradient(top left, #999A8A 0%, #A5A895 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #999A8A), color-stop(1, #A5A895));
background-image: -webkit-linear-gradient(top left, #999A8A 0%, #A5A895 100%);
background-image: linear-gradient(to bottom right, #999A8A 0%, #A5A895 100%);}
.breadcrumbs a:nth-child(even):hover {
color: #333;
}
.breadcrumbs a:nth-child(odd):hover {
color: white;
}
.first , .first:hover {z-index: 30 !important; }
.breadcrumbs a:nth-child(2) {z-index: 29 !important;}
.breadcrumbs a:last-child {box-shadow: 4px 0px 6px 0px transparent !important ;}
</style>
</head>
<body>
<div class='breadcrumbs' >
<a class='first' href='' >Home</a>
<a href='' >CSS3</a>
<a href='' >Widgets</a>
</div>
</body>
</html>

---------------------------------------------------------------------------------------
OR USE THIS CODE
----------------------------------------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SPAN MENUE</title>
<style>
.breadcrumbs:after {
clear:both;
}
.breadcrumbs {
line-height:40px;
height:40px;
background-color:#FFF;
background-image:-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#EEE));
background-image:-webkit-linear-gradient(top,#FFF,#EEE);
background-image:-moz-linear-gradient(top,#FFF,#EEE);
background-image:-ms-linear-gradient(top,#FFF,#EEE);
background-image:-o-linear-gradient(top,#FFF,#EEE);
background-image:linear-gradient(to bottom,#FFF,#EEE);
-moz-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border:1px #CCC solid;
-webkit-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.1);
-ms-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.1);
-o-box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.1);
box-shadow:inset 0 -1px 1px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.1);
letter-spacing:2px;
}
.breadcrumbs a {
color:#999;
display:block;
float:left;
font-size:12px;
padding:0 40px 0 20px;
position:relative;
text-decoration:none;
height:40px;
overflow:hidden;
}
.breadcrumbs a:after {
content:'';
position:absolute;
right:8px;
top:-1px;
height:40px;
width:40px;
border-right:3px rgba(0,0,0,0.1) solid;
border-bottom:3px rgba(0,0,0,0.1) solid;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.breadcrumbs a:before {
content:'';
position:absolute;
right:11px;
top:0;
height:40px;
width:40px;
border-right:1px rgba(0,0,0,0.2) solid;
border-bottom:1px rgba(0,0,0,0.2) solid;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.breadcrumbs a:last-child {
color:#333;
}
.breadcrumbs a:last-child span:before,.breadcrumbs a:last-child span:after {
display:none;
}
.breadcrumbs a:hover {
text-decoration:none !important;
}
.breadcrumbs span:hover {
color:#666;
}
.breadcrumbs>a:hover:after {
border-color:rgba(0,0,0,0.2);
}
.breadcrumbs>a:hover:before {
border-color:rgba(0,0,0,0.3);
}
.breadcrumbs span {
margin-top:1px;
color: #999;
}
</style>
</head>
<body>
<div class='breadcrumbs' >
<a class='first' href='' >A</a>
<a href='' >B</a>
<a href='' >C</a>
</div>
</body>
</html>

--------------------------------------------------------------------------------------
OR USE THIS CODE
------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Bread Crumbs</title>
<style type='text/css'>
body {
margin-top:25px;
}
#results1 {
margin-left:350px;
}
#breadcrumbNav1 {
margin-top:0px;
margin-left:143px;
}
#arrowBar1 {
display:inline-block;
width:557px;
height:52px;
overflow:hidden;
}
#borderTop1 {
display:block;
position:relative;
width:530px;
height:1px;
background-color:#000000;
z-index:100;
}
#borderBottom1 {
display:block;
position:relative;
width:531px;
height:1px;
background-color:#000000;
z-index:100;
top:-152px;
}
.AB1rotate {
position:relative;
display:inline-block;
top:-76px;
width:200px;
height:200px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.AB1rotateReset {
display:inline-block;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
a {
color:white;
}
.color0arrowTail {
z-index:60;
background-color:white;
border:1px solid black;
margin-left:-217px;
}
.color1 {
z-index:50;
background-color:DodgerBlue;
border:1px solid black;
margin-left:-100px;
}
.color2 {
z-index:40;
background-color:purple;
border:1px solid black;
margin-left:-100px;
}
.color3 {
z-index:30;
background-color:DarkGreen;
border:1px solid black;
margin-left:-100px;
}
.color4 {
z-index:20;
background-color:brown;
border:1px solid black;
margin-left:-100px;
}
.color5 {
z-index:10;
background-color:orange;
border:1px solid black;
margin-left:-100px;
}
.AB1text1 {
position:absolute;
top:120px;
left:72px;
}
.AB1text2 {
position:absolute;
top:120px;
left:57px;
}
.AB1text3 {
position:absolute;
top:120px;
left:72px;
}
.AB1text4 {
position:absolute;
top:119px;
left:60px;
}
.AB1text5 {
position:absolute;
top:119px;
left:70px;
}
#arrowBar1 a .AB1rotate:hover {
background-color:lime;
color:black;
}
#results2 {
margin-left:350px;
}
#breadcrumbNav2 {
margin-top:0px;
margin-left:45px;
}
#arrowBar2 {
display:inline-block;
overflow:hidden;
width:732px;
height:50px;
border:1px solid #000000;
}
.color0 {
z-index:60;
background-color:grey;
border:1px solid black;
margin-left:-120px;
}
.color6 {
background-color:teal;
margin-left: -100px;
}
.AB2rotate {
position:relative;
display:inline-block;
top:-75px;
width:200px;
height:200px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.AB2rotateReset {
display:inline-block;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.AB2text0 {
position:absolute;
top:119px;
left:60px;
}
.AB2text1 {
position:absolute;
top:119px;
left:70px;
}
.AB2text2 {
position:absolute;
top:119px;
left:58px;
}
.AB2text3 {
position:absolute;
top:119px;
left:57px;
}
.AB2text4 {
position:absolute;
top:119px;
left:60px;
}
.AB2text5 {
position:absolute;
top:119px;
left:80px;
}
.AB2text6 {
position:absolute;
top:119px;
left:70px;
}
#arrowBar2 a .AB2rotate:hover {
background-color:#ffff00;
color: black;
}
</style>
</head>
<body>

CSS3 Example 1
Happy Breadcrumb Arrow NavBar's Demo!
<div id="results1">Clicked = </div> 

<div id="breadcrumbNav1">
<div id="arrowBar1">

 
<a href="#Happy">
Happy</a>
<a href="#Breadcrumb"> Breadcrumb</a>
<a href="#Arrow">


Arrow
</a>
<a href="#NavBAR's">


NavBAR's
</a>
<a href="#Demo!">


Demo!
</a>

</div></div>
 

CSS3 Example 2
Wonderful CSS3 Accessibility Breadcrumb NavBAR's For You!
<div id="results2">Clicked = </div> 

<div id="breadcrumbNav2">
<div id="arrowBar2">
<a href="#Wonderful">


Wonderful
</a>
<a href="#CSS3">


CSS3
</a>
<a href="#Accessibility">


Accessibility
</a>
<a href="#Breadcrumb">


Breadcrumb
</a>
<a href="#NavBAR's">


NavBAR's
</a>
<a href="#For">


For
</a>
<a href="#You!">


You!
</a>
</div>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------------------
OR USE THIS CODE
--------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Bread Crumbs</title>
<style type='text/css'>
body {
background-color:black;
margin-top:25px;
}
a {
color:white;
}
.color0arrowTail {
z-index:60;
background-color:white;
border:1px solid black;
margin-left:-217px;
}
.color0 {
z-index:60;
background-color:grey;
border:1px solid black;
margin-left:-120px;
}
.color1 {
z-index:50;
background-color:DodgerBlue;
border:1px solid black;
margin-left:-100px;
}
.color2 {
z-index:40;
background-color:purple;
border:1px solid black;
margin-left:-100px;
}
.color3 {
z-index:30;
background-color:DarkGreen;
border:1px solid black;
margin-left:-100px;
}
.color4 {
z-index:20;
background-color:brown;
border:1px solid black;
margin-left:-100px;
}
.color5 {
z-index:10;
background-color:orange;
border:1px solid black;
margin-left:-100px;
}
.color6 {
background-color:teal;
margin-left: -100px;
}
#results2 {
margin-left:350px;
}
#breadcrumbNav2 {
margin-top:0px;
margin-left:45px;
}
#arrowBar2 {
display:inline-block;
overflow:hidden;
width:732px;
height:50px;
border:1px solid #000000;
}
.AB2rotate {
position:relative;
display:inline-block;
top:-75px;
width:200px;
height:200px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.AB2rotateReset {
display:inline-block;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.AB2text0 {
position:absolute;
top:119px;
left:75px;
}
.AB2text1 {
position:absolute;
top:119px;
left:75px;
}
.AB2text2 {
position:absolute;
top:119px;
left:75px;
}
.AB2text3 {
position:absolute;
top:119px;
left:75px;
}
.AB2text4 {
position:absolute;
top:119px;
left:75px;
}
.AB2text5 {
position:absolute;
top:119px;
left:75px;
}
.AB2text6 {
position:absolute;
top:119px;
left:75px;
}
#arrowBar2 a .AB2rotate:hover {
background-color:#ffff00;
color: black;
}
</style>
</head>
<body>


<div id="breadcrumbNav2">
<div id="arrowBar2">
<a href="#Wonderful">


A
</a>
<a href="#CSS3">


B
</a>
<a href="#Accessibility">


C
</a>
<a href="#Breadcrumb">


D
</a>
<a href="#NavBAR's">


E
</a>
<a href="#For">


F
</a>
<a href="#You!">


G
</a>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
CSS LABEL LIKE LEAF EFFECT
http://b4booking.pk/blog/read/cabal-meaning-in-urdu-and-english-its-pronounciation/dictionary
----------------------------------------------------------------------------------------------------------------
<style>
.blog-categories{
text-align:center;
margin-bottom:15px;
}
.blog-categories a{
text-decoration:none;
color:white;
border:2px solid white;
padding:5px 12px;
background:#808080;
font-size:1.2em;
margin:4px 0px;
display:inline-block;
transition:0.35s;
}
.blog-categories a:hover{
text-decoration:none;
background:#f7efc7;
border-radius:15px 0;
color:black;
box-shadow:0 0 10px #ff6a00;
border-color:black;
transform:scale(1.2,1.2);
}
</style>
<div class="blog-categories">
<a href="/" style="background:#099a1c; display:block; width:230px; margin:5px auto;">B4Booking Website</a>
<a href="/Blog" style="background:#ff6a00; display:block; width:230px; margin:5px auto;">B4Booking Blog</a>
<a href="/blog/category/islam">Islam</a>
<a href="/blog/category/news">News</a>
<a href="/blog/category/telecom">Telecom</a>
<a href="/blog/category/gadgets">Gadgets</a>
<a href="/blog/category/Technology">Technology</a>
<a href="/blog/category/sports-news">Sports</a>
<a href="/blog/category/business-news">Business</a>
<a href="/blog/category/international-news">International </a>
<a href="/blog/category/health-news">Health </a>
<a href="/blog/category/facts">Facts</a>
<a href="/blog/category/woman">Women </a>
<a href="/blog/category/hd-wallpaper">Wallpapers</a>
<a href="/blog/category/jobs">Jobs</a>
<a href="/blog/category/poetry">Poetry</a>
<a href="/blog/category/sms">SMS</a>
<a href="/blog/category/weather">Bayyan</a>
<a href="/blog/category/startups">Startups</a>
<a href="/blog/category/science">Science</a>
<a href="/blog/category/funny">Funny</a>
<a href="/blog/category/children">Children</a>
<a href="/blog/category/education">Education</a>
<a href="/blog/category/novels">Novel</a>
<a href="/blog/category/heros">Heros</a>
<a href="/blog/category/quotes">Quotes</a>
<a href="/blog/category/dictionary">Dictionary</a>
<a href="/blog/category/recipes">Recipes</a>
<a href="/blog/category/apps">Apps</a>
<a href="/blog/category/naats">Naats</a>
<a href="/blog/category/column">Column</a>
<a href="/blog/category/channels">Channels</a>
<a href="/blog/category/quran">Al Quran</a>
<a href="/blog/category/songs">Naghmay</a>
<a href="/blog/category/stories">Stories</a>
<a href="/blog/category/history">History</a>
<a href="/blog/category/cars">Cars</a>
<a href="/blog/category/web-development">Web </a>
<a href="/blog/category/top-list">Top 10</a>
<a href="/blog/category/hadees">Hadees</a>
</div>
-----------------------------------------------------------------------------------------------------------------