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

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

ازرار المشاركة على الشبكات الإجتماعية  لمدونات بلوجر لها دور مهم جدا لأنها تساعد الزوار على نشر محتوى المدونة بسهولة بحيث يؤدي ذلك إلى زيادة عدد الزيارات والصفحات المشاهدة.
هذا الدرس يشرح طريقة اضافة هذه الاداة على مدونتك عبر تعديل كود القالب.

ازرار المشاركة الاجتماعية  على الشبكات الاجتماعية متجاوبة

ازرار المشاركة
ازرار المشاركة على الشبكات الاجتماعية متجاوبة

اداة مهمة كثيرا، حيث تلعب دورا اساسيا في نشر محتوى المدونة على الشبكات الاجتماعية وبالتالي جلب المزيد من الزوار.

الشرح بالفيديو:
ذ


اكواد الاضافة:

 اضيفوا الاكواد التالية:

فوق      </head>   :

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>


تحت   <data:post.body/> :



<style>
.rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:' ';display:table}.rrssb-buttons li{box-sizing:border-box;float:right;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-email a{background-color:#0a88ff}.rrssb-buttons li.rrss.b-email a:hover{background-color:#006ed6}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-tumblr a{background-color:#32506d}.rrssb-buttons li.rrssb-tumblr a:hover{background-color:#22364a}.rrssb-buttons li.rrssb-linkedin a{background-color:#007bb6}.rrssb-buttons li.rrssb-linkedin a:hover{background-color:#005983}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.rrssb-googleplus a{background-color:#e93f2e}.rrssb-buttons li.rrssb-googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.rrssb-youtube a{background-color:#df1c31}.rrssb-buttons li.rrssb-youtube a:hover{background-color:#b21627}.rrssb-buttons li.rrssb-reddit a{background-color:#8bbbe3}.rrssb-buttons li.rrssb-reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.rrssb-pinterest a{background-color:#b81621}.rrssb-buttons li.rrssb-pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.rrssb-pocket a{background-color:#ed4054}.rrssb-buttons li.rrssb-pocket a:hover{background-color:#e4162d}.rrssb-buttons li.rrssb-github a{background-color:#444}.rrssb-buttons li.rrssb-github a:hover{background-color:#2b2b2b}.rrssb-buttons li.rrssb-instagram a{background-color:#125688}.rrssb-buttons li.rrssb-instagram a:hover{background-color:#0c3a5b}.rrssb-buttons li.rrssb-delicious a{background-color:#0b79e5}.rrssb-buttons li.rrssb-delicious a:hover{background-color:#095fb4}.rrssb-buttons li.rrssb-vk a{background-color:#4d71a9}.rrssb-buttons li.rrssb-vk a:hover{background-color:#3d5a86}.rrssb-buttons li.rrssb-hackernews a{background-color:#f60}.rrssb-buttons li.rrssb-hackernews a:hover{background-color:#cc5200}.rrssb-buttons li.rrssb-whatsapp a{background-color:#43d854}.rrssb-buttons li.rrssb-whatsapp a:hover{background-color:#28c039}.rrssb-buttons li.rrssb-print a{background-color:#8d98a2}.rrssb-buttons li.rrssb-print a:hover{background-color:#717f8b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;padding:11px 34px 12px 7px;position:relative;text-decoration:none;text-transform:uppercase;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display: block;
right: 5px;
padding-top: 9px;
position: absolute;
top: -4px;
width: 13%;}.rrssb-buttons li a .rrssb-icon .fa{height:17px;width:17px; font-size: 1.7em; color: #fff;}.rrssb-buttons li a .rrssb-icon .fa circle,.rrssb-buttons li a .rrssb-icon .fa path{fill:#fff}.rrssb-buttons li a .rrssb-text{color:#fff; font-size: 129%;}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .rrssb-icon{left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .rrssb-text{visibility:hidden}.rrssb-buttons.large-format,.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:.2em;padding:8.5% 0 8.5% 12%}.rrssb-buttons.large-format li a .rrssb-icon{height:100%;left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .rrssb-icon .fa{height:100%;position:absolute;top:0;width:100%}.rrssb-buttons.large-format li a .rrssb-text{-webkit-backface-visibility:hidden;backface-visibility:hidden}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1px}.rrssb-buttons.small-format li a .rrssb-icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .rrssb-icon .fa{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .rrssb-icon{height:100%}.rrssb-buttons.tiny-format li a .rrssb-icon .fa{height:70%;width:100%}.rrssb-buttons.tiny-format li a:active,.rrssb-buttons.tiny-format li a:hover{background-color:transparent}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon .fa path{fill:#0a88ff}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon .fa path{fill:#0054a3}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon .fa path{fill:#306199}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon .fa path{fill:#18304b}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon .fa path{fill:#32506d}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon .fa path{fill:#121d27}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon .fa path{fill:#007bb6}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon .fa path{fill:#003650}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon .fa path{fill:#26c4f1}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon .fa path{fill:#0b84a6}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon .fa path{fill:#e93f2e}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon .fa path{fill:#a01e11}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon .fa path{fill:#df1c31}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon .fa path{fill:#84111d}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon .fa path{fill:#8bbbe3}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon .fa path{fill:#398bcf}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon .fa path{fill:#b81621}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon .fa path{fill:#5d0b11}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon .fa path{fill:#ed4054}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon .fa path{fill:#b61124}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon .fa path{fill:#444}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon .fa path{fill:#111}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon .fa path{fill:#125688}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon .fa path{fill:#061d2e}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon .fa path{fill:#0b79e5}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon .fa path{fill:#064684}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon .fa path{fill:#4d71a9}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon .fa path{fill:#2d4263}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon .fa path{fill:#f60}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon .fa path{fill:#993d00}.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon .fa path{fill:#43d854}.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon:hover .rrssb-icon .fa path{fill:#1f962d}.rrssb-buttons.tiny-format li.rrssb-print a .rrssb-icon .fa path{fill:#8d98a2}.rrssb-buttons.tiny-format li.rrssb-print a .rrssb-icon:hover .rrssb-icon .fa path{fill:#5a656f}
</style>
<ul class='rrssb-buttons'>

<li class='rrssb-facebook'>
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header:
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a class='popup' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<span class='rrssb-icon'>
<i class='fa fa-facebook fa-3x social'/>
</span>
<span class='rrssb-text'>فيس بوك</span>
</a>
</li>
<li class='rrssb-linkedin'>
<!-- Replace href with your meta and URL information -->
<a class='popup' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<span class='rrssb-icon'>
<i class='fa fa-linkedin fa-3x social'/>
</span>
<span class='rrssb-text'>لينكد إن</span>
</a>
</li>
<li class='rrssb-twitter'>
<a class='popup' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<span class='rrssb-icon'>
<i class='fa fa-twitter fa-3x social'/>
</span>
<span class='rrssb-text'>تويتر</span>
</a>
</li>
<li class='rrssb-googleplus'>
<!-- Replace href with your meta and URL information. -->
<a class='popup' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<span class='rrssb-icon'>
<i class='fa fa-google-plus fa-3x social'/>
</span>
<span class='rrssb-text'>جول بلوس</span>
</a>
</li>

<li class='rrssb-pinterest'>
<!-- Replace href with your meta and URL information. -->
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>
<span class='rrssb-icon'>
<i class='fa fa-pinterest fa-3x social'/>
</span>
<span class='rrssb-text'>بانتريست</span>
</a>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
+function(t,e,i){"use strict";var r={calc:!1};e.fn.rrssb=function(t){var r=e.extend({description:i,emailAddress:i,emailBody:i,emailSubject:i,image:i,title:i,url:i},t);r.emailSubject=r.emailSubject||r.title,r.emailBody=r.emailBody||(r.description?r.description:"")+(r.url?"\n\n"+r.url:"");for(var s in r)r.hasOwnProperty(s)&&r[s]!==i&&(r[s]=a(r[s]));r.url!==i&&(e(this).find(".rrssb-facebook a").attr("href","https://www.facebook.com/sharer/sharer.php?u="+r.url),e(this).find(".rrssb-tumblr a").attr("href","https://tumblr.com/share/link?url="+r.url+(r.title!==i?"&name="+r.title:"")+(r.description!==i?"&description="+r.description:"")),e(this).find(".rrssb-linkedin a").attr("href","https://www.linkedin.com/shareArticle?mini=true&url="+r.url+(r.title!==i?"&title="+r.title:"")+(r.description!==i?"&summary="+r.description:"")),e(this).find(".rrssb-twitter a").attr("href","https://twitter.com/intent/tweet?text="+(r.description!==i?r.description:"")+"%20"+r.url),e(this).find(".rrssb-hackernews a").attr("href","https://news.ycombinator.com/submitlink?u="+r.url+(r.title!==i?"&text="+r.title:"")),e(this).find(".rrssb-vk a").attr("href","https://vk.com/share.php?url="+r.url),e(this).find(".rrssb-reddit a").attr("href","https://www.reddit.com/submit?url="+r.url+(r.description!==i?"&text="+r.description:"")+(r.title!==i?"&title="+r.title:"")),e(this).find(".rrssb-googleplus a").attr("href","https://plus.google.com/share?url="+(r.description!==i?r.description:"")+"%20"+r.url),e(this).find(".rrssb-pinterest a").attr("href","https://pinterest.com/pin/create/button/?url="+r.url+(r.image!==i?"&media="+r.image:"")+(r.description!==i?"&description="+r.description:"")),e(this).find(".rrssb-pocket a").attr("href","https://getpocket.com/save?url="+r.url),e(this).find(".rrssb-github a").attr("href",r.url),e(this).find(".rrssb-print a").attr("href","javascript:window.print()"),e(this).find(".rrssb-whatsapp a").attr("href","whatsapp://send?text="+(r.description!==i?r.description+"%20":r.title!==i?r.title+"%20":"")+r.url)),(r.emailAddress!==i||r.emailSubject)&&e(this).find(".rrssb-email a").attr("href","mailto:"+(r.emailAddress?r.emailAddress:"")+"?"+(r.emailSubject!==i?"subject="+r.emailSubject:"")+(r.emailBody!==i?"&body="+r.emailBody:""))};var s=function(){var t=e("<div>"),i=["calc","-webkit-calc","-moz-calc"];e("body").append(t);for(var s=0;s<i.length;s++)if(t.css("width",i[s]+"(1px)"),1===t.width()){r.calc=i[s];break}t.remove()},a=function(t){if(t!==i&&null!==t){if(null===t.match(/%[0-9a-f]{2}/i))return encodeURIComponent(t);t=decodeURIComponent(t),a(t)}},n=function(){e(".rrssb-buttons").each(function(t){var i=e(this),r=e("li:visible",i),s=r.length,a=100/s;r.css("width",a+"%").attr("data-initwidth",a)})},l=function(){e(".rrssb-buttons").each(function(t){var i=e(this),r=i.width(),s=e("li",i).not(".small").eq(0).width(),a=e("li.small",i).length;if(s>170&&1>a){i.addClass("large-format");var n=s/12+"px";i.css("font-size",n)}else i.removeClass("large-format"),i.css("font-size","");25*a>r?i.removeClass("small-format").addClass("tiny-format"):i.removeClass("tiny-format")})},o=function(){e(".rrssb-buttons").each(function(t){var i=e(this),r=e("li",i),s=r.filter(".small"),a=0,n=0,l=s.eq(0),o=parseFloat(l.attr("data-size"))+55,c=s.length;if(c===r.length){var d=42*c,u=i.width();u>d+o&&(i.removeClass("small-format"),s.eq(0).removeClass("small"),h())}else{r.not(".small").each(function(t){var i=e(this),r=parseFloat(i.attr("data-size"))+55,s=parseFloat(i.width());a+=s,n+=r});var m=a-n;m>o&&(l.removeClass("small"),h())}})},c=function(t){e(".rrssb-buttons").each(function(t){var i=e(this),r=e("li",i);e(r.get().reverse()).each(function(t,i){var s=e(this);if(s.hasClass("small")===!1){var a=parseFloat(s.attr("data-size"))+55,n=parseFloat(s.width());if(a>n){var l=r.not(".small").last();e(l).addClass("small"),h()}}--i||o()})}),t===!0&&u(h)},h=function(){e(".rrssb-buttons").each(function(t){var i,s,a,l,o,c=e(this),h=e("li",c),d=h.filter(".small"),u=d.length;u>0&&u!==h.length?(c.removeClass("small-format"),d.css("width","42px"),a=42*u,i=h.not(".small").length,s=100/i,o=a/i,r.calc===!1?(l=(c.innerWidth()-1)/i-o,l=Math.floor(1e3*l)/1e3,l+="px"):l=r.calc+"("+s+"% - "+o+"px)",h.not(".small").css("width",l)):u===h.length?(c.addClass("small-format"),n()):(c.removeClass("small-format"),n())}),l()},d=function(){e(".rrssb-buttons").each(function(t){e(this).addClass("rrssb-"+(t+1))}),s(),n(),e(".rrssb-buttons li .rrssb-text").each(function(t){var i=e(this),r=i.width();i.closest("li").attr("data-size",r)}),c(!0)},u=function(t){e(".rrssb-buttons li.small").removeClass("small"),c(),t()},m=function(e,r,s,a){var n=t.screenLeft!==i?t.screenLeft:screen.left,l=t.screenTop!==i?t.screenTop:screen.top,o=t.innerWidth?t.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,c=t.innerHeight?t.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,h=o/2-s/2+n,d=c/3-a/3+l,u=t.open(e,r,"scrollbars=yes, width="+s+", height="+a+", top="+d+", left="+h);u&&u.focus&&u.focus()},f=function(){var t={};return function(e,i,r){r||(r="Don't call this twice without a uniqueId"),t[r]&&clearTimeout(t[r]),t[r]=setTimeout(e,i)}}();e(document).ready(function(){try{e(document).on("click",".rrssb-buttons a.popup",{},function(t){var i=e(this);m(i.attr("href"),i.find(".rrssb-text").html(),580,470),t.preventDefault()})}catch(i){}e(t).resize(function(){u(h),f(function(){u(h)},200,"finished resizing")}),d()}),t.rrssbInit=d}(window,jQuery);
//]]>
</script>


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

سيتم اضافة نوعين من الأكواد:
1 - كود  html  يتم اضافته فوق الكود التالي داخل القالب: <data:post.body/>
2 - كود css  يتم اضافته فوق الكود التالي بنفس الطريقة: ]]></b:skin>



1 - ازرار المشاركة بتصميم بسيط

أزرار المشاركة على الشبكات الاجتماعية
 ازرار المشاركة اسفل الموضوع لمدونات بلوج

كود html :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethisbutt'>
<h4>شارك أصدقائك</h4>
<ul class='social-ikonz' id='social-post-un'>

<li class='Share-this-arti'>
</li>
<li class='facebook'>
<a expr:href='&quot;https://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,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' title='Share this on Facebook'><p>Facebook</p></a>
</li>
<li class='twitter'>
<a expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' title='Tweet This!'><p>Twitter</p></a>
</li>
<li class='google'>
<a 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+'><p>Google+</p></a>
</li>
<li class='stumbleupon'>
<a expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><p>Stumble</p></a>
</li>
<li class='digg'>
<a expr:href='&quot;https://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><p>Digg</p></a>
</li>
</ul>
</div>
</b:if>


كود   css:


ul#social-post-un li a:hover {
color: #fff;
}
ul#social-post-un li a {
color: #333;
}
ul#social-post-un li {
border-right: 1px solid #F5F5F5;
cursor: pointer;
float: left;
list-style: none outside none;
position: relative;
}
#social-post-un li p {
color: #FFFFFF;
font-size: 10px;
margin: 0;
text-align: center;
}
ul#social-post-un li {
border-right: 1px solid #F5F5F5;
cursor: pointer;
float: left;
list-style: none outside none;
margin-right: 15px;
position: relative;
}

