أضف أيقونات الوسائط الاجتماعية لمدونة بلوجر

 السلام عليكم 

ايضافة ايقونات الاتواصل الاحتماعي المتحركة لمدونتكم بشكل خرافي وجميل وثابتة في منتصف الصفحة

نبدا الشرح وادا احتجتم الى شرح ايضافي اومساعدة اترك تعليق

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

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





اولا 

تقوم بفتح  التنسيق 





تختار sidbar



*ايضافة اداة


*تختار اداة الجافاسكريب



*تلصق الكود الاول  عدل على روابط مواقع التواصل الخاصة بك  مكان علامة الشباك  ثم تحفظ الاداة




/الكود الاول/ 

<br />

<div class="widget-content">

<br />

<div align="center" class="add">

<br />

<style>


.spinningeffect img {


-moz-transition: all 0.4s ease-in-out;


-webkit-transition: all 0.4s ease-in-out;


-o-transition: all 0.4s ease-in-out;


-ms-transition: all 0.4s ease-in-out;


transition: all 0.4s ease-in-out;


}


.spinningeffect img:hover {


-moz-transform: rotate(360deg);


-webkit-transform: rotate(360deg);


-o-transform: rotate(360deg);


-ms-transform: rotate(360deg);


transform: rotate(360deg);


}


</style><br />

<br />

<a class="spinningeffect" href="https://www.facebook.com/farisnewt" target="_blank"><br />

<br />

<img src="http://2.bp.blogspot.com/-ksEdjQIzVyY/WosWjLPQAbI/AAAAAAAAEGA/O80dg1FCeLYavF6_Pk-S-K53IktHfvDtgCK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_facebook_2895133.png" title="إنضم إلى صفحتنا  على الفيسبوك" /></a><br />

<br />

<a class="spinningeffect" href="https://www.youtube.com/channel/UCWBI70q2hYBFbUjClH1GGEg/" target="_blank"><br />

<br />

<img src="http://1.bp.blogspot.com/-5JbVsM0cO14/WosXhcgyDkI/AAAAAAAAEGY/1ROddUK5QxkTOBgq5dF6WhqXDr420961ACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_youtube_2895135.png" title="إشترك فى قناتنا على اليوتيوب" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://1.bp.blogspot.com/-Oj756xZWxYM/WosXan4tQLI/AAAAAAAAEGQ/Z61BDfBTMqUrsTaXOUx5gOOZK5vjTehZgCK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_googleplus_2894409.png" title="إنضم إلى صفحتنا  على جوجل بلس" /></a><br />

<br />

<a class="spinningeffect" href="https://twitter.com/farisdihem" target="_blank"><br />

<br />

<img src="http://1.bp.blogspot.com/-ELzgPY58Ui0/WosXsBUfiJI/AAAAAAAAEGg/9M1KiGqZrHMxAujj3EPE6hpOIOw-0mhBACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_twitter_2895134.png" title="إنضم إلى صفحتنا  على تويتر" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://1.bp.blogspot.com/-Yy54PdmZOuM/WosY1kLlQVI/AAAAAAAAEHs/YDIdnBfC6Ngk3Ik6ZvWrNp8HKac-JqQ6ACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_skype_2894414.png" title="أتصل بنا عبر سكايب" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://3.bp.blogspot.com/-DgXKBVWFqxU/WosX1Y-QLXI/AAAAAAAAEGo/HRDvNImYCKc6xVV3rfmY1cQy9qluqGFqwCK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_pinterest_2894412.png" title="إنضم إلى صفحتنا  على بنترست" /></a><br />

<br />

<a class="spinningeffect" href="https://www.linkedin.com/feed/" target="_blank"><br />

<br />

<img src="http://2.bp.blogspot.com/-N7aO7z4LqEo/WosX8549gNI/AAAAAAAAEG0/f9B484DI_5odLb0ANrioZHevsBAgGTF3ACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_linkedin_2894410.png" title="إنضم إلى صفحتنا  على لينكد أن" /></a><br />

<br />

<a class="spinningeffect" href="https://www.instagram.com/abdelatifedihem/" target="_blank"><br />

<br />

<img src="http://1.bp.blogspot.com/-LBskpPDwK3c/WosYBeYeQOI/AAAAAAAAEHA/-BfEIcM57wAVwlh6sJaGa57q5EsIZmNZwCK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_instagram_2895177.png" title="إنضم إلى صفحتنا  على أنستغرام" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://2.bp.blogspot.com/-GOPIIQXElFg/WosYJhYSv3I/AAAAAAAAEHI/cIygE8sJL34Wh8h0tkQ8E8l7-THhoyuqgCK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_vkontakte_2894417.png" title="إنضم إلى صفحتنا  على فكونتاكتي" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://2.bp.blogspot.com/-7PV_5r7mC_8/WosYPzhRNTI/AAAAAAAAEHQ/s6w618gjDY4QD4AGhP9S2lv0_HA2no0OACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_tumblr_2894419.png" title="إنضم إلى صفحتنا  على تمبلر" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://2.bp.blogspot.com/-ZVt7SbarRow/WosZO4812lI/AAAAAAAAEH0/Fv3-qJ5cJoccifS5j41FaJZPTBCN1CrnACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_messenger_2894411.png" title="راسلنا  على فيسبوك ماسنجر" /></a><br />

<br />

<a class="spinningeffect" href="#" target="_blank"><br />

<br />

<img src="http://1.bp.blogspot.com/-MjdNI3F8HRA/WosZ23MMhSI/AAAAAAAAEIE/maAq8soLJ0kWHFuc7Rblhvrzso0H4cMmACK4BGAYYCw/s1600/if_2018_social_media_popular_app_logo_askme_2895132.png" title="إنضم إلى صفحتنا  على اسألني" /></a><br />

<br />

</div>

<br />

</div>

<br />



*تقوم بحفظ الترتيب وتعاين 


 ثانيا تذهب الى  القالب



 تحرير الhtml للقالب 



وتبحث عن وسم    */]]></b:skin> 



*فوقه تلصق الكود الثاني الخاص بالثبات في منتصف الصفحة

/الكود الثاني /

.add {
    position: fixed;
    top: 271px;
    right: 1233px;
    width: 9% !important;
    z-index: 907;
    padding: 4px;
    /* margin: 10px; */
    /* float: left; */
    font-size: 1px;
}


 *ثم تحفظ التغيرات 
اذا واجهتك صعوبات اترك تعليك و سيتم الحل
السلام عليكم

Post a Comment

0 Comments