اضافة أزرار المشاركة الإجتماعية بتقنية jQeury الى المدونة
أولا :- " ما هى تقنية jQeury؟ "
تقنية جميلة جدا وسوف تلاحظهما فى الاضافة بعد تركيبها فى مدونتكم او موقعكم
ثانيا :- شرح طريقة التركيب :-
1-انتقل إلى لوح تحكم مدونتك،إختر "قالب" ،ثم "تحريرHTML "
2- نضغط على "متابعة"
3-ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أن تأخد نسخة إحتياطية لمدونتك تجنبا لحدوث أى أخطاء
نبحث عن الكود التالى :
اضف قبله مباشرة الكود التالى :
ثم ابحث عن هذا الكود :
اضف بعده مباشرة هذا الكود
( هذا لوضعه أسفل كل تدوينة .. وبإمكانك أن تضعه أينما شئت .. المهم ان تعرف الطريقة )
نبحث عن الكود التالى :
</head>
اضف قبله مباشرة الكود التالى :
<style type="text/css"> /* Social share buttons By www.egy-grand.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 www.egy-grand.blogspot.com */ </script>
ثم ابحث عن هذا الكود :
<data:post.body/>
اضف بعده مباشرة هذا الكود
( هذا لوضعه أسفل كل تدوينة .. وبإمكانك أن تضعه أينما شئت .. المهم ان تعرف الطريقة )
<b:if cond='data:blog.pageType == "item"'> <ul class='social' id='jqueryanime'> <li class='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='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='googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a> </li> <li class='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='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='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='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='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='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>ثم نضغط حفظ القالب و شاهد النتيجة اتمنى الأضافة تعجبكوا
التسميات: اضافات بلوجر, الشبكات الأجتماعية, دروس بلوجر
0 تعليقات:
إرسال تعليق
الاشتراك في تعليقات الرسالة [Atom]
<< الصفحة الرئيسية