زر اوزق

إقرأ المزيـــد

إضافة تابعني عبر المواقع الاجتماعية بتأثيرات عائمه واحترافيه

إضافة تابعني عبر المواقع الاجتماعية بتأثيرات عائمه واحترافيه

إضافة تابعني عبر المواقع الاجتماعية بتأثيرات عائمه واحترافيه

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

على ماذا تحتوي هذه الاضافه ؟

  تحتوي الاضافه على ثمانية من  أشهر منصات الشبكات الاجتماعيةاهمها ( فيس بوك , تويتر , فيدبرنر , يوتيوب ) التي تظهر على شكل شريط يطفو على طول الشاشة فإن الزائر انتقل لأعلى أو لأسفل صفحة تطفو على طول الصفحه. يمكنك معاينة الاضافه في الصورة التالية والتمتع باحترافيتها .

اين يمكنني ان اضع هذه الاضافه وفي اي اتجاه تكون اجمل؟

تتميز هذه الاضافه بمرونتها، ويمكن وضعها إما على الجانب الأيسر،او الجانب الأيمن، اوأعلى أو اسفل المدونه,,,,,,,,

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

وللتحكم بموقع الاضافه ، علينا تغيير الامر ب “bottom”لوضعها اسفل المدونه  ,او (“top” لوضعها اعلى المدونه)  او ( left لوضعها يسارالمدونه) او ( “right”لوضعها يمين المدونه )  وفيما يلي صوره تبين الاضافه من مواقع مختلفه .

كيفية اضافة هذه الاداه الى مدونات بلوجر

1- من  لوحة التحكم -> قالب -> تحرير HTML -> تابع

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

     3-  الان ضع علامه لى توسيع القالب

     4- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</ BODY> 

والصق الكود التالي قبله تمامآ

<!-- import Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- http://alb33dani.blogspot.com Social Media Bar For Blogger --> 
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: 'ادخل هنا رابط حسابك في تويتر', text: 'تابعني على تويتر' },
facebook: { url: 'هنا رابط صفحتك في فيس بوك', text: 'كن من اصدقاء المدنه على فيس بوك' },
rss: { url: 'هنا رابط حسابك في فيد برنر', text: 'تابع تحديثات المدونه عبر الخلاصات' },
google: { url: 'هنا رابط بروفايلك في جوجل بلس', text: 'تابعني على  google+' },
youtube: { url: 'هنا رابط قناتك في يوتيوب', text: 'تابعني على يوتيوب' },
orkut: { url: 'orkut هنا رابط بروفايلك في', text: 'كن من اصدقاء المدونه على orkut' },
myspace: { url: 'هنا رابط بروفايلك فيmyspace ', text: 'كن من اصدقائي على myspace' },
digg: { url: 'digg هنا رابط بروفايلك في', text: 'تابعني على digg' },
},
show: 8,
position: "left",
skin: "clear"
});
});
</script>

1-الان قم باضافة روابط حساباتك على فيد برنر  و جوجل بلس  و  يوتيوب  و orkut  و myspaceو digg

2- وللتحكم بموقع الاضافه ، علينا تغييرماهو مضلل باللون left  بالاوامر التاليه“bottom”لوضعها اسفل المدونه  
,او (“top” لوضعها اعلى المدونه)  او ( left لوضعها يسارالمدونه) او ( “right”لوضعها يمين المدونه ) 
3- لتغيير بخلفية الشريط الى اللون الاسود استبدال ما باللون   clear  الى "dark"

,واخيرا قم بحفظ  القالب ومبروووووووووووك عليك الاضافه

إقرأ المزيـــد

أضف صندوق المعجبين بصفحتك إلى مدونتك كالمتواجد بموقع محترفي

أضف صندوق المعجبين بصفحتك إلى مدونتك كالمتواجد بموقع محترفي الحماية

أضف صندوق المعجبين بصفحتك إلى مدونتك كالمتواجد بموقع محترفي الحماية

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

</head>
قبله نضيف الكود الاتي

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

 HTML / javascript << قم بتحفيض القالب تم توجه إلى تصميم >> إضافة اداة


واضف الكود الاتي

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(

function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43MRP8rvDf0jmdg51VUNyxSWJ-tTj8Ve9qbxQArW8CBY5jZvECFMATcv6ALjcaNcCI7D4gzLg6wgKtDOmBIHcjwEbOOABjIa4MIzD6SC9KBplmnAW9Um85R7FXaKO6SAXDc82td4_SG8o/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/th3.professional&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>

إقرأ المزيـــد

والان اترككم مع كيفية اضافة هذه القطعه الى مدوناتكم

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

والان اترككم مع كيفية اضافة هذه القطعه الى مدوناتكم 

صوره توضيحيه للاضافه

كيفية تثبيت هذه الاضافه على مدوناتكم

     1- من  لوحة التحكم -> قالب -> تحرير HTML -> تابع

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

     3-  الان ضع علامه لى توسيع القالب

     4- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

والصق الكود التالي قبله تمامآ

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

5-  الان قم بحفظ القالب

6-  اذهب الآن إلى لوحة التحكم -> تخطيط -> إضافة أداة -> المشاركات الشائعه 

7-  حدد كما في الصوره " عرض ما يصل إلى 9 مشاركات "، وإلغاء صور مصغره من الصورهو مقتطف 

وأخيرا قم بحفظ القطعه ومبروك عليكم الاضافه ، أتمنى أن تعجبكم بالتوفيق للجميع

إقرأ المزيـــد

طريقة النشر علي الفيس بوك بأستخدام الأيباد Post via ipad

طريقة النشر علي الفيس بوك بأستخدام الأيباد Post via ipad

أذهب إلي رابط صفحة التطبيق علي الرابط التالي 

Post via ipad

  • قم بالضغط علي زر Go to App

  
• ثم مرة اخري أضغط علي زر Go to App

  • أضغط علي زر allow

  • أضغط علي زر post via iphone 5

  • ثم قم بالنشر وأضغط share

إقرأ المزيـــد

قالب فضاء التطوير الاحترافي

قالب فضاء التطوير الاحترافي

لــتــغــيــيــر الــســلايــد شــو

ابحث عن

                                شروحات بلوجر

واستبدلها باسم التصنيف المراد عرضه

واخير وليس آخرا يمــ ازالة الحقوقة ـــنع

التحـــــ من هنا ــــــميل

https://www.box.com/s/hx2memfjp5hotxgszb89

إقرأ المزيـــد