افضل 12 ايقونة التواصل الاجتماعى بشكل انيق

افضل 12 ايقونة التواصل الاجتماعى بشكل انيق

شاهد هذا الشكل

نأتى للشرح

HTML ادخل على المظهر ثم تعديل

cntrl+F اضرب على الكيبورد 

]]></b:skin> ابحث عن كود

ثم ضع الجزء الاول من الاكواد كما فى الملف 

قبل كود skin

ثم

بنفس الطريقة ابحث عن وسم

<data:post.body/>

وضع هذه الاكواد قبله

.post_social_share {

display: block;

    padding: 8px 0;

    margin-bottom: 0px;

}

.post_social_share h3 {

display: block;

font-size: 14px;

line-height: 54px;

font-weight: 700;

margin-bottom: 0;

letter-spacing: 2px;

}

.post_social_share a {

   width: 42px;

    height: 42px;

    line-height: 42px;

    font-size: 20px;

    display: inline-block;

    text-align: center;

    color: #fff;

    background: #30373b;

    border-radius:50px;

    -o-border-radius:50px;

    -moz-border-radius:50px;

    -webkit-border-radius:50px;

    margin-right: 2px;

}

a.social_share.fb{background:#3F51B5;width:30%}

a.social_share.tw{background:#03A9F4;width:30%;}

a.social_share.gp{background:#F44336;}

a.social_share.pi{background:#CF1B2B;}

.whats{background: #4CAF50!important;}

a.social_share.li{background:#1a7baa;}

a.social_share.em{background:#ccc;}

.post_social_share a:hover {

-webkit-transition:border-color .2s;

-moz-transition:border-color .2s;

transition:border-color .2s

}

.share_this_content a.social_share {

    font-size: 10.5px;

    text-transform: uppercase;

    font-weight: 900;

    margin-bottom:0px;

    vertical-align:top;

}

.share_this_content i{font-size:14px;}

.share_this_content i.fa.fa-facebook,.share_this_content i.fa.fa-twitter{margin-right:5px;}



بنفس الطريقة ابحث عن وسم

<data:post.body/>

وضع هذه الاكواد قبله
_________



<div class='post_social_share'>

    <div class='share_this_content'>



      <a class='social_share fb' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><i class='fa fa-facebook'/> Share on Facebook</a>

      <a class='social_share tw' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><i class='fa fa-twitter'/> Share on Twitter</a>

      <a class='social_share gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'><i class='fa fa-google-plus'/></a>

      <a class='social_share pi' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Share this on Google+'><i class='fa fa-pinterest'/></a>

<a class='social_share whats' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=Take a look at this : &quot; + data:post.url + &quot; From &quot; + data:blog.title'><i class='fa fa-whatsapp'/></a>

<a class='social_share li' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url.canonical + &quot;&amp;title=&quot; + data:view.title.escaped + &quot;&amp;summary=&quot; + data:view.description.escaped' target='_blank'><i class='fa fa-linkedin'/></a>

 <a class='social_share em' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><i class='fa fa-envelope-o'/></a>

    </div>

</div>

أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني: