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

تطوير ويب » مواقع النشر » افضل طريقتين لاضافة ازرار النشر الاجتماعيه اسفل الموضوع في مدونة بلوجر

الأربعاء، يوليو 06، 2011
9:03 ص

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

افضل طريقتين لاضافة ازرار النشر الاجتماعيه اسفل الموضوع في مدونة بلوجر
لمشاهدة مثال علي الطريقة الاولى ستجدها اسفل هذا الموضوع وانا انصح بها
لخفتها وسرعتها وللاناقه التي تشبه بيها الطريقة الثانيه
لتطبيق الطريقة الاولى بتقنية css3 قم باتباع التالى

1. قم بالذهاب الي لوحة تحكم مدونتك ثم الي تصميم ثم الي تحرير html
2. ضع علامه على

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

ثم قم بالبحث عن الكود التالي

</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; }  /* www.way2blogging.org */
 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; }  /* www.way2blogging.org */
 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);}  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_iYX2yqdRtqup5wj4RqXd2OPaqYXk5FlqTxsXIF_RCapxdOeQoNgsYlILSFMRf2GfsFbmc4gdHSNQ24K0rzw83prNkCjxx0IZM0qjWRvvpdMxYCyexsdFoNQB8cjZ2SMRtMIFcJEgbiO2/s1600/way2blogging-facebook.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVPBeexVCiSqUGrFf9ko5etwiWw7tzxe2Nk6KUZOXmYUF4AcAErU16nau6K3LsnaOTYH6VVBj8Q2cK7JmWyiRjSa73sLSvtAsorMusxmjJYpY5tZ58S0iFXq8Y3bC0tDWluehWUz71hIU/s1600/way2blogging-twitter.png"); }   /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofSokp7COxu-cSv7ngxj4Azbq5jQy-5yFMuMkkL-nCn81rudRx93D7fBA4NGFsBYQfSfezZCnMrYKA1AZIC1HOHftDbt6vqEq9D-FRfmhLOcmwrsLedxYHkVtd5Ez_SHuF9v8h0y7fTaB/s1600/way2blogging-googlebuzz.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTslTkrIfqJ5NUwvJk-ztRnVvcFNerPLkazB67efy0fGSXNf-fhbeflZObA6C690JWvB_06G9zH1FrVAmmsHH9dPeixIQ9MLSOCjoNx9dZmBbh3gp117YtXTMsREsurVpenZVzctMivMY/s1600/way2blogging-stumbleupon.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzeppj7l8Yxn8wrKGuEBrfz57x9FadABRHe1OfkCvayxOVc4ez-innt1GEtDRYa-UWvSn4DkPc3vuOuyRTrrna9e8zyAl3gbrDm6JS_4N5GH5VLFUyB0tMK6iQ5M8bOvUmjsdsJ437yUO/s1600/way2blogging-digg.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQVVFzG-Lpu0dywrviuY3ymZlomhiUuT2xAsKPdLOhlcPdFjb8iFEkzxyz5VYDyWl5d1_AFAH8E5QoOTpNZtFhTNxSESt0mu3RL06arFroi667KV2whOMXSlEm_kjAtBOVuVsBGAp0yq3/s1600/way2blogging-delicious.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiutLBQFbDZKiBM1qSFaGbCnWcRjqllOQHE30btWG0VeY8r9Pqpus1dwDW1JBk-ytcAY-YrFBI2JpK4rZ_JULTyHMKVG_cD9PDuIBIfikR_Q4Av9-kkR4d_6EFf5sCxGs70zC3yrRgEZ7om/s1600/way2blogging-linkedin.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Vtq1ULdMrZ_2OVB8sNurpJsDt7487_9acaI5pXt2bIQFYad-is1zAoA5kdnKBjZlwg54rcXsqb7-DXWNHxdugU1xjLwPCmdbrKdzLXgxvucYi3QbxXCkwOzm8XkSPJ6xVRG56bePEScm/s1600/way2blogging-reddit.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1r1Pa_kxuuI1ZLIj2YAgTIM1gHlGv4cMwdoDAbfy_jzJrVQXGPNZk5qXKQqW68s2S1OsZ-4S4vea8CA3fixBDr5nIRuIehWn36qilp-ihDejShaivlEQAdB3l2UEroT3koUu4PH-Fe1eT/s1600/way2blogging-technorati.png"); }  /* www.way2blogging.org */
 #way2blogging-cssanime:hover li { opacity:0.2; }  /* www.way2blogging.org */
 #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }  /* www.way2blogging.org */
 #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; }  /* www.way2blogging.org */
 #way2blogging-cssanime li:hover { opacity:1; }  /* www.way2blogging.org */
 #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }  /* www.way2blogging.org */
/* 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>
قم بالحفظ ومبروك عليك الاضافه

الجزء الثاني من الدرس وهو طريقة وضعها بتقنية الجي كويري Jquery?
1. قم بالذهاب الي لوحة تحكم مدونتك & ثم الي تصميم ثم الي تحرير HTML
2. ضع علامه على

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

قم بالبحث عن الكود التالي

</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; } /* www.way2blogging.org */
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; } /* www.way2blogging.org */
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);} /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_iYX2yqdRtqup5wj4RqXd2OPaqYXk5FlqTxsXIF_RCapxdOeQoNgsYlILSFMRf2GfsFbmc4gdHSNQ24K0rzw83prNkCjxx0IZM0qjWRvvpdMxYCyexsdFoNQB8cjZ2SMRtMIFcJEgbiO2/s1600/way2blogging-facebook.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVPBeexVCiSqUGrFf9ko5etwiWw7tzxe2Nk6KUZOXmYUF4AcAErU16nau6K3LsnaOTYH6VVBj8Q2cK7JmWyiRjSa73sLSvtAsorMusxmjJYpY5tZ58S0iFXq8Y3bC0tDWluehWUz71hIU/s1600/way2blogging-twitter.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofSokp7COxu-cSv7ngxj4Azbq5jQy-5yFMuMkkL-nCn81rudRx93D7fBA4NGFsBYQfSfezZCnMrYKA1AZIC1HOHftDbt6vqEq9D-FRfmhLOcmwrsLedxYHkVtd5Ez_SHuF9v8h0y7fTaB/s1600/way2blogging-googlebuzz.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTslTkrIfqJ5NUwvJk-ztRnVvcFNerPLkazB67efy0fGSXNf-fhbeflZObA6C690JWvB_06G9zH1FrVAmmsHH9dPeixIQ9MLSOCjoNx9dZmBbh3gp117YtXTMsREsurVpenZVzctMivMY/s1600/way2blogging-stumbleupon.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzeppj7l8Yxn8wrKGuEBrfz57x9FadABRHe1OfkCvayxOVc4ez-innt1GEtDRYa-UWvSn4DkPc3vuOuyRTrrna9e8zyAl3gbrDm6JS_4N5GH5VLFUyB0tMK6iQ5M8bOvUmjsdsJ437yUO/s1600/way2blogging-digg.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQVVFzG-Lpu0dywrviuY3ymZlomhiUuT2xAsKPdLOhlcPdFjb8iFEkzxyz5VYDyWl5d1_AFAH8E5QoOTpNZtFhTNxSESt0mu3RL06arFroi667KV2whOMXSlEm_kjAtBOVuVsBGAp0yq3/s1600/way2blogging-delicious.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiutLBQFbDZKiBM1qSFaGbCnWcRjqllOQHE30btWG0VeY8r9Pqpus1dwDW1JBk-ytcAY-YrFBI2JpK4rZ_JULTyHMKVG_cD9PDuIBIfikR_Q4Av9-kkR4d_6EFf5sCxGs70zC3yrRgEZ7om/s1600/way2blogging-linkedin.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Vtq1ULdMrZ_2OVB8sNurpJsDt7487_9acaI5pXt2bIQFYad-is1zAoA5kdnKBjZlwg54rcXsqb7-DXWNHxdugU1xjLwPCmdbrKdzLXgxvucYi3QbxXCkwOzm8XkSPJ6xVRG56bePEScm/s1600/way2blogging-reddit.png"); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1r1Pa_kxuuI1ZLIj2YAgTIM1gHlGv4cMwdoDAbfy_jzJrVQXGPNZk5qXKQqW68s2S1OsZ-4S4vea8CA3fixBDr5nIRuIehWn36qilp-ihDejShaivlEQAdB3l2UEroT3koUu4PH-Fe1eT/s1600/way2blogging-technorati.png"); } /* www.way2blogging.org */
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
// Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org
$(document).ready(function () {
$("#way2blogging-jqueryanime li").each(function () {
 $("a strong", this).css("opacity", "0");
});
$("#way2blogging-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);
});
});
// Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org
</script>
ثم قم بالبحث عن هذا الكود

<data:post.body/>

وضع بعده الكود الذي بالاسفل

<b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <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 Google Buzz'>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>

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

أصدقاء(تطوير ويب)

تعليقات Facebook

0تعليقات Blogger

شارك أصدقاءك

لا توجد تعليقات على موضوع "افضل طريقتين لاضافة ازرار النشر الاجتماعيه اسفل الموضوع في مدونة بلوجر"

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .

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

شارك أصدقاءك

لا توجد تعليقات على موضوع "افضل طريقتين لاضافة ازرار النشر الاجتماعيه اسفل الموضوع في مدونة بلوجر"

إرسال تعليق

مكتبة الفيديو

دروس واضافات منصة بلوجر

إشترك يصلك كل جديد علي بريدك

الأكثر مشاهده هذا الأسبوع

إنضم الي مجتمع الربح من الانترنت

إنضم الي مجتمع التدوين العربي

أصدقاء المدونه

تعليقات القراء

أرشيف

إعلان