HpBk-TemplateWorld

City Blog

Design-Übersicht

» Dieses Design darfst du kostenlos für deine Homepage verwenden. Unter "Und so geht´s" (weiter unten auf dieser Seite) findest du eine kurze Anleitung, wie du dieses Design im Homepage-Baukasten einfügst. Mit einem Klick auf das Bild des Designs vergrößert du die Vorschau.

» Bitte beachte:
Die Copyright Informationen im Footer des Designs dürfen auf keinen Fall entfernt oder geändert werden, da du sonst gegen die Lizenz- und Nutzungsrechte des Designs verstößt. Der Link zu HpBk-TemplateWorld darf ebenfalls nicht verändert werden. Dieses Design ist ein kostenloses Design von www.templatemo.com.

City Blog

» Mehr, als nur ein Blog-Design!
Das Design "City Blog" bringt eine tolle Überraschung mit sich. Im Content eingebaut ist eine Bilder-Slideshow, die als echter Hingucker dient. Wie ihr die Bilder in der Slideshow austauschen könnt, erkläre ich euch weiter unten auf dieser Seite. Der dunkle Header stellt eine Stadt bei Nacht dar. Direkt unter dem Header gibt es eine obere Navigation, außerdem ist auch eine rechte Sidebar, sowie ein Footer vorhanden.

» Bewertung:

Design-Code

» Text über dem Design | Code in einem separaten Fenster öffnen.

</head>
<body>

<div id="templatemo_header">
        <div id="site_title">
            <a href="">
                <img src="images/templatemo_logo.png" alt="LOGO" />
                <span>YOUR TAGLINE GOES HERE</span>

</a>
        </div> 
    </div>

<div id="templatemo_menu">
        <ul>
            <li><a href="about.html">Home<span>Willkommen</span></a></li>

<li><a href="about.html">About Us<span>Praesent Nec</span></a></li>
            <li><a href="gallery.html">Gallery<span>Cras Eget Urna</span></a></li>
            <li><a href="contact.html">Contact Us<span>Phasellus Sodales</span></a></li>
            <li><a href="contact.html">Contact Us<span>Phasellus Sodales</span></a></li>
            <li><a href="contact.html">Contact Us<span>Phasellus Sodales</span></a></li>
            <li><a href="contact.html">Contact Us<span>Phasellus Sodales</span></a></li>
        </ul>    	
    </div> 
    
    <div id="templatemo_main">

<div id="templatemo_content">
        
        	<div id="templatemo_slider">
                <div id="featuredslideshow">
                    <ul> 
                        <li><img width="580" height="300" alt="Mauris quis eros arcu" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/01.jpg" /></li> 
                        <li><img width="580" height="300" alt="Cras porta porta turpis" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/02.jpg" /></li> 
                        <li><img width="580" height="300" alt="Nullam ac mi id massa consectetur" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/03.jpg" /></li> 
                        <li><img width="580" height="300" alt="Maecenas venenatis viverra nisi" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/04.jpg" /></li> 
                         
                    </ul> 
                </div>
                <script type="text/javascript">
                     $("div#featuredslideshow").slideViewerPro({ 
                    thumbs: 4,  
                    thumbsPercentReduction: 15, 
                    galBorderWidth: 0, 
                    galBorderColor: "#666", 
                    thumbsTopMargin: 10, 
                    thumbsRightMargin: 10, 
                    thumbsBorderWidth: 1, 
                    thumbsActiveBorderColor: "#000", 
                    thumbsActiveBorderOpacity: 0.8, 
                    thumbsBorderOpacity: 0, 
                    buttonsTextColor: "#707070", 
                    autoslide: true,  
                    typo: true 
                    });  	
                </script>

</div>
            
            <div class="post_box">

» Text unter dem Design | Code in einem separaten Fenster öffnen.

</div> 
        
        <div id="templatemo_sidebar">
        
	        <div class="sidebar_box">
            </div>  
        	
            <div class="sidebar_box">
            	<h4>Categories</h4>
                <ul class="tmo_list">  
                   	<li><a href="index.html">Aliquam at adipiscing</a></li>

<li><a href="index.html">Cras eget urna eu nisi</a></li>
                    <li><a href="index.html">Integer aliquet tempus</a></li>
                    <li><a href="index.html">Nam non diam at augue</a></li>
                    <li><a href="index.html">Pellentesque erat ipsum</a></li>
                    <li><a href="index.html">Sed volutpat urna vitae</a></li>                  
                </ul>
            </div>

<div class="sidebar_box">
            	<h4>Recent comments</h4>
                <div class="recent_comment_box">
                    <a href="#">Lorem ipsum dolor si</a>
                    <p>Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</p>
                </div>
                
                <div class="recent_comment_box">

<a href="#">Aenean feugiat mattis </a>
                    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
                </div>
                
                <div class="recent_comment_box last_recent_comment_box">
                    <a href="#"> Lacus enim id lacinia in</a>

<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
                </div>
            </div>
        	
        </div> 
    
    	<div class="cleaner"></div>
    </div>

</div>

<div id="templatemo_footer_wrapper">
	<div id="templatemo_footer">
		<a href="index.html" class="current">Home</a> | <a href="about.html">About Us</a> | <a href="gallery.html">Gallery</a> | <a href="contact.html">Contact Us</a>       
        <div class="cleaner h10"></div>	   
         	
        Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a> Coding:</a> <a href="http://www.hpbk-templateworld.de.tl" target="_parent">HpBk-TemplateWorld</a>

</body>
</html>

» CSS-Code ohne Style Tags | Code in einem separaten Fenster öffnen.

/* ---Dieses Design und noch viele weitere kostenlose Designs findest du auf HpBk-TemplateWorld.de.tl - der Community für Designs und Tutorials im HpBk.--- */

#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

td[height="102"] {
position:absolute;
left:50%;
margin-left:-384px; }/*	Credit: http://www.templatemo.com	*/

body {
	margin: 0px;
	padding: 0px;
	color: #aaaaaa;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 1.5em; 
	background-color: #121212;
	background-image: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_body.jpg);
	background-repeat: repeat-x;
	background-position: top
}

a, a:link, a:visited { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { color: #00baf2; font-weight: normal }
h1 { font-size: 34px; margin: 0 0 30px 0; padding: 5px 0; }
h2 { font-size: 26px; margin: 0 0 20px 0; padding: 0; }
h3 { font-size: 21px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

a.more { display: block; width: 98px; height: 27px; padding: 7px 0 0 10px; color: #000; font-weight: bold; background: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_button.png) no-repeat

}
a.more:hover { color: #fff; text-decoration: none }

.float_l { float: left }
.float_r { float: right }

.image_wrapper { display: inline-block; border: 0px solid #4c4c4c; padding: 4px; background: none; margin-bottom: 5px }
.image_fl { float: left; margin: 3px 15px 0 0 }
.image_fr { float: right; margin: 3px 0 0 15px }

blockquote { font-style: italic; margin-left: 10px}
cite { font-weight: bold; color:#000 }
cite span { color: #333 }
em { color: #ca5005; font-weight: 700 }

.tmo_list { margin: 0 0 0 10px; padding: 0; list-style: none }
.tmo_list li { color:#fff; margin:0 0 10px; padding: 3px 0 3px 15px; background: transparent url(https://img.webme.com/pic/h/hpbk-templateworld/cb_list.jpg) no-repeat scroll 0 8px }
.tmo_list li a { color: #fff }
.tmo_list li a:hover { color: #fff }

#templatemo_wrapper { width: 960px; margin: 0 auto }

#templatemo_header { width: 960px; height: 100px; padding-top: 50px; text-align: center; background: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_header.jpg) no-repeat top center }

#site_title a {
	display: block;
	width: 300px;
	margin: 0 auto;
	text-align: center;
	padding: 0 0 0 0;
	font-size: 24px;
	color: #fff;
	font-weight: normal;
	text-decoration: none
}

#site_title a span {
	display: block;
	font-size: 14px;
	color: #ffc66c
}

/* menu */

#templatemo_menu {
	width: 900px;
	height: 81px;
	padding: 0 30px;
  	background: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_menu.jpg) no-repeat top center
}

#templatemo_menu ul {
	height: 56px;
	margin: 0;
	padding: 25px 0 0 0;
	list-style: none;
}

#templatemo_menu ul li {
	padding: 0;
	margin: 0;
	display: block;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	height: 56px;
	padding: 0 20px;
	margin-right: 1px;
	font-size: 14px;
	color: #b1b1b1;	
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	outline: none;
	border: none;
}

#templatemo_menu ul li a span {
	display: block;
	font-size: 11px;
	font-weight: normal;
	color: #454545
}

#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
	color: #cd7e00;
	background: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_menu_hover.jpg) center bottom no-repeat
}
/* end of menu */

/* main */
#templatemo_main {
	width: 900px;
	padding: 30px;
    	background: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_main.jpg) repeat-y
}

#templatemo_content {
	float: left;
	width: 600px;
	padding: 0 50px 0 30px;
}

#templatemo_slider {
	width: 580px;
	height: 365px;
	padding: 8px;
	border: 1px solid #4c4c4c;
	margin-bottom: 40px;
}

.content_box { clear: both; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #4c4c4c }
.last_content_box { margin: 0; padding: 0; border-bottom: 0 }

.post_box {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #4c4c4c;
}

.post_box_last {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.post_box_right {
	float: right;
	width: 340px
}

.post_box h2 {
	margin: 0;
	padding: 0px 0 10px 0;
	line-height: 30px;
}

.post_box .post_meta {
	padding: 5px;
	margin-bottom: 20px;
	background: #131313;
}

.post_box p {
	text-align: justify;
	margin-bottom: 20px;
}

.post_box img {
	float: left;
	margin-right: 20px;
	padding: 5px; border: 1px solid #000;
	background: #221c1c;
	display: inline-block;
}

.post_box .category {
	float: left;
	width: 300px;
}

.post_box .comment {
	position: absolute;
	top: -10px;
	right: 0px;
	width: 70px;
	height: 42px;
	text-align: center;
	padding-top: 10px;
	font-size: 16px;
	font-weight: bold;
	background:  none no-repeat;
}

.post_box .comment a {
	color: #333;
	text-decoration: none;
}

#comment_section {
	clear: both;
	margin-bottom: 60px;
	width: 568px;
}

.first_level {
	margin: 0; padding: 0;
}

.comments {
	list-style: none; 
}

.comments li { margin-bottom: 10px; list-style:none; }
.comments li .commentbox1 { border: 1px solid #000;  background: #383838; }
.comments li .commentbox2 { border: 1px solid #383838;  background: #505050; }

.comments li .comment_box { clear: both; width:100%; padding: 15px;  }
.comment_box .gravatar { float: left; width: 50px; border: 1px solid #3c3735; margin-right: 15px; background: #3c3735; }
.comment_box .gravatar img { margin: 0; width: 50px; height: 50px; }
.comment_box .comment_text { margin: 0 0 0 65px; }

.comment_box .comment_text p { margin: 0; }
.comment_text .comment_author { font-size: 14px; color: #cd7e00; margin-bottom: 10px; }
.comment_text .date { font-size: 12px; font-weight: normal; color: #9b8e79; padding-left: 10px; }
.comment_text .time { font-size: 12px; font-weight: normal; color: #9b8e79; padding-left: 10px; }
.comment_text .reply a { display: block; clear: both; float: right; padding: 1px 10px; height: 24px; text-align: center; background: #3694ab; border: 1px solid #fff; color: #fff; }

#comment_form {
	clear: both;
}

#comment_form h3 {
	font-size: 20px;
	border-bottom: 1px dotted #666;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

#comment_form form {
	padding: 20px;
	background: #383838;
	border: 1px solid #000;
}

#comment_form form label { color: #fff }

#comment_form textarea {
	background: #262626 none repeat fixed 0 0;
	border: 1px solid #000;
	display:block;
	font-size:1.1em;
	height:150px;
	margin-top:5px;
	padding:5px;
	width: 540px;
	color: #AAAAAA;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
}

#comment_form .form_row {
	width: 100%;
	margin-bottom: 15px;
}

#comment_form form input {
	margin-top: 5px;
	padding: 3px 5px;
	color: #AAAAAA;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
	width: 200px;
	background:#262626 none repeat fixed 0 0;
	border: 1px solid #000;
}

#comment_form .submit_btn {
	width: 90px;
	font-weight: bold;
	color: #FFF;
	cursor: pointer;
}

.service_box { clear: both; margin-bottom: 50px; }
.service_box img { float: left; width: 48px; height: 48px; }
.service_box .sb_right { float: right; width: 530px; }

#gallery { clear: both; }
.gallery_box { padding: 0 0 30px 0; margin: 0 0 30px 0; border-bottom: 1px dashed #433d3a; }

.gallery_box a.gallery_img { display: block; float: left; width: 240px; height: 160px; }
.gallery_box .right { float: right; width: 320px; }

.last_gallery_box { padding: 0; margin: 0; border: none; }

#contact_form {
	float: left;
	padding: 0;
}

#contact_form form {
	margin: 0px;
	padding: 0px;
}

#contact_form form .input_field {
	width: 270px;
	padding: 5px;
	background: #1b1b1b;
	color: #AAAAAA;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
	border: 1px solid #000;
	margin-top: 5px;
}

#contact_form form label {
	display: block;
	width: 100px;
	margin-right: 10px;
	font-size: 14px;
	color: #AAAAAA;
}

#contact_form form textarea {
	width: 388px;
	height: 200px;
	padding: 5px;
	background: #FFF;
	border: 1px solid #000;  
	background: #1b1b1b;
	color: #AAAAAA;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
	margin-top: 5px;	
}

#contact_form form .submit_btn {
	margin-right: 100px;
	padding: 7px 14px;
	color: #AAA;
	font-weight: bold;
	background: #1B1B1B;
	border: 1px solid #000;
}

.cleaner_h10 {
    clear: both;
    height: 10px;
    width: 100%;
}

#templatemo_sidebar { 
	float: left;
	width: 180px;
	padding-left: 30px;
}

.sidebar_box {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #433d3a;
}

.recent_comment_box { padding: 0 0 15px; margin: 0 0 15px; border-bottom: 1px dashed #433d3a; }
.recent_comment_box a { color: #cd7e00; font-weight: bold; }
.last_recent_comment_box { margin: 0; padding: 0; border: none }
/* end of main */

/* footer */

#templatemo_footer_wrapper { width: 100%; background: #000000 url(https://img.webme.com/pic/h/hpbk-templateworld/cb_footer.jpg) top repeat-x }

#templatemo_footer {
		width: 900px;
		text-align: center;
		margin: 0 auto;
		padding: 40px 30px 20px;
		color: #4b4b4b;
		background: url(https://img.webme.com/pic/h/hpbk-templateworld/cb_footer_top.jpg) top center no-repeat;
}	
#templatemo_footer a { color: #71695c }

/* end of footer */

#featuredslideshow { display: block; width: 580px; height: 360px; overflow: hidden; background: #000; }

.svwp {width: 50px; height: 20px; background: #fff;} /*preloader stuff. do not modify!*/
.svwp ul{position: relative; left: -999em;}/*preloader stuff. do not modify!*/
.slideViewer { 
position: relative;
overflow: hidden; 
margin: 0;
padding: 0;
}
.slideViewer ul {  /*your list of images*/
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
margin: 0; 
padding: 0;
}
.slideViewer ul li {
float:left;
}

/*typographic info*/
.slideViewer span.typo{ 
padding: 10px; /* do not modify padding */
background: #000;
color: #fff;
font: normal 10px Verdana;
}

.thumbSlider { /*the thumbnails slider*/
overflow: hidden;
width: 1%;
}
.thumbSlider ul { 
list-style-type: none;
margin: 0; 
padding: 0;
}
.thumbSlider ul li{ 
float:left;
margin: 0;
}
.thumbSlider a{
color: #fff;
text-decoration: none;
}
.thumbSlider a img{
border: 0;
display: block;
padding: 0;
}
.thumbSlider p.tmbrdr { /* the border above -not around- each thumb */
/* width, height and top values are dynamically added by the script. Do not modify. */
position:relative; 
left: 0;
font-size: 0.01em;
left: 0;
margin: 0;
padding: 0;
}

a.left, a.right { /*the left and right buttons (links)*/
background: transparent; /* could be any color  */
color: #ff0000;
font: bold 16px Arial;
overflow: hidden;
}
a.left span, a.right span{

}
a.left img, a.right img{
border: 0;
}
a.l_dis, a.r_dis {
background: transparent; /* ALWAYS leave transparent. this is the 'disabled' state of the link !  */
cursor: default;
}
a.l_dis span, a.r_dis span {
display: none;
}
a:focus {outline:none;}

Bilder der Slideshow bearbeiten

» Die Bilder aus der Slideshow zu ändern, ist wirklich ganz einfach. Wenn ihr unter "Text über dem Design" schaut, werdet ihr folgenden Code finden:

<div id="templatemo_slider">
                <div id="featuredslideshow">
                    <ul> 
                        <li><img width="580" height="300" alt="Mauris quis eros arcu" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/01.jpg" /></li> 
                        <li><img width="580" height="300" alt="Cras porta porta turpis" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/02.jpg" /></li> 
                        <li><img width="580" height="300" alt="Nullam ac mi id massa consectetur" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/03.jpg" /></li> 
                        <li><img width="580" height="300" alt="Maecenas venenatis viverra nisi" src="https://dl.dropboxusercontent.com/u/82955745/City%20Blog/04.jpg" /></li> 
                         
                    </ul> 
                </div>
                <script type="text/javascript">
                     $("div#featuredslideshow").slideViewerPro({ 
                    thumbs: 4,  
                    thumbsPercentReduction: 15, 
                    galBorderWidth: 0, 
                    galBorderColor: "#666", 
                    thumbsTopMargin: 10, 
                    thumbsRightMargin: 10, 
                    thumbsBorderWidth: 1, 
                    thumbsActiveBorderColor: "#000", 
                    thumbsActiveBorderOpacity: 0.8, 
                    thumbsBorderOpacity: 0, 
                    buttonsTextColor: "#707070", 
                    autoslide: true,  
                    typo: true 
                    });  	
                </script>

</div>

Hier seht ihr jetzt auch die verschiedenen Bild-URLs, die ihr ganz einfach austauschen könnt. Bitte achtet darauf, dass eure Bilder, die ihr dort einsetzen möchtet, eine Größe von 580 x 300 Pixel haben. Kurz vor der Bild-URL in diesem Code seht ihr die Angabe alt="Mauris quis eros arcu". Mit diesem Text könnt ihr den Untertitel eures Bildes ändern. Der Text erscheint auf einem schwarzen Streifen unten im Bild. Dann braucht ihr das Ganze nur noch speichern und eure Slideshow ist perfekt.

Und so geht´s

» Zuerst musst du dich in den Homepage-Baukasten einloggen.
» Dann klickst du auf "Design einstellen" und wählst dort das "CSS-Design - Nur für Profis geeignet" aus.
» Danach klickst du auf "Erweiterte Einstellungen" und fügst die Codes, die hier auf der Seite stehen, in die verschiedenen Felder "Text über dem Design", "Text unter dem Design" und "CSS-Code ohne Style Tags" ein.
» Danach speicherst du das Ganze ab und darfst dein neues Design bestaunen.
» Beachte bitte, dass deine Menüpunkte nicht automatisch übernommen werden. Du musst deine Menüpunkte manuell einfügen. Dies geschieht meistens im Code von "Text über dem Design" oder "Text unter dem Design".

Download des Original-Designs

» Auf folgender Seite kannst du das Paket des Designs kostenlos von TemplateMo.com herunterladen. Darin enthalten sind die Bilder des Designs, der unbearbeitete CSS-Design-Code und eine Live-Vorschau des Designs. Zum Download.

Du hast Fragen oder Probleme?

» Klappt etwas bei dir nicht? Oder du hast eine bestimmte Frage? Dann melde dich bitte in der "TemplateWorld Community". Nur dort kann ich dir schnell helfen. Wenn du deine Frage hier als Kommentar hinterlässt, kann ich dir leider keinen Support geben, da ich nicht alle Design-Seiten durchsuchen kann, wo dein Kommentar geschrieben wurde. Deshalb bitte ich um dein Verständnis.

Kommentare zu dieser Seite:

Kommentar von kessy( ), 07.11.2011 um 20:45 (UTC):
echt super seite vielleicht hol ich mir hier mal ein neues design

lg kessy

Kommentar zu dieser Seite hinzufügen: