Οριζοντιο menu-μπαρα με links
Πρόκειται για μια μπάρα-menu με links-συνδέσμους που τοποθετείται συνήθως κάτω από την επικεφαλίδα της σελίδας σας.
Εγκαθιστάται σαν απλό gadget.
Ο κώδικας html του είναι:
body {
margin:0;
padding:0;
font: bold 14px Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H————————— */
#tabsH {
float:left;
width:100%;
font-size:95%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:0px 5px 0 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/ctooem437d87yvdblwpns116496/files/2013/tablefth.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(https://lh5.googleusercontent.com/-muwyDaV_THM/T8mHdxUM2DI/AAAAAAAAU04/BCkIxTvkWHo/h86/tabrightH.gif) no-repeat right top;
padding:5px 5px 6px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
<div id=”tabsH”>
<ul>
<li><a href=”http://www.bloggertips.gr/” ><span>category 1</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 2</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 3</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 4</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 5</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 6</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 7</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 8</span></a></li>
</ul>
</div>
όπου βλέπετε http://www.bloggertips.gr/ βάζετε το δικό σας link
και όπου λέει category βάζετε το όνομα που θέλετε να εμφανίζεται.
καταλαβαίνετε πως μπορείτε να προσθέσετε ή να αφαιρέσετε κατηγορίες
αν σας άρεσε κάντε ένα like στη σελίδα μας στο facebook
Copyrights: http://www.bloggertips.gr/
ΑΡΧΕΙΟ ΑΝΑΡΤΗΣΕΩΝ GADGET – Blogger Archive with Pagination
Ένα πολύ ωραίο και χρήσιμο gadget που συγκεντρώνει όλες σας τις αναρτήσεις σε μία μόνο ανάρτηση!
Δείτε πως λειτουργεί στο DEMO
Αναρτήστε με μια ανάρτηση ή στατική σελίδα τον παρακάτω κώδικα:
.post{
width:600px;
margin:50px auto 50px;
}
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:black;
text-align:left;
margin:0px auto;
}
#loadingscript {
font-weight:bold;
font-size:20px;
text-align:center;
}
#loadingscript, .itemposts {
margin:0px 0px 2px;
height:auto;
overflow:hidden;
display:block;
background-color:#FDC20E;
border:1px solid #FC9B05;
padding:10px;
}
.itemposts h6 {
margin:0px 0px 10px;
font:normal 14px/16px Impact,Arial,Sans-Serif;
text-transform:uppercase;
color:black;
padding:0px 10px;
height:24px;
line-height:24px;
background-color:#FC9B05;
position:relative;
overflow:hidden;
}
.itemposts h6 a {
color:black;
text-decoration:none;
}
.itemposts h6:after {
content:””;
width:0px;
height:0px;
border:12px solid transparent;
border-top-color:black;
border-right-color:black;
position:absolute;
top:0px;
right:0px;
}
.itemposts img {
float:left;
height:72px;
width:72px;
margin:0px 10px 5px 0px;
padding:0px;
background-color:white;
border:none;
-webkit-border-radius:44px;
-moz-border-radius:44px;
border-radius:0px;
-webkit-box-shadow:0px 0px 0px 4px #E52117;
-moz-box-shadow:0px 0px 0px 4px #E52117;
box-shadow:0px 0px 0px 4px #E52117;
}
.itemposts .iteminside {}
.itemposts .itemfoot {
clear:both;
padding:5px 10px 5px 20px;
margin:10px 0px 0px;
background-color:#222;
color:white;
font-style:italic;
position:relative;
overflow:hidden;
}
.itemposts .itemfoot:after {
content:””;
width:0px;
height:0px;
border:10px solid transparent;
border-left-color:#E52117;
border-top-color:#E52117;
position:absolute;
top:0px;
left:0px;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#4B9540;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
text-decoration:underline;
}
#itempager {
padding:30px 0px;
background-color:black;
background-image:-webkit-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-moz-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-ms-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-o-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
border:4px solid #ccc;
}
#pagination, #totalposts {
display:block;
color:white;
text-shadow:0px 1px 0px black;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
text-align:center;
background-color:#FDC20E;
padding:10px 15px;
}
#pagination {border-top:4px solid black;}
#totalposts {border-bottom:4px solid black;border-top:1px solid #FC9B05;}
#pagination span, #pagination a {
color:white;
display:inline;
margin:0 1px;
padding:3px 5px;
text-indent:0px;
background-color:#316F27;
text-decoration:none;
text-shadow:none;
}
#pagination a:hover {background-color:#666;}
#pagination span.actual {background-color:black;}
#pagination span.hidden {display:none;}
</style>
<script type=”text/javascript”>
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = “JQuery”,
loadingText = “Loading…”,
totalPostLabel = “Total Posts:”,
jumpPageLabel = “Page”,
commentsLabel = “Comments”,
rmoreText = “Read more ►”,
prevText = “Preview”,
nextText = “Next”,
siteUrl = “ΤΟ URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ”,
postsperpage = 10,
numchars = 370,
imgBlank = “http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg”;
</script><br />
<script type=”text/javascript” src=”http://yourjavascript.com/4335152193/blogger-archive-with-pagination.js”></script>
<div style=’clear: both;’></div>
Το μόνο που έχετε να αλλάξετε είναι να βάλετε τη διεύθυνση της σελίδας σας εκεί που λέει “ΤΟ URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ”
επίσης στη δεύτερη σειρά μπορείτε να αλλάξετε το πλάτος-width
αν γνωρίζετε λίγο html καταλαβαίνετε πως μπορείτε να αλλάξετε πολλά ακόμα..
Πηγή: http://www.bloggertipsandtricks.net/2013/05/blogger-archive-with-pagination.html
Copyrights: http://www.bloggertips.gr/