Sziasztok igazság szerint én is most próbálkoztam ilyesmivel először, vannak még hiányosságok, de azért menni fog ez...
Jelen esetben egy kódot kaptok amit beillesztve kapjátok meg a következő
designet: (igen most az 1d-esnek kedveztem) azt hiszem ehhez már
minimális tudás kell, de a biztonság kedvéért írtam hova mit illesszetek
be.
Nagyobbért katt a képre.
html>
<head>
<title>remember.</title>
<link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lm6pmcIkW61qfoi4t.gif">
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css'>
<script>function changeNavigation(id) {document.getElementById('default').innerHTML=document.getElementById(id).innerHTML}</script>
<style type="text/css">
#navbar-iframe { display: none; }
::selection { background: #DBB798; color: #FFF; }
::moz-selection { background: #DBB798; color: #FFF; }
body { font-family: trebuchet ms; font-size: 9pt; color: #444; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD90CA1FChOoJETJb2PJpkwoc4CwDprgTke3lHnfupl5mb0QK8N8CVeJ1wE13W8elj0ZQqRmgDtPg41xe-Zjc4AakMdUG8VoLibntz4kosW87FDufq5FeBS3wBXxSRrK4rcNjgKASiGgY/s1600/o.jpg); background-attachment: fixed; cursor: default; }
blockquote { background: rgba(246,212,202,0.1); padding: 10px; -webkit-transition: .3s; transition: .3s; -o-transition: .3s; -moz-transition: .3s; margin: 8px; border: 1px solid rgba(255,255,255,1); }
blockquote:hover { background: rgba(173,188,185,0.1); padding: 10px; border: 1px solid rgba(216,217,199,0.2); }
a { color: #ADBCB9; text-decoration: none; -webkit-transition: .3s; transition: .3s; -o-transition: .3s; -moz-transition: .3s; border-bottom: 1px dashed transparent; }
a:hover { color: #D8D9C7; border-bottom: 1px dashed #DBB798; }
#topbar { z-index: 9999; position: fixed; height: 110px; top: 0; left: 0; right: 0; padding: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR204AvFDnaQvi1HLhU1eL6Sjq7OUVCXwGis7yqHqzhtOMjhyphenhyphenGgGI64y7RPwo-40X56mFfsj_LbsO9CNnHQDS9ENyiRkQN2Nz2YlsRNn9kHe4sxTldM0VIc1T-t6sgclB_XRzgnmN_T3M/s1600/ll.png); border-bottom: 10px solid #FFF; box-shadow: 0px 0px 7px #EAE4C0; margin-bottom: 10px; overflow: hidden; }
.top { background: rgba(255,255,255,0.75); border: 0px dashed #F6D4CA; float: left; margin-left: 50px; padding: 5px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; width: 100px; z-index: 9999; display: block; }
.top img { display: inline-block; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; width: 100px; z-index: 9999; }
.desc { position: absolute; padding: 5px 5px 5px 30px; margin-left: -20px; top: 50px; background: rgba(255, 255, 255, 0.75); text-transform: uppercase; font-size: 16px; font-family: 'Yanone Kaffeesatz', sans-serif; letter-spacing: 2px; z-index: -20; margin-right: 10px; display: inline-block; }
.desc a, .navi { color: #eb9f89; padding: 5px; border: 0; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; }
.desc a:hover, .navi:hover { border: 0; background: #F6D4CA; color: #FFF; cursor: hand; }
.area { padding: 10px; background: rgba(255, 255, 255, 0.75); right: 20px; top: 20px; width: 400px; height: 70px; display: block; position: absolute; }
#center { margin: 180 auto; width: 530px; }
#container { width: 530px; position: absolute; }
#post { padding: 15px; background: #FFF; margin-bottom: 20px; }
#post img { opacity: .4; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; -moz-transition: .4s; margin-bottom: 5px; }
#post img:hover { opacity: .7; }
.post-title { border-bottom: 1px solid rgba(233, 227, 205, 0.4); margin-bottom: 7px; padding-bottom: 5px; font-size: 21px; font-family: cambria; letter-spacing: 2px; color: #ab876c; font-style: italic; }
.post-title a { color: #D8D9C7; border-bottom: 0; -webkit-transition: .5s; }
.post-title a:hover { color: #DBB798; border-bottom: 0; }
#post .date { opacity: 0; filter: alpha (opacity=0); margin-top: -25px; -webkit-transition: .4s; transition: .4s; -o-transition: .4s; -moz-transition: .4s; font-family: trebuchet ms; text-transform: uppercase; letter-spacing: 2px; color: #F6D4CA; position: relative; z-index: 10; background: rgba(246, 212, 202, 0.1); width: 500px; padding: 7px 15px; left: -15px; bottom: -25px; }
#post:hover .date { opacity: 1; filter: alpha (opacity=0); bottom: -15px; }
.blogger-labels { margin-bottom: 15px; }
</style>
</head>
<body>
<div id="topbar">
<a href="/"><div class="top">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAUM3lYijugOBq9Xo9nbKSdKrnPMhfbKujRWs-BquInlkrbu3fLNhcIKXZdpmTZw6HeegECrrhxB86HeEHmAVchDYRUx3fmL5-T5phZdBD1Tz2tMRz1Fli5amXpx7QMIxrv0GkkqcCTU/s1600/1d.png"></div>
</a>
<span class="desc"><a href="/">home</a><span class="navi" onclick="document.getElementById('main').innerHTML=document.getElementById('profile').innerHTML">TARTALOM</span><span class="navi" onclick="document.getElementById('main').innerHTML=document.getElementById('tags').innerHTML">CHAT</span><span class="NAVI" onclick="document.getElementById('main').innerHTML=document.getElementById('TAGS').innerHTML"></span><a href="EGYURLKÓD">EGYÉB</a><a href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank">kövess</a></span>
<div id="main">
</div>
<div id="tags" style="display: none">
<div class="area">
IDE JÖN A CHATBOX
</div>
</div>
<div id="profile" style="display: none">
<div class="area">
IDE JÖN A BEMUTATKOZÁS</div>
</div>
<div id="creds" style="display: none;">
<div class="area">
layout 100% handcoded by <a href="http://blogskins.com/me/florals" target="_blank">florals</a> with inspiration from <a href="http://mochakari.com" target="_blank">kari</a> and <a href="http://latteu.blogspot.com" target="_blank">mae</a> and colours from <a href="http://www.colourlovers.com/palette/2230547/*_l_i_g_h_t_s_*" target="_blank">hana*</a>. the backgrounds can be found at <a href="http://fairycandlesxo.tumblr.com" target="_blank">fairycandles</a>.</div>
</div>
</div>
<div id="center">
<div id="container">
<blogger><div id="post">
<blogitemtitle><div class="post-title">
<i><a href="<$fBlogItemPermalinkUrl$>"><$BlogItemTitle$></a></i></div>
</BlogItemTitle>
<blogitembody><$BlogItemBody$></BlogItemBody><div class="date">
POSTED BY <$BlogOwnerFirstName$> <blogdateheader> ON <$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$></div>
</div>
</Blogger><div id="post">
<center>
<olderposts><a href="<$OlderPosts$>">back</a> | </OlderPosts>all rights reserved desiree 2012<newerposts> | <a href="<$NewerPosts$>">forth</a></NewerPosts></center>
</div>
</body>
</html>
Azt még elkell mondanom, hogy ezt a kódot a klasszikus sablonnal
használhatjátok, ami azt jelenti, hogy az elrendezés menü és sablon
tervezőt ne fogjátok tudni használni.
Nincsenek megjegyzések:
Megjegyzés küldése
Írj nyugodtan ide bármit nagyon kíváncsi vagyok a Te véleményedre*-*
Blogszerkeztője:cukifalat855