المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : اضافة اداة معلومات عن ملفك على تويتر


rss
09-15-2013, 12:37 PM
اضافة اداة معلومات عن ملفك على تويتر



عندما يقدم زائر الى (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) مدونتك , فإذا اعجبتة المدونة بالطبع يود الاشتراك بالمدونة باي طريقة كي يعود (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) لها مرة أخرى واخرى ,
ولكن عندما لا يجد اداة الاشتراك بالمدونة (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) اياً كانت , سواء كانت اداة الاعجاب بصفحة المدونة على الفيس بوك
او اضافة متابعة لصفحة المدونة على قوقل بلس , او اضافة متابعة على تويتر , او (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) اضافة الاشتراك عن طريق البريد الالكتروني ,

كلها أدوات مهمة , وتجعل الزوار (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) يعودون لمدونتك ويزورونها مراراً (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) ,

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

حيث تعرض هذة الاضافة معلومات عن حسابك على تويتر ,
مثل : عدد التغريدات , وعدد المتابَعين (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) , وعدد المُتابعِين

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

http://1.bp.blogspot.com/-oGvC9sG-WRY/UZE-6Rf-IUI/AAAAAAAABJY/pjh8f_AE81Q/s1600/head_twitter.PNG (http://1.bp.blogspot.com/-oGvC9sG-WRY/UZE-6Rf-IUI/AAAAAAAABJY/pjh8f_AE81Q/s1600/head_twitter.PNG)




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

# الخطوة 1 : أذهب الى لوحة تحكم بلوجر (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html) , ثم الى القالب , ثم الى تحرير HTML (http://al-a7mari.blogspot.com/2013/05/how-to-add-twitter-profile-box-widget-in-blogger..html)

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


/* -- Twitter Profile Box Gadget By ALa7mari--- */ .MBL-tweter-header { background: #1bc4de url(http://4.bp.blogspot.com/-IMtykEHZvyI/UVF0aCgS14I/AAAAAAAAPJI/rb7bMfzaU-o/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: **ne; 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: **ne; } #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: **ne; color: #b0b0b0; }






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



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



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


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

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



http://feeds.feedburner.com/~r/blogspot/IWDIm/~4/BK8Tsp3_78U