0
أزرار المواقع الإجتماعية بتقنتي ( CSS3 - jQeury )

التسميات:
بســـمـ الله الرحمن الرحيم

سلام من الله عليكم ورحمته وبركاته


أزرار المواقع الإجتماعية بتقنتي ( CSS3 - jQeury )


أزرار المواقع الإجتماعية CSS3 jQeury

لترى مثال قم بزيارة هذه الصفحة .. وضع المشيرة على كل واحدة لترى الفرق


طريقة التركيب


CSS3
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــــــــــــــــــــــــــ

اذهب لتصميم >> عناصر الصفحة >> تحرير HTML >> وسع القالب & ابحث عن </head> وأضف قبله هذه الكود



كود:
<style type="text/css">
 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-UHDzWyaUWMxCYI5jLnkpjSEsM5FfTXFf3WTDgL4jgYA4xSVph3UezBjtePQt3Epz-3t-dwZblEHr2ttQ5cW1xLSfmc4z3Nc6nfUyqVd5BtS6mUKlKZPlSBRUwKcwDx4eWGQeUHCuCs-/s1600/way2blogging-facebook.png"); } 
 ul.social li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP17OG2wSA03x7evb8vvNrG4mO1im4Am2v66UilmTLX25ULWY1cjHemEzDytbGq-LGC8tREMfysWUwFqcfzagWsXPItPAd5fbuxtD8dTg32bE1jR1LA29oJSfF3M7e4vymp9UfOy9AnrKK/s1600/way2blogging-twitter.png"); }  
 ul.social li.googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqHN1jf6pgTmeso1MITIAXQegvrn12Auw-o-cqF2BCjp9j5M6nfl6-tCqOv2oPVnxfCw914R39l6ldemyLFnnBIppRojUpfsyVI5gCUKX9nyARbKghxJvH8ApsNPDh2qxXJe5viE3QYYn/s1600/way2blogging-googlebuzz.png"); } 
 ul.social li.stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fUrPxE2G9UhCU9jo4MPmDNq2Htdntf_9rswLUlbpi0gPrtucodj3vBhvtW3P9MP26-ZX31_s3Nc483hXTvMc6z2jMCQ7XexZ1TF0wxL4nffUGkijJM7e8hJw-XGCUtGWx9J6fFAJElLg/s1600/way2blogging-stumbleupon.png"); }
 ul.social li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb8iqzjUwNSkxHFECiANWnBNdyF0bUKUh4TtLChyphenhyphenkKIaXKxif9bhDMlgoZ_h0YK6EqRAyP4XZ1KeY33CAtAcoiYXZ2bwjeRopWehH4-IfR8hKUjh1Yh14PiKauJ4s70isYj3WUjJQBL87Q/s1600/way2blogging-digg.png"); } 
 ul.social li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVldOpQuZ_ojIHS_Loq1FD89VNBSJIKFAQOlR2Uz_SlAY45UetMQY6hkFxQQUU-a66_8GgaOyGXL0e1nr9vK_NFOSep2VG75wexyp18FZzsW3Ql9YCVots7r9bwsmUvV2jRTC_mQU0wzM2/s1600/way2blogging-delicious.png"); } 
 ul.social li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8cqyhbS5PT5KO08l4ovUeHk-lLpiYchOrkJaU1Giayma1C5uRXiGn_boWtv7yOM_puHTQoX7z2xpy5jZ2DwK8aavab-uOanc4TLkIEtP93n5AcjZZwZFvItAAWBvfoCioPkeYr8tUwuV/s1600/way2blogging-linkedin.png"); }
 ul.social li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7qWNCqmBqWieNJl99-V65As6uhkKt1yFSUcyrdXDTrl4JTh4VCdLYq8slIqwqjNsH-zfAorvSbWdgE3PI3mhYNlKLNXulCY4muzjT3J0iF8LBAWz7oVuxdW12hmhim5zKc-e9ExizQRn/s1600/way2blogging-reddit.png"); }
 ul.social li.technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4R8ZDrkjYXwDDUvIfo81cDn6c6pMtHPbtYY0JF1ptGqSO20bKEiNLOu_te9a1DKZmpHC24VdD4a-ouuY4B7nTs8u1GYsgPsLpi2eV2zPp2MqTeIFwLiIAB-StL7Kx5kFRGg6K7E9W9lBE/s1600/way2blogging-technorati.png"); } 
 #cssanime:hover li { opacity:0.2; } 
 #cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
 #cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
 #cssanime li:hover { opacity:1; } 
 #cssanime li:hover a strong { opacity:1; top:-10px; }
</style>


وأيضاً ابحث عن <dataأزرار المواقع الإجتماعية CSS3 jQeuryost.body/> وأضف بعده هذه الكود



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

كود:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <ul class='social' id='cssanime'>
  <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 GoogleBuzz'><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>

JQeury
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــــــــــــــــــــــــــ

اذهب لتصميم >> عناصر الصفحة >> تحرير HTML >> وسع القالب & ابحث عن </head> وأضف قبله هذه الكود


كود:
<style type="text/css">
 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-UHDzWyaUWMxCYI5jLnkpjSEsM5FfTXFf3WTDgL4jgYA4xSVph3UezBjtePQt3Epz-3t-dwZblEHr2ttQ5cW1xLSfmc4z3Nc6nfUyqVd5BtS6mUKlKZPlSBRUwKcwDx4eWGQeUHCuCs-/s1600/way2blogging-facebook.png"); }
 ul.social li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP17OG2wSA03x7evb8vvNrG4mO1im4Am2v66UilmTLX25ULWY1cjHemEzDytbGq-LGC8tREMfysWUwFqcfzagWsXPItPAd5fbuxtD8dTg32bE1jR1LA29oJSfF3M7e4vymp9UfOy9AnrKK/s1600/way2blogging-twitter.png"); } 
 ul.social li.googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqHN1jf6pgTmeso1MITIAXQegvrn12Auw-o-cqF2BCjp9j5M6nfl6-tCqOv2oPVnxfCw914R39l6ldemyLFnnBIppRojUpfsyVI5gCUKX9nyARbKghxJvH8ApsNPDh2qxXJe5viE3QYYn/s1600/way2blogging-googlebuzz.png"); }
 ul.social li.stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fUrPxE2G9UhCU9jo4MPmDNq2Htdntf_9rswLUlbpi0gPrtucodj3vBhvtW3P9MP26-ZX31_s3Nc483hXTvMc6z2jMCQ7XexZ1TF0wxL4nffUGkijJM7e8hJw-XGCUtGWx9J6fFAJElLg/s1600/way2blogging-stumbleupon.png"); }
 ul.social li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb8iqzjUwNSkxHFECiANWnBNdyF0bUKUh4TtLChyphenhyphenkKIaXKxif9bhDMlgoZ_h0YK6EqRAyP4XZ1KeY33CAtAcoiYXZ2bwjeRopWehH4-IfR8hKUjh1Yh14PiKauJ4s70isYj3WUjJQBL87Q/s1600/way2blogging-digg.png"); }
 ul.social li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVldOpQuZ_ojIHS_Loq1FD89VNBSJIKFAQOlR2Uz_SlAY45UetMQY6hkFxQQUU-a66_8GgaOyGXL0e1nr9vK_NFOSep2VG75wexyp18FZzsW3Ql9YCVots7r9bwsmUvV2jRTC_mQU0wzM2/s1600/way2blogging-delicious.png"); }
 ul.social li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8cqyhbS5PT5KO08l4ovUeHk-lLpiYchOrkJaU1Giayma1C5uRXiGn_boWtv7yOM_puHTQoX7z2xpy5jZ2DwK8aavab-uOanc4TLkIEtP93n5AcjZZwZFvItAAWBvfoCioPkeYr8tUwuV/s1600/way2blogging-linkedin.png"); }
 ul.social li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7qWNCqmBqWieNJl99-V65As6uhkKt1yFSUcyrdXDTrl4JTh4VCdLYq8slIqwqjNsH-zfAorvSbWdgE3PI3mhYNlKLNXulCY4muzjT3J0iF8LBAWz7oVuxdW12hmhim5zKc-e9ExizQRn/s1600/way2blogging-reddit.png"); }
 ul.social li.technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4R8ZDrkjYXwDDUvIfo81cDn6c6pMtHPbtYY0JF1ptGqSO20bKEiNLOu_te9a1DKZmpHC24VdD4a-ouuY4B7nTs8u1GYsgPsLpi2eV2zPp2MqTeIFwLiIAB-StL7Kx5kFRGg6K7E9W9lBE/s1600/way2blogging-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);
  });
 });
</script>


وأيضاً ابحث عن <dataأزرار المواقع الإجتماعية CSS3 jQeuryost.body/> وأضف بعده هذه الكود



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



كود:
<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>




لا تنسونا من خالص دعائكم


والسلام عليكم ورحمة الله وبركاته

بقلم المهندس عبدالرحمن احمد

مؤسس مدونة ابوالسعود، مدون علمي، تقني من مصر يسعى لإثراء ودعم المحتوى باللغة العربية على الشابكة.
هل اعجبك هذا الموضوع ؟
مرسلة بواسطة Unknown الأربعاء، 21 مارس 2012

0 التعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)
 
تعريب وتطوير المهندس عبدالرحمن احمد
مدونة ابو السعود © 2012 |عودة الى الاعلى
Designed by مدونه المهندس العربي