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

اضافة شبكات التواصل الاجتماعي اسفل كل تدوينة بتقنية CSS

اذهب الى لوحة تحكم المدونة -> التخطيط -> تحرير HTML 

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

الان بالضغط على CTRL + F ابحث عن الكود التالي 

</head> ضع الكود التالي قبل الكود السابق <style type="text/css"> /* 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/AVvXsEixpe4YC14YtXvGZ75QVeEmuzqawT5eqwOtaFIKNLQl0MGCVzxp7uguNcLamHcNRsnHdDUU3DzB4XquqnkAiuBYC36ynBYmyAfPkj_ccFN6EaRpRYo5K_lN0CdhlLfMZ11k6GXgWkXNURiq/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQuSwKwuqbF3Jdnc1uERPcvw-7AYxJYu8WHTnTL1oAU2jH-1Q50oMD050FSbIUc2UQuhN7665BNDzFYrzfwDb1rIeY5xfQ4B3eOXjMkKaSjS5qMkWSaUTbmksBIV11I56YZ8CgCOtxoM5/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4vir8HP1hAxJvZubLaA5T9uTFTeIaSHo6j1-BYnaTUBOLRK5GOt6CHD7iDhbF1IGqpm1VzXmiBj4VltEnhLen9xNCaVj-scs6IT-kRRTWskT856bRulLJwkDr7Bs0SQfAXjiZ5Znf4X1x/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5gi8yoakKl7aWTCpu2WbdGbTxj8CEEpMCuE2CIDZxSx6-5yfiRN9aorN-gUeix8P6Ubexq7hmxOY4qE-a6VA3n631XjfFWGRDUu1p3QYHkC3L6PdSNZTOeCCOj7BDIVaEN08ITGt5vfv-/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOLLI-KcQVHDePyWB_73qD-BYZH7kSocgYNcII_M_zFI-8782jCF5OITsC1u7Awpfiy_TDP1o5yTcTsILy17AXDWLU0QvCTfR4ILp9N0wv_kYTtr8dhenT2ENHUa0DpurASo2g_B9NdXp/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEPLKdOgrR0_dxc60jvBzpNTQvoezCg4y062XMQweL9ZflrkoOxHCTz4Yz86iFpMCpqymg9sVNxMedRbPycizAECmzw_jPEGTwSOhn-DdRLphpHkvvkcTx-q4UXF_LbW5HbxqaPkd3lUH/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEuI3KxFeRXDz6Wgstsv-cOpPHRTvZvt_iIQOYQCwaU6XApEgafYnBdoF0HI2HBoY9aBwUuA1kiZaHFtvxYpkOJacdExHU09BkPlD0Cuzjii4N34XHw-n154ilQUqNlf4BZKiO2do4KDF/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQurssHmyTGn0w430z1GQ6RryotetS4L2ykHTMqeoo6udM2apkbT8nsmGR-eMcKRVOWy1s6zdjGImLnedWHtCkZSoY5ljSWR7W-Yhl_yWINNo7avuu_w93SCtO9YFXPUA9wWolpaQ3XSL8/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsg2YCKes8QWQurSo8zdq4w-Kp6a1Gus2mywknM83Un90BTVU6AsZY5XJSiSA4_e_WTsoQIDIHu7Wb_GU9cODhDbjRG-h9EPRYBv85PdqnrEQn7jWCbf4TmzTeSi1d2LZHJsgbh4_MkJOE/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 */ </style> الان ابحث عن الكود التالي قد تجد 3 او 4 ضعه بعد الثاني <data:post.body/> ضع الكود التالي بعد الكود السابق <b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> الان احفظ النموذج انتهى الشرح