إضافة صناديق التواصل الإجتماعي من تصميم موسى ترخاش

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

معاينة
إضغط للمشاهدة

طريقة التركيب:

1. نتوجه إلى التخطيط
2. ثم اختيار أداة HTML/JavaScript
3. ثم قم بوضع هذا الكود

<style>
.social-block {
 background-color: #eee;
 color: #fff;
 text-align: center;
 margin-bottom: 5px;
 position: relative;
 margin-right: 4px;
 text-shadow: 1px 1px #000;
}
.social-block .social-title {
 padding: 10px 0;
 position: relative;
 font-size: 120%;
}
.social-block .social-title:after {
 content: "";
 position: absolute;
 left: -5px;
 width: 5px;
 top: 0;
 height: 100%;
}
.social-block .social-title:before {
 content: "";
 position: absolute;
 bottom: -5px;
 left: -5px;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 5px 5px 0;
 border-color: transparent #000000 transparent transparent;
}
.social-block .social-title i {
}
.social-block p {
    padding: 5px;
    margin: 0;
    text-align: center;
    color: white;
}
.social-block .social-message {
}
.social-block span {
}
/* Facebook style */
.facebook.social-block, .facebook.social-block:before {
 background-color: #366299;
}
.facebook .social-title, .facebook.social-block .social-title:after {
 background-color: #3b5999;
}
/* Twitter style */
.twitter.social-block, .twitter.social-block:before {
 background-color: #4099FF;
}
.twitter .social-title, .twitter.social-block .social-title:after {
 background-color: #1C80F1;
}
.twitter .social-message, .twitter {
 color: #FFFFFF;
 text-shadow: none;
}
/* Youtube style */
.youtube.social-block, .youtube.social-block:before {
 background-color: #D1252A;
}
.youtube .social-title, .youtube.social-block .social-title:after {
 background-color: #c00020;
}
</style>
<div class="left-side">
<div class="facebook social-block">
 <div class="social-title">
  <i class="fa fa-facebook fa-4x"></i>
 </div>
 <p>صفحة الموقع على الفيسبوك</p>

 <span style="display:inline-block; padding:5px 0"><div class="fb-like fb_iframe_widget" data-href="https://www.facebook.com/info24tagliout" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=like&amp;app_id=&amp;container_width=0&amp;href=https%3A%2F%2Fwww.facebook.com%2Fth9procom&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false"><span style="vertical-align: bottom; width: 85px; height: 20px;"><iframe name="f3a34a631d52a04" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" src="https://www.facebook.com/plugins/like.php?action=like&amp;app_id=&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df307da00b79f3b4%26domain%3D9alibmoussa.blogspot.com%26origin%3Dhttps%253A%252F%252F9alibmoussa.blogspot.com%252Ff30203408ee8dac%26relation%3Dparent.parent&amp;container_width=0&amp;href=https%3A%2F%2Fwww.facebook.com%2Fth9procom&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false" style="border: none; visibility: visible; width: 85px; height: 20px;" class=""></iframe></span></div>
</span></div>
</div>

<div class="youtube social-block">
 <div class="social-title">
  <i class="fa fa-youtube fa-4x"></i>
 </div>
 <p>قناة الموقع على اليوتوب</p>

 <span style="display:inline-block; padding:5px 0">
 <script src="https://apis.google.com/js/platform.js" gapi_processed="true"></script>

<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>

<div id="___ytsubscribe_0" style="text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 116px; height: 24px; background: transparent;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 116px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I0_1465850972222" name="I0_1465850972222" src="https://www.youtube.com/subscribe_embed?usegapi=1&amp;channelid=UCcJtSOYELy8bIHPQAf5gIVw;layout=default&amp;count=default&amp;hl=ar&amp;origin=https%3A%2F%2F9alibmoussa.blogspot.com&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.ar.e-arUGrv6ck.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPbW19kOMG9UmDLVPVZK65Sq4ZU_A#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conytevent%2Conload&amp;id=I0_1465850972222&amp;parent=https%3A%2F%2F9alibmoussa.blogspot.com&amp;pfname=&amp;rpctoken=28923134" data-gapiattached="true"></iframe></div>
 </span>
</div>
<div class="twitter social-block">
 <div class="social-title">
  <i class="fa fa-twitter fa-4x"></i>
 </div>
 <p>حساب الموقع على تويتر</p>

 <span style="display:inline-block; padding:5px 0">
  <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-follow-button twitter-follow-button-rendered" title="Twitter Follow Button" src="https://platform.twitter.com/widgets/follow_button.6e778523ecf0a9c9f1c446083d86ede1.en.html#dnt=false&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=tagliout&amp;show_count=true&amp;show_screen_name=true&amp;size=l&amp;time=1465851011860" style="position: static; visibility: visible; width: 245px; height: 28px;" data-screen-name="th9moussa"></iframe>
  <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
 </span>
</div>

تخصيص الإضافة:

1. غير https://www.facebook.com/info24tagliout برابط الفيسبوك الخاص بك.
2. غير UCcJtSOYELy8bIHPQAf5gIVw بمعرف قناتك على اليوتيوب.
3. غير Tagliout بمعرف حسابك على التويتر.

• مبروك عليك الإضافة.
• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع