اضافة اداة معلومات عن ملفك على تويتر

Share |

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

كلها أدوات مهمة , وتجعل الزوار يعودون لمدونتك ويزورونها مراراً ,

وفي أضافتنا اليوم , هي خاصة بحسابك على تويتر  ,

حيث تعرض هذة الاضافة معلومات عن حسابك على تويتر ,
مثل : عدد التغريدات , وعدد المتابَعين , وعدد المُتابعِين

صورة للاداة :.

طريقة التركيب على المدونة :.

 #  الخطوة 1 : أذهب الى لوحة تحكم بلوجر , ثم الى القالب , ثم الى تحرير HTML

ثم أبحث عن    ]]></b:skin>  والصق الكود التالي فوقها مباشرة

   /* -- Twitter Profile Box Gadget By ALa7mari--- */

.MBL-tweter-header {
background: #1bc4de url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4xIW4JmJxhtu_ycmNDpr_eMZl2YxI69VKOA9u1yP8zaqtyYuwjJr5Nisj1GGcgCXydyNKy5wNx3B8Z-6wZktvdgozaSaSCup6yIk_Tfw7j-dFCWjxt4pky4VFXpYElOzWozdGXJDFqPi/s1600/Fortolioa.png);
}

.MBL-tweter {
 width: 300px;
 background-color: #ffffff;
 font-family: Arial, Helvetica, sans-serif;
 -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
 -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
 box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
 border: 1px solid #e8e8e8;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 border-radius: 8px;
        overflow:hidden;
}

.MBL-tweter .MBL-tweter-header {
 padding: 10px;
 height: 73px;
}

.MBL-tweter .MBL-tweter-header .screen-name h1 {
 color: #fff;
 margin: 0;
 font-size: 16px;
 text-transform: capitalize;
       font-family: 'Helvetica', sans-serif;
}

.MBL-tweter .MBL-tweter-header .screen-name h2, .MBL-tweter .MBL-tweter-header .screen-name h3 {
 color: #ffffff;
 margin: 0;
 font-size: 12px;
 font-family: 'Helvetica', sans-serif;
}

.MBL-tweter .MBL-tweter-header .screen-name {
 margin-top: 20px;
 width: 180px;
 float: right;
}

.MBL-tweter .MBL-tweter-header .profile-image {
 width: 73px;
 height: 73px;
 float: left;
}

.MBL-tweter .MBL-tweter-header .profile-image img {
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    width: 73px;
    height: 73px;
    -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
    -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.55);
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
}

.MBL-tweter .twitter-summary {
       background-color: #f9f9f9;
 height: 60px;
 position: relative;
}

.MBL-tweter .twitter-summary ul {
 display: table-row;
 height: 60px;
 width: 100%;
 margin: 0;
 padding: 0;
 text-align: center;
 padding: 15px 0px;
}

.MBL-tweter .twitter-summary ul li {
 list-style-type: none;
 font-size: 12px;
 padding: 0px 6px 0px 6px;
 border-left: 1px solid #e8e8e8;
 text-align: center;
 vertical-align: middle;
 display: table-cell;
 color: #958470;
 *float: left;
 width: 84px;
}

.MBL-tweter .twitter-summary ul li a {
 color: #958470;
 text-decoration: none;
}

#boxs {
    clear: both;
    font-family: 'Helvetica', sans-serif;
    position: absolute;
    float: right;
    font-size: 10px;
    text-transform: uppercase;
    padding-left: 210px;
    margin-bottom: 20px;
    margin-top:10px;
}

#boxs a {
   text-decoration: none;
   color: #b0b0b0;
}

# الخطوة 2 : إذهب الى بلوجر , ثم الى التخطيط , ثم اضافة أداة وأختر اداة HTML/JavaScript

وأضف الكود التالي بها ,

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://mybloggerlab.googlecode.com/files/MBtwet.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#box").dwseeTwitterBox({
 'screenname':'kh_ahmari',
 })
})
</script>
<div id="box"></div>

* أستبدا ما هو باللون الاحمر ( kh_ahmari ) بحسابك في تويتر 

وفي الختام نتمنى ان الاداة لم تكن صعبة وان يكون كل شيء واضح

وشكر خاص للـ www.mybloggerlab.com

بسم الله الرحمن الرحيم