-->

اضافة جميله لصندوق التواصل الاجتماعي و RSS لمدونات بلوجر بتأثير روعة

اضافة جميله لصندوق التواصل الاجتماعي و RSS لمدونات بلوجر بتأثير روعة
    بسم الله الرحمن الرحيم

    اضافة اليوم جميله وبسيطه صندوق لمواقع التواصل الاجتماعي و RSS لمدونات بلوجر مصممه على شكل شرائط جميله لكلاً من
    Rss - Twitter  - Facebook - +Google - LinkedIn

    الان نأتي الى كيفية تركيب هذه الاضافه 


    - الطريقه بسيطه عن طريق اضافة اداه HTML/JavaScript نقوم باضافة الكود التالي .
        <br /><style type="text/css">.btnt-chronicl-social { width: 320px; margin: -10px; } .btnt-chronicl-social ul { margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; } .btnt-chronicl-social ul li a { color: #fff; display:block; } .btnt-chronicl-social ul li a:hover { color: #c9c9c9; background-color: #333; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; } </style><div class="btnt-chronicl-social"><ul><li><a class="rss" href="رابط 1">Subscribe to the RSS Feed</a></li><li><a class="twitter" href="رابط 2">Follow me on Twitter</a></li><li><a class="facebook" href="رابط 3">Find me on Facebook</a></li><li><a class="google+" href="رابط 4">Join me on Google+</a></li><li><a class="linkedin" href="رابط 5">Connect with me on LinkedIn</a></li></ul></div><p>

    ::الان هناك بعض التعديلات البسيطه على الاكواد::
    1- نستبدل " رابط 1 " برابطك على RSS .
    2- نستبدل " رابط 2 " برابطك على Twitter .
    3- نستبدل " رابط 3 " برابطك على Facebook .
    4- نستبدل " رابط 4 " برابطك على +Google .
    5- نستبدل " رابط 5 " برابطك على LinkedIn .
    - الان قم بحفظ الاضافه وقم بتحديث الصفحه لترى كيفية العمل وشكل الاضافه .
     

    تم بحمد الله ...
    Mohamed Shaban
    @مرسلة بواسطة
    كاتب ومحرر في مدونة : مدونة انتا الكسبان .

    إرسال تعليق