بسم الله الرحمن الرحيم
اهلا بكم اعزائي المشاهدين في موضوع جديد عن طريقة اضافة ايقونات المشاركة الاجتماعية علي مدونات بلوجر بطريقة احترافي جدا وبتقنية css3 رائعة
معانية حية للاضافة من هنا
شرح تركيب الاضافة علي مدونة بلوجر
اولا قم بذهاب الي لوحة تحكم المدونة ثم قالب ثم تحرير html ثم قم بلحث عن هذا الوسام
بعد ذللك قم بوضع الكود تالي قبل الوسام السابق
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxM-uAvqCwtZ4Vy7qVT7r8gbT410PrYueOU1D0bsMJcysY2fEpDW8u8MPhrqLJSbFuHSYQsMZ80ofMi5wBHF-BS_uY9m2AWQqXaOYA_4WR_yMDKe_r6pM6cuk85wOvD6-moTO_W7JEWnHr/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc19a-Gz1fu_J8Kh0REpkrpJyhkvlV_E6OC4SxnWeuYOLK99p2XDXOvMy_oi5dvWYv1zVuTvR33B1wXIUePJnDERt1ueOzo7gpQ3Pi2_ZSDq7wjxdLr-rk5J3bR1mZ_cxpzdACQS-zX7D/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXvrE7KDt6DtklLeynUklZ46xp9QQHvSgxBHAhlPRZngoyvR98YndTesrWVCNpshMV-RNXHTqQ4n3_G3SZBzYBVsL-UPq0LLb1ngH6G2l11LYZyOVjBchUOaI5oLNzf5wq4XC7URaRdke/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiheuvbVFsOAJkmAxWO9aXUDXywChtd1jDZzHVmB3QX1XyfzWuyGgL3SMkMg0Sn7_2J8MKQiqg6WfKpnphKcEFE4PfPsIB9q4pGiF0elBUuLoG7j1rvEqHMH562X9WC4i9TPGe6E_3lJie2/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8czHAmHlECKnrehmo_Ufa-k1YrQzpf3LTrfNyhoQMEGoYRTEKroC3QB6C6Ln7NX2d1XTzfa4ZW0EL2Z-W-0MloE52PV7WKAi5nCvTzn7f5WILxzIML9jXYvvJfjvq1-Q3W21ChE8hYoDE/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8-SSpwXzQtCFxAALP31camUnO5gd2mrPvLbdjCr11nFk-9Db8cpkjLD4Q8LcDBFB4uH6bvVoWfHaOIkSlcSHncZRP1iIax3hzQtoD9S1gBC0dLa7jV1wCvwqpRQQZQPjyiQpWBAzusI7/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd8k-jSQ_EMe07y1aQ-T3n7lNL5xBTx6_ULkPBGqHgqA-nbRhEvci7wBTggj4gVNVuEU3-Rldss6y_39vhVIJebN6q5ewVg_yPK8F0panWk6_9OdDHDqGAsudbW6f5UZHFUhhO9ingFaFd/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyuGCq7BUA00LzhB_god1zx-Tu8HNUhuBV9chLNqXJsAXQE0WhzJrMrKqopTVBwV83vVg3vgGf2Car6RHq4vX8xe6mrj9TSse47V2GUQ-PNuduk08Oc5HeRJ64C5iQHMT0Cmea3nv9MqI/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtC0F2Agix6O-uSoX5MgHg4vvSfpikcU_WLqL5a2CbPMDzXRKh9qgUwwm716SR7Ab7ODARuIXKFonO0zGKM_Tt-3mfezYucZDLJhGIiCwY0tntvtWePMxAYp6yqo-gyBBc8AfosD0OYxBt/s1600/way2blogging-technorati.png"); } #way2blogging-cssanime:hover li { opacity:0.2; } #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #way2blogging-cssanime li:hover { opacity:1; } #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
الخطوة الثانية في اضافة الاداة
ابحث عن الكود تالي في مدونتك وضع بعده الكود تالي
(لو مظهرتش معك ضع الكود تالي في مكان اسفل مواضيعك او في المكان الذي تريده في موقعك >
وبعد اتمام الخطوتين قم بضغط علي حفظ النموذج
ومبروك عليكم الاداة
0 التعليقات:
إرسال تعليق