اضافة أزرار المشاركة الإجتماعية بتقنية jQeury إلى مدونات بلوجر

|

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

Social share buttons
 " ما هى تقنية jQeury؟ "
تقنية جميلة جدا وسوف تلاحظهما فى الاضافة بعد تركيبها فى مدونتكم
 
طريقة التركيب
1-انتقل إلى لوح تحكم مدونتك،إختر "قالب" ،ثم "تحريرHTML "
 
2- نضغط على "متابعة"

3-ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء 
4- الكود الذي سنبحث عنه هنا هو الكود التالي :

</head>

5- أضف قبله مباشرة الكود التالي :

<style type="text/css">

                    /* Social share buttons By UniEgy @ www.uniegy.blogspot.com */

                    ul.social { list-style:none; margin:15px auto;display:inline-block; }

                    ul.social li { display:inline; float:left; background-repeat:no-repeat; }

                    ul.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }

                    ul.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.social li.facebook { background-image:url("https://lh5.googleusercontent.com/-0zwhBirk998/T7-wLV5MRLI/AAAAAAAAAkM/5_ZDuKM0ebI/s48/facebook.png"); }

                    ul.social li.twitter { background-image:url("https://lh6.googleusercontent.com/-nZtqbw9RyB0/T7-wN8Er73I/AAAAAAAAAk0/-CQCDPgK3r4/s48/twitter.png"); }

                    ul.social li.googlebuzz { background-image:url("https://lh4.googleusercontent.com/-WdnOP76oVsY/T7-wL4HNXHI/AAAAAAAAAkU/mGjaZTY7j3U/s48/googlebuzz.png"); }

                    ul.social li.stumbleupon { background-image:url("https://lh3.googleusercontent.com/-8D0Yfx6GWns/T7-wMXUWyaI/AAAAAAAAAkw/HMsFcC8_ECY/s48/stumbleupon.png"); }

                    ul.social li.digg { background-image:url("https://lh5.googleusercontent.com/-VHozHP5CYyU/T7-wKh3juHI/AAAAAAAAAkA/m2aqKHYVwvE/s48/digg.png"); }

                    ul.social li.delicious { background-image:url("https://lh6.googleusercontent.com/-JUr6QZGLk4Y/T7-wLNOW1vI/AAAAAAAAAkE/T47V8zmijt4/s48/delicious.png"); }

                    ul.social li.linkedin { background-image:url("https://lh5.googleusercontent.com/-aG0EWXKIeu8/T7-wMOK94LI/AAAAAAAAAkg/fGarq2Ket14/s48/linkedin.png"); }

                    ul.social li.reddit { background-image:url("https://lh4.googleusercontent.com/-nozr-wrxBV4/T7-wMDWQZDI/AAAAAAAAAk4/PbCUbyNen5E/s48/reddit.png"); }

                    ul.social li.technorati { background-image:url("https://lh4.googleusercontent.com/-cHT2Fc4Zhpc/T7-wN2v9X-I/AAAAAAAAAlA/jCvR-oISzxE/s48/technorati.png"); }

                    </style>

                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

                    <script type="text/javascript">

                    $(document).ready(function () {

                    $("#jqueryanime li").each(function () {

                    $("a strong", this).css("opacity", "0");

                    });

                    $("#jqueryanime li").hover(function () {

                    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);

                    $("a strong", this).stop().animate({

                    opacity: 1,

                    top: "-10px"

                    }, 300);

                    }, function () {

                    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);

                    $("a strong", this).stop().animate({

                    opacity: 0,

                    top: "-1px"

                    }, 300);

                    });

                    });

                    /* Social share buttons By UniEgy @ www.uniegy.blogspot.com */

                    </script>

6-الكود الذي سنبحث عنه هنا هو الكود التالي :

<data:post.body/>

7- أضف بعده مباشرة الكود التالي :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

                     <ul class='social' id='jqueryanime'>

                      <li class='facebook'>

                       <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>

                      </li>

                      <li class='twitter'>

                       <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>

                      </li>

                      <li class='googlebuzz'>

                       <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a>

                      </li>

                      <li class='stumbleupon'>

                       <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>

                      </li>

                      <li class='digg'>

                       <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>

                      </li>

                      <li class='delicious'>

                       <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>

                      </li>

                      <li class='linkedin'>

                       <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>

                      </li>

                      <li class='reddit'>

                       <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>

                      </li>

                      <li class='technorati'>

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

                      </li>

                     </ul>

                    </b:if>

 ( هذا لوضعه أسفل كل تدوينة .. وبإمكانك أن تضعه أينما شئت .. المهم ان تعرف الطريقة )