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

سلام عليكم ورحمة الله وبركات

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


هذه الاضافة تتمتع بـ
• تصميم جميل و ملفت
• لا تؤثر في سرعة المدونة لأنها لا تحتوي على صور
• تتوفر على خاصية Hover جميلة

لتركيب الاضافة
اذهب الى قالب ثم تحرير HTML ثم ابحث عن هذا الكود ]]></b:skin> ثم قم بوضع هذا الكود فوقه

رمز Code:

/* ازرار المشاركة
----------------------------*/
#tech-ly {display:block;}
.shareicn {width:100%;height:47px;margin: 16px 5px;}
.share-a {color: #FFF!important;
font-size: 12px;
padding: 7% 0% 7% 0%;
margin-right: -17px;
font-weight: bold;
font-family: tahoma;
-webkit-font-smoothing: antialiased;
text-decoration: none;}
.share-a:hover {color:#fff!important;}
.fb {background-color:#306199;}
.fb:hover {background-color: #244872;}
#shareicn-bg {width: 32%;
height: 47px;
border-radius: 0.2em;
display: block;
margin: 0 2.5px;
transition: background-color 0.2s ease-in-out;
position: relative;
float: right;}
.twitter {background-color: #26C4F1;}
.twitter:hover{background-color: #0EAAD6;}
.google {background-color: #E93F2E;}
.google:hover{background-color: #CE2616;}
.share-icons {left: 7%;
width: 12%;
height: 100%;
padding-top: 9px;
position: absolute;}
.path {fill: #FFF;}
/*-----tech-ly.blogspot.com-----*/

ثم ابحث عن هذا الكود <data:post.body/>
قد تجد الكود مكرر 3 مرات , قم بتجريب كل واحدة
ثم اضف هذا الكود تحته

رمز Code:

<!-- tech-ly.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<tech-ly.com class='shareicn' id='tech-ly'>
<center>
<!-- tech-ly.blogspot.com -->
<a class='share-a' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;'>
<div class='google' id='shareicn-bg'>
<span class='share-icons' id='tech-ly'>
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<g>
<g>
<path class='path' d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/>
<polygon class='path' points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 '/>
</g>
</g>
</svg>
</span>
<div class='share-a'>قوقل+</div>
</div></a>
<!-- tech-ly.blogspot.com -->
<a class='share-a' expr:href='&quot; http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url + &quot; -- &quot; + &quot; via www.tech-ly.blogspot.com &quot;' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;'>
<div class='twitter' id='shareicn-bg'>
<span class='share-icons' id='tech-ly'>
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<path class='path' d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z'/>
</svg>
</span>
<div class='share-a'>تويتر</div>
</div></a>
<!-- tech-ly.blogspot.com -->
<a class='share-a' expr:href='&quot;http://www.facebook.com/share.php? v=4&amp;src=bm&amp;u=&quot; + data:post.url + &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;'>
<div class='fb' id='shareicn-bg'>
<span class='share-icons' id='tech-ly'>
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<path class='path' d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/>
</svg>
</span>
<div class='share-a'>فيس بوك</div>
</div></a>
</center>
</tech-ly.com>
</b:if>
<!-- tech-ly.blogspot.com -->

الان اضغط على حفظ النموذج