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

بالتأكيد شاهدت من قبل ازرار مشاركات التواصل الاجتماعى اسفل مواضيع مدونتك او مدونة تزورها ، وهى بالطبع تتواجد فى اكثر القوالب مضافة جاهزة ، فسنتكلم اليوم على مدونة اللامي عن اضافة ازرار التواصل الاجتماعي اسفل التدوينة بشكل جميل جدا واحترافي ومن مميزات هذه الاضافة ان الازرار تحتوى على تأثير " hover " تأثير الظل عند مرور الماوس على زر المشاركة من أساسيات الاضافة انها تحتوى على جوجل ، فيسبوك ، تويتر ، بنتريست وايقونة منبثقة " + " تحتوى على نافذة منبثقة ، والمزيد من مواقع تواصل اخرى قليلة الاستخدام .

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

كيفية اضافة ازرار المشاركات الاجتماعية

1. اذهب الى لوحة التحكم فى بلوجر
2. انتقل الى قسم " قالب "
3. اضغط على " تحرير HTML "
4. ضع الكود التالى فوق ]]></b:skin>

/* share post mustafa1.com */ .share,h4.sharetitle{display:inline-block;float:right;position:relative} h4.sharetitle{width:80px;text-transform:uppercase;font-size:15px;padding:0;margin-top:3px;margin-left:25px;text-align:center;font-weight:bold;color:#777} h4.sharetitle:before{content:"\f1e0";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:17px;padding:2px 35px 0;text-align:center;} .sharethis{position:relative;margin:0} .share{position:relative;margin:0;} .share a,span.pl{display:inline-block;color:#fff;padding:12px 0 10px;width:85px;text-align:center;float:right;margin-left:8px;margin-bottom:8px;border-radius:5px;} .share a:hover,span.pl:hover{box-shadow:0 0 10px rgba(0,0,0,.3)} .share i,span.pl i {font-size:25px;padding:0;margin:0} a.gp{background:#de3425} a.fb{background:#395796} a.tw{background:#4cb0ea} a.pr{background:#0a7111} a.pin{background:#ce2127} span.pl{background:#ff9d40;cursor:pointer} #share-menu{display:none} .dropdown-menu{position: absolute;top: 100%;left:2px;z-index:9999;float: right;padding:0;margin:5px 0 0;font-size: 14px;list-style: none;-webkit-background-clip: padding-box;background-clip: padding-box} ul.dropdown-menu{margin:10px 0 0 !important;background-color:#fff;box-shadow: 0 1px 4px rgba(0,0,0,.6);border-radius:2px} .dropdown-menu li{list-style: none!important;margin: 0!important;padding:0 !important} .dropdown-menu li a{clear:both;margin:0 !important;color:#444!important;font-weight:400;display:block;padding:5px 20px !important;border-radius:0 !important} .dropdown-menu li a:hover{background:#2b427d!important;color:#fff !important}

5. ابحث عن <data:post.body/> وضع الكود التالي فوقه

<script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href; document.write('<div class="sharethis"><div class="share"> \ <a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="شارك على جوجل">\ <i class="fa fa-google-plus"></i></a> \ <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="شارك على الفيسبوك">\ <i class="fa fa-facebook"></i></a> \ <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="شارك على تويتر">\ <i class="fa fa-twitter"></i></a> \ <a class="pin" href="http://pinterest.com/pin/create/button/?source_url=' + siteurl + '" target="_blank" title="شارك على بنتريست">\ <i class="fa fa-pinterest"></i></a> \ <span class="pl" id="pl" onclick="showhide()" title="المزيد"><i class="fa fa-plus"></i></span> \ <ul class="dropdown-menu" id="share-menu"> \ <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \ <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \ <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \ <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \ <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \ <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \ <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \ <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \ <li><a href="http://reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Reddit">Reddit</a></li> \ </ul> \ </div><div class="clear"></div></div> \ '); //]]> </script>

6. ابحث عن </body> وضع الكود التالي فوقه

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"}; //]]> </script> </b:if>

شارك الموضوع ..