نشر مواضيع المدونه والمواقع تلقائياً على الفيس بوك و تويتر
الزيارات:

Unknown | الخميس, فبراير 21, 2013 | | | 1 تعليقات حتى الآن
بسم الله الرحمن الرحيم ،اليوم سوف نتعلم كيفية نشر تدوينات بلوجر على تويتر و الفيس بوك معا و في وقت واحد بطريقة أوتوماتيكية، وهذا يعني أنك عند إضافة أي موضوع جديد في مدونتك سوف يتم نشره أوتوماتيكيا على موقعي "تويتر" و "فيس بوك" من دون الحاجة الى نشره بطريقة يدوية ،وهذه العملية جد فعالة بالنسبة لاصحاب المواقع و المدونات



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

تابع الصور ومعها الشرح :



 ويمكنك تسجيل الدخول
مباشره من دون ان تقوم بالتسجيل وذلك بإستخدام حسابك في OpenID اي في اي حساب تملكه مثل Google أو Flickr
او اي حساب آخر تملكه .






 

 




و مبروك عليك من الآن جميع المواضيع المدرجة في مدونتك او موقعك سوف يتم نشرها بصفة اوتوماتيكية على مواقع المفضلات الاجتماعية فيسبوك و تويتر 

إذا اعجبك الموضوع ، قم بنشره على الازرار المفضلات الاجتماعية اسفله و لك جزيل الشكر في انتظار تشجيعاتكم
تابع القراءة ..

اضافة نوافذ المفضلات الإجتماعية الجانبية للمدونات
الزيارات:

Unknown | الخميس, فبراير 21, 2013 | | كن أول من يعلق!
السلام عليكم ورحمة الله تعالى وبركاته سوف نشرح في هذه التدوينة كيفية إضافة الأزرار الجانبية للمواقع الإجتماعية مثل :- الفيسبوك ، جوجل بلس ، تويتر ، والبريد RSS ,وهي عبارة عن إضافة واحدة تحتوي على 4 إضافات حيث أنها تتميز في كونها لا تأخذ حيزا كبيرا في تنسيق المدونة .

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


قم بالبحث عن الكود التالي :


]]></b:skin>
ثم قم بلصق الكود التالى قبله :
img,a{border:0}#on{visibility:visible}#off{visibility:hidden}#facebook_div{width:196px;height:340px;overflow:hidden}#twitter_div{width:246px;height:353px;overflow:hidden}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px}#knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px}#kakinetwork_div{width:300px;height:97px;overflow:hidden}#facebook_right{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px}#facebook_right img{position:absolute;top:-2px;left:-35px}#facebook_right iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px}#twitter_right{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0}#google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-right:2px solid#0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-right:2px solid#5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0}#kakinetwork_right{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_right img{position:absolute;top:-2px;left:-101px}#facebook_left{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px}#facebook_left img{position:absolute;top:-2px;right:-35px}#facebook_left iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px}#twitter_left{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-left:2px solid#0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-left:2px solid#5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}#kakinetwork_left{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid#ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px#CCCCCC;-moz-box-shadow:5px 5px 5px#CCCCCC;box-shadow:5px 5px 5px#CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid#d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px}.submitbutton{background:#F2F2F2;border:1px solid#F66303;-webkit-box-shadow:3px 3px 3px#666;box-shadow:3px 3px 3px#666;font:bold 12px Arial,sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript

والآن الصق الكود التالي :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdRHtlZ8PtjJou1fU9QpPhDZ4OOOti4RXJB-hk5FreKKRlw9r_4q9BrkOo2YGmGanPjP8-ZukDzUmT3nR1O10Fo9EeWdmP2cB4jkPEDMSIyq1YphZ0qko6De38AYXxbWFsSS9xr4dHq4/s1600/facebook-icon.png" alt=""/><iframe src="//www.facebook.com/plugins/likebox.php? href=http%3A%2F%2Fwww.facebook.com%2Fstart4cash&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzFRDyaiTgCw4feA7OSg5Tbr6XZnN0fZ2SxkMp-kT2zdNkMDF6CbqhzmbA93-bp0nzdiamV0LJz8RILFEsafQekhkzVmuqiGC6TEUYOOoKbOULOTnJ4UWh5xBdTcTznBF3LOgZT6h-8os/s1600/twitter-icon.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('start4cash').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qxNMDcJkHtFeQOK-xWoaLuKFdrhE1HWH18fPXqk-EZ-VHLqI2y-KSrNHswKH3wq5sBmrYAWP660Fg0b99YlYymDyNbOiu14PjhMMprWTOC3y6RFR8s-MW_5GMXGOKG2zXmnLXNhbP5s/s1600/google-plus-icon.png"/><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">سجل إميلك وتوصل بمواضيعنا :</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=start4cash', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="" onblur="if (this.value == &#39;&#39;) {this.value = &#39;أدخل إميلك هنا ...&#39;;}" onfocus="if (this.value == &#39;أدخل إميلك هنا ...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="start4cash" name="uri" type="hidden"/><input value="أرسل" class="submitbutton" type="submit"/></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEims1fw1VUn4wbXZJEBjTtzVUSmJxuJdYilADuJlXCU28gVYVIg_98UawzD2GPGo_UVcWr6NUghozmz-J54P_dXVkq2Kwuvkpgmzjk4b-piw3o7SqMx9CQw7VYInmcNZHQr0tGyczkjzw/s1600/rssfeed.png"/></div></div></div></div>

تغييرات :-

 إستبدل ما باللون  البرتقالي  بحسابك علي الفيسبوك
إستبدل ما باللون الأزرق بحسابك على التويتر
إستبدل ما باللون الاحمر بحسابك علي الفيدبيرنر

أى استفسار انا فى الخدمه و شكرا
تابع القراءة ..

اضافة الروابط الأوتوماتيكية لتدوينات بلوجر
الزيارات:

Unknown | الخميس, فبراير 21, 2013 | كن أول من يعلق!
بسم الله الرحمن الرحيم ، سوف نتعرف على كيفية إضافة الروابط الأوتوماتيكية لتدوينات بلوجر تحت كل موضوع ،حيث يعرض على شكل جدول أسفل كل تدوينة ويتضمن روابط المقال على شكل 3 صيغ : URL,HTML,BBCODE
كيفية تطبيق الإضافة ,


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بوضع الكود التالي قبله :

#table {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 13px;
    margin: 10px -12px;
    width: 580px;
    text-align: left;
    border-collapse: collapse;
   direction:ltr;
}
#table th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXhMBWKpViOPFI-GHRsH67dxVtuDxjleUX2aTsjr3DlRZzdq-Csxbk0q1JAM3VUm5xXu-quCojpCJ-8eKL44auBZtxQJtzUHeW8i8kzfdwOf9RuLzh4k2rjJWJL0cl3oXBQDHXQ_ZE4dI/s1600/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;

}
#table td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #4c4c4c;
    border-top: 1px solid #fff;
    background: #e8edff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5M_wbwGZeZZnA1KvO8ZcCs7rjhY63VHCp-RFwaJGX9kqEysCPSO_ypAjOL8KBccwTPJFHA9T3tzrSOulWCSXLAFEABF2zED37Zps7h2fDne2h2WoLS1GTNZVhgFEr4hLWSJINVfmM6Cc/s1600/gradback.png') repeat-x;
}
#table tfoot tr td {
    background: #e8edff;
    font-size: 20px;
    color: #99c;
    text-align:center;
}
#table tbody tr:hover td {
    background: #d0dafd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfX1ZVuh-HgTLuX64iMAxsDacO6Z_L_iqPXAsuxkpxpAXQrNRmqjksvJ7Gn8zV4Iddxp7rhdhYY7WST-cNouizH0JFQMY5ZveESYCEmiwwZ1jkAZwliO8NDL-Ple93qniDc7DFakwMT8/s1600/gradhover.png') repeat-x;
    color: #339;
}
#table a:hover {
    text-decoration:underline;
}

والآن قم بالبحث عن هذا الكود (إن وجدت منه أكثر الكثيير فالكود الأخير هو المقصود):

<data:post.body/>
ثم قم بوضع الكود التالي أسفله :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table id='table' summary='روابط الموضوع'>
  <tfoot>
    <tr>
      <td colspan='2'>روابط هذه التدوينة قابلة للنسخ واللصق</td>
    </tr>
  </tfoot>
<tr>
  <td>URL</td>
  <td><input expr:value='data:post.canonicalUrl' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr><tr>
  <td>HTML</td>
  <td><input expr:value='&quot;&lt;a href=&amp;quot;&quot; + data:post.canonicalUrl + &quot;&amp;quot; title=&amp;quot;&quot; + data:post.title + &quot;&amp;quot;&gt;&quot; + data:post.title + &quot;&lt;/a&gt;&quot;' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr><tr>
  <td>BBCode</td>
  <td><input expr:value='&quot;[url=&quot; + data:post.canonicalUrl + &quot;]&quot; + data:post.title + &quot;[/url]&quot;' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
</table> </b:if>


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

الموضوع الأصلى :- مدونة ابو اياد
تابع القراءة ..

اضافة ازرار نشر المواضيع للشبكات الأجتماعية المختلفة
الزيارات:

AboYazan | الأربعاء, فبراير 20, 2013 | | كن أول من يعلق!
اليوم سنشرح موقع sharethis  الموقع يقدم خدمة ازرار النشر للشبكات الأجتماعية مما يساعد فى نشر مواضيع موقعك من الزوار اذا اعجبهم الموضوع سينشروه على صفحاتهم الضغط على أزرار النشر الخاصه بكل شبكة اجتماعية هم مشتركون بها 

الشرح
أولاً قم بالدخول إلى الموقع أضغط هنا

1 - قم بأختيار الشكل الذى تريد ان تظهر به مجموعة أزرار الشبكات الاجتماعية و قم بالضغط على Get The Code
2- اما اذا كنت تريد الأعدادات المتقدمة أضغط على more ptions
بعد الضغط على More Options
- ثم قم باختيار نوع موقعك اذا كان وسط هذه الخيارات و ان لم يكن موجود فأختار website كما انه يفضل هذا الاختيار لان به العديد من الأدوات أكثر من أى خيار أخر
- أضغط على Next مكان أشارة السهم فى الصورة

ثم سيظهر ثلاث أنواع من ادوات النشر


1 - Buttons

ستجد بها ثلاث خيارات
  
بعد اختيارها أضغط next وستظهر لوحة للتحكم فى أزرار الشبكات الأجتماعية التى تريد ظهورها

2 - Bars

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

الخيار الثالث : بعد الضغط  next يمكنك التحكم فى طول الأداة و فى أزار النشر كما يمكنك أضافة لوجو موقعك

3 - Featured



بعد اختيارها أضغط next للتحكم فى أزرار المشاركة التى ستظهر فى الأداة 
الأداة تعمل كبيضة تفتح عند مرور الماوس عليها

بعد الانتهاء من أختيار الأداة المناسبة لموقعك و التعديل عليها أضغط  Get Code



1 - أدخال البريد الإلكترونى
2 - رابط الموقع
3 - كلمة المرور
4 - اعادة كلمة المرور
5 - الموافقه على أتفاقية الخصوصية و اتفاقية الاستخدام بعد القراءة !
6 - أضغط Register للأشتراك


- بعد ذلك ستظهر الأكواد كما فى هذه الصورة



وقبل أى كود سيظهر فى اى وسم html سنقوم بوضعه به
تابع القراءة ..

اضافة قائمة إدارة المدونة لمنصة بلوجر الجديدة
الزيارات:

AboYazan | الثلاثاء, فبراير 19, 2013 | كن أول من يعلق!
السلام عليكم ورحمة الله وبركاته موعدنا في تدوينة جديدة ،اليوم سوف أقدم لكم إضافة جديدة تسمح لنا هذه الإضافة بإدارة المدونة من داخل المدونة نفسها ,إذ يمكنك كتابة تدوينة جديدة ،أو التعديل على الرسائل أو الإعدادات,أو مراجعة التعليقات  ....فقط بكبسة زر من مدونتك هذه الإضافة الجديدة التي سوف أقدمها  اليوم تتميز بكونها :

1 - تضم أزرار إدارة المدونة للمنصة الجديدة
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin)
 
اولا و قبل كل شئ نأخذ نسخه احتياطيه من القالب تجنبا لأى اخطاء قد تحدث.
 
خطوات التركيب :-
 
1- انتقل إلى لوحة تحكم مدونتك ،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بوضع الكود التالي قبله :
.bloggermenu {
  position: fixed;
  top: 200px;
  left: 10px;
  width: 24px;
  overflow: hidden;
  padding: 5px;
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
ملحوظة : لتركيب الإضافة في جهة اليمين ،قم بتغيير الكلمة Left باللون الأحمر بالكلمة Right.

2-الآن قم بالبحث عن الكود التالي :
<b:include name='feedLinks'/>
فإن لم تجده ،قم بالبحث عن هذا الكود  :
<b:include name='nextprev'/>
ثم قوم بوضع هذا الكود تحت أحد الأكواد السابقة :
<b:include name='ButtonsbloggerFix'/>
3-قم بالبحث عن هذا الكود :
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
ثم ضع الكود التالي بعده مباشرة :

<b:includable id='ButtonsbloggerFix'>
<span class='item-control blog-admin'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<div class='bloggermenu'>
<a class='layout' href='http://www.blogger.com/home' target='_blank' title='الرئيسية '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDb1DHDUHNZFRrEQiTxOO1Wj2LixVm3dQDEBmk4J0gm4DItIazqlSDJEqAJOb5ivwsIK-opkreHIeI6I1mEndo9ulJe_u0JcT61Mi7MacCck3c1RvDmact5M7_vainkw3VdTTMHYsYg/s1600/blogger.gif' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overview' target='_blank' title='نظرة عامة '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF5wTnkzSf2usehiKxMnewDt0prz4IHyJbuETM8dNvd3m0sxg-n6serSEhNOrebH__G2GPPn7nU3gjp6Lk389iAtkKBN3LaH-n2HyOyFKy4E07T5BCa8TtnMMEdIRHKoV_28V9vdQwJg/s1600/general+orange.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#editor/src=sidebar' target='_blank' title='مشاركة جديدة'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFiBppJZwJTTPcs7fF8iMAQFzj4GlPwTG7oqs0ynhtGFSggeXhbbjzqnk4D4MZ3SsifKl1PkgYoq1voeFS4-Digt1RLdle25Zv6E3xs3_QrRFuJfz0MyV6h4kNipO2xeKM5xm8W3-Uww/s1600/new+message.png' title=''/>
</a>
 <a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#allposts' target='_blank' title='المشاركات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh51AGpc1wZ4Rh-9kF9jiu4e4AQ_0Sq6k9EP7AISryGIG_UUFnpa4TbaEgBk5x9vudBchxetjhU3172d5ehSrJvwuLRvdz1Vvrr1k_Jog1twSkKqYb9-4zbB1WZh5l6iXRp9JYQ9bFkw/s1600/MOCHARAKAT.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pages' target='_blank' title='الصفحات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcRjEWN4k9UtLUGsuIYe3Fq0PZMubNPQpCDyQCVcnlhinRcFOk3eTObzum0FaMv7U6s5k5xUplAukF9tvM6T3Cm_DLHdBQkxBm7ytfjH0nA1cJpbwLrikibSjI9El5Tq6kYwZqj7KzQ/s1600/PAGES.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#publishedcomments' target='_blank' title='التعليقات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikvWNnvDX67gBDwJqQHpbPFrzDdT3sDcaRl8va3jxZdfaFuoKiJlmb7uouCv5iSi0A1teV4Y5AXC9hhjGsz3uvBek5aO9H9tUnS3G-CnakTfAr5b8f2zsrZXFX9Zdk1l9PHTyhB0SIZA/s1600/COMMENTS.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#googleplus' target='_blank' title='Google +'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopSDRAX-pRsq289vcnMiOOYXz3GPUKRjaK_ZwdMboJcgKgyHgLqb5l0XcZOZur16Goldt1lf21PtuwyWPMHgc_suTWCggfMBvluPwCxisZMbIZXo62P-8q5-fSJOfOOYm0xNzeBNlVw/s1600/google+plus.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overviewstats' target='_blank' title='الإحصائيات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiyYdGtXzAo4NzQAQ1yBCT9RSzMWwzF_MwSRi5XQ3ZtrPfJYNZQrXmFh3iHyxvebZ-A1eT01-FojMeUblP_ctEJMJzTAN5hWtnethKLMjA8IGLpy-_zGc1NKRj8PecMm7DTn4whCETA/s1600/STATISTIC.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#adsensesummary' target='_blank' title='الأرباح'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgXHp9YO2B6vJ5-e8bX56MmENstvmx57gW0gl1gQb7z3U5D5sCSRXP-vJFoSvtBNJrBLQ_cIp78yTCzMFb0C0cdcdGXP4GSEwk5PAV25KDRVMBtEHMOD278aUP0tKdRWGXAbMWD0rgKQ/s1600/adsense.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pageelements' target='_blank' title='تخطيط'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisTFb_2TSCiyp9vuLneDGSrcrIQRttOTK7yQZ8pm41HjgszPFSsBkg-4khQsi1kpsbSzTufOfZKUWhN2GSy01lL150xlYWk2Tr2VtTKuyOcdOgjyyExueQkXuET6nF1NZlYNCReFPLlQ/s1600/TAKHTIT.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#template' target='_blank' title='قالب'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9YcDWwhX-YCybvMMzSOP1gGdSbKumsUTSMQ_-sBVBMjajo46ovbPRghtGvg9yTBSTALPkdUGFyn_RwVCSpkrSI1Kd13S4H_shTqDhsQb-iAbFzfNhbx4qu6LfyHumLG69hOctOW2lYg/s1600/TASMIM.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings' target='_blank' title='إعدادات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZskbYZR-2J0yU4nIwTnoQH4MgWHZW3SnaNfFaygoGMvEr0uEr4SNcOSVdmc8xPHaKdkPaaQYS7_bl82T5HsJNo0J0bv7q-YL9KfGFs8sxrZHuR8QSS-TKz3uC2xHMjWa7dx0tiSmsfA/s1600/PARAMETRE.png' title=''/>
</a>
</div>
</b:if>
</span>
</b:includable>

 تعديل : 
1-قم بإستبدال xxxxxxxxxxx برقم تعريف مدونتك،وللحصول على هذا الرقم  . إضغط على إسم مدونتك من قائمة مدوناتك ثم قم بنسخ كود التعريف كما هو موضح في الصورة أسفله

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

أتمنى أن تعجبكم هذه الاضافه الجديدة في إنتظار آرائكم وإستفساراتكم
تابع القراءة ..

اضافة قائمة منسدله لوضع الفيديوهات على بلوجر
الزيارات:

AboYazan | الثلاثاء, فبراير 19, 2013 | 2 تعليقات حتى الان
بسم الله الرحمن الرحيم يارب تكونوا فى أحسن حال اليوم سأقدم لكم  إضافة جميلة جدا لم تستعمل من قبل في المدونات العربية وهي إضافة الفديوهات في قائمة مسندلة بحيث لا تحجز حيز من مساحة الموضوع أو المقالة فيمكنك عرض 50 فيديو أو أكثر في قائمة منسدلة واحدة  لا يتجاوز إرتفاعها 10 px وعند الضغط عليها تظهر لك عناوين الفيديوهات فبضغطك على أي عنوان سيظهر الفيديو، الأداه هذه لا تعمل بشكل أتوماتيكي يجب عليك وضع العناوين و الروابط بنفسك والأداة مصممة بإستخدام الجافا سكريبت ;) والجميل أنني قمت بتحسين الأداة لتستطيع وضعها على جوانب المدونة أيضا بحيث أن حجمه يتناسب بشكل تلقائي بالمكان الذي تضعها فيه .
هذه صوره للأداة :

( مشاهدة الأداة على مدونتى فى جانب المدونه اسفل الأقسام الرئيسية )

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



<!--by-start4cash.blogspot.com- slide bar youtube -->     
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == "")
{
contenedor.innerHTML = "";
}
else
{
var dimensiones = "width='420' height='315' frameborder='0'";
var url = "http://www.youtube.com/embed/" + idYouTube;
contenedor.innerHTML = "<iframe " + dimensiones + " src='"+ url +"'></iframe>";
}
}
</script>
<div style="margin:20px 0px;">
<select id="sVideos" onchange="MostrarVideo(this.value);">
<option value="" selected="selected">[إختر الفيديو المراد عرضه...]</option>
<option value="lOYBSSP64S4">عنوان الفيديو</option>
<option value="lOYBSSP64S4">-عنوان الفيديو-</option>
</select>
</div>
<div id="divInnerVideo"></div>
<!--by-start4cash.blogspot.com- slide bar youtube -->     
1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
2-قم بتغيير القيمة  lOYBSSP64S4 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=lOYBSSP64S4  ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد
أتمنى أن تنال إعجابكم ،دمتم في رعاية الله
تابع القراءة ..

اضافة صندوق الاشتراك فى القائمة البريدية بشكل جديد
الزيارات:

AboYazan | الاثنين, فبراير 11, 2013 | كن أول من يعلق!


اللهم اغفر لنا ذنوبنا اللهم صل وسلم وزد وسلم وبارك علي نبينا ورسولنا محمد صلي الله عليه وسلم  اما بعد اليوم بعد طول انتظار لقد وجدت جميع المدونات قد كتبت الموضوع بشكل غير صحيح وكان به بعض المشاكل التي واجهت كل من وضع هذا الصندوق فقد قررت عمل موضوع كامل وسهل التركيب وبدون مشاكل

كيفية اضافة الصندوق

ندخل الي لوحة التحكم ثم اضافة اداة  HtmL\JavaScript

وتضيف الكود التالي
<h2 class="title"> تابعنا عبر البريد الالكترونى</h2>     <div class="widget-content">     <div class="intro" style="border:#ececec 1px solid">     <a style="clear:right;margin-bottom:0.5em;margin-left:1em" imageanchor="1" href="feeds.feedburner.com/start4cash">     <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1H2rJb_kx4VIAPC5RjZwCDyQ6AUSLPOJqDswc3C9c6ucSU9lx_4MKOBDw-dlaHvlvuRUtoIKe-Sg6iYerTc4U25aQd_R-Bja7qRcRdu6bGbQkhS4Xg98jTpffbOm-euja3yzJYlPK8Q/s512/Social_Email_RSS.png" />     </a>     <p>أدخل بريدك الإلكتروني ليصلك كل جديد بالمدونه ومتابعتنا بكل سهوله ولا تنسي تفعيل الاشتراك من خلال صندوق الوارد بالبريد.</p>     <form rel="nofollow" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=start4cash', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify" dir="ltr">     <input type="hidden" value="start4cash" name="uri" />     <input type="hidden" value="en_US" name="loc" />     <p class="email-form">     <input class="sub" type="text" name="email" />     <input class="subbutton" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IJePSq98SOlkEjHX2WTXI5Dgtes3d2g8mHGAG-eIHSNamjESpqnu50wUFrcZBfYsTT-NoYaiWA-GeauB5Q9XnDVojlSq-bKRbx2OCJJ8HLJqgZSJqU15rMAj2aCpYTvkpwEubKoDww/s1600/button-mail.gif" alt="submit" />     </p>     </form>     <p align="center">     <a href="feeds.feedburner.com/start4cash">     <p><a href="http://feeds.feedburner.com/start4cash"><img src="http://feeds.feedburner.com/~fc/start4cash?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>     </a>     </p>     </div>     </div>     <div class="clear"></div>     <span class="widget-item-control">     <span class="item-control blog-admin">     <a class="quickedit" title="تحرير" rel="nofollow" target="configHTML8" onclick="return _WidgetManager._PopupConfig(document.getElementById("html8"));" href="http://www.blogger.com/rearrange?blogID=5271883380863636842&widgetType=HTML&widgetId=HTML8&action=editWidget&sectionId=sidebar-ads">     <img height="18" width="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="" />     </a>     </span>     </span>     <div class="clear"></div>

 ثم غير ما باللون الأزرق باسم الخلاصه الخاصه بك

ثم ابحث عن الكود التالي في القالب
]]></b:skin>



واضف قبله هذا الكود التالي

/* -------------------[ Subscribe Box ]------------------- */
.intro{ text-align:center; padding:12px 30px 30px 30px;}
p.email-form {
    width:220px;
    height:24px;
    margin:0;
    padding:0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RFzcka4uNS8ts3Xt3xzvq_9EyiYphKUXOKCHOgKqXli85H79T-zhM3kGS52DSU1K1J-BwPVyVciFsnib54fZ7sgP967iTUpljMSmK6Y3eaoumZUFg5RXfmFW2YtDGneo0xvk0XgzJg/s1600/emailbg.gif) top right no-repeat;
    }
p.email-form .sub {
    color:#aaa;
    float:left;
    padding:4px 0 0 26px;
    width:130px;
    margin: 0;
    border:0;
    background:transparent;
    }
p.email-form .subbutton {
    margin: 0;
    float:right;
    font-size:8pt;
    width:52px;
    height:24px;
    text-align:center;
    border:0;
    text-indent:-10000em;
    background: transparent;
    border:0;
    }


و أخيرا مبروك عليك الصندوق بدون مشاكل

اذا اردت وضع عداد للاشتراكات غير كودك بالكود الملون بالاحمر
تابع القراءة ..

اضافة صندوق الأشتراك فى القائمه البريدية
الزيارات:

AboYazan | الاثنين, فبراير 11, 2013 | كن أول من يعلق!
السلام عليكم و رحمة الله و بركاته ارجو ان تكونوا فى احسن حال , اليوم ساقدم لك اضافة طلبت مني وهي صندوق الاشتراك مثل الموجود بالمدونة وهذه الاداه جميله وبسيطه جداً وسهله التركيب .


كيفية التركيب


نذهب للوحة التحكم ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي :-


<div class='clear'></div><div class='widget HTML' id='HTML1'>
<div class='widget-content'>
<center><div class="sub">
<h5>ضع إيميلك ليصلك كل جديد ستارت كاش</h5>
<div class="ins">
<div id='sleek-subscribe'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=start4cash' class='signform' method='post' target='_new'>
<input class='txt2' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;ضع اميلك هنا&apos;;}' onfocus='if (this.value == &apos;ضع اميلك هنا&apos;) {this.value = &apos;&apos;;}' value='ضع اميلك هنا'/>
<input class='btn2' type='submit' value=' '/>
</form>
</div>
</div>
</div>
<style>.sub{width:300px;height:130px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJW_5Z22p2F3JAZb7ILb59DJeqwz4wpmzM1n-Iq72-dri8yyTsgwG1aM3atvyhsYHOMugkyXE7BQJfWa8CYq43JlS6IfykiyKPQOhK0NaZfxOsrewLcD9kt1p3p6egOcsIhtsR6ZNSRw/s1600/bg.png);}.sub h5{color:#2d2d2d;font:22px arial;margin:0;padding:25px 0 0 0;text-align:center;}.sub .ins{width:261px;height:35px;margin:12px auto 0;}.sub .ins .txt2{border:1px solid #E1E1E1;background:white;font:12px Tahoma,Geneva,sans-serif;color:silver;padding:10px 7px 9px 7px;margin:0px;float:right;text-align:right;width:136px;}.sub .ins .btn2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZ0Noth7LG2JAf_U2YyhBRwu-eOpgZmFGPIKWtcHsOi3JBtWwMz-C7cm3Ap1DmG51EGwKP2sP8g0bMP24M6e7cyLRfnxLQ3IohyphenhyphenHhnXEHIBZeoK3srPwngcBw6Gby4EEIH7Qd6UtNcw/s1600/send.png);float:left;border:none;width:104px;height:33px;cursor:pointer;margin-top:1px;}</style></center>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=4333142131555820750&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-left-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='تحرير'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span></span></div>



ثم غير start4cash باسم خلاصة مدونتك


و اخيرا مبروك عليك تمت اضافة الاداة بنجاح

وأى استفسار انا تحت امركم اترك تعليق و سوف ارد عليك
تابع القراءة ..

اضافة التسميات بخاصية Css3
الزيارات:

AboYazan | الاثنين, فبراير 11, 2013 | | كن أول من يعلق!

السلام عليكم و رحمة الله و بركاته اليوم مع درس جديد و اضافة جديده هى طريقة عمل الأقسام بخاصية Css3 سنطبق هذه الأضافة باستخدام css3 حقيقى اضافة جميله و جذابه و دعونا نرى كيفية تطبيق هذه الأضافة 


كيفية تخصيص اقسام المدونة مع CSS3؟

علينا أولا تحرير بعض إعدادات التسمية لدينا مثل الصورة التاليه.
الآن انتقل إلى لوحة تحكم المدون ثم القالب
تذكير :- لا تنسى ان تأخذ نسخه من القالب
     انقر على تحرير HTML
ثم توسيع القالب
ابحث عن الكود التالى
]]></b:skin>
 ثم اضف الكود التالى قبله مباشرة
/*CSS3 Bricks Style Labels By http://start4cash.blogspot.com/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}
 
a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}
 
a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
 
a.tag:active {
    color: #000;
    border-color: #444
}
 
.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By http://start4cash.blogspot.com/ */
 ثم ابحث عن الكود التالى
<b:widget id='Label1' locked='false'
حدده حتى تجد 
</b:widget>
استبدل الكود من  
<b:widget id='Label1' locked='false'
الى   
</b:widget> 

بالكود التالى
<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>
            </h2>
        </b:if>
        <div class='textwidget'>
            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                <b:if cond='data:display == &quot;list&quot;'>
                    <ul>
                        <b:loop values='data:labels' var='label'>
                            <li>
                                <b:if cond='data:blog.url == data:label.url'>
                                    <span expr:dir='data:blog.languageDirection'>
                                        <data:label.name/>
                                    </span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>
                                    <span dir='ltr'>(
                                        <data:label.count/>)</span>
                                </b:if>
                            </li>
                        </b:loop>
                    </ul>
                    <b:else/>
                    <b:loop values='data:labels' var='label'>
                        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                            <b:if cond='data:blog.url == data:label.url'>
                                <span expr:dir='data:blog.languageDirection'>
                                    <data:label.name/>
                                </span>
                                <b:else/>
                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                            </b:if>
                            <b:if cond='data:showFreqNumbers'>
                                <span class='label-count' dir='ltr'>(
                                    <data:label.count/>)</span>
                            </b:if>
                        </span>
                    </b:loop>
                </b:if>
                <b:include name='quickedit' />
            </div>
        </div>
    </b:includable>
</b:widget>

و اخيرا اضغط حفظ القالب
تابع القراءة ..