Blogger Tips – Tricks – Gadgets – Templates – Hacks

Οριζοντιο menu-μπαρα με links



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πρόκειται για μια μπάρα-menu με links-συνδέσμους που τοποθετείται συνήθως κάτω από την επικεφαλίδα της σελίδας σας.



Εγκαθιστάται σαν απλό gadget.

 Ο κώδικας html του είναι:


<style type=”text/css”>
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



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα πολύ ωραίο και χρήσιμο gadget που συγκεντρώνει όλες σας τις αναρτήσεις σε μία μόνο ανάρτηση!

Δείτε πως λειτουργεί στο DEMO 

Αναρτήστε με μια ανάρτηση ή στατική σελίδα τον παρακάτω κώδικα:


<style type=”text/css”>
.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/




ΑΡΧΕΙΟ ΑΝΑΡΤΗΣΕΩΝ



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Βάλτε το παρακάτω στο δικό σας blog από ΕΔΩ !