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

افضل طريقتين لاضافة ازرار النشر الاجتماعيه اسفل الموضوع في مدونة بلوجر
لمشاهدة مثال علي الطريقة الاولى ستجدها اسفل هذا الموضوع وانا انصح بها
لخفتها وسرعتها وللاناقه التي تشبه بيها الطريقة الثانيه
لتطبيق الطريقة الاولى بتقنية 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("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/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 == &quot;item&quot;'>
 <ul class='way2blogging-social' id='way2blogging-cssanime'>
  <li class='way2blogging-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='way2blogging-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='way2blogging-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 GoogleBuzz'><strong>Google Buzz</strong></a>
  </li>
  <li class='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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>
قم بالحفظ ومبروك عليك الاضافه


الجزء الثاني من الدرس وهو طريقة وضعها بتقنية الجي كويري 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("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); }   /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); }  /* www.way2blogging.org */
 ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/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 == &quot;item&quot;'> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <li class='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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='way2blogging-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>


الان مبروك عليك الاضافه بتقنية الجي كويري او بتقنية ال css3 وتذكر ان عليك وضع طريقه واحده فقط.
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

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

إرسال تعليق

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