bscsskodlari

Mavi Radyo Sitesi Tasarımı

TEMANIN GÖRÜNTÜSÜNÜ GÖRMEK İSTİYORSANIZ TIKLAYINIZ > DEMO GÖRÜNTÜSÜ

TASARIM ÜSTÜ : 

<table width="960" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="960" height="273" background="https://img.webme.com/pic/c/creative-blog/m-r-s_01.png"> <table width="960" height="184" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="585" valign="top" height="184"><a href="#" _fcksavedurl="#" _fcksavedurl="#"> <div id="Sosyal-Paylas1"> </div> </a> <a href="https://twitter.com/" _fcksavedurl="https://twitter.com/" _fcksavedurl="https://twitter.com/"> <div id="Sosyal-Paylas2"> </div> </a> <a href="https://www.facebook.com/" _fcksavedurl="https://www.facebook.com/" _fcksavedurl="https://www.facebook.com/"> <div id="Sosyal-Paylas3"> </div> </a> <div id="Ekstra-Yazi1">Buraya Ekstra Yazı Eklenebilir.</div> </td> <td width="375" valign="top" height="273"> <div id="MRS-Radyo"><!-- OyunlarBilecik.tR.gG --> <div style="text-align: center"><object width="200" height="30" data="http://www.palfm.com.tr/WebPlayer/Swfs/PalPlayer.swf?RID=1&strNO=1&ap=1" type="application/x-shockwave-flash"> <param value="http://www.palfm.com.tr/WebPlayer/Swfs/PalPlayer.swf?RID=1&strNO=1&ap=1" name="movie" /> <param value="transparent" name="wmode" /> </object></div> <!-- OyunlarBilecik.tR.gG --></div> <div id="Ekstra-Yazi2">Buraya Ekstra Yazı Eklenebilir.</div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td width="960" height="51" background="https://img.webme.com/pic/c/creative-blog/m-r-s_02.png"> </td> </tr> <tr> <td width="960" valign="top" height="400" background="https://img.webme.com/pic/c/creative-blog/m-r-s_03.png" align="center"> <table width="960" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="61"> </td> <td width="643" valign="top"> <div id="Icerik">

TASARIM ALTI : 

</div> </td> <td width="12"> </td> <td width="193" valign="top"> <table width="193" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> </td> </tr> <tr> <td width="193" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png"> <div class="MRS-Baslik">Başlık Eklenecek</div> </td> </tr> <tr> <td> <div id="MRS-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div> </td> </tr> <tr> <td width="193" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png"> <div class="MRS-Baslik">Başlık Eklenecek</div> </td> </tr> <tr> <td> <div id="MRS-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek </a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div> </td> </tr> <tr> <td width="193" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png"> <div class="MRS-Baslik">Reklam Alanı</div> </td> </tr> <tr> <td align="center"> <div id="Reklamlar"><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" alt="" /></a><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" alt="" /></a><br /> <a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" alt="" /></a><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam.png" alt="" /><br /> </a></div> </td> </tr> <tr> <td width="193" height="35" background="https://img.webme.com/pic/c/creative-blog/m-r-s-menu-baslik.png"> <div class="MRS-Baslik">Haftanın Videosu</div> </td> </tr> <tr> <td align="center"> <div id="Video"><iframe height="150" src="http://www.youtube.com/embed/WgKExOneYqs" frameborder="0" width="170" allowfullscreen=""></iframe></div> </td> </tr> </tbody> </table> </td> <td width="51"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td width="960" height="151" background="https://img.webme.com/pic/c/creative-blog/m-r-s_04.png"> <div id="Reklam"><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img border="0" alt="" src="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam-buyuk.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam-buyuk.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/m-r-s-reklam-buyuk.png" /></a></div> <a href="http://creative-blog.tr.gg/" _fcksavedurl="http://creative-blog.tr.gg/" _fcksavedurl="http://creative-blog.tr.gg/"> <div id="CB"> </div> </a></td> </tr> </tbody> </table>

CSS KODU : 

<br /> <style type="text/css"> 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;} table{margin-right:auto;margin-left:auto;} #webme_footer_textlink_dont_hide { background: rgba(83, 89, 125, 0.5); border: 2px solid rgba(83, 89, 125, .5); border-radius: 10px; /* Standart */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome */ text-align: center; margin-top:15px; margin-bottom:15px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:16px; text-decoration:none; } body { background-image: url(https://img.webme.com/pic/c/creative-blog/m-r-s-background.gif); text-align: center; margin:0px; padding:0px; } a { text-decoration:none; } a:hover { text-decoration:none; } #MRS-Radyo { position: relative; top: 172px; width: 200px; height: 20px; left: 100px; } #Ekstra-Yazi1 { width: 200px; position: relative; height: 45px; top: 224px; text-align: center; font-family: Verdana; font-size: 13px; color: #B1B1BD; padding-top: 15px; left: 74px; } #Ekstra-Yazi2 { width: 200px; position: relative; height: 45px; top: 202px; left: 89px; text-align: center; font-family: Verdana; font-size: 13px; color: #B1B1BD; padding-top: 15px; } #Sosyal-Paylas1 { height: 60px; float: right; width: 70px; position: relative; right: 3px; top: 80px; } #Sosyal-Paylas2 { height: 60px; position: relative; float: right; width: 70px; top: 75px; right: 7px; } #Sosyal-Paylas3 { height: 60px; position: relative; float: right; width: 70px; top: 70px; right: 10px; } #Icerik { text-align: center; font-family: Verdana; margin-top: 10px; margin-bottom: 10px; padding-top: 7px; padding-bottom: 7px; color: #FFF; } .MRS-Baslik { font-family: Verdana; font-size: 16px; text-decoration: underline; text-align: center; color: #FFF; } #MRS-Menu ul { list-style-type: none; padding: 0px; text-align: center; width: 193px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } #MRS-Menu ul li { border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #3C3B5A; border-top-width: thin; border-top-style: solid; border-top-color: #3C3B5A; margin-bottom: 3px; } #MRS-Menu ul li a { display: block; color: #FFF; text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-size: 15px; padding-top: 3px; padding-bottom: 3px; } #MRS-Menu ul li a:Hover { background-color: #3C3B5A; /* Firefox */ -moz-transition: all 1s ease-in; /* WebKit */ -webkit-transition: all 1s ease-in; /* Opera */ -o-transition: all 1s ease-in; /* Standard */ transition: all 1s ease-in; } #Reklamlar { margin-top: 5px; margin-bottom: 5px; } #Reklamlar a img { margin: 2px; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; opacity: 0.6; } #Reklamlar a img:hover { -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; opacity: 1; } #Reklam { height: 60px; width: 468px; position: relative; left: 70px; bottom: -22px; } #Reklam a img { -webkit-transition: -webkit-transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } #Reklam a img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } #MRS-Blog { margin-top: 10px; margin-bottom: 20px; width: 250px; border: medium solid #3C3B5A; border-radius: 10px; /* Standart */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome*/ margin-right: 10px; margin-left: 10px; } #MRS-Basliklar { width: 220px; margin-bottom: 10px; border-right-width: medium; border-left-width: medium; border-right-style: solid; border-left-style: solid; border-right-color: #3C3B5A; border-left-color: #3C3B5A; border-bottom-width: medium; border-bottom-style: solid; border-bottom-color: #3C3B5A; border-radius: 0px 0px 10px 10px; /* Standart */ -moz-border-radius: 0px 0px 10px 10px; /* Firefox */ -webkit-border-radius: 0px 0px 10px 10px; /* Chrome*/ margin-right: 15px; margin-left: 13px; text-align: center; color: #C0DFFF; font-size: 15px; background-color: #3C3B5A; } #MRS-Blog #MRS-Resim { height: 100px; width: 250px; position: relative; margin-right: 0px; margin-left: 0px; text-align: center; } #MRS-Blog #MRS-Icerik { position: relative; width: 250px; font-size: 13px; margin-top: 15px; text-align: center; height: 90px; } #MRS-Blog #MRS-Devam { position: relative; width: 250px; margin-top: 20px; margin-bottom: 5px; text-align: center; } #MRS-Blog #MRS-Devam a { font-size: 14px; text-decoration: none; color: #C0DFFF; border: thin solid #3C3B5A; background-color: #3C3B5A; border-radius: 10px; /* Standart */ -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome*/ text-align: center; padding-right: 5px; padding-left: 5px; padding-top: 2px; padding-bottom: 2px; } #MRS-Blog #MRS-Devam a:hover { color: #3C3B5A; background-color: #C0DFFF; /* Firefox */ -moz-transition: all 1s ease-in; /* WebKit */ -webkit-transition: all 1s ease-in; /* Opera */ -o-transition: all 1s ease-in; /* Standard */ transition: all 1s ease-in; border: thin solid #C0DFFF; } #Video { padding-top: 2px; padding-bottom: 2px; margin-top: 3px; margin-bottom: 3px; } #CB { position: relative; left: 750px; height: 70px; width: 130px; bottom: 41px; } </style>

ANA SAYFA KODU : 

<table width="530" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <div id="MRS-Blog"> <div id="MRS-Basliklar">Buraya Başlık</div> <div id="MRS-Resim"><img border="1" src="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" alt="Animated avatar 100x100" /></div> <div id="MRS-Icerik">Buraya blog içeriği gelecek...</div> <div id="MRS-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> </td> <td> <div id="MRS-Blog"> <div id="MRS-Basliklar">Buraya Başlık</div> <div id="MRS-Resim"><img border="1" src="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" alt="Animated avatar 100x100" /></div> <div id="MRS-Icerik">Buraya blog içeriği gelecek...</div> <div id="MRS-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> <div id="MRS-Blog"> <div id="MRS-Basliklar">Buraya Başlık</div> <div id="MRS-Resim"><img border="1" src="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" alt="Animated avatar 100x100" /></div> <div id="MRS-Icerik">Buraya blog içeriği gelecek...</div> <div id="MRS-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> </td> <td> <div id="MRS-Blog"> <div id="MRS-Basliklar">Buraya Başlık</div> <div id="MRS-Resim"><img border="1" src="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" _fcksavedurl="http://www.animated-gifs.eu/avatars-100x100-horror/0039.gif" alt="Animated avatar 100x100" /></div> <div id="MRS-Icerik">Buraya blog içeriği gelecek...</div> <div id="MRS-Devam"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Devamını Gör...</a></div> </div> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>

Kaynak : Creative-Blog