في هذه المقالة سوف نقوم بتعليمكم كيفي اضافة طير التويتر الجديد الناطق اثناء قيامك بتحديث صفحة التويتر الخاصة بك , وتعتبر هذه الطريقة من أهم الطرق في تتبع تحديثاتك و محادثاتك عبر الموقع الإجتماعي تويتر.
كيفية عمل الخطوات :-
الخطوة الأولى :-
في مدونتك اذهب إلى صفحة الـ Blogger Dashboard << Template Designer << Advanced << Add Css .
الشكل رقم ( 1 )
الخطوة الثانية :-
انسخ الكود التالي والصقه في في المكان المخصص لـ CSS ( انظر إلى الشكل رقم 2 ) ومن ثم اضغط على APPLAY TO BLOG.
الشكل رقم ( 2 )
#twitter_update_list{
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}
#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}
#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}
الخطوة الثالثة :-
نرجع إلى القائمة لوحة التحكم Blogger Dashboard << Page Elements << Add a gadget .
الخطوة الرابعة :-
انسخ و ألص الكود التالي في الـ HTML/JavaScript gadget .
<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/HishamAlssadi" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_iNoJ2KKyodwMfkehGwpiaiJnw4lLvG3gtVSuV4XTWxwhPgPJFNr4n-VXC8ty9ItUHSawNkGb30_xZLSVL_S0zJq6SESDTKhgPDk5-iqOObw4EYuR03-z7q0_xPmTHGuWttHrKjjsKXUB/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/HishamAlssadi.json?callback=twitterCallback2&count=1"></script>
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/HishamAlssadi" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_iNoJ2KKyodwMfkehGwpiaiJnw4lLvG3gtVSuV4XTWxwhPgPJFNr4n-VXC8ty9ItUHSawNkGb30_xZLSVL_S0zJq6SESDTKhgPDk5-iqOObw4EYuR03-z7q0_xPmTHGuWttHrKjjsKXUB/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/HishamAlssadi.json?callback=twitterCallback2&count=1"></script>
أما في نهاية المطاف , ما عليك إلا تغيير HishamAlssadi إلى الإسم الخاص بك في تويتر , بهكذا تكون قد عملية عملية ربط ما بين عملية الـ Tweet الخاصة بك في مدونتك , ودع مشاهديك يستمتعون بتحديثاتك .
