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

مجموعه مقالات و مطالب مرتبط با بلاگر و وبلاگ نویسی و دنیای فناوری اطلاعات

دیدن مطالب وبلاگ

۱۳۸۷/۰۱/۳۱

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


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



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

.date-header {
padding-left: 20px;
padding-top: 5px;
background: url(http://3.bp.blogspot.com/_Zuzii37VUO4/Rkn-DuMBU_I/AAAAAAAABN0/CNp5q8l_KY8/s1600/time.png) center left no-repeat;
}
2) قراردادن آيکن در کنار ليبل پست يا post-label

.post-labels {

padding-left: 20px;

padding-top: 5px;

background: url(http://3.bp.blogspot.com/_Zuzii37VUO4/RfI1_yAns8I/AAAAAAAAAYI/5m8K2kkqYRw/s1600/etiqueta_naranja.gif) center left no-repeat;

}




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

.post-author {

padding-left: 20px;

padding-top: 5px;

background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/RfebZS0300I/AAAAAAAAAcw/dBZjEJ39hDE/s1600/autor.gif) center left no-repeat;

}




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

.comment-link {

padding-left: 20px;

padding-top: 5px;

background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax8I/AAAAAAAABQg/tu-ANuj9tvo/s1600/icono-comentarios.gif) center left no-repeat;

}


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

.feed-links {

padding-left: 20px;

padding-top: 5px;

background: url(http://1.bp.blogspot.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/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(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax-I/AAAAAAAABQw/GgkWpItuen4/s1600/icono-etiqueta-azul.gif) center left no-repeat;

}




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

.post-title {

padding-left: 20px;

padding-top: 5px;

background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqPZyayBI/AAAAAAAABRI/nNwfNreK6xM/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(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;

}




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

Left ---->> Right

ميباشد



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







0 نظر:

لینکهای دوستان