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

Add-buttons-deploy-social-networking-sites-bottom-of-each-codification
أقدم لكم أضافه جميله ومهم وهي أزرار مشاركه الموضوع على مواقع التواصل الاجتماعي هده الإضافه احد أهم الإضافات التي يجب إن تكون موجودة في كل مدونه الاضافه هده معروفه لد الجميع وهي أزرار أسفل كل موضوع يستطيع من خلاله الزائر نشر الموضوع في موقع التواصل الاجتماعي
نضع لكم هنا شكل مميز وجدب هد الشكل يحتوي على حركات مميزه وتم تقسيم الاضافه إلى اربح أقسام كل قسم لديه حركه مختلفة عند التأشير باستخدام الماوس هده


شرح التركيب


خط الإيقونات

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
يجب إن تضيف قبل كل شي خط الإيقونات أد كان موجود في مدونتك فلا داعي لتركيبه

تركيب تنسيقات الاضافه

ألان نأتي إلى تركيب اكواد CSS الخاصة بالإضافة نبحث عن ]]></b:skin>  ونضيف فوقه مباشرتًا الكود التالي
كود CSS الخاص بأزرار

تركيب الإضافة

أخر خطوه وهي تركيب أكواد HTML الخاص بإضافة ابحث عن <data:post.body/> ستجده مكرره اختار الثانية وضع الكود حسب الحركة الذي تريده فوقه مباشره

الحركه الأولى: تتحرك إلى اليمين


<b:if cond='data:blog.url == "item"'>
<div class="viavi_share">
<!--End of Button 1 -->
<div class="Vbtn Vfacebook Vslide_x">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-facebook"></i></div>
          <div class="Vslide"> <span> facebook </span> </div>
          <div class="viavi_bg_button">
            <div> facebook </div>
          </div>
          </a>
        </div>
        <!--End of Button 2 -->
 <div class="Vbtn Vtwitter Vslide_x">
 <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url'>
          <div class="Vicon"><i class="fa fa-twitter"></i></div>
          <div class="Vslide"> <span> twitter </span> </div>
          <div class="viavi_bg_button">
            <div>twitter </div>
          </div>
          </a>
        </div>
      <!--End of Button 3 -->
        <div class="Vbtn Vgplus Vslide_x">
        <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-google-plus"></i></div>
          <div class="Vslide"> <span> google </span> </div>
          <div class="viavi_bg_button">
            <div>google</div>
          </div>
          </a>
        </div>
        <!--End of Button 4 -->
        <div class="Vbtn Vlinkedin Vslide_x">
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets'>
          <div class="Vicon"><i class="fa fa-linkedin"></i></div>
          <div class="Vslide"> <span> linkedin </span> </div>
          <div class="viavi_bg_button">
            <div>linkedin</div>
          </div>
          </a>
        </div>
       <!--End of Button 5 -->
        <div class="Vbtn Vpinterest Vslide_x">
        <a  expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;'>
          <div class="Vicon"><i class="fa fa-pinterest-p"></i></div>
          <div class="Vslide"> <span> pinterest </span> </div>
          <div class="viavi_bg_button">
            <div>pinterest</div>
          </div>
          </a>
          </div>
</div>
</b:if>

الحركه ألثانيه: تتحرك إلى اليسار


<b:if cond='data:blog.url == "item"'>
<div class="viavi_share">
<!--End of Button 1 -->
<div class="Vbtn Vfacebook Vslide_nx">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-facebook"></i></div>
          <div class="Vslide"> <span> facebook </span> </div>
          <div class="viavi_bg_button">
            <div> facebook </div>
          </div>
          </a>
        </div>
        <!--End of Button 2 -->
 <div class="Vbtn Vtwitter Vslide_nx">
 <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url'>
          <div class="Vicon"><i class="fa fa-twitter"></i></div>
          <div class="Vslide"> <span> twitter </span> </div>
          <div class="viavi_bg_button">
            <div>twitter </div>
          </div>
          </a>
        </div>
      <!--End of Button 3 -->
        <div class="Vbtn Vgplus Vslide_nx">
        <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-google-plus"></i></div>
          <div class="Vslide"> <span> google </span> </div>
          <div class="viavi_bg_button">
            <div>google</div>
          </div>
          </a>
        </div>
        <!--End of Button 4 -->
        <div class="Vbtn Vlinkedin Vslide_nx">
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets'>
          <div class="Vicon"><i class="fa fa-linkedin"></i></div>
          <div class="Vslide"> <span> linkedin </span> </div>
          <div class="viavi_bg_button">
            <div>linkedin</div>
          </div>
          </a>
        </div>
       <!--End of Button 5 -->
        <div class="Vbtn Vpinterest Vslide_nx">
        <a  expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;'>
          <div class="Vicon"><i class="fa fa-pinterest-p"></i></div>
          <div class="Vslide"> <span> pinterest </span> </div>
          <div class="viavi_bg_button">
            <div>pinterest</div>
          </div>
          </a>
          </div>
</div>
</b:if>

الحركه ألثالثه: تتحرك إلى أعلاء


<b:if cond='data:blog.url == "item"'>
<div class="viavi_share">
<!--End of Button 1 -->
<div class="Vbtn Vfacebook Vslide_ny">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-facebook"></i></div>
          <div class="Vslide"> <span> facebook </span> </div>
          <div class="viavi_bg_button">
            <div> facebook </div>
          </div>
          </a>
        </div>
        <!--End of Button 2 -->
 <div class="Vbtn Vtwitter Vslide_ny">
 <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url'>
          <div class="Vicon"><i class="fa fa-twitter"></i></div>
          <div class="Vslide"> <span> twitter </span> </div>
          <div class="viavi_bg_button">
            <div>twitter </div>
          </div>
          </a>
        </div>
      <!--End of Button 3 -->
        <div class="Vbtn Vgplus Vslide_ny">
        <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-google-plus"></i></div>
          <div class="Vslide"> <span> google </span> </div>
          <div class="viavi_bg_button">
            <div>google</div>
          </div>
          </a>
        </div>
        <!--End of Button 4 -->
        <div class="Vbtn Vlinkedin Vslide_ny">
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets'>
          <div class="Vicon"><i class="fa fa-linkedin"></i></div>
          <div class="Vslide"> <span> linkedin </span> </div>
          <div class="viavi_bg_button">
            <div>linkedin</div>
          </div>
          </a>
        </div>
       <!--End of Button 5 -->
        <div class="Vbtn Vpinterest Vslide_ny">
        <a  expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;'>
          <div class="Vicon"><i class="fa fa-pinterest-p"></i></div>
          <div class="Vslide"> <span> pinterest </span> </div>
          <div class="viavi_bg_button">
            <div>pinterest</div>
          </div>
          </a>
          </div>
</div>
</b:if>

الحركه ألربعه: تتحرك إلى أسفل


<b:if cond='data:blog.url == "item"'>
<div class="viavi_share">
<!--End of Button 1 -->
<div class="Vbtn Vfacebook Vslide_y">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-facebook"></i></div>
          <div class="Vslide"> <span> facebook </span> </div>
          <div class="viavi_bg_button">
            <div> facebook </div>
          </div>
          </a>
        </div>
        <!--End of Button 2 -->
 <div class="Vbtn Vtwitter Vslide_y">
 <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url'>
          <div class="Vicon"><i class="fa fa-twitter"></i></div>
          <div class="Vslide"> <span> twitter </span> </div>
          <div class="viavi_bg_button">
            <div>twitter </div>
          </div>
          </a>
        </div>
      <!--End of Button 3 -->
        <div class="Vbtn Vgplus Vslide_y">
        <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url'>
          <div class="Vicon"><i class="fa fa-google-plus"></i></div>
          <div class="Vslide"> <span> google </span> </div>
          <div class="viavi_bg_button">
            <div>google</div>
          </div>
          </a>
        </div>
        <!--End of Button 4 -->
        <div class="Vbtn Vlinkedin Vslide_y">
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets'>
          <div class="Vicon"><i class="fa fa-linkedin"></i></div>
          <div class="Vslide"> <span> linkedin </span> </div>
          <div class="viavi_bg_button">
            <div>linkedin</div>
          </div>
          </a>
        </div>
       <!--End of Button 5 -->
        <div class="Vbtn Vpinterest Vslide_y">
        <a  expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;'>
          <div class="Vicon"><i class="fa fa-pinterest-p"></i></div>
          <div class="Vslide"> <span> pinterest </span> </div>
          <div class="viavi_bg_button">
            <div>pinterest</div>
          </div>
          </a>
          </div>
</div>
</b:if>

هده الاضافه تعتبر من أهم الإضافات الذي يجب أن تكون موجوده في كل مدونة فهيا تعمل على كسب زوار وإشهار المدونة ومن خلاله يستطيع الزائر نشر الموضوع في جميع مواقع التواصل الاجتماعي تقريباً

هناك تعليقان (2):