إضافة نافذة متابعي الفيس بوك ونافذة تغريدات تويتر بشكل سلايد شو لمدونات بلوجر

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

شكل الإضافة 

- طريقة تركيب الإضافة :

1- أدخل إلى مدونتك | أختر لوحة التحكم >> قالب >> تحرير قالب .

2- إبحث عن السطر التالي :

<b:section-contents id='sidebar-right-1'>

3- أضف الكود التالي تحته :

<b:widget id='HTML20' locked='false' title='Slide follow box' type='HTML'> 
    <b:includable id='main'>
<b:if cond='data:blog.url != &quot;http://homeblog7.blogspot.com/&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;'>
        
<div class='fb-wrap social-widget cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 96; opacity: 0; display: block; visibility: hidden;'>
    <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FChristiaUnion&amp;width=240&amp;height=341&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false' style='border:none; overflow:hidden; width:240px; height:341px;'/>
    </div>

<div class='twitter-wrap social-widget cycle-slide' data-twttr-id='twttr-sandbox-0' style='position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;'><a class='twitter-timeline' data-widget-id='616613848758358016' height='341' href='https://twitter.com/homeblog7' width='234'>Tweets by @101Helperblog</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
        </div>
  
  <div class='google-wrap social-widget cycle-slide cycle-slide-active' style='position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;'>
        <div id='___page_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: 234px; height: 338px; background: transparent;'><!-- Place this tag in your head or just before your close body tag. -->
<script src='https://apis.google.com/js/platform.js'/>

<!-- Place this tag where you want the widget to render. -->
<div class='g-page' data-href='//plus.google.com/u/0/107922803903972641858' data-rel='publisher' data-width='234'/>
</div>
        
    </div><div class='linkedin-wrap cycle-slide' style='position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;'>
        
<script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script data-format='inline' data-id='/in/hanna98141' data-related='false' type='IN/MemberProfile'/>
  
    </div></div>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
      </b:if>
</b:includable>

  </b:widget>

- التعديلات :
1- إبحث في الكود عن : "  ChristiaUnion   " واستبدله بخاصيتك على الفيس بوك .

2- إبحث في الكود عن : " homeblog7   " واستبدلة بخاصيتك على تويتر .

3- إبحث في الكود عن : " id="616613848758358016 "  واستبدله بــ " id " صفحتك على تويتر ، كيف تحصل على هذا "  id " أدخل على صفحتك في تويتر ثم أختر أعدادات >> بعد ذلك أختر تطبيقات مصغرة >> ثم كوّن تطبيق مصغر >> سوف يظهر لك كود أنسخه سوف يكون  في هذا الكود " id " صفحتك على تويتر.

4- إبحث في هذا الكود عن : " 107922803903972641858 " واستبدله بخاصيتك على جوجل بلس .

4- إبحث عن الوسم : ]]></b:skin>

5- أضف الكود التالي فوقه :

/* Slider CSS by homeblog7*/ 
#slides{
    padding: 0 0 0 152px;
    position: relative;
top: 27px;
right: 97px;
    width: 221px;
}
.cycle-slideshow{
position:relative;
top: -3px;
right: 120px;
}
#slides hr{
    border:0 solid #fff;
    border-top:1px dashed #d8d9db;
}
#slides p{
    font-family: HelveticaNeue, Arial, sans-serif;
    height: 109px;
    line-height: 17px;
    width: 221px;
}

#slides .pagination li a {
    background-image: url("/mc/images/sprite.png?v=14.51.0.RC02");
    background-position: -248px -37px;
    display: block;
    float: left;
    height: 0;
    overflow: hidden;
    margin: 0px 2px;
    padding-bottom: 0;
    padding-top: 12px;
    width: 10px;
}
#slides .pagination li.current a{
    background-position: -237px -37px;
}

#slides .prev{
    background-position: -198px -37px;
    display: inline-block;
    height: 15px;
    left: 151px;
    padding: 0;
    position: absolute;
    width: 10px;
}

#slides ul{
    display: block;
    left: 224px;
    list-style: none outside none;
    margin: auto;
    position: absolute;
    text-align: center;
    width: 78px;
}

#slides .next{
    background-position: -228px -37px;
    display: inline-block;
    height: 15px;
    padding: 0;
    position: absolute;
    right: 0;
    width: 10px;
}
.social{
    padding:32px 0 0 145px;
    margin-bottom: 30px;
    position: relative;
top: 27px;
right: 97px;
    overflow: hidden; }

.social li{
    float: left;
    margin-right: 10px;
    position: relative;
}

.social a{
    display: block;
    height: 48px;
    width: 46px;
}

/* active state */

.social-widget {
    border: 5px solid #A5CBE2;
    border-radius: 6px 6px 6px 6px;
position: relative;
top: 27px;
right: 97px;
}

.fb-wrap{
    height: 341px;
    margin-left: 130px;
    width: 234px;
}

.google-wrap {
    height: 338px;
    margin-left: 130px;
    width: 234px;
}
    /* fix flashing widget */
    .google-wrap iframe { visibility: hidden !important; }
    .google-wrap.cycle-slide-active iframe { visibility: visible !important; }

.twitter-wrap {
    height: 341px;
    margin-left: 130px;
    width: 234px;
}

.linkedin-wrap {
    margin-top: -5px;
    margin-left: 80px;
} 

6- إبحث عن الوسم :  <head>

7- أضف تحته الكود التالي :

<script src='http://pastebin.com/raw.php?i=3Eu0Vx6c' type='text/javascript'/> 
<script src='http://pastebin.com/raw.php?i=pBukTdv3' type='text/javascript'/> 

8- أحفظ القالب .

9- بعد ذلك أدخل إلى تخطيط ستجد الإضافة موجود بهذا الأسم " Slide follow box " ، أختر من تخطيط إضافة أداة :HTML/JavaScript

10 - أضف بداخل صندوق الإضافة هذا الكود ثم إحفظ .

<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-pager='#no-template-pager' data-cycle-pager-event='mouseover' data-cycle-pager-template='mouseover' data-cycle-slides='&gt; div' data-cycle-timeout='10000' style='position: relative;'>

وأخيراً نترككم برعاية الله وتوفيقه .