Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj23.09.2012, 09:52 (UTC)    
Mesaj konusu: Griblog Css Tasarım/Eren Keskin

Merhaba Arkadaşlar Bir Forum Sitesinde Dolaşırken Gördüğüm Griblog adlı tasarımı sizler için bedava Siteme Uyarladım Umarım Beğenirsiniz.
Arrow Sitem:ibrahim-ahi.tr.gg
Arrow Ön izlemesi:http://sendehitle.tr.gg/

Tasarımın Üstü
Kod:
</script>
</head>
<body>
<div class="bar"></div>
<!-- Center -->
<div class="center">

   <!-- Header -->
   <header id="header">
      
      <!-- Logo -->
      <div class="logo">
         <a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/logo.png" alt="Site Name"/></a>
      </div>
      <!-- #Logo -->
      
      <!-- Advertisemen 728x90 -->
      <div class="ad728">
         <a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/728x90.png" alt="728x90 Advertisement"/></a>
      </div>
      <!-- #Advertisemen 728x90 -->
      
   </header>
   <!-- #Header -->
      
      <div class="clear"></div>
      
   <!-- Menu -->
   <nav id="menu">
      
      <!-- Search Form -->
      <div class="search">
         <input type="text" name="s" id="s" placeholder="Arama Metnini Giriniz.." class="searchInput"/>
         <input type="submit" value=""/>
      </div>
      <!-- #Search Form -->
      
      <!-- Page List -->
      <ul class="menu">
         <li><a href="#">Anasayfa</a></li>
         <li><a href="#">Hakkımızda</a></li>
         <li><a href="#">Referanslar</a></li>
         <li><a href="#">Reklam</a></li>
         <li><a href="#">İletişim</a></li>
      </ul>
      <!-- #Page List -->
      
   </nav>
   <!-- #Menu -->
   
      <div class="clear"></div>
   
   <!-- Content -->
   <div id="content">
      
      <!-- Custom Alan -->
      <div class="customAlan">
         
         <div class="leftArrow"></div>
            <div class="customWord">
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
            </div>
         <div class="rightArrow"></div>
         
      </div>
      <!-- #Custom Alan -->
         
         <div class="clear"></div>
         
      <!-- Section -->
      <section class="left">
         
         

Tasarımın Altı
Kod:
<!-- Pagenavi -->
         <div class="pagenavigation">
            <a href="#" class="previous"><<Önceki</a>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <a href="#">4</a>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <a href="#" class="next">Sonraki>></a>
         </div>
         <!--#Pagenavi -->
         
      </section>
      <!-- #Section -->
      
      <!-- Sidebar -->
      <aside class="sidebar">
         
         <!-- Widget 1 | Categories -->
         <div class="widget">
            <div class="sideTitle">Kategoriler</div>
            <ul class="categories">
               <li><a href="#">Anasayfa</a></li>
               <li><a href="#">Hakkımızda</a></li>
               <li><a href="#">Referanslar</a></li>
               <li><a href="#">Reklam</a></li>
               <li><a href="#">İletişim</a></li>
               <li><a href="#">Anasayfa</a></li>
               <li><a href="#">Hakkımızda</a></li>
               <li><a href="#">Referanslar</a></li>
               <li><a href="#">Reklam</a></li>
               <li><a href="#">İletişim</a></li>
            </ul>
         </div>
         <!--#Widget 1 | Categories -->
         
            <div class="clear"></div>
         
         <!-- Widget 2 | Popular Posts -->
         <div class="widget">
            <div class="sideTitle">Popüler Yazılar</div>
            <ul class="popularPosts">
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
               <li><a href="#">Lorem İpsum Dolor Sit Amet Commodo</a></li>
            </ul>
         </div>
         <!--#Widget 2 | Popular Posts -->
         
            <div class="clear"></div>
         
         <!-- Widget 3 | Popular Posts -->
         <div class="widget">
            <div class="sideTitle">Son Yorumlar</div>
            <ul class="lastComments">
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi1.png" alt="Yorumcu Adı"/><span>Eren Keskin</span><p>Lorem Ipsum is simply dummy text of the printing and typesetting ind...</p></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi1.png" alt="Yorumcu Adı"/><span>Eren Keskin</span><p>Lorem Ipsum is simply dummy text of the printing and typesetting ind...</p></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi1.png" alt="Yorumcu Adı"/><span>Eren Keskin</span><p>Lorem Ipsum is simply dummy text of the printing and typesetting ind...</p></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi1.png" alt="Yorumcu Adı"/><span>Eren Keskin</span><p>Lorem Ipsum is simply dummy text of the printing and typesetting ind...</p></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi1.png" alt="Yorumcu Adı"/><span>Eren Keskin</span><p>Lorem Ipsum is simply dummy text of the printing and typesetting ind...</p></a></li>
            </ul>
         </div>
         <!--#Widget 3 | Popular Posts -->
         
            <div class="clear"></div>
         
         <!-- Widget 4 | 125x125 Advertisement -->
         <div class="widget">
            <div class="sideTitle">Sponsor Reklamlar</div>
            <ul class="ad125">
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi6.png" alt="Sponsor Name"/></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi6.png" alt="Sponsor Name"/></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi6.png" alt="Sponsor Name"/></a></li>
               <li><a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi6.png" alt="Sponsor Name"/></a></li>
            </ul>
         </div>
         <!--#Widget 4 | 125x125 Advertisement -->
         
      </aside>
      <!-- #Sidebar -->
      
         <div class="clear"></div>
      
      <!-- Footer -->
      <footer id="footer">
         
         <!-- Footer Social Media -->
         <ul class="fSocial">
            <li class="facebook"><a href="#"></a></li>
            <li class="twitter"><a href="#"></a></li>
            <li class="gPlus"><a href="#"></a></li>
            <li class="linkedIn"><a href="#"></a></li>
            <li class="youtube"><a href="#"></a></li>
            <li class="rss"><a href="#"></a></li>
         </ul>
         <!--#Footer Social Media -->
         
         <!-- CopyRight -->
         <div class="copyright">
            Tasarım: Talha Akkaya <br/>
            HTML - CSS: Eren Keskin <br/>
            Copyright 2012 © <a target="_blank" href="http://erenkeskin.com">erenkeskin.com</a>
         </div>
         <!--#CopyRight -->
         
      </footer>
      <!-- #Footer -->
      
   </div>
   <!-- #Content -->

</div>
<!-- #Center -->
<div class="bar"></div>
</body>
</html>

Css Kodu
Kod:
/*Menuleri gizle*/

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

/*Reklam ortala*/
#ad-a87f,#ad-c81e,#ad-a87f,#ad-cfcd,#ad-c9f0,#ad-c4ca,#ad-8f14,#ad-e4da,#ad-d3d9,#ad-1679,#ad-45c4,#ad-eccb{margin:5px auto;}
body{font-style: normal;
background: url(http://erenkeskin.com/temam/griBlog/images/background.png);
margin:0px;
padding:15px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color:#000;
line-height:14px;
}/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
a {
   text-decoration: none;
}
textarea, input, select {
   outline: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}body {background: url("http://erenkeskin.com/temam/griBlog/images/background.png"); margin: auto; font: 13px Trebuchet MS;}
.center {width: 960px; margin: 0 auto;}
.clear {clear: both;}

/* Header */
.bar {background: rgb(0, 72, 192); height: 2px;}
#header {overflow: hidden;}

   /* Logo */
   .logo {float: left; max-width: 200px; margin: 30px 0;}
   .logo a{display: block;}
   .logo a img{max-width: 200px;}
   
   /* Advertisement */
   .ad728 {float: right; max-width: 728px; max-height: 90px; margin: 20px 0;}
   .ad728 a img{max-width: 728px; max-height: 90px;}
   
/* Menü */
nav#menu {border-radius: 3px; background: url("images/menu-bg.png"); border: 1px solid #cacaca; border-bottom: 3px solid #cacaca; overflow: hidden; box-shadow: 1px -1px 3px #f1f1f1, 1px 1px 3px #c0c1c3; -moz-box-shadow: 1px -1px 3px #f1f1f1, 1px 1px 3px #c0c1c3; -webkit-box-shadow: 1px -1px 3px #f1f1f1, 1px 1px 3px #c0c1c3;}

   /* Page List */
   ul.menu {float: left; overflow: hidden;}
   ul.menu li{display: block; float: left; padding: 10px 15px; }
   ul.menu li a{color: #787878; font-size: 14px;}
   ul.menu li a:hover{color: rgb(0, 72, 192);}
   
   /* Search */
   .search {float: right; margin: 6px 10px 5px 0; position: relative;}
   .searchInput {background: url("images/searchInput.png")no-repeat; width: 172px; height: 14px; border: none; padding: 6px 30px 5px 5px; font-size: 11px; color: #787878; font-style: oblique;}
   .search input[type="submit"]{position: absolute; top: 0; right: 0; padding: auto; background: none; border: none; cursor: pointer;}
   
/* Content */
#content {border-radius: 3px; border: 1px solid #cacaca; border-bottom: 3px solid #cacaca; background: url("http://erenkeskin.com/temam/griBlog/images/content-bg.png"); padding: 13px 8px; overflow: hidden; margin: 15px 0;}

   /* Custom Page */
   .customAlan {border-radius: 3px; width: auto; background-color: #f7f7f7; border: 1px solid #d4d4d4; overflow: hidden; margin-bottom: 13px; padding: 8px;}
      .leftArrow {cursor: pointer; float: left; background: url("images/left-arrow.png")no-repeat; height: 19px; width: 11px; margin: 0 9px 0 0;}
         .customWord {float: left; margin-top: 0px; color: #606060;}
      .rightArrow {cursor: pointer; float: right; background: url("http://erenkeskin.com/temam/griBlog/images/right-arrow.png")no-repeat; height: 19px; width: 11px; margin: 0 0 0 9px;}
      
   /* Section */
   .left {width: 620px; float: left; }
      
      /* Article */
      .article {border-radius: 3px; background-color: #fff; border: 1px solid #cacaca; padding: 10px; overflow: hidden; margin-bottom: 10px;}
      .articleTitle {background: url("images/articleTitle.png"); width: auto; padding: 10px;}
      .articleTitle a{color: rgb(0, 72, 192); font-size: 15px;}
      .articleTitle a:hover{color: #505050;}
         .articleTop {border-bottom: 1px solid #e9e9e9; overflow: hidden; margin-bottom: 10px;}
         .articleTop li {float: left; margin-right: 20px; padding: 5px 5px 5px 20px;}
         .articleTop li a{color: #a8a8a8; font-size: 12px;}
         .articleTop li a:hover{color: rgb(0, 72, 192);}
         .articleTop li.articleCategory{background: url("http://erenkeskin.com/temam/griBlog/images/categoryIkon.png")no-repeat 0 10px; }
         .articleTop li.articleDate{background: url("http://erenkeskin.com/temam/griBlog/images/articleDate.png")no-repeat 0 8px; }
         .articleTop li.articleViews{background: url("http://erenkeskin.com/temam/griBlog/images/articleViews.png")no-repeat 0 8px; }
         .articleTop li.articleComments{background: url("http://erenkeskin.com/temam/griBlog/images/articleComments.png")no-repeat 0 8px; }
      .articleThumb {float: left; width: 205px; height: 128px; padding: 1px; background-color: #fff; border: 1px solid #cacaca; margin-right: 15px; margin-bottom: 2px;}
      .articleThumb a img{width: 205px; height: 128px;}
         .articlePost p{color: #787878; line-height: 19px;}
      .readMore {border-radius: 3px; border: 1px solid #cfcfcf; float: right; margin: 10px 10px 0 0; padding: 4px 15px; background: url("http://erenkeskin.com/temam/griBlog/images/menu-bg.png");}
      .readMore a{color: rgb(0, 72, 192);}
      .readMore a:hover {color: #505050;}
      
      /* Advertisement - 468x60 */
      .ad468 {border-radius: 3px; background-color: #fff; border: 1px solid #cacaca; padding: 10px; overflow: hidden; margin-bottom: 10px;}
         .ad468alan {border: 1px solid #cacaca; float: left; max-width: 470px; max-height: 62px; overflow: hidden;}
         .ad468alan a{display: block; float: left;}
         .ad468alan a img{width: 468px; height: 62px;}
         .giveAdd {border: 1px solid #cacaca; float: right; overflow: hidden; max-height: 62px; }
         .giveAdd a{display: block; float: left;}
         .giveAdd a img{width: 120px; height: 62px;}
         
      /* PageNavigation */
      .pagenavigation {border-radius: 3px; background-color: #fff; border: 1px solid #cacaca; padding: 5px 10px; overflow: hidden; text-align: center; margin-bottom: 10px;}
      .pagenavigation a{color: #535353; padding: 0 5px;}
      .pagenavigation a.previous{margin-right: 20px;}
      .pagenavigation a.next{margin-left: 20px;}
      .pagenavigation span{color: #787878; padding: 0 5px;}
      .pagenavigation span:hover{color: #535353; text-decoration: underline;}
         
   /* Sidebar */
   .sidebar {width: 310px; float: right;}
   .widget {border: 1px solid #cacaca; overflow: hidden; border-radius: 3px; margin-bottom: 15px;}
   .sideTitle {border-bottom: 1px solid #cacaca; padding: 8px 13px; color: #606060; font-size: 15px; border-radius: 3px; }
   
      /* Categories */
      .categories {margin-left: 10px; overflow: hidden;}
      .categories li{background: url("http://erenkeskin.com/temam/griBlog/images/categoryLi.png")no-repeat 5px 9px; float: left; width: 105px; display: block; padding: 5px 20px;}
      .categories li:hover{background: url("http://erenkeskin.com/temam/griBlog/images/categoryLiActive.png")no-repeat 5px 9px;}
      .categories li a{color: #787878;}
      .categories li:hover a{color: rgb(0, 72, 192);}
      
      /* Popular Posts */
      .popularPosts {margin-left: 10px; overflow: hidden;}
      .popularPosts li{background: url("http://erenkeskin.com/temam/griBlog/images/categoryLi.png")no-repeat 0px 10px; display: block; padding: 5px 15px;}
      .popularPosts li:hover{background: url("http://erenkeskin.com/temam/griBlog/images/categoryLiActive.png")no-repeat 0 10px;}
      .popularPosts li a{color: #787878;}
      .popularPosts li:hover a{color: rgb(0, 72, 192);}
      
      /* Last Comments */
      .lastComments {padding: 5px; overflow: hidden;}
      .lastComments li{overflow: hidden; display: block; margin-bottom: 5px;}
      .lastComments li a{display: block; overflow: hidden;}
      .lastComments li a img{float: left; width: 50px; height: 50px; margin-right: 5px; padding: 1px; border: 1px solid #cfcfcf;}
      .lastComments li a span{color: rgb(0, 72, 192); font-size: 13px; font-weight: bold; }
      .lastComments li a p{color: #606060;}
      
      /* Advertisement 125x125 */
      .ad125 {overflow: hidden; margin-left: 4px;}
      .ad125 li{width: 125px; float: left; height: 125px; border: 1px dashed #cacaca; margin: 8px 10px;}
      .ad125 li:hover{border-color: #b4b4b4;}
      .ad125 li a img{width: 125px; height: 125px; }
      .ad125 li:hover a img{opacity: 0.8;}
      
      
/* Footer */
#footer {border-top: 1px solid #d1d1d1; padding-top: 10px;}

   /* Social Media */
   .fSocial {float: left; margin-top: 9px; overflow: hidden;}
   .fSocial li{margin-right: 5px; float: left; overflow: hidden; width: 28px; height: 27px;}
   .fSocial li:hover{opacity: 0.8;}
   .fSocial li.facebook{background: url("http://erenkeskin.com/temam/griBlog/images/facebook.png")no-repeat;}
   .fSocial li.twitter{background: url("http://erenkeskin.com/temam/griBlog/images/twitter.png")no-repeat;}
   .fSocial li.gPlus{background: url("http://erenkeskin.com/temam/griBlog/images/gPlus.png")no-repeat;}
   .fSocial li.linkedIn{background: url("http://erenkeskin.com/temam/griBlog/images/linkedIn.png")no-repeat;}
   .fSocial li.youtube{background: url("http://erenkeskin.com/temam/griBlog/images/youtube.png")no-repeat;}
   .fSocial li.rss{background: url(http://erenkeskin.com/temam/griBlog/images/rss.png")no-repeat;}
   .fSocial li a {padding: 14px;}
   

   /* Copyright */
   .copyright {float: right; color: #606060; font-size: 12px; text-align: right;}
   .copyright a{color: rgb(0, 72, 192);}

İçerik Kodu
Kod:
<!-- Advertisement 468x60 -->
         <div class="ad468">
            <div class="ad468alan">
               <a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/yazi2.png" alt="468x60 Advertisement"/></a>
            </div>
            <div class="giveAdd">
               <a href="#"><img src="http://erenkeskin.com/temam/griBlog/images/giveAd.png" alt="Advertisement Give!"/></a>
            </div>
         </div>
         <!-- #Advertisement 468x60 -->
Mesaj23.09.2012, 10:32 (UTC)    
Mesaj konusu:

Merhabalar,
öncelikle Teşekkürler. Ancak Tasarımları Sabit Başlıkta paylaşmalısınız;
Arrow http://www.bedava-sitem.com/forum/viewtopic.php?t=184931
İyi çalışmalar.. Wink

______________
IQRAMEDIA Yakında...
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu