FBML MAVİ KUTU KODU

Aşağıdaki vermiş olduğum kodları Facebook fan sayfalarınıza fbml kodu olarak ekleyerek sayfalarınıza şık kutular oluşturabilirsiniz.Hazır bir kod olduğu için fazla anlatmayacağım.Ama yinede anlamadığınız yerleri yada sormak istediklerinizi bu konu altında yorum yoluyla sorabilirsiniz.

Fbml Mavi Kutu Kodları ;

<style type="text/css"> /*****************************************************/ /*URL: http://fbml-destek.blogspot.com */ /*URL: http://www.facebook.com/fbml.kodlari.destek */ /*****************************************************/ th.tablo_baslik { width: 100%; padding: 5px 5px 5px 5px; color: white; font-size: 13px; font-weight: bold; text-align:center; } td.tablo_icerik { width: 100%; padding: 1em; vertical-align: top; } div.tablo_rengi { background-color: #92B3E5; } div.baslik_arkaplan_rengi { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVJNY1TT8Axign-ISgueZkQ6k0dxjoKig6WM55m_lV7mFsYq9MOQft65IKXWtrh6HYk37NpuVumcEtHGqydN8nYriHgsaiP_owGXOf4cXHyMtMuKSg8O7YauApomMt5zEn9my7hZzeTLdc/s1600/mavi_baslik.jpg); background-repeat: repeat-x; background-position: top; } div.ust_cizgi { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8pxJ4F2ZQbtDENAQv_WvcUN08dJjetZ41ovu9KgTltnsYpuvcpxYO_xtygYQTaF_RinbQ9IURAEJ_GlNKactWH2Skprx0lXbf6BFZ4dV57o0p5CFSMgI6ADtis82_yBmfYxg6JoD1HB9O/s1600/mavi_ust_cizgi.jpg); background-repeat: repeat-x; background-position: bottom; } div.sol_cizgi { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYvjfNgJrDw1FnIOnds208qSqvE4ZAbHCMK51kkLngfWpBvucK4CU0JFLLxD-PAXnNNQzC6NtU04Xl2fUbkG3m62JEqBpbVmx9hQUVjKQYVaCMYXiq9zN71FcWjlemVqqReRbbWTPmIDU/s1600/mavi_sol_cizgi.jpg); background-repeat: repeat-y; background-position: left; } div.sag_cizgi { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZ7SXwXSenRbA4RiSjEMjQ9heXQ4NPN720zxf-Zc4pFqILIZSDehswMIKy0GPqXAlTCQ_xDBFRjMMoK5IHccJvZM4lC2amwTUk2FplXfWYsIY0w8hWOvjC6rY4JNO6TQVCJJLTK65KcgL/s1600/mavi_sag_cizgi.jpg); background-repeat: repeat-y; background-position: right; } div.ust_sol_kose { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1K5fct2wNdp1gewxpswkTgi5E9hh4GUC6Ysnlx8s4CNkrgUFg3iYueknhJLIEGrFcJIAKFbpNRBH61_M3uQGwB7K9tLQEhht7SelnlZoshIbRdYlORfkNBq5Xo7LcW3mCIuuG_GlJsASO/s1600/mavi_ust_sol_kose.jpg); background-repeat: no-repeat; background-position: top left; } div.ust_sag_kose { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqrjDN1o6wzWLciJLQowAhmeMdNA7geIllNG9bQkfI77qUkSUMQpsdEW5uUI1fywbw0OC6mxurKbAn0reRCEyABWtEG5a5_31Ynl4MH-OEHjP7Ml5G6CZwwCZFhW8UvEBLLRqWz6dhKqVw/s1600/mavi_ust_sag_kose.jpg); background-repeat: no-repeat; background-position: top right; } div.alt_sol_kose { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcsJUpXiVg11m57YSo1nUGNUbMwAcUqdQo9UriSLXekTFizDjVLeODiltcfobhDzNN3rea_1IddsSGSaYGwiUvQq9DuqKabQqMo_D5dsUUvqWyIxYXe2tJEEgvj7tLFLsrvpUavpO1aGr/s1600/mavi_alt_sol_kose.jpg); background-repeat: no-repeat; background-position: bottom left; } div.alt_sag_kose { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlovP07XKH2vrp1dOlK0-gG-LSwtTGw61Ngzw6bQvT7EQ0UwTyNe661b6MIMzlYKFzDCYG-TDup9fnFHxVNoEQjDE9yPlQVIF9EUJ2CFm6V_SzfZC3QmU-1nadczHcM1WLb32kVUOY7HPB/s1600/mavi_alt_sag_kose.jpg); background-repeat: no-repeat; background-position: bottom right; } div.sari_yildizlar{ background-color: #92B3E5; background-image: url("http://img265.imageshack.us/img265/5111/sariyildizlar.gif"); } div.ucan_kalpler{ background-color: #92B3E5; background-image: url("http://img13.imageshack.us/img13/3166/ucankalpler.gif"); } div.renkli_yildizlar{ background-color: #92B3E5; background-image: url("http://img833.imageshack.us/img833/5038/renkliyildizlar.gif"); } </style> <!-- Birinci Kutu --> <div style="width: 190px"> <div class="tablo_rengi"> <div class="sari_yildizlar"> <div class="baslik_arkaplan_rengi"> <div class="ust_cizgi"> <div class="sol_cizgi"> <div class="sag_cizgi"> <div class="ust_sol_kose"> <div class="ust_sag_kose"> <div class="alt_sol_kose"> <div class="alt_sag_kose"> <table style="width: 100%"> <tr> <th class="tablo_baslik"> 1. KUTU_BAŞLIĞI</th> </tr> <tr> <td class="tablo_icerik" colspan="2"> <br> <center> Buraya yazı, resim veya başka bir içerik ekleyebilirsiniz. Siz aynı kutu içerisine içerik ekledikçe kutunun boyutu aşağı doğru otomatik olarak uzar. </center> <br> </td> </tr> </table> </div></div></div></div></div></div></div></div></div></div></div> <br> <!-- İkinci Kutu --> <div style="width: 190px"> <div class="tablo_rengi"> <div class="ucan_kalpler"> <div class="baslik_arkaplan_rengi"> <div class="ust_cizgi"> <div class="sol_cizgi"> <div class="sag_cizgi"> <div class="ust_sol_kose"> <div class="ust_sag_kose"> <div class="alt_sol_kose"> <div class="alt_sag_kose"> <table style="width: 100%"> <tr> <th class="tablo_baslik"> 2. KUTU_BAŞLIĞI</th> </tr> <tr> <td class="tablo_icerik" colspan="2"> <br> <center> 2'nci kutunun içeriği </center> <br> </td> </tr> </table> </div></div></div></div></div></div></div></div></div></div></div> <br> <!-- Üçüncü Kutu --> <div style="width: 190px"> <div class="tablo_rengi"> <div class="renkli_yildizlar"> <div class="baslik_arkaplan_rengi"> <div class="ust_cizgi"> <div class="sol_cizgi"> <div class="sag_cizgi"> <div class="ust_sol_kose"> <div class="ust_sag_kose"> <div class="alt_sol_kose"> <div class="alt_sag_kose"> <table style="width: 100%"> <tr> <th class="tablo_baslik"> 3. KUTU_BAŞLIĞI</th> </tr> <tr> <td class="tablo_icerik" colspan="2"> <br> <center> 3'ncü kutunun içeriği </center> <br> </td> </tr> </table> </div></div></div></div></div></div></div></div></div></div></div> <br>

Örnek Görüntüsü ;