أضافة فاصل بين المواضيع

بسم الله الرحمن الرحيم

موضوع اليوم عن كيفية أضافة فاصل بين المواضيع

الخطوة الاولى:

أدخل على

Dashboard >> Layout >> Edit html

أبحث عن

.post

سوف تجد 

.post {
margin: 0 0 40px 0;
width: 90%
}

نحن نحاول تغير الكود بين القوصين

بإضافة هذا الكود بدلا ما بداخل الاقواص 

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em; 

مع تغير separator-image-url إلى رابط الصورة 

وإذا وجدت الصورة غير مضبوطة

قمب تغير 2.5 إلى اكبر مثل 3.5 او  4.5

وسيكون الشكل النهائى هكذا

.post{margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
} 

================================

بعض الصور و روابطها

http://4.bp.blogspot.com/_JwD5r652h00

/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif

================

 http://3.bp.blogspot.com/

_JwD5r652h00/SuttjcXA_4I/AAAAAAAAANo/w2BZApq6Jn4/s1600/bar54.gif

=================== 

http://4.bp.blogspot.com/

_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif

=================

 http://1.bp.blogspot.com/

_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif

================

 http://4.bp.blogspot.com/

_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif

==============

 http://2.bp.blogspot.com/

_JwD5r652h00/Sutu7TjXFHI/AAAAAAAAAOQ/IQlWtZrB5SI/s1600/dividers_96.gif

=============

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizrnIGQRvTV8DRgMiw87IeEWcnaTheQSd5O8E2rCj4LPUL9ItjBbxtUfjzcw96uIqBEJt_ePV3GqQrBT9COVz8L2zpqJ18v36g8dRLAkLPiUDlR6JNeH7JH9BmTkteEgrT7TXFSxAqRAJ/s1600/chain.gif

============

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvILleUyW_ZXh80kDVriuVhgtrt0ggN-EzYOa8Hd0CVOScD8xItxgQz-df7RuyIMDr71Dul-_382Vv9uylUrhRs7IVemuMjvZqIO5cRwHpngxnzwa81cNi2O3NnvnbnU-9cBgns-tPA1R/s1600/stonebar.gif

===========

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHt-vF-ytWep29h0P-Bf33Mjg1ekAgrQt3W5IFjFgUk6Xl9KfxbC1Y74GngW820h476fIr-swfHmhrsXD523PrEdfAwuc4sFf24mP4nYGsy7sD_iWha4sqyAgW10TpxOJhTNABh_kdB5eH/s1600/resfiles_sdfp.gif

===========

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqUTrj_LzWBUT2owxGA2RKEsn36aSsyjBlbn7s5m7X-VHmb1Vc6rzq_1fBLe2Toeuz-v6Nm1k75sEZ0RGbQYux5vlcWqyrnLgaKs5CG-U9BHu5DH86L-Kxpflv1q3COgWjbfOdgY_sJAo/s1600/resfileszcp.gif

===========

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZ2ecDYJ0hQQ8HqRTW4QoKBpb7fDimTL89ccgUi2h1T6emMtUTeoZsO-QqQBarlcjERuWDBCIyuLT8T164xqs0lmejpdbA-FIfKXdTWRluQ_GMs0M08QAHxt2p3R1kPwHG8zGXwADc1MO/s1600/resfiles_output.php.gif

==========

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYDd1IA9XTKWk-mfbYZT4FMd5Q_us5VnZb09EUIhU4yeb8OZc-1tQm6XBkUlcyMFvoq_-SL_dfvJozBKJr91F4thRvkT1ixMu2_Sxb5_IaFXP_aqvQdkRBX5mGP592lENnzbr4FwaweiRs/s1600/irish-border4.gif

================================================

بالتوفيق  

Posted in: تطوير المدونات