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

  السلام عليكم ورحمة الله وبركاتة موعدنا اليوم مع درس جميل ورائع ومهم انها اضافه تتيح للمدونين اضافة قائمة عريضه يتمكن الزوار من خلالها من نشر مواضيع مدونة بلوجر على اشهر مواقع النشر الاجتماعى المختلفه مثل الفيس بوك وتويتر وكذلك متابعة موجز الموضوعات.
ان اعجبتك
قم باتباع الخطوات التى بالاسفل ---->>>>>

* قم بتسجيل الدخول الى لوحة تحكم مدونتك.

* قم بالذهاب الى تصميم ثم تحرير HTML.

* قم بالضغط على علامة توسيع قوالب واجهة المستخدم.

* ابحث عن الكود التالي
]]</b:skin> وذلك بالضغط علىCTRL+F .

* انسخ الكود الموجود بالاسفل وضعه مباشرة قبل هذا الكود
]]</b:skin>




.social { list-style:none; margin:20px auto; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.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);
}
li.delicious { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8cdnx7YI/AAAAAAAAAtI/4lzCME9fcUY/s1600/delicious.png")
; }
li.digg { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8c2wEyXI/AAAAAAAAAtM/WQUfe6znmj0/s1600/digg.png"); }
li.facebook {background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8dZwO-kI/AAAAAAAAAtQ/Whtv_zNLofc/s1600/facebook.png"); }
li.flickr {background-image:url("http://1.bp.blogspot.com/_1fRuBdlSpLw/TMW8eTEiAwI/AAAAAAAAAtU/jQ4fxlw0eKo/s1600/flickr.png"); }
li.linkedin { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8fVKKnbI/AAAAAAAAAtY/-qs_FjN-_ok/s1600/linkedin.png"); }
li.reddit { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8f8Dn6-I/AAAAAAAAAtc/T8KBql6pMDg/s1600/reddit.png"); }
li.rss { background-image:url("http://2.bp.blogspot.com/_1fRuBdlSpLw/TMW8hHH2V1I/AAAAAAAAAtg/FuSsgE0pBpI/s1600/rss.png"); }
li.twitter {background-image:url("http://1.bp.blogspot.com/_1fRuBdlSpLw/TMW8hoex5WI/AAAAAAAAAtk/3Pk8a39FEgg/s1600/twitter.png");}
.social {margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px;  margin: 0 5px 0 5px;}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}
.bulletnumber{border:none !important;padding:0;}

.post_social_bookmark
{
background:url("http://www.wpmods.com/wp-content/themes/wpmods.com/images/share.gif") no-repeat scroll left top #F9FAEB;
border-bottom:1px solid #CBD66D;
border-top:1px solid #AAAAAA;
float:left;
padding:40px 10px 10px !important;
width:570px;
margin-top:5px;
}

* ابحث عن </head> بواسطة CTRL+F .

* انسخ الكود الموجود بالاسفل وضعه قبل هذا الكود </head>

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

<script type='text/JavaScript'>
$(document).ready(function()
{
 // Hide all the tooltips
 $("#jquery li").each(function() {
  $("a strong", this).css("opacity", "0");
 });
 
 $("#jquery li").hover(function() { // Mouse over
  $(this)
   .stop().fadeTo(500, 1)
   .siblings().stop().fadeTo(500, 0.2);
   
  $("a strong", this)
   .stop()
   .animate({
    opacity: 1,
    top: "-10px"
   }, 300);
  
 }, function() { // Mouse out
  $(this)
   .stop().fadeTo(500, 1)
   .siblings().stop().fadeTo(500, 1);
   
  $("a strong", this)
   .stop()
   .animate({
    opacity: 0,
    top: "-1px"
   }, 300);
 });
 
});
</script>


* ابحث مره اخرى عن الكود التالي <data:post.body/> بواسطة مفتاحى CTRL+F

*ضع الكود الموجود بالاسفل بعد هذا الكود مباشرة <data:post.body/>
ولا تنسى تغيير الرابط الاحمر في الكود برابط حسابك على فيد برنر
 
<div class='post_social_bookmark'>
<ul class='social' id='jquery'>
<li class='delicious' style='opacity: 1;'><a href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow'' target='_blank'><strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>
<li class='digg' style='opacity: 1;'><a href=' http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong style='opacity:0;'>Digg</strong></a></li>
<li class='facebook' style='opacity: 1;'><a href=' http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><strong style='opacity:0;'>Facebook</strong></a></li>
<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>

<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a>
</li>
<li class='reddit' style='opacity: 1;'><a href=' http://www.reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong style='opacity:0;'>Reddit</strong></a></li>
<li class='rss' style='opacity: 1;'><a href='YOUR FEEDBURNER URL HERE'><strong style='opacity:0;'>RSS</strong></a></li>
<li class='twitter' style='opacity: 1;'><a href=' http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><strong style='opacity:0;'>Twitter</strong></a></li>
</ul>
</div> 
ملحوظه:-  الموضوع بالكامل منقول من احد المواقع الاجنبيه وتمت ترجمته للافاده
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

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

إرسال تعليق

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