الدرس 2: اضافة ازرار المشاركة اسفل الموضوع بشكل احترافى لبلوجر

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


اولا: توجه الى القالب و ضغط على تحرير HTML 

ثانيا : اضغط على ctrl+f لكي تبحث على الوسم التالي 
____________________
]]></b:skin>
____________________
 ضع فوقه الكود التالي  
______________________________________________________________________________

.tips {
background: #9FDF4F url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSuz_u6OwM4l9anyxPyPVul0412xv7aXACmQPRzen1VTuCdiRwUcXiixo1WIPuKotM_wRx7ulAZti8YOhN_iwdilcgC27z_XKA0QyYDpEiTBcu-ifrCYjBvjZA4pVJ7tPo_PYXESxOLbYo/s1600/gh.png') no-repeat right;
color: #fff;}
.dhi_menu {
float: left;
margin: 0 0 0 8px;
padding: 0;
position: relative;
z-index: 9999;
margin-top: 26px;}
.dhi_menu ul {
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;}
.dhi_menu ul li {
float: right;
margin: 3px;
display: block;
padding: 0;
margin-top: 8px;}
.dhi_menu a.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJyRq9UZ0ZYZvbZU6CnRWL9LhyMe49dUUg-jYqkiDQ_VcmE7CkfMMQZ5ox43xhfal6vTKisyi_KJKgDEJaWBe83IavghDioPYYsEw4r08Ly48BsGbLOqHgqi2k5Ud2KRUMYZbx46PK_XE/s1600/tw.png) no-repeat 87%;
background-color: #0ba6f7;}
.dhi_menu a.twitter:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJyRq9UZ0ZYZvbZU6CnRWL9LhyMe49dUUg-jYqkiDQ_VcmE7CkfMMQZ5ox43xhfal6vTKisyi_KJKgDEJaWBe83IavghDioPYYsEw4r08Ly48BsGbLOqHgqi2k5Ud2KRUMYZbx46PK_XE/s1600/tw.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.share {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDQhiMBK5rs9gaY-FuehitOHK8cpzpkpFyagN3x6x5gQ2M7cICCDjIxZj94RKb8fw6Pxgg0SFnrheL7ppPbK53b5qh3TVsSTJvMMV0GlynH3_8i4SWbURS8jzW4Zc02HHvE5e37A9JlAo/s1600/fb.png) no-repeat 87% center;
background-color: #003366;}
.dhi_menu a.share:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDQhiMBK5rs9gaY-FuehitOHK8cpzpkpFyagN3x6x5gQ2M7cICCDjIxZj94RKb8fw6Pxgg0SFnrheL7ppPbK53b5qh3TVsSTJvMMV0GlynH3_8i4SWbURS8jzW4Zc02HHvE5e37A9JlAo/s1600/fb.png) no-repeat 87% center;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zjpT9UIQUztMM6W1W8v8PPirWVvxqVftHivnYnRqoiOYdE3dkjEd825fxTgRqJwOeO8dwAb3SI6CQh5XW2_m76sIKkJ9EqjHWPorsbwUsesew3Fz-hGQor788dU2No8a_vj5zJMkK_Q/s1600/g.png) no-repeat 87%;
background-color: #dc311b;}
.dhi_menu a.plus:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0zjpT9UIQUztMM6W1W8v8PPirWVvxqVftHivnYnRqoiOYdE3dkjEd825fxTgRqJwOeO8dwAb3SI6CQh5XW2_m76sIKkJ9EqjHWPorsbwUsesew3Fz-hGQor788dU2No8a_vj5zJMkK_Q/s1600/g.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu ul li a {
padding: 10px 30px 10px 10px;
border-radius: 3px;
font: normal 12px tahoma;
float: right;
display: block;
color: #FFF;}
.tips {
line-height: 22px;
min-height: 0px;
font: 16px ges,arial;
padding: 8px 12px 12px;
margin: 5px 0;
text-align: right;
padding-right: 50px;
direction: rtl;
margin-top: 35px;
margin-bottom: 14px;
}

    _________________________________________________________________
  ثالثا :ابحث عن الكود التالي
___________________________________
<div class='post-footer'>
___________________________________
ثم ضع تحته الكود التالي
______________________________________
<div class='post-footer-line post-footer-line-3'/>
______________________________________
وان لم ينجع ضع فوقه هدا الكود
_________________________________________________________________________________
<div class='dhi_menu'>
<ul>
<li>
<a class='twitter' data-via='course4design' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Twitter'>غرد</a>
</li>
<li>
<a class='share' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &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' target='_blank' title='Share on Facebook'>مشاركة</a>
</li>
<li>
<a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Google Plus'>إضافة</a>
</li>
</ul>
</div>
<div class='tips'>
بضغطة زر تشارك الفائدة وتدعم هاى تك
</div>
_______________________________________________________________________________
== مع تغيير الجملة المكتوبة بالعربية بما يناسبك
والى هنا نكون قد انهينا درسنا اليوم ادا كان هناك اي اعتراض او اي صعوبة لاتترددوا كان معكم اخوكم البشير بويش

 لاتنسى صديقي المتلقي ضع استفسارك في التعليق