#social-post-un a {
display: block;
margin-bottom: 0;
margin-left: auto;
margin-top: 0;
padding: 0 10px;
}

#social-post-un strong {
display: block;
width: auto;
padding: 4px 7px;
position: absolute;
background-color: #E4402B;
color: white;
left: 200%;
bottom: 40px;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
visibility: hidden;
}
#social-post-un li:hover strong {
left: 20%;
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
}


.sharethisbutt .facebook {
background: #3C5B9B;
color: white;
}
.sharethisbutt h4{
margin-left: auto;
margin-right: auto;
padding: 5px;
border-radius: 2px;
border-bottom: 1px dashed black;
position: relative;
text-align: center;
width: 80%;
font-family: Tahoma;
}
.sharethisbutt .twitter {
background: #2DAAE1;
color: white;
}
.sharethisbutt .google {
background: #F63E28;
color: white;
}
.sharethisbutt .stumbleupon {
background: #eb4924;
color: white;
}
.sharethisbutt .digg {
background: #1b5891;
color: white;
}
.sharethisbutt .delicious {
background: #333;
color: white;
}
.sharethisbutt .linkedin {
background: #0173b2;
color: white;
}
.sharethisbutt .reddit {
background: #fe3432;
color: white;
}
.sharethisbutt .technorati {
background: #6DC125;
color: white;
}

ul#social-post-un {

background-color: #d1cfcf;
border: 1px solid #bfbebe;
border-radius: 2px;
height: 20px;
margin-left: auto;
margin-right: auto;
padding: 5px;
width: 80%;
}


2 - أزرار مخفية

تعمل كما يلي:
1 - ظهور مربع يطلب من الزائر مشاركة المحتوى بهذا الشكل:
رسالة تطلب بمشاركة المحتوى

2 - بمجرد مرور سهم فأرة الحاسوب فوق الرسالة سيتم إظهار الأزرار المخفية:
إظهار أزرار  المشاركة الإجتماعية

جميل أليس كذلك؟
لنمر الآن لطريقة إضافة هذه الأداة على مدونات بلوجر.

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

كود html :


<div class='share-container'>
<div class='flip-div'>
<div class='front'>
شارك أصدقائك لتعم الفائدة
</div>
<div class='back'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-us'>
<span class='bags'>
<iframe allowTransparency='true' expr:src='&quot;https://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</span>
<span class='bags'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></span>
<span class='bags'>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share' rel='nofollow'/><script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
</span>
</div>
</b:if>
</div>
</div>
</div>

كود css:

/* hidden share buttons */

.share-container {
perspective: 1000;
transform-style: preserve-3d;
}
.share-container, .front, .back {
width: 500px;
height: 60px;
}
.share-container:hover .back {
transform: rotateY(0deg);
}
.share-container:hover .front {
transform: rotateY(180deg);
}

.front, .back {
border:2px solid #CCC;
border-radius:10px;
line-height:60px;
text-align:center;
background:#EEE;
box-shadow:0 0 2px #aaa;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.flip-div {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front {
z-index: 2;
color:#666;
text-shadow:0 0 3px #fff;
font-size:1.3em;
font-family: 'Droid Arabic Kufi', serif, 'PT Sans', Arial, sans-serif;
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg);
}
.back img {
vertical-align:middle;
}
.share-us{margin:12px 0 13px 1px; !important; width:100%; position:relative;}

/* hidden share buttons */



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

انتظروا تصميمات لازرار المشاركة بأشكال جديدة قريبا.