23‏/02‏/2015

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

لا تضيع وقتك على الانترنت وتعلم: كيفية انشاء مدونة مجانا للمساهمة في محتوى الانترنت والربح منها.

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

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

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

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

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


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

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

فوق      </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='"http://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='"http://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='"http://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='"http://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","http://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","http://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","http://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","http://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;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,&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;http://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;http://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;http://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;http://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='http://twitter.com/share' rel='nofollow'/><script src='http://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 */



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

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

قد تود قراءة:

29 تعليقات

غير معرف delete 9/15/2015

كيف افعل خطوة 3 و 4 و 5 ؟ماذا اضع اسفل ؟؟ اسفل ماذا وفوق ماذا ؟

أخي قم بمراجعة الدرس التالي
http://www.folfoly.com/2015/09/Display-Anything-Above-and-Below-Blogger-Posts.html

شكرا لك عملت جميع الخطوات ولكن لم يظهر لي !

هل يجب ان يظهر في التدوينه التتي اكتبها او في الصفحة الاماميه للمدونه

لا سيظهر أسفل المواضيع في نهاية المشاركات قبل التعليقات..صراحة أنا مشغوا قليلا. اترك لي بريدك الالكتروني ساتصل بك عندما اكون غير مشغول وسافعل ما بوسعي للمساعدة

غير معرف delete 9/16/2015

lamyaa08@hotmail.com

اسفة جدا لازعاجك اتمني لك التوفيق

لا بأس
ارسلي لي القالب وسأقوم بإضافة الأزرار من أجلك
yanbaha@gmail.com

غير معرف delete 9/16/2015

http://3rababroad.blogspot.com/

هل تستطيع اجرا التعديلات عليه انا اريد قالبك ولكن التفسيمات لا احتاجها اريد وكذلك قصص وؤين و اسمك ومعلوماتك

لحظة من فضلك وسأقوم بذك وأرسله إليك

ها هو القالب بعد تغييره
http://bit.ly/1KqHDfM

غير معرف delete 9/16/2015

وااااااااو عمل جدا ممتاااااااااز شكرا لك انت فعلا تستحق الشكر ..

1-في اخر الصفحة مكتوب قالب من فولفولي اذا لا يضر بمدونتي فلا امانع من بقاءه
2- كذللك المشاركات الشائعه متواجدة مرتين و شارك في التعليقات متواجدة 2 .
3 هل استطيع تغير الالوان ؟
4- لااريد اداة متابعه المتربطه بقوقل هل يمكن الغائها ؟؟

شكرا واعتذر لكثرة الاسئله

غير معرف delete 9/17/2015

مدونتي ستكون منوعه جدا عن كل مايجول في خاطري ماهي التقسيمات التي اضيفها وكذلك ساتكلم عن الابتعاث ؟

هل اجعل الابتعاث قسم ومدونات متنوعه قسم واتصل ينا والرئسيه ؟؟ او لديك راي اخر ؟
كيف انسق اسم مدونتي بشكل جميل اعجبني طريقة الاسم في مدونتك بالوسط وبشكل لائق

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

عليك أن تبحث عن المدونات الشخصية ومشاهدة التقسيمات التي يتم استعمالها وستكون لديك فكرة
قم بالبحث في جوجل عن: مدونة شخصية
بالنسبة لشكل القالب سأقوم بنشر قالب جديد قريبا وستحصل على ما تريد
قم الان بالاهتمام بنشر مقالالت جيدة واهتم بالشكل بعد ذلك

غير معرف delete 9/17/2015

اتفهم ذلك لا مشكله لدي اتمني لك التوفيق

غير معرف delete 9/17/2015

لا اعرف كيف اضيف التقسيمات هل ممكن تضيفها لي ؟

غير معرف delete 9/17/2015

شكرا لشرحك لقد قمت بالحذف ولكن اداة الملف الخاص و نتابعة المرتبطة بقوقل للم استطع حذفهما

غير معرف delete 9/17/2015

كيف اكتب في خاتة من انا ؟

بالنسبة للتقسيمات قم بكتابة المواضيع أولا
سأقوم بإضافة درس يشرح كيف تقوم بإضافة التسميات

هناك درس قادم ساشرح فيه الطريقة

غير معرف delete 9/17/2015

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

غير معرف delete 9/17/2015

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

غير معرف delete 9/17/2015

شكرا لقد عرفت كيف اكتب فيها وانتظردروسك

غير معرف delete 9/18/2015

كيف اضع انضم اللى قاتمتي البريديه

غير معرف delete 9/18/2015

تحت اسفل المدونه لايوجد لدي الا فقط توتير كيف اضيفها كلها

قم بالبحث في فولفولي عن : أزرار الشبكات الاجتماعية
وستجد دروس خاصة بذلك

جزاك الله خيرا أخي اتمنى لك التوفيق

امين ولك مثل ذلك
شكرا على مرورك

شكرا الاخ ابراهيم زكاغ جزاك الله خيرا

وجزاك بمثل ذلك
شكرا لك

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله