نحوه قراردادن آيکنها در وبلاگ

به تصاوير بالا دقت نمائيد.اين آموزش نحوه قراردادن تصاوير يا آيکنهاى دلخواه در کنار لينکها ، تاريخ و ... ميپردازد



1) قراردادن آيکن در کنار عنوان تاريخ پست يا Date-Header

.date-header {
padding-left: 20px;
padding-top: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwCrCPIrx8jzvHDDUHxWLimTmYJ13y2jfM53Ubnd5CJC3QJ1a77w6HFuI7TW-hyQXIxR6yOLbCwu4M9X492USbMbIKIMnZeGQwoQvd8qtnJR-Vp-bappRX50Guv1u2EDO3wRwBJ_-tCOo/s1600/time.png) center left no-repeat;
}

2) قراردادن آيکن در کنار ليبل پست يا post-label

.post-labels {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcDTiLHhHkW-XvKwkzmYwQGGfc3oAwiN2PpL56Xz-QD6eMwhdsOImu1YyS7HMl_VQ59Rm0ThFP56E4U0fxwmTFtU2Z5b_wvebDLqXI9cPPdnCdbcwLxzaAnw84_G62cEH8ayKDyg-yljI/s1600/etiqueta_naranja.gif) center left no-repeat;

}



3)قراردادن آيکن در کنار نويسنده پست ياpost-author

.post-author {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9ngxdhrI5MPjJUx-SEdDEMia1EQcrTCFs1qjJ9Kk6A_3OIZQsDlHd22TDFYwcTiREfS-S-3xgG40omlWmHbjYRED7JKHocHBG7D79dZguOqSrpsgH8vir0xkewEVC5m0iuwclf0C6UQ/s1600/autor.gif) center left no-repeat;

}



4)قراردادن آيکن در کنار نظرات يک پست

.comment-link {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ckr-ufgKQ0JVgyv92Stp52Oa0dPe7O-1132-TN7RmcwwbR_jGAu6cOYkbVcK_ZQ6gLgGXw3P8rVNRmXyuthN9DpXwKdENa51fxozWA9IToqIaJ4WogYyjwE5PqsiwZ2TM3clcQF-9wA/s1600/icono-comentarios.gif) center left no-repeat;

}

(5قراردان آيکن در کنار فيد يا Feed-Link

.feed-links {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWkrCZm-Yl5Z5Jn4j97RGc0iE1lkQxpEDUy_4N_aa2PPOzRf9rvTmu-ivk8rtF7IGTA63hOpPdSUy1yaI0AZl2vxMNlHbaEkcG6DDWdINE7hXJ6RM0t5qrA9a_7AZzkhFkYWCMXwPjdz0/s1600/icono-feed.gif) center left no-repeat;

}



6)قراردادن آيکن در کنار ويجگت ليبل در اسلادبار

#Label1 ul, #Label2 ul {

list-style-type:none;

}



#Label1 li, #Label2 li {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvtdkCDqcf3gVdRgEdVQpsMjaIOix2rEaaaPWGABuh5oU2KShG-uaNJaDTpTiY0o0X_0Fd1C5iFlZIB3WW9A4nQjZK0eIJiwhOOwiw0bzEuJvW4aPBDKgp4tfmXx944gTlBksN2B9HtY/s1600/icono-etiqueta-azul.gif) center left no-repeat;

}



7)قراردادن آيکن در کنار عنوان پست يا post-title

.post-title {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEhyD5U5Xpahk_zfHIDj3vizkPcKhs9P9YYSYdiLDi9pg_M3Y_6CyK3cQtSXnwyf-eiKZ-iQnwNyB8_SH4JDYU9dWzuRkfhdLwgj2tc0IpZ-ALo-8vg2EVH7b6c3HYDpFV6TZ75JnJjw/s1600/icono-documento.gif) center left no-repeat;

}



8) قراردادن آيکن در کنار لينک ليستها

#LinkList1 ul, #LinkList2 ul {

list-style-type:none;

}



#LinkList1 li, #LinkList2 li {

padding-left: 20px;

padding-top: 5px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgeM58htgTVw02Dn-ZVzNWV4s8ZC0bHqtBShd96Q72l2y-0DeqL6iF_P9MhrqYLosMr7MEJUSE-SzXNMksZyi4N6aCJfizchiEfNJq7dtC1eNlIkOhrvo-oW6NdmhWgfJfzfwva_B1K2o/s1600/icono-links.gif) center left no-repeat;

}



توجه: با توجه به قالب خودتان ، تنها تغييرى که بايد در کدهاى بالا بدهيد ، تبديل

Left ---->> Right

ميباشد



توجه: به جاى لينک آيکنهاى کدهاى بالا ميتوانيد لينک آيکن با تصوير مورد نظر خود را قرار دهيد

• منبع: Blog And Web