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

بسم الله الرحمن الرحيم

اهلا بكم اعزائي المشاهدين في موضوع جديد عن طريقة اضافة ايقونات المشاركة الاجتماعية علي مدونات بلوجر بطريقة احترافي جدا وبتقنية css3 رائعة

معانية حية للاضافة من هنا

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

اولا قم بذهاب الي لوحة تحكم المدونة ثم قالب ثم تحرير html ثم قم بلحث عن هذا الوسام </head>

بعد ذللك قم بوضع الكود تالي قبل الوسام السابق </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/AVvXsEj6oatAWfKiaCouMLgH_csqydRy0XCiDHDu9O_9YS4daumjBZMDVRJafOLHZtD8iGCtL_IIZUAEfjhRY86-ryzHQlsyoZoudDR-WdDwuIjbJMPNiTvDixiJ-n99CXDvPRtr65dHjvvUEjwQ/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiciUvZZLXhXI-1AWabOzwCkMllTyl2TC9bYMwVXwNHdCTDs5_NL5WrJnUMqAmHeEZU7jFhPuTVrck1N-Os3NHTfk94KsBaX0Uyf9eZqYSgbCDbmR-r-qt3fznHkXSfTSvptE2QjSP4fAYf/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl7eaKYh9Rxx-AlLf2wyQTzXLNsWLRbBR3AnuPZNSQHGzw46XSWUKi0OpEMZE9mS0xz7lpnFy4oyglves7-XePbxejVhQyFu_e5H4taXxjY1F9IjFZ9Jep7Pe16Tr4htoLbNK1RgM-bzzy/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjQSPTMxGTNGdy83Iur0sMiGqNWO6AWtkS9R0vbjWmmGe0zDMikd_6v5fRD2pcQL5O25SPV0-pVMKcuidKhYLDljLlzRYbxDAU1e0-6rvN9RZcvQAvuve5bxUxoBCalmCvksKGXduUA8xq/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKceuZOy1fLUbychnjFlY7g_AEpwAXELL8MgCzfLCJIsMNoAnMm-qRU5itvdWj0PNXHXzU_wImmO0fkXxhTd3X7ctlWNfNc6vqzzDKoK_Rb2RjgT7z5U1z0MssTK26sFjk_xHsR-ANBUr3/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQMjHaR_ARBnGv-hamiHiyzE0JKhcE6zlaKFcLDLLKw0bcwAGFztOeiGGOTqWG7bHtLhob9bQlKD1rCNEgGVw4T17SRcuu8FVn9jArH1u7ywysnylN7GY0Dw5_Cx5khmHc3gZ-nkIsqrZ/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFbVBvSPI8uaFgTLTcBGOkQ1tYcCnAOTUcnEMbgHgpb-LxBq2_33HQ7VZ7X6PoXZGfdFNfJRJsuS5mbBvnggXCyD9z9Wfc2YZ7LRDoUkiXBKNtK8vEjR-yfTO-l6IxMHKDgGgY_DNQVhyphenhyphen1/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFlOuVjMQbXAMRAZVqN7AiPdGvEEZLb97xthG_TLwjL2evcXBIRDLycFuLUZ6ZRvAJ_yGnRY8PnKeWjTvYNEUSrPT6jVk1633xvcJzCcpSxZyisPm0FJRgCV8s6qPnjgwniZ39YIb1TqEW/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDAVHMlgnZUzfjcFd7gknYgbCmdXBL1cYsjQfdlWV9kJfRWBUFTq0y7ueld_vD3-XYh714PUbide1L3DMh1BMrevroo4eJnLc5PZcB6Lw91stGh6VmV7kZFirgaI4_ISM6XY0FLiN595bT/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>

الخطوة الثانية في اضافة الاداة

ابحث عن الكود تالي في مدونتك <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'>Facebook</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!'>Twitter</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'>Google Buzz</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'>StumbleUpon</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!'>Digg</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'>Delicious</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'>LinkedIn</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'>Reddit</a>

</li>

<li class='way2blogging-technorati'>

<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'>Technorati</a>

</li>

</ul>

</b:if>

وبعد اتمام الخطوتين قم بضغط علي حفظ النموذج

ومبروك عليكم الاداة

مدونة عمرو ويب

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

التسميات

الأرشيف

المشاركات الشائعة

المتابعون للمدونة