Css & Grafik Paylaşımlar

<img src="http://b1208.hizliresim.com/10/u/c99kq.png" width="500" height="500" border="0" usemap="#Map" alt="" /> <map name="Map">
<area shape="rect" coords="93,410,244,457" href="http://www.facebook.com/ahmet.tulqar" />
<area shape="rect" coords="264,407,419,457" href="http://www.facebook.com/NicqqYoqq" />
<area shape="rect" coords="85,54,139,70" href="/inde.htm" />
<area shape="rect" coords="147,50,183,73" href="/iletisim.htm" />
<area shape="rect" coords="193,52,233,73" href="/hakkmz.htm" />
<area shape="rect" coords="298,49,368,72" href="/defter.htm" />
<area shape="rect" coords="374,47,429,74" href="/tasarim.htm" /> </map><!---0YUNCAGİM.TR.GG. kod başlangıcı---> <style type="text/css"> .nackvision.com {Background code} body {background-image: url(http://2.bp.blogspot.com/_ubwIhqPcR6M/TL5e8FcjPeI/AAAAAAAABE4/0HgGHvhjs3s/s1600/royalebg.png);} </style> <!---0YUNCAGİM.TR.GG. kod bitişi--->

<table width="725" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="31" background="http://img.webme.com/pic/t/teablog/anasayfau.gif" scope="col">Buraya başlık</td>
  </tr>
  <tr>
    <td height="39" align="left" valign="top" background="http://img.webme.com/pic/t/teablog/anasayfai.gif" scope="col">Buraya içerik ama Fazla uzun olmasın katlanma hatası yaşayabilirsiniz</td>
  </tr>
  <tr>
    <td height="26" background="http://img.webme.com/pic/t/teablog/anasayfaa.gif" scope="col"><table width="725" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="16" height="23">&nbsp;</td>
        <td width="258">Tarih:</td>
        <td width="305">Yazar: </td>
        <td width="134"><a href="Buraya Url">Yazinin Devami =&gt;</a></td>
        <td width="12">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
</table>

<style>
#uye-ol_01 {
   width: 216px;
   height: 120px;
   background-image: url(http://img.webme.com/pic/a/aykut-servis/uye-ol_01.png);
}
#uye-ol_02 {
width: 216px;
height: 89px;
}
</style>
<div id="uye-ol_01"></div>
<div id="uye-ol_02">
<img src="http://img.webme.com/pic/a/aykut-servis/uye-ol_02.png" width="216" height="89" border="0" usemap="#Map">
  <map name="Map">
    <area shape="rect" coords="81,17,200,73" href="url buraya gelcek ustaaa">
  </map>
</div>

http://img.webme.com/pic/c/ciz-dizayn/mavi_reklam_alani1.png

<link rel="stylesheet" type="text/css" href="http://spetools.de/css/1192.css" />

ul#m-soc2{ 
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}

ul#m-soc2 li{
list-style: none;margin: 7px;padding: 0;float:left;border: none;}

ul#m-soc2 li a{
background: url(https://lh4.googleusercontent.com/-n5zj4LjXnmM/T8zwsOI_NhI/AAAAAAAADIg/tD-DgPUODu4/s132/sosyal-butonlar.png) no-repeat 0 0;
margin:0;padding:0;display: block;position:relative;
width: 33px;
height: 33px;
overflow: visible;
}

ul#m-soc2 li a.twitter{
background-position: 0 0;
}
ul#m-soc2 li a.facebook{
background-position: -33px 0;
}
ul#m-soc2 li a.google{
background-position: -66px 0;
}
ul#m-soc2 li a.rss{
background-position: -99px 0;
}
ul#m-soc2 li a.twitter:hover{
background-position: 0 -33px;
}
ul#m-soc2 li a.facebook:hover{
background-position: -33px -33px;
}
ul#m-soc2 li a.google:hover {
background-position:-66px -33px;
}
ul#m-soc2 li a.rss:hover{
background-position:-99px -33px;
}
ul#m-soc2 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;}

ul#m-soc2 li a:hover{text-decoration:none}

ul#m-soc2 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<ul id="m-soc2">
    <li><a class="twitter" href="http://twitter.com/dalli53"><span>Twitter</span></a></li>
    <li><a class="facebook" href="http://facebook.com/ohalan.tv"><span>Facebook</span></a></li>
    <li><a class="google" href="https://plus.google.com/"><span>Google+</span></a></li>
    <li><a class="rss" href="http://feeds.feedburner.com/gonez"><span>RSS</span></a></li>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1",
 orientation: 'h',
 classname: 'ddsmoothmenu',
 
 contentsource: "markup"
})
</script>

<style>
.ddsmoothmenu {
    width: 100%;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
    vertical-align: middle;
    height: 33px;
    font-family: Verdana;
    font-size: 13px;
    font-weight: bold;
}

.ddsmoothmenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
}

.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #666666;
    text-decoration: none;
    background-image: url(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/s1600/menu-bg.png);
}

* html .ddsmoothmenu ul li a {
    display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    background: black;
    color: white;
}

.ddsmoothmenu ul li a:hover {
    background: black;
    color: white;
}

.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
}

.ddsmoothmenu ul li ul li ul {
    top: 0;
}

.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

* html .ddsmoothmenu {
    height: 1%;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 6px;
    right: 5px;
}

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
}

.toplevelshadow {
    opacity: 0.8;
}
</style> 

<div id="smoothmenu1" class="ddsmoothmenu">
     <ul>
        <li>
            <a href="mhmet-simsek.tr.gg">Ana Sayfa</a>
        </li>
        <li>
            <a href="#">Dosya 0</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 1.1</a>
                </li>
                <li>
                    <a href="#">Alt Dosya 1.2</a>
                </li>
<li><a href='#'>Alt Dosya 1.3</a>
<ul class='children'>
<li><a href='#'>Alt Dosya 1.3.1</a></li>
<li><a href='#'>Alt Dosya 1.3.2</a></li>
<li><a href='#'>Alt Dosya 1.3.3</a>
<ul class='children'>
<li><a href='#'>Alt Dosya 1.3.3-1</a>
<li><a href='#'>Alt Dosya 1.3.3-2</a>
<li><a href='#'>Alt Dosya 1.3.3-3</a>
</li>
</li></li></ul>
</li>
</ul>
</li>
            </ul>
        </li>
        <li>
            <a href="#">Dosya 1</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 1.1</a>
                </li>
                <li>
                    <a href="#">Alt Dosya 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="www.mhmet-simsek.tr.gg">Mhmet-Simsek</a>
        </li>
        <li>
            <a href="#">Dosya 2</a>
            <ul>
                <li>
                    <a href="#">Alt Dosya 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.mhmet-simsek.tr.gg/">Sitene Ekle</a>
        </li>
    </ul>
    <br style="clear: left" />
    <br style="clear: left" />
</div>

#Blog {
   width: 600px;
}
#Ust {
   background-color: #099;
   border-radius: 10px;
   width: 595px;
   padding-left: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: #FFF;
   height: 30px;
   padding-top: 5px;
   font-size: 24px;
}
#Bilgi {
   width: 545px;
   margin-right: auto;
   margin-left: auto;
   background-color: #333;
   margin-top: 0px;
   border-radius: 0px 0px 10px 10px;
   padding-left: 5px;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   color: #FFF;
   height: 20px;
   padding-bottom: 5px;
}
#İcerik {
   background-color: #CCC;
   width: 580px;
   margin-top: 7px;
   margin-right: auto;
   margin-left: auto;
   border-radius: 10px;
   font-family: Georgia, "Times New Roman", Times, serif;
   padding: 4px;
}
#Blog #İcerik p img {
   padding-left: 10px;
}
#Devami {
   background-color: #CCC;
   height: 25px;
   width: 92px;
   float: right;
   margin-right: 15px;
   border-radius: 0px 0px 10px 10px;
   color: #099;
   font-weight: normal;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 14px;
   padding-top: 7px;
   padding-left: 7px;
}

<div id="Blog">
  <div id="Ust">Hello Word!</div>
  <div id="Bilgi">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>Gönderen: Ben</td>
        <td>Tarih: Bugün</td>
        <td>Kategori: Hayat</td>
      </tr>
    </table>
  </div>
  <div id="İcerik">
    <p><img src="http://1.bp.blogspot.com/-RsVAipY0r8w/UTnqW_PwmRI/AAAAAAAAAP4/hYZ-TnOKh7U/s1600/wheel.jpg" alt="" width="558" height="149"/></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium, ante vel hendrerit imperdiet, nunc ipsum dapibus metus, gravida varius metus mauris et nisi. Quisque in viverra risus. Duis ut adipiscing ipsum. Nullam sagittis vel nulla vel tempor.</p>
  </div>
  <div id="Devami">Devamı &gt;</div>
</div>