الأربعاء، 5 مارس 2014

أزرار المشاركة الإجتماعية أسفل التدوينة بتقنية css

بقلم: BR MED يوم الأربعاء، 5 مارس 2014 القسم : 0 التعليقات

لقد رأينا في التدوينة الماضية ، كيفية وضع أزرار المشاركة الإجتماعية أسفل التدوينة، وتكلمنا عن فائدتها وموضوع هذه الإضافة التي سنراها اليوم مثلها تمام إلا أنها بطريقة css وشكل أزرار  مغاير  ويبقى دورها هو تسهل التفاعل ونشر مواضيع المدونة.
نأتي إلى طريقة التركيب
كالعادة نأخذ نسخة إحتياطية للقالب في حالة حدوث خطأ أو لم تعجبك الإضافة .
1- نذهب لوحة التحكم ثم نختار القالب بعد ذلك تحرير HTML ثم نبحث هذا الوسم : ]]></b:skin>
 .mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:right;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFKhIisVItK_ekhjDWDqZyb0l5gNa2rRzP8gY7XF8Hk9bsLpwmY4CnvNqfVNfBXrLB13Lz0Nwn3Ya4TPZlAg7xI4ETQQLbdW72bGZY_nfNpcL6qfc2Ms8CyU73lKtytr-E-Oypvf-vxZ3Q/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}  

 2- ثم نقوم بالبحث عن هذا الكود: <data:post.body/> سنجده مكرر مرتين أو ثلاث الثاني هو الذي يهمنا وسوف نقوم بوضع هذا الكود أسفله مباشرة.
 <div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :&gt;'/>
<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</b:if></div>

 في الأخير قم بحفظ القالب ،أتمنى أن تستفيد من الموضوع ،لاتنسى دعمنا بلايك لصفحة قصد التوصل بجديد الإضافات والتقنيات في عالم التدوين. في أمان الله

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الاشتراك في: تعليقات الرسالة (Atom)