مـــدونـــة سمـــــــــــــــــــــــــا: اضافة فاصل بين مكونات الصفحةsama blogger

يعتبر اضافة فاصل بين المكونات ذا جمالية لمحتوى المدونة و للرسائل التي نشرت ,و العديد من المدونين يبحثون عن الحل و اليو اتيتكم به.

الخطوة 1:

اذهب الى تحرير الاش تي ام ال و التعديل تم ابحث عن

.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. / 4.5 تحديد البعد و المساحة بين الفاصل و المحتوى..

الان ضع كود الصورة في المكان المخصص لها image separator

.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;
}

الخطوة 2:

الان اليكم بعض كودات صور للفواصل اختر منها ما يناسبك و اضفها الى المكان المخصص لها في الكود السابق

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAm1GuHEigfC_CVuTmuatGOjdyupu-wTuglPUklCDQTAzLY10NhPgn3OwSeKIPUumOuAw7TYunIqMUJ-ubt6AHEUS0SGPAS_lCW0e13b2R1DPcKzLWOWaCZoFUojXitiUFxxIcsWqJwJh/s1600/barsnake.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNt4X3s-U3ALUNAnBlXSqycyeIBvWNAENlJ1QqOqVGO2h6rWlDC9o4EqOnuII9jiOYLxNaDiAm6KmswWM07QufqqzVrfHbW2YQkR5G8fn5q0Lz9b2rok85HWFSCY9zUuUAjKWuXcm6kRmT/s1600/bar54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqK_NKPIGElvNh9j3nB0pHRZqiVN7du-CvtDiPd8Cf5DGKJB3OBubkKt9y6YeF1VJCQEntdCWxmx6w3mOmblbAsp7LWrGrqR_nbV9Evo0PVErZ-gdvqr0lj7lPUnXUqlT8Du_czVSoAbKv/s1600/bar48.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicstOK5-5rH__teZw_x2-kvE21dY3031_UddjBUTeP1pkg8NdDu4uNOc95vZmKHs2qTkSkC84P5DK7XEW0wZYp-yRrW7w9sGH6yZBYPMbanOiV9ybB5N_5YYSP0XDYm6-o91o0lBFP9k6n/s1600/bar47.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFwm-piIl0hThboslUqXJabI5-J219_7rPbS1IG1lgVcjyPvwYIS7QCFmv-tTuKZH0I_UvaKrYz6bRyKa2AcqT2fM_UKnTNr5h077OzPQy7hS0WahM75Yvdff_luY9lVjYxUd1mpNCu0q2/s1600/astarl7s.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmhxKSP5aPAWRaWUazg5v46XhD4wVJy3hlT17rY8-NtDUk7J2VgK2cYRk8APj8ocwWQVGrHw3XsFoJHcCLAXqabRfE53EV-Z_NCCCWbtHOpie0ET7Oasty2C3MydhFizGFVRyxBqE5FGk/s1600/dividers_129.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbVeY-TJ4LtClgoLB7zcJyatNl1pty257zoaYHk8HGTeysOxnXVYc3XWA9PDXc5YgpN66GUaDcmJ-NfUEMKHhge6Uh8U9ezkcZiuxI_WxJC-k0pID_gQX9BMq89DmCsw78JrYf19Wl_nh/s1600/dividers_96.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-8zxxRotVc4-wQ_BCD3T2A3FQis1Nm-Rv8iTnz43ca5ttzSakUX4_sD0NQVEqzlfh3m0bgKcpb603pzBO3Sc-2_sKkil8zAR2xcishxeQm9EStSOU6ykPhi45fXPZW0Bwun4E7rJWTPT/s1600/clipart-heart-border.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc8wTba2DvfKk06T4dQr_50xoQYjIWUHmWSoovIanglXDXZT-bbWbOAwy8RThtFktMuTxw8Wbn3Izip8eoPvbDABlz9JVCmSXLvaInryNF-M9ENHy6Kfk43QitlUZjbkJESbmitjWLcZJm/s1600/chain.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV2y1j2zNt97nVq1gh4DAUmin9qEsV8FiwntjrcaxSkja5b9JUfUSnwIwvXFgV43hH-bzZgZ8AJLRBvEvH18YC5hpstjVaM3lqt2Aelf9UKyCpG-wXgxlK7E8h0RJJ3lOK1a93F5XBZ7F7/s1600/bloodrose.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBaBpAkqUKwVp9-eC-8g-ZAUCQi5vpwRHA0daVq6MSccRQGtKETITFXeM6DGV2KIxXbZM3WypCb4OjxCI4YgaZKCDo_hYcKLDtb5Oil7qdc5WeGx87KNbomAB2DSTIAchjp-_Hsy3f-Pb9/s1600/stonebar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tY5Ij0J0ZET8_UdOmz9Dddx37s8anvK_hiBn673AGwyEw6-FzSg8FALjFdn6bNOaNQgL4T-IMTi43i-_B16OKXA-AocV2uqQDzUYGANejtZhkxjcg8j_mtJoHn_5ZWIQhT-T9cm2d0wA/s1600/resfiles_sdfp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_re0xVAF4hdDBCfAxKeHU4Wu7WtqD8qt6sGQwGiuIsxsstQkFsE4C9Zv6Pd3nilRxvJO_DFWBx1qtY0PS9azthB3BvoR6fobWy7MNQicUYxOCu5jQlJ_muuJ7zvz6A9jTHbwEDYnc8wxq/s1600/resfileszcp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKdWEHEZAB4_aMd-BOiCA6TTWqyBS4dZBrD11-KQjTORMIDf-LFYVPIqbrinrip56_lSZe7miIKADtUM-q6sl585d18mqe3O6tAwOYmo50VhETk0A80oJR03urr5YlftMCgP7JzZ7i3GAZ/s1600/resfiles_output.php.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdLSxDEW8n4qhLT3zOZyGzFOSzv1q67_n_nkIyTESnB6Z_Eu4syK8b9xdkyaoELjraj_iRM8jDbjwMlhJdlwK-6OK1-XZ682REMQv8TwbqaWY4WB6SV_R1WlLNETebyUCGV_mKJ6S2EZV/s1600/pumpkin-border-hth.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCh5FvyviwNA3Sq7I0DXc_SwyQGce1-nPIiZvBqB6O-e2zNinKBFqeSnfM4PlSjnJDjvvX6dXxTLm7kr1zamDiK2PLDMuHObAsmH-S7tP35fGpWAs6edOSJ-FMLtHFraJa0Ox3cB1iGxX/s1600/irish-border4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZlLm1UMIruINAkQRtZ0acl3Xc6IvnPeOjgXIsx1R1FEZIsoFeymhby5F-hLR0v15E577WEejdFlL1-e_K9ZvZOklJ1FfvHnlLgD9-STfoNXyuue_CZe4efYTLSddpF4sbqsGJhMtTt5M/s1600/ivy.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Btqs-_tO9bYD36pqaLLGXhib_O30yrpKIAx-b1xB0YNUiTN1qxP-dtK93qrcsbA3FfcDVoj1rSG-bpAjIAC9W5fQW-m6hZoPbtaQi61aEQQrw-wEBmsa71hKQjOYNwP_msNgP63h51_Z/s1600/irish-border1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN03C-1eLZ7YyUwqzWZr360lMfYpIN3gRoAFvRfSDWLzNzlkA8AoYNl1C8JYqiv6hcbPGR6glAhWyyFzF3NhKhGTbPlhrQKK96ZcktYv1pc9hM_NtQVfivxOktGyning0BNbtLTJHfnKvx/s1600/frog54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuSHWLKta4booUykllAmBtg6wBRsNXzJhTUjNxZoxvj8BOwjYbEvT4kcYGBLds8CnZm2GguT5ImW1PvgRtRCaoONXwIR3ffZ-k9lKXketIQoM7mFIu0HGfZbfetPG1pV_FrU5a3SIfO-_/s1600/flowerbar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu05lhiKh1HTbCsKQGOfxTMjqgt-iPCjkBn_hKPfd24bcdN9A-KIKPeYYhOXzs4eJ2e3cvEZlQT05KP9zKxf0z5vg9p80Epsv-Yma-tExu5332Qw3ZaLTh9-35ZU6EYlTWu7dJxO2pxStm/s1600/drawing-separator.gif

للمزيد من صور الفواصل و الكود اليكم المواقع التالية