مرحبًا يا جماعة، في المقالة دي هاشرح لك إزاي تستخدم كود HTML/CSS لتزيين موقعك على بلوجر وتخليه أكتر جاذبية واحترافية. هتعرف إزاي تعمل قائمة أيقونات ارتباط احترافية وسهلة التخصيص، وإزاي تضيف كود HTML/CSS المتكامل، وتحسن واجهة المدونة بتاعتك.
المقالة هتقدم الكود اللي تحت ده، واللي بيساعدك تعمل قائمة من الأيقونات المرتبطة بموضوعات مختلفة زي بلوجر، أو Facebook، أو Templates، أو Life:
كيف يعمل
- CSS: يحدد قسم النمط تأثيرات العرض والتحويم لتسليط الضوء على الحدود عندما يحوم المستخدم فوق الرمز.
- HTML: إنشاء قائمة من الروابط التي تقودك إلى مواضيع مختلفة.
- دليل التكامل انسخ الكود: انسخ الكود أعلاه والصقه في المكان المطلوب في موقع بلوجر الخاص بك.
- تخصيص الروابط: قم بتغيير عنوان URL والصورة وفقًا للمحتوى الخاص بك.
- النشر: حفظ التغييرات والتحقق من العرض على واجهة Blogspot.
<div class="atnlogo" style="text-align: justify;">
<a href="https://www.aweywashk.xyz/search/label/%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1t" title="اجمل اضافات بلوجر"><img class="noborder" height="100" src="http://i.imgur.com/XOaphwp.png" width="100" /></a>
<a href="#" title="اخبار ونصائح الفيسبوك"><img class="noborder" height="100" src="http://i.imgur.com/wBRYSoP.png" width="100" /></a>
<a href="https://www.aweywashk.xyz/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1" title="مستودع قوالب بلوجر الجميلة"><img class="noborder" height="100" src="http://i.imgur.com/JCejr36.jpg" width="100" /></a>
<a href="https://www.xn--80ajpb0bc.com/search/label/%D8%AD%D9%88%D9%84%20%D8%A7%D9%84%D8%B9%D8%A7%D9%84%D9%85" title="الأخبار والحياة"><img class="noborder" height="100" src="http://i.imgur.com/VSaBUlP.jpg" width="100" /></a></div>
<style>
.atnlogo {text-align: center;}
.atnlogo img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.atnlogo img:hover {border:1px solid #43a1a0!important;}
.atnlogo img.noborder {border:0;}
</style></div>