
Live Demo Download

New Horizon 1.0 είναι ένα ελεύθερο blogger template
CSS σχεδιασμός πρότυπου by styleshout και μετατροπή για blogger έγινε από μένα
Αυτό το έργο διανέμεται υπό την Creative Commons Attribution 3.0 License , που σημαίνει ότι είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε στο κοινό το Έργο , να το τροποποιήσετε για οποιοδήποτε σκοπό.
Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .
Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.
Γενικές πληροφορίες για αυτό το πρότυπο :
- 2 στήλες
- Fixed Width
- Right Sidebar
- Υποστήριξη Διαθέσιμη
- Ενσωματωμένο Page Navigation
- Σκουρόχρωμο θέμα με μεγάλη ωραία πολύχρωμη εικόνα κεφαλίδας
Οδηγίες ρυθμίσεις
Για να ρυθμίσετε το Header Logo :
1. Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- header starts here -->
<div id='header'>
<div id='clouds'/>
<h1 id='logo-text'><a href='index.html' title=''>new horizon</a></h1>
<p id='slogan'>Free Blogger Template </p>
</div>
<div id='header'>
<div id='clouds'/>
<h1 id='logo-text'><a href='index.html' title=''>new horizon</a></h1>
<p id='slogan'>Free Blogger Template </p>
</div>
2 . Και αλλάξτε τον τίτλο και το url με τα δικά σας , όπως βλέπετε παρακάτω .
<!-- header starts here -->
<div id='header'>
<div id='clouds'/>
<h1 id='logo-text'><a href= ' Εδώ το url του blog σας ' title=''>Εδω ο Τίτλος σας</a></h1>
<p id='slogan'>Εδω το slogan σας </p>
</div>
Για να ρυθμίσετε το Top navigation μενου :
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :<!-- navigation starts here -->
<div id='nav'>
<ul>
<li id='current'><a href=' index.html '>Home</a></li>
<li><a href=' index.html '>News </a></li>
<li><a href=' index.html '>Downloads</a></li>
<li><a href=' index.html '>Support</a></li>
<li><a href=' index.html '>About</a></li>
</ul>
</div>
2 . Και αλλάξτε τ url με τα δικά σας .
Για να ρυθμίσετε το sharebox :
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<div id='sharebox'>
<p>If you liked this article why don't you share it:</p>
<!-- Stumbleupon -->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumble' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4TwCsy7MmI/AAAAAAAAAH0/LZrAk7ZfpUU/stumble.png'/></a>
<!-- Delicious -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Delicious' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S4TvgxvMurI/AAAAAAAAAHk/oxB6c6yNv34/delicious.png'/></a>
<!-- Reddit -->
<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4TvheTxWdI/AAAAAAAAAHw/aIdqxctqDTc/reddit.png'/></a>
<!-- Technorati -->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S4TxAwzsIcI/AAAAAAAAAH4/_EF9Beche1Q/technorati.png'/></a>
<!-- Twitthis -->
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' target='_blank'><img alt='Twitter' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S4TxirUBYFI/AAAAAAAAAIA/dKdgmPP5_sY/twitter.png'/></a>
<!-- Digg -->
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg it' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4TyA0p3fZI/AAAAAAAAAIE/Sx6RsK90bKE/digg.png'/></a>
<!-- Facebook -->
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' src='http://lh5.ggpht.com/_Q6tRnBVZnko/S4TvggjerjI/AAAAAAAAAHg/2z_8Rm8c2rA/facebook.png'/></a>
<!-- Google -->
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google Bookmarks' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4TvhQTB8UI/AAAAAAAAAHs/qnj8WuSpfog/google.png'/></a>
<!-- RSS -->
<a expr:href='"YOUR FEED ADDRESS"' title='Subscribe to Feeds'><img alt='Subscribe to RSS' src='http://lh5.ggpht.com/_Q6tRnBVZnko/S4TzPEn8bhI/AAAAAAAAAIM/CPcbBpxUE4w/rss.png'/></a>
</div>
2 . Αλλάξτε το FEED ADDRESS με το δικό σας , δηλαδή όπου YOUR FEED ADDRESS εισάγετε το url του δικού σας feed .
- Μπορείτε επίσης αν θέλετε να αλλάξετε το κείμενο ,αλλάζοντας το το κείμενο με το κόκκινο χρώμα :
<p>If you liked this article why don't you share it:</p>
Για να ρυθμίσετε το sidebar_social :
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :<!-- Social Network Section -->
<div id='sidebar_social'>
<ul>
<li>
<a href=' Facebook-LINK-HERE '>
<img alt='facebook' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4T9REpK0hI/AAAAAAAAAIU/I7P5s4OKNkA/Furry-Cushion-Facebook_48.png'/>
</a>
</li>
<li>
<a href=' TWITTER-LINK-HERE '>
<img alt='Twitter' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4T-yYrA4bI/AAAAAAAAAIk/eAvBcPRR8vY/Furry-Cushion-Twitter_48.png'/>
</a>
</li>
<li>
<a href=' STUMBLEUPON-LINK-HERE '>
<img alt='stuble' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4T9ReLgxCI/AAAAAAAAAIg/6WZN5KDTooM/Furry-Cushion-StumbleUpon_48.png'/>
</a>
</li>
<li>
<a href=' /feeds/posts/default ' title='RSS'><img alt='RSS' src='http://lh5.ggpht.com/_Q6tRnBVZnko/S4T9RbpTK9I/AAAAAAAAAIc/-0Tcdgika3A/Furry-Cushion-RSS_48.png'/>
</a>
</li>
<li class='last'>
<a href=' DELICIOUS-LINK-HERE '>
<img alt='delicious' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4T9Q3e2BxI/AAAAAAAAAIQ/x3DRu0zW7jw/Furry-Cushion-Delicious_48.png'/>
</a>
</li>
</ul>
</div>
<!-- /Social Network Section -->
Για να ρυθμίσετε το sidemenu :
Απλά πηγαίνετε Στοιχεία Σελίδας –> Προσθήκη gadget – > HTML/JavaScript και εισάγετε τον παρακάτω κώδικα:<ul class="sidemenu">
<li><a href="http://bloggertrics.blogspot.com/">Βloggertrics</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2 </a></li>
<li><a href="#">Link 3</a></li>
</ul>
Για να ρυθμίσετε το search form:
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :<!-- Search -->
<form action=' # ' id='searchform' method='get'>
<fieldset class='search'>
<input class='box' type='text'/>
<button class='btn' title='Submit Search'>Search</button>
</fieldset>
</form>
<!-- /Search –>
2 . Και αλλαξτε το συμβολο # με το url του blog σας
Κατεβάστε το και χαρείτε το
Αν χρειαστείτε οποιαδήποτε βοήθεια αφήστε το σχόλιο σας
Σημείωση : Επειδή το πρότυπο παρουσίαζε ένα μικρο προβληματάκι συμβατότητας με το Firefox , έχει γίνει update και είναι πλέον συμβατό και με το Firefox
Καλησπέρα
Πολύ ωραίο αυτό το Blog!! :-D
Είναι η πρώτη φορά που δοκιμάζω να κάνω blog και αντιμετωπίζω δυσκολίες. Θέλω να χρησιμοποιήσω αυτό το free template και θα ήθελα να ρωτήσω αν μπορώ να αλλάξω το backround χρώμα και να το κάνω πιο ανοιχτόχρωμο. *DONT_KNOW*
Ευαχριστώ
Καλησπέρα kamps kamps
και βεβαια μπορεις να αλλαξεις το χρωμα του backround , για να το κανεις αυτο απλα βρες στο προτυπο τον παρακατω κωδικα :
<span><span>body{ margin:0; padding:10px; font: normal 14px/1.6em verdana, tahoma, sans-serif; text-align: left; background: #090807 url(http://lh4.ggpht.com/_Q6tRnBVZnko/S38gdIfop0I/AAAAAAAAAEc/Wb_wljViXC4/bg.jpg) repeat-x; color: #8F8F8E; }</span></span>
και άλλαξε τα με οτι χρωμα και οτι εικόνα backround θελεις <span><span> </span></span>
Congats πολυ χρησιμο blog! Λοιπον κατεβασα το template αυτο για ενα blog που θελω να φτιαξω και αλλαξα την φωτο του header. Εκοψα μια φωτο σε 1000 x 450 px και αλλαξα το css ως εξης
#header {
clear: both;
position: relative;
margin: 0 auto; padding: 0;
background: url(http://i108.photobucket.com/albums/n31/angelwitch_2006/Untitled-1.jpg) left top no-repeat;
height: 420px;
text-align: left;
}
το θεμα ομως ειναι πως η φωτο δεν απλωνεται στα 1000px πλατος και 420 υψος που εχω ορισει αλλα σε λιγοτερα (το λινκ για το blog http://anouk-fans.blogspot.com/)
Τι πρεπει να αλλαξω?
Ευχαριστω!
<span>Καλησπέρα σου και Χριστός Ανέστη ! </span>
<span>Απλά δοκίμασε να αλλάξεις το : left top no-repeat; με το center top no-repeat;
Δηλαδή θα το κάνεις έτσι : background: url(http://i108.photobucket.com/albums/n31/angelwitch_2006/Untitled-1.jpg) center top no-repeat; </span>
Χρονια πολλα! Ευχαριστω για την αμεση απαντηση! Παρολα αυτα το ειχα δοκιμασει αυτο αλλα και παλι εχω το ιδιο προβλημα. Γι αυτο το λογο εχω αφησει το λινκ μηπως ειναι ευκολο να δεις τον πηγαιο αν και δεν εχω αλλαξει πολλα πραγματα. Ειλικρινα δε μπορω να καταλαβω τι φταιει :(
Καλησπερα angelwitch
To ειδα το blog σου , το προβλημα ηταν το μεγεθος της φωτογραφιας που ηταν 800χ360px .
Ετσι αλλαξα τις διαστασεις τις φωτογραφιας και χρησιμοποιησε αυτην .
Τωρα αυτο που πρεπει να κανεις ειναι το εξης :
1. Αντικαταστησε τον κωδικα του header σου με τον παρακατω κωδικα :
/* header */
#header {
clear: both;
position: relative;
width:100%;
margin: 0 auto; padding: 0;
background: url(http://i41.tinypic.com/fd4qdk.jpg) center top no-repeat;
height: 420px;
text-align: left;
}
#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bold 38px 'Trebuchet MS', Tahoma, Arial, Sans-serif;
letter-spacing: -3px;
color: #0a1e53;
text-decoration: none;
z-index: 9998;
background: transparent;
/* change the values of top and left to adjust the position of the logo*/
top: 33px; right: 80px;
}
#header p#slogan {
position: absolute;
font: normal 19px 'Trebuchet Ms', Sans-serif;
text-transform: none;
color: #FF8C08;
margin: 0; padding: 0;
z-index: 9999;
/* change the values of left and top to adjust the position of the slogan */
bottom: 95px; left: 65px;
}
<p>2. Ανεβασε τον παρακατω κωδικα και κολλησε τον κατω απο το </p><body>
<p>
</p><p>
</p><p>
</p><p></p><div>
<p></p><ul>
<p></p><li>News</li>
<p></p><li>Biography</li>
<p></p><li>Discography</li>
<p></p><li>Photos</li>
<p></p><li>Videos</li>
<p></p><li>Lyrics</li>
<p></p></ul>
<p></p></div>
<p>
</p><p>
</p><p><span> </span></p><div><span> </span>
<p><span> </span>
</p><p><span> </span></p><h1>Anouk Greek Fans</h1>
<p></p><p>Greek blog dedicated to Anouk</p><span> </span>
<p><span> </span></p></div>
<p>
</p><p>
</p></body>