Evet Arkadaşlar Şuana Kadar ICEBLUE ve RED Tasarımlar Nasıl Yapılır, Resimlerle Anlattık.. Şimdi Sıra Geldi BUTTERFLY Tasarımı Yapmaya..
Resimli Anlatımımız...
Resimdeki Açıklamalar...ArkaPlan URLsi Bölümü => Bu bölümde Arkaplanımızın Resim URLsi Yer Almaktadır.. Ben Resimde Kolay Farkedilmesi İçin Kırmızı Olarak Belirledim.. Siz İstediğiniz Rengi Koyabilir, İsterseniz Resim de Koyabilirsiniz..
Navigasyon Buton URLsi Bölümü ==> Bu Bölümde İse Menu Elemanlarımızın Bulunduğu Yerin Üstündeki "Navigasyon" , "Menu" vs. Yazan Yerin butonlu Hali Bulunmaktadır... Ben Resimde Mustafa Kemal ****** Resmi Bulunan Bir buton Yerleştirdim.. Siz Tercihinize Göre İstediğinizi Yerleştirebilirsiniz...
Menu Sol Taraf Çizgisi URLsi Bölümü==> Bu Bölümde Menumuzun Sol Tarafında Bulunan Çizgi Halindeki Çubuğumuz Bulunmaktadır... Resimde Yeşil Olarak Gördüğünüz Yerdir... Siz Bunu Yapacağınız Tasarıma göre Renklendirebilirsiniz...
Menu Sağ Taraf Çizgisi URLsi Bölümü ==> Sol Taraf İle Aynı İşlevdedir... Resimde Kolay Farkedilmesi İçin Mavi Olarak Belirledim... Siz Yine Dilediğiniz Gibi Renklendirmesini Yapabilirsiniz...
Menu Alt Taraf Çizgisi URLsi Bölümü ==> Sol ve Sağ Taraf İle Aynı İşlevi Görmektedir..Tek Farkı Altta Bulunması ve Yatay Şekilde Görevlendirilmiş Olmasıdır... Resimde Mor Olarak Belirlediğim Yerdir.. Yine Dilediğiniz Gibi Rengini Değiştirebilirsiniz...
Buton URLsi Bölümü ==> Bu Bölümde Menu Elemanlarımızın Bulunduğu Butonlar Yer Almaktadır.. Resimde Gri Olarak Belirledim.. Sizler de Herhangi bir butonu alıp Boyutlarına Uygun Bir Şekilde Kodda Gerekli Yere Yerleştirebilirsiniz...
Sağ Kutu Sol Taraf Çizgisi URLsi ==> Bu Bölümde İse Sağ Kutucuklarımızın Sol Taraflarında bulunan Çizgi Halinde Çubuklar Bulunmaktadır... Resimde Açık Mavi Olarak Belirlediğim Yerdir.. Siz Dilediğiniz Gibi Değiştirebilirsiniz...
Sağ Kutu Sağ Taraf Çizgisi URLsi ==> bu Bölümde İse Bulunna Çizgi Sol Tarafta Bulunan Çizgi İle Aynı İşlevi Görmektedir.. Tek Farkı Sağ Tarafta Bulunmaktadır... Ben Resimde Siyah Olarak Belirledim.. İstediğiniz Gibi Değiştirebilirsiniz...
Sağ Kutu Alt Taraf Çizgisi URLsi ==> BU Bölümde İse Sağ Kutucukların Altında bulunan Çizgi Halindeki Yatay Çubuk Bulunmaktadır.. Resimde Sarı Olarak Belirlediğim Yerdir.. Yine Dilediğiniz Gibi Değiştirebilirsiniz...
Sağ Kutu Başlık URLsi Bölümü ==> Bu Bölümde İse Sağ Taraftaki Kutucuklarımızın Bulunduğu Yerin Başlık Yazısının Olduğu Yerin ArkaPlanı Bulunmaktadır... Resimde Koyu Yeşil Olarak Belirledim.. Siz dilerseniz Buton da Koyabilirsiniz.. Tercih Ettiğiniz Butonun URLsini Kodda Yerine Yerleştirmeniz Yeterli Olacaktır..
Orta Sayfa Başlık URLsi Bölümü ==> bu Bölümde İse Sitemizde Yayınladığımız İçinde İçeriklerimizin Bulunduğu Yerin Başlık Yeri Bulunmaktadır...Ben Resimde Açık Mavi Olarak Belirledin.. Siz Dilediğiniz Rengi Yapabilirsiniz.. Dilerseniz Boyutlara Uygun Resim Bile Koyabilirsiniz...Sadece Boyutları Ayarlayın ve URLsini Kodda Gerekli Yere Yerleştirin Yeter...
Sayfa Yer İmi Başlık URLsi Bölümü ==> Bu Bölümde Sitede Nerede Olduğumuzu Gösteren Yerin Arkaplan Resmi, Butonu vs. Yer Almaktadır.. Ben Resimde Yeşil bir Butonun Boyutlarını Değiştirerek Gerekli Yere Yerleştirdim... Siz de Dilerseniz Bir Resim, Sadece Renk, Buton Hatta GIF Bile Koyabilirsiniz.. Tabii Boyutlara Uygun Olarak..
Başlık Resmi URLsi Bölümü ==> bu bölümde İse Başlık Resmimiz Bulunbaktadır.. Ben Resimde Mavi Olarak Belirledim.. Siz Dilerseniz Rengini Değiştirin, Dilerseniz Resim, Dilerseniz Banner Koyabilirsiniz.. Tamamen Tercihnize Kalmış.. Boyutları Uydurun, Kodda Gerekli Yere URLsini Yerleştirin Yeter..
Evet Arkadaşlar İşte Kendinize Göre Ayarlamanız Gereken Kod : <body bgcolor="#000000" style="margin: 0 0 0 0;" background="
------------------ARKA PLAN URLSİ--------------">
<style type="text/css">
<!--
td.headline2{visibility:hidden;width:0px;}
td.headline_bar_left{visibility:hidden;width:0px;}
td.headline_bar_right{visibility:hidden;width:0px;}
td.headline_bar_middle{visibility:hidden;width:0px;}
td.edit_nav_headline{background-image: url(
--------------------NAVİGASYON BUTON URLSİ-------------------);background-repeat:no-repeat;}
td.nav_bar_left{background-image: url(
---------------MUNU SOL TARAF ÇİZGİSİ URLSİ----------------);background-repeat:no-repeat;}
td.nav_bar_right{background-image: url(
---------------MENU SAĞ TARAF ÇİZGİSİ URLSİ---------------);background-repeat:no-repeat;}
td.nav_bar_bottom{background-image: url(
---------------MENU ALT TARAF ÇİZGİSİ URLSİ----------------);background-repeat:no-repeat;}
td.edit_nav_main{background-image:url(
-------------------BUTON URLSİ------------------);}
td.headline3{background-image: url()
);background-repeat:no-repeat;}
td.rb_bar_left{background-image: url(
-----------------SAĞ KUTU SOL TARAF ÇİZGİSİ URLSİ----------------);background-repeat:no-repeat;}
td.rb_bar_right{background-image: url(
-----------------SAĞ KUTU SAĞ TARAF ÇİZGİSİ URLSİ--------------);background-repeat:no-repeat;}
td.rb_bar_bottom{background-image: url(
------------------SAĞ KUTU ALT TARAF ÇİZGİSİ URLSİ---------------);background-repeat:no-repeat;}
td.edit_rechts_headline{background-image: url(
--------------SAĞ KUTU BAŞLIK URLSİ----------------);background-repeat:no-repeat;}
td.edit_content_headline3{heigth: 60px;background-image: url(
---------------ORTA SAYFA BAŞLIK URLSİ-----------------);background-repeat:repeat;}
td.edit_content_headline{background-image: url(
--------------------SAYFA YER İMİ BAŞLIK URLSİ--------------------);background-repeat:no-repeat;}
-->
</style>
<style type="text/css">
<!--
td.edit_header{background-image: url(
------------------BAŞLIK RESMİ URLSİ-----------------);
-->
</style>
Bu Kodda Yapmanız Gereken ;
Sadece
---------------------BELİRTTİĞİM YER------------------- Kısımlarını silerek Kendinize Ait URL leri Yerleştirmektir...
Gerekli Düzenlemeleri Yaptıktan Sonra Kodu Sitenize Eklemek İçin ;
==>Bedava-Sitem Login
==>Sitene Giriş
==>Tasarım Ayarları
==>Gelişmiş Ayarlar
==>Tasarımın Üstündeki Yazı Adlı Kutucuğa Yerleştiriniz..
==>Kaydet meyi Unutmayınız...
Yorumlarınızı Esirgemeyiniz...
Saygılarımla...
Anasayfa 
Konu: Butterfly tasarım nasıl yapılır 
