Σε 2 προηγούμενες αναρτήσεις (Πώς θα βάλω εξώφυλλο σε μια Σελίδα blogspot στον Blogger; και Πώς θα βάλω εξώφυλλο σε μια Σελίδα blogspot στον Blogger; (Part 2)) είδαμε τον τρόπο με τον οποίο μπορούμε να φτιάξουμε ένα εξώφυλλο για το Blog μας ή διαφορετικά μια Στατική Αρχική Σελίδα που θα λειτουργεί ως σπίτι για όλο το περιεχόμενό σας.
Σ' αυτήν την ανάρτηση θα δούμε ένα άλλο ωραίο περιτύλιγμα βασισμένο στη Σελίδα http://tympanus.net. Το χρησιμοποίησα κι εγώ για λίγες μέρες στη δική μου Σελίδα.
DEMO
Πρόκειται για πάντρεμα του εξώφυλλου μαζί με το menu στο κάτω μέρος για να μπορέσουμε να το λειτουργήσουμε.
Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη δική σας Σελίδα:
Σύνδεση στον Blogger
Πρότυπο / Επεξεργασία HTML / Συνέχεια
Βρείτε την ]]></b:skin>
Επικολλήστε μετά από αυτήν τον παρακάτω κώδικα:
<!--Static HomePage *http://www.bloggertipsandtricks.net* -->
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
.post, .post h1, .post h2, .post h3, .post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header, .sidebar, .footer, .header,.blog-pager,.topnav,.credit,#menuwrapper,#footer-wrapper,.topic,.picfooter
{display:none;}
</b:if>
</b:if>
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background:yellow;
font-weight: 400;
font-size: 15px;
color: #fff;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container > header{
padding: 30px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: right;
}
.container > header h1{
font-family: 'Bitter', Arial, sans-serif;
font-size: 30px;
line-height: 40px;
position: relative;
font-weight: 400;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
padding: 0px 0px 5px 0px;
}
.container > header h1 span{
color: #000;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.container > header h2{
font-size: 16px;
font-style: italic;
padding: 0px 0px 15px 0px;
}
/* Header Style */
.codrops-top{
font-family:'Arial Narrow', Arial, sans-serif;
line-height: 24px;
font-size: 11px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.codrops-top a:hover{
color: #fff;
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: none;
display: inline;
}
p.codrops-demos{
text-align:center;
display: block;
line-height: 30px;
padding: 20px 0px;
position: absolute;
top: 15px;
left: 20px;
}
p.codrops-demos a{
display: inline-block;
width: 60px;
height: 60px;
background: #000;
margin: 0px 4px;
color: #fff;
line-height: 60px;
font-style: italic;
font-weight: bold;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 50%;
font-size: 13px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
p.codrops-demos a:hover{
background: #444;
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
background: #950158;
}
/* Media Queries */
@media screen and (max-width: 767px) {
.container > header{
text-align: center;
}
p.codrops-demos {
position: relative;
top: auto;
left: auto;
}
}
.se-container{
display: block;
width: 100%;
overflow: hidden;
padding-top: 150px;
}
.se-slope{
margin: 0 -50px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.se-slope:nth-child(odd){
background: #000;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
margin-top: -200px;
box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
background: yellow;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}
.se-content{
margin: 0 auto;
}
.se-content h3{
font-size: 60px;
position: relative;
display: inline-block;
padding: 10px 30px 8px 30px;
height: 80px;
background: #000;
line-height: 80px;
margin-bottom: 20px;
font-family: 'Bitter', 'Trebuchet MS', Arial;
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-content h3:before{
content: '';
width: 0;
height: 0;
border-top: 38px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid black;
position: absolute;
left: -59px;
top: 0px;
}
.se-content h3:after{
content: '';
width: 0;
height: 0;
border-top: 38px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid black;
position: absolute;
right: -59px;
top: 0px;
}
.se-slope:nth-child(odd) .se-content h3:before,
.se-slope:nth-child(odd) .se-content h3:after{
border-right-color: yellow;
border-left-color: yellow;
}
.se-content p{
width: 75%;
max-width: 500px;
margin: 0 auto;
font-style: italic;
font-size: 18px;
line-height: 24px;
padding-top: 10px;
}
.se-content p:first-letter{
font-size: 40px;
font-family: 'Adobe Garamond Pro', Garamond, Palatino, 'Palatino Linotype', Times, 'Times New Roman', Georgia, serif;
}
.se-slope:nth-child(odd) .se-content{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
color: #999;
padding: 130px 100px 250px 100px;
}
.se-slope:nth-child(even) .se-content{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
color: #000;
padding: 150px 100px 250px 100px;
}
.se-slope:nth-child(odd) .se-content h3{
background: yellow;
color: #000;
}
.se-slope:nth-child(even) .se-content h3{
background: #000;
color: yellow;
}
/* Media Queries */
@media screen and (max-width: 1010px){
.se-content h3{
font-size: 40px;
}
}
@media screen and (max-width: 767px) {
.se-content h3{
font-size: 20px;
}
}
@media screen and (max-width: 400px) {
.se-content h3{
font-size: 20px;
line-height: 20px;
padding-top: 30px;
height: 60px;
}
.se-content p{
width: 95%;
}
.se-slope:nth-child(odd) .se-content,
.se-slope:nth-child(even) .se-content{
padding-left:60px;
padding-right:60px;
}
}
</style>
<style>
#menu11 ul {
list-style:none;
font-family:'Gill Sans','Gill Sans MT';
text-transform:uppercase;
font-size: 28px;
line-height: 1.2em;
float:right;
clear:both;
margin:20px;
}
#menu11 ul li{
float:left;
}
#menu11 ul li a{
display:block;
text-decoration:none;
padding:0px 10px 0px 10px;
width:155px;
height:55px;
border-left:8px dotted #000;
}
#menu11 ul li a span{
display:block;
}
#menu11 ul li a span.title{
color:#000;
}
#menu11 ul li a:hover{
border-left:8px dotted #fb0303;
}
#menu11 ul li a:hover span.title{
}
#menu11 ul li a span.text{
color:#fb0303;
font-size:12px;
letter-spacing:0px;
visibility:hidden;
border-left:16px dotted #fb0303;
line-height:0px;
padding-top:4px;
margin:10px 0px 12px 0px;
}
#menu11 ul li a:hover span.text{
visibility:visible;
}
</style>
</b:if>
<!--Static HomePage *http://www.bloggertipsandtricks.net* -->
Βρείτε τώρα την </body>
Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:
<!--Static HomePage *http://www.bloggertipsandtricks.net* -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<section class='se-container'>
<div class='se-slope'>
<article class='se-content'>
<h3>ΤΟ ΟΝΟΜΑ ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ</h3>
<p>Γράψτε ένα μικρό κείμενο σχετικά με τη Σελίδα σας</p>
</article>
</div>
<div class='se-slope'>
<article class='se-content'>
<div id='menu11'>
<ul>
<li><a href='http://YOURBLOG.blogspot.com/search/label?max-results=7'>
<span class='title'>Blog</span>
<span class='text'>Η ΠΕΡΙΓΡΑΦΗ ΣΑΣ</span>
</a>
</li>
<li><a href='#'>
<span class='title'>ΤΙΤΛΟΣ</span>
<span class='text'>Η ΠΕΡΙΓΡΑΦΗ ΣΑΣ</span>
</a>
</li>
<li><a href='#'>
<span class='title'>ΤΙΤΛΟΣ</span>
<span class='text'>Η ΠΕΡΙΓΡΑΦΗ ΣΑΣ</span>
</a>
</li>
<li><a href='#'>
<span class='title'>ΤΙΤΛΟΣ</span>
<span class='text'>Η ΠΕΡΙΓΡΑΦΗ ΣΑΣ</span>
</a>
</li>
<li><a href='#'>
<span class='title'>ΤΙΤΛΟΣ</span>
<span class='text'>Η ΠΕΡΙΓΡΑΦΗ ΣΑΣ</span>
</a>
</li>
<li><a href=''>
<span class='title'><script type='text/javascript'>
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){ minutes = "0" + minutes }
document.write(hours + ":" + minutes + " ")
if(hours > 11){ document.write( ) } else { document.write( ) }
//-->
</script>
</div></span>
<span class='text'/>
</a>
</li>
<p>περιηγηθείτε με <a href='http://www.google.gr/chrome/index.html?hl=el&brand=CHNG&utm_source=el-hpp&utm_medium=hpp&utm_campaign=el' rel='nofollow' target='_blank'>Google Chrome</a> ή <a href='http://www.mozilla.org/el/firefox/new/' rel='nofollow' target='_blank'>Firefox</a></p>
</ul>
</div>
</article>
</div>
</section>
</b:if>
<!--Static HomePage *http://www.bloggertipsandtricks.net* -->
Προσαρμόστε τα κίτρινα μαρκαρισμένα στοιχεία με τα ανάλογα της Σελίδας σας και πατήστε αποθήκευση.
Σημείωση 1: Όπως σας έχω ξαναπεί στην ανάρτηση http://www.bloggertipsandtricks.net/2012/06/blogspot-blogger.html ο κώδικας ισχύει για το δικό μου πρότυπο. Όσοι μπορείτε θα πρέπει να τον σκαλίσετε για να μπορέσετε να αποκρύψετε τα πάντα από την Αρχική Σελίδα.
Σημείωση 2: Λειτουργεί κανονικά σε Chrome και Firefox και γι' αυτό έχω βάλει και link που οδηγούν στις Σελίδες που μπορεί ο΄καθένας να κατεβάσει τα λογισμικά για τους Browser αυτούς.
LIVE DEMO
