أفضل الأزرار الفلاشية الخاصة بالمتابعة على تويتر

في هذا الدرس سوف أتحدث عن إضافة رائعة جدا وهي إضافة من الإضافات الإحترافية خصوصا إذا كنت تريد إنشاء مدونة إحترافية وهذه الإضافة أستعملها شخصيا في المدونة. كما أنها سهلة تابع الشرح.

خطوات التركيب هي سهلة جدا كما العادة:

1 إذهب للوحة التحكم 

2. ثم تخطيط 

3.عناصر الصفحة

4. أضف اداة

6.إختار  Html/Javascript

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

 الشكل الأول :

​
ضع هذا الكود:

 

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON3/twitbutton.swf" width="100" height="100"><param name="movie" value="http://www.twpics.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=chahidna"></param><embed src="http://www.twpics.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>

  الشكل التاني:        ​

ضع هذا الكود:
 

     <object data="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><embed src="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​

  الشكل الثالث:
​  

ضع هذا الكود:
 

<object data="http://www.buzzbuttons.com/BUTTON5/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON5/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><a href="http://www.chahidna.com"> blogger widgets </a><embed src="http://www.buzzbuttons.com/BUTTON5/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​

  الشكل الرابع :   
  ​
​

ضع هذا الكود:

<object data="http://www.buzzbuttons.com/BUTTON14/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON14/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><a href="http://www.chahidna.com"> blogger widgets</a><embed src="http://www.buzzbuttons.com/BUTTON14/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​ 

  الشكل الخامس :
​

ضع هذا الكود:

<object data="http://www.buzzbuttons.com/BUTTON11/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON11/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><a href="http://www.chahidna.com"> blogger widgets </a><embed src="http://www.buzzbuttons.com/BUTTON11/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​

 الشكل السادس :
​ ​

ضع هذا الكود:

<object data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><a href="http://www.chahidna.com"> blogger widgets </a><embed src="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​

 الشكل السابع:  ​

​

ضع هذا الكود:

<object data="http://www.buzzbuttons.com/BUTTON7/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON7/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><a href="http://www.chahidna.com"> blogger widgets </a><embed src="http://www.buzzbuttons.com/BUTTON7/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​

 الشكل الثامن :

 ​ ​
ضع هذا الكود:

<object data="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" height="200" type="application/x-shockwave-flash" width="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=chahidna" /><a href="http://www.chahidna.com"> blogger widgets </a><embed src="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=chahidna"></embed></object>​

أكــمــل الــقــراءة Résuméabuiyad

كود رائع جدا لتبادل الإعلاني لمدونات بلوجر

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

خطوات التركيب هي سهلة جدا كما العادة:

1 إذهب للوحة التحكم 

2. ثم تخطيط 

3.عناصر الصفحة

4. أضف اداة

6.إختار  Html/Javascript

<div class="widget-content"> <style> #advertise{ margin: auto; } .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; } .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; } .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} .adss img { max-height: 75px; max-width: 75px; } #adsanime:hover { opacity:0.2; } #adsanime a strong { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; } #adsanime a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #adsanime { opacity:0.5; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #adsanime:hover { opacity:1; } #adsanime:hover a strong { opacity:1; top:-10px; } </style> <center> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا </b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> <div class="adss" id="adsanime"> <a href="#"target='_blank'> <img src="http://im25.gulfup.com/cMT41.jpg" original="http://im25.gulfup.com/cMT41.jpg" style="display: inline-block;" /> <b>اعلن هنا</b></a> </div> </center> <br /></div>

أكــمــل الــقــراءة Résuméabuiyad

إضافة رائعة للنشر على المواقع الإجتماعية بخاصية الماوس هوفر

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

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

خطوات التركيب هي سهلة جدا كما العادة:
1-لوحة التحكم
2-القالب  
3-ثم تحريرhtml
4-متابعة 
5-توسيع القالب
6-ثم ابحث عن الكود التالي :بالضغط على    alt+f

</body>

ثم ضع فوقه الكود التالي

<!-- Start  Bookmarks chahidna.com-->

<div class="shr_ss shr_publisher">

</div>
<!-- End   Bookmarks chahidna.com -->

<!-- Start   Bookmarks chahidna.com -->
<script type="text/javascript">
var SHRSS_Settings = 
{"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title}
 - ${short_link} via @Shareaholic"}};

</script>

<!-- End   Bookmarks chahidna.com -->

<!-- Start   Bookmarks chahidna.com -->

<script type="text/javascript">

(function() {

var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;

sb.src = ("https:" == document.location.protocol ? 
"https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") +
 "/media/js/jquery.shareaholic-publishers-ss.min.js";

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End   Bookmarks chahidna.com-->

ثم قم بتحفيظ القالب ومبروك عليك الإضافة

أكــمــل الــقــراءة Résuméabuiyad

تركيب آداة الموضوع العشوائي لمدونات بلوجر

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

طريقة التركيب هي طريقة سهلة جدا كما العادة:

1 إذهب للوحة التحكم
2. ثم تخطيط 

3.عناصر الصفحة

4. أضف اداة

6.إختار  Html/Javascript

<div id='myLuckyPost'></div> <script 
type='text/javascript'> function showLucky(root){ var feed = 
root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; 
for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 
'alternate'){window.location = entry.link[j].href;}}} function 
fetchLuck(luck){ script = document.createElement('script'); script.src =
 
'/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
 script.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(script); } function
 feelingLucky(root){ var feed = root.feed; var total = 
parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = 
Math.floor(Math.random()*total);luckyNumber++; a = 
document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; 
a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'موضوع 
عشوائي'; document.getElementById('myLuckyPost').appendChild(a); } 
</script> <script 
src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>

<style type='text/css'>

@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );

#myLuckyPost a {

position: relative;

color: rgba(255,255,255,1);

text-decoration: none;

background-color: rgba(219,87,5,1);

font-family: 'Yanone Kaffeesatz';

font-weight: 700;

font-size: 30px;

display: block;

padding: 4px;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);

-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);

box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);

margin: 10px auto;

width: 200px;

text-align: center;



-webkit-transition: all .1s ease;

-moz-transition: all .1s ease;

-ms-transition: all .1s ease;

-o-transition: all .1s ease;

transition: all .1s ease;

}



#myLuckyPost a:active {

-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);

-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);

box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);

position: relative;

top: 6px;

}

</style>

لمعاينة الآداة :

أكــمــل الــقــراءة Résuméabuiyad

إضافة أزرار المواقع الإجتماعية بشكل ميترو للبلوجر

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

-الشكل الأول:

لإضافة الكود لمدونات بلوجر:

1.إذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT
6.إستبدال الروابط الملونة باللون الأزرق بما يناسبك

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/chahidna"></a></li>
<li><a class="tw" href="http://twitter.com/chahidna"></a></li>
<li><a class="gp" href="https://plus.google.com/chahidna"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/chahidna"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://www.chahidna.com/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1?max-results=8
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br>

الشكل الثاني:

أنظر إلى خطوات الشكل الأول.

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/chahidna"></a></li>
<li><a class="tw" href="http://twitter.com/chahidna"></a></li>
<li><a class="gp" href="https://plus.google.com/chahidna"></a></li>
<li><a class="pi" href="http://pinterest.com/chahidna"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/forfayssal"></a></li>
<li><a class="yt" href="http://www.youtube.com/forfayssal2"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/chahidna"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
Web link to gadget code: http://www.chahidna.com/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1?max-results=8

Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

أتمنى لك  أن تعجبك هذه الإضافة مع كل تحياتي

أكــمــل الــقــراءة Résuméabuiyad

تمييز نص محدد داخل التدوينة بطريقة إحترافية في بلوجر

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

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

<textarea>هذا مثال حى لنص تم وضعه في صندوق قابل للتوسع والطي كما يمكنك إستبداله بالنص الذي ترغب فيه</textarea>


وهذا مثال حي على هذا:

هذا مثال حى لنص تم وضعه في صندوق قابل للتوسع والطي يمكنك إستبداله بالنص الذي ترغب فيه

أكــمــل الــقــراءة Résuméabuiyad

إضافة الإشتراك في القائمة البريدية بتأثير الماوس هوفر بشكل ممتاز

عزيزي القارئ سعيد جدا أن أشارك مع إضافة في غاية الأهمية والجمالية تستخدم في القائمة البريدية نظرا لأهميتها. هذه الإضافة تتميز بشكلها الأنيق.الإضافأ في قمة السهولة ولا تحتاج منك وقت لتركيبها.

1.إذهب إلى لوحة التحكم قم بتسجيل الدخول
2.إذهب إلى القالب
3.تحرير HTML 
4.ثم وقم بالبحث عن ]]></b:skin> وضع فوقها او قبلها الكود الموجود في الأسفل

.feedme {

display:block;

text-indent:-9999em;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwlA8RLTZXwPSyo_cN7WW-D5xHSQld5C1z5Ll3mJuk_223I2VrwZL_x9DkU3Z4OJ2AU37ZwAYXnu90N9R-IwsJ062w72wzPUZUeI-Rxg8jOMH9f6dYvMqvJKVP9b5BK4HZqKx4V2cEOs/s1600/feedme.png) no-repeat right top;

width:300px;

height:73px;

margin-bottom:0px;

}

a.feedme:hover {

background-position:bottom;

}

.middlesidebar .widgetsidebar, .rightsidebar .widgetsidebar {

}

.middlesidebar .widgetsidebar .widget{

list-style:none;

border-bottom:1px solid #ddd;

padding:10px 0;

width: 160px;

float:left;

}

ثم م بحفظ القالب .. وللتحكم في عرض الأداة وإرتفاعها سيكون من خلال تلك المتغيرات داخل الكود width:300px;
height:73px;  .والآن بعد حفظ القالب وضع بها الكود التالي

1.إذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIP

<div class=’widget-content’>

<a class=’feedme’ expr:a href=’http://feedburner.google.com/fb/a/mailverify?uri=chahidna‘ rel=’rss’>RSS Feed</a>

</div>

مع تغيير الكلمة ذات اللون الأزرق بإسم حسابك على موقع Feedburner ثم قم بإختيار إسم للأداة بما يناسبك ثم الحفظ.

أكــمــل الــقــراءة Résuméabuiyad

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

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

1. قم بالدخول الي لوحة تحكم مدونتك من هنا
2. أدخل على تصميم
3. إضافة أداة
4. ثم HTML/JavaScript

ثم قم بنسخ الكود التالي

<script type="text/javascript">
    var w2bWidth="100";
    var w2bScrollAmount="7";
    var w2bScrollDelay="50";
    var w2bDirection="right";
    var w2btargetlink="yes";
    var w2bnumPosts="5";
    var w2bBulletchar =">>>";
    var w2bimagebullet="yes";
    var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf06Ly9QW45SOnrXR-xCDKffHlDM5-eG4pXTj3N3S3TkU-Kl1g_tP5R2IINlv5k18hgh0QeM8cF7IWK83wdMRFELzuv0P5Z8F82hU7Ch1bsr2KTFeuuRdkvIvcoZ9OKlOvaJ0fhryB-i4/s1600/new.gif";
    var w2bfontsize="13";
    var w2bbgcolor="FFFFFF";
    var w2blinkcolor="000000";
    var w2blinkhovercolor="FF0303";
</script>
<script src="http://egymodern.googlecode.com/files/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.chahidna.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>

لا تنسى أن تقوم بحفظ القالب وتغيير الرابط الازرق برابط مدونتك

شرح بعض الأدوات الأداة

    var w2bScrollAmount="7";                               سرعة الشريط

    var w2bScrollDelay="50";                          عدد دورات الشريط

    var w2bDirection="right";                           اتجاة دوران الشريط

    var w2btargetlink="yes";                                  لأظهار الروابط

    var w2bnumPosts="5";               عدد المواضيع التي تريد اظهارها

    var w2bimagebullet="yes";                      اظهار صورة الفاصل

    var w2bimgurl="........ new.gif";                  رابط صورة الفاصل

    var w2bfontsize="13";                                              حجم الخط

    var w2bbgcolor="FFFFFF";                                  لون الخلفية

    var w2blinkcolor="000000";                                 لون الرابط

     var w2blinkhovercolor="FF0303";         لون التأشير على الرابط

أكــمــل الــقــراءة Résuméabuiyad

إضافة تمكنك من تعطيل عمل الكليك اليمين بمدونتك

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

لإضافة الكود لمدونات بلوجر:

1.اذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT

<script language='JavaScript'>

<!--

var message="قمنا بتعطيل الكليك الأيمن لدينا!";

///////////////////////////////////

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){

alert(message);

return false;

}

}

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function("alert(message);return false")

// -->

</script>

أكــمــل الــقــراءة Résuméabuiyad

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

في هذه التدوينة  أحببت أن أشاركك إضافة من أضافات الجميلة.وهذه الإضافة هي إضافة المفضلات الإجتماعية لمدونات blogger.فهي تعطي رونقا جميلا جدا وهذا ما يساهم في إنشاء مدونة ناجحة.
صورة الإضافة:

لإضافة الكود لمدونات بلوجر:

1.اذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT
6.إستبدال الروابط الملونة باللون الأزرق بما يناسبك

<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGtS5bSucBXSLMmFE5yYhMERsqAxBpOWX-DRQIpA_oQKQCK5nxSW1S1iDrGBJBHfQo0H0PsL-YAtDsEr6NxYQTlgk5ZCFHi5XKaocB1rZW_cKYZ8ZUk5ZTQpCIGekhepzDZVKoHGIVcU/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/chahidna">Like us on Facebook</a></li>
<li><a class="icon twit" href="https://twitter.com/chahidna">Follow us on Twitter</a></li>
<li><a class="icon google" href="https://plus.google.com/">Follow us on Google+</a></li>
<li><a class="icon rss" href="http://www.feedburner.com/chahidna">Subscribe via RSS</a></li>
</ul>

أكــمــل الــقــراءة Résuméabuiyad

إضافة أزرار المواقع الإجتماعية بشكل إحترافي

في هذه التدوينة أحببت أن أشاركك إضافة جميلة من أضافات الأزرار المواقع الإجتماعية ( Youtube, Twitter, Facebook, Rss ) أزار خفيفة و جميلة بتغير لونها عند وضع مؤشر الفأرة عليها كما تحتوي على عدد المشتركين عند الضغط عليها تفتح في صفحة جديدة أي من الروابط الخارجية.هذه الإضافة تعتبر أساسية من أساسيات إنشاء مدونة ناجحة داخل عالم الانترنت

شرح تركيب الإضافة:

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

• المرحلة الأولى :

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

وأضف قبلها هذا الكود :

كود:

.social-icone{ height:108px;}

.social-icone div{ margin: 8px 12px;}

.social-icone a{ text-decoration:none;}

.you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;}

.you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3; }

.you-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VK-zItXe66G8U1OcsILCSgxf-aNwjL4SKJOmzDEH00fNIVq1IgQsl6kUV4r-m3fY6zfQ9JXVLx7UuUrZwqXUYT8Yv9626aCiZ3lA9Nl2nOkebmXBKHRRc0FhtI-GPWiwX4ZYfHyrtB8/s1600/youtube.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGklNh3SuCony14_bChA2aERRJ-Hq-Lb-HSoPz2CyqSpsQZciTzEqDxLv-k16RcmM-db3CiR1sUPn5YVW5THEVnCWeYcxdUH9B1cR8k-X5YJk8lJfLUBUVJxtwDD9KTYbd-DTJg_MqVzE/s1600/youtube2.png)top no-repeat;}

.twt-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOfzrZIDGaL-WXd5p5Iw5CMytcx8eQQzgSwyZ3PKiVkQZ6Xz00hX3zI8_LcuBBBK5IADgNBacpuDhjivcy6Hna51zIrKFHTJPtRl39syfeKQkkKbO5Y47ZbSsCpBV0eCknEk7LuMOFII/s1600/twitter.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieSVOW2Y1oDBNBFIqMBz4DUyYVQ-caoCJb3Akgb78prtuVM56QQEhCC1jLtmHnHqajzwR6zbD4GBN7ErQTpK0H954WJX0HQMhaWP1LMFo6_hEV6lZGHjUO1sjp0e_gBLnsRZsmb7iNCaU/s1600/twitter2.png)top no-repeat;}

.face-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBO8rKX-p2n2blA-1szq7enNgUkyPCFxxrVtG-u5ua4IDxt-56p8tAmUUNYZ5A5pRRHFGLlxzRnkj4VleDoyv8_nwrcR-GOV360YMGLtmhRvAs5UvzsLjbIbGUZ_Vp0rxfzhzagHu2zhc/s1600/facebook.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAMU2PewSAgMg7yMLY4URoQ7chNJiS_FFbqV1LWPnjUjsDmULnqu365Obw_eEQR3uHUJtcyyySz_BYuSlsIKupxaXcEMInJC8hgNgQBN7dejwd-qg8JwkG6r_d-nvxCXh0RQBDY7sIGM/s1600/facebook2.png)top no-repeat;}

.rss-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibQFyy_lICQhhPcTMJO7SBFdSNjWRjA6yzMgurGAP94HqFPgtXRTnbx152T18i1dmAFAnYkVmbbKr3gOtJ60-F8u0EIe683rdwrjBznL6H9J6KmZVvQtPujlhEnJFYBxgS0xYpVK6g9vQ/s1600/RSS.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgur7vcX12fReJVzAawcqketxhr_hvxgeluNsy4wRQbmbhCLP2S5VKjd94PsM9SZYOnlV1lRpUQAgwv5RuZLhffR5_tXU6ycxPFReMJdumLMBgoHY7H6duGQHDgOO6a0HzOsvJF98HUd4Y/s1600/RSS2.png)top no-repeat;}

.post-footer-line > * {

margin-left: 0;

}

لا تنسى أن تقوم بحفظ القالب 

• المرحلة الثانية :

1.اذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT

كود:

<div class="social-icone">
<a href="http://www.youtube.com/user/forfayssal2"rel="nofollow" target="_blank">
<div class="you-icone">
<b>400</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/chahidna"rel="nofollow" target="_blank">
<div class="twt-icone">
<b>1000</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/chahidna"rel="nofollow" target="_blank">
<div class="face-icone">
<b>350</b>
<span>معجب</span>
</div>
</a>
<a href="http://feeds.feedburner.com/chahidna"rel="nofollow" target="_blank">
<div class="rss-icone">
<b>2.000</b>
<span>مشترك</span>
</div>
</a>
</div>

وفي الأخير قم بتغير :

'forfayssal2'إلى معرف قناتك على اليوتوب مع تغير عدد المستركين '400'

'chahidna'إلى معرف حسابك على التويتر مع تغير عدد المتابعين '1000'
'chahidna'إلى معرف صفحتك على الفيسبوك مع تغير عدد المعجبين '350'
'chahidna'إلى معرف حسابك على الفيدبيرن مع تغير عدد المشتركين '2.000'

و مبارك لك الأزرار الجديدة 

أكــمــل الــقــراءة Résuméabuiyad

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

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

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

لتطبيق هاته الإضافة ماعليك فعله هو الذهاب إلى لوحة تحكم مدونتك وتقوم بالضغط على التخطيط ثم إضافة أداة واختيار HTML /JAVA SCRIPT وتقوم بوضع هذا الكود في الإطار وتضغط على حفظ.

<div class="widget-content">
<div class="suive">
        <h1>إنضم لأزيد من<b>34.557</b> متابع!</h1>
    
     <div class="icone">
    
         <a target="_blank" href="http://facebook.com/chahidna"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJf3rSfSiKyqGxSXAVu5C-m2feQPP18yVCbDYKxTrJTf0t2AQDto_uxV4wCmPm-iBpmSZfKmcwAmhXZdjgdATMEz0ef_8X-xS3-XrcmatjA-ZWpDMUvE7WyzFeEqSKRbmHLiHzXzpVUs/s1600/icoface.png" /></a>
        
         <a target="_blank" href="http://twitter.com/chahidna"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGUCzwFjQ0S81bO8uEb95sJW_u4nht1dDS0WPIuSqbbX9yki3Fu_b_tpcHh0ue0KD0CBbMHe2j4oFrJ3S7vaGnz1BrOtpOQ8FP-1THw797K2iqhuQJETMrgPbcCTTrurOQZy3B4iN4XQ/s1600/icotw.png" /></a>
        
         <a target="_blank" href="http://www.youtube.com/user/forfayssal2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6hAOskcngyKNN_5gRHb_pXjNeTe_xg0LH-45NqpkTkRf72gChdRP4bHdlweGiwPZUIH09iHnp5HIzTdkxObsXkgr8zSMPVoaKQl806IbLydF7i09uB6wLNS7ECOQ6ICTgjQje09yllY4/s1600/icoyoutube.png" /></a>
<a target="_blank" href="http://feedburner.google.com/chahidna"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8LNVLRHjHS9SBVyvsK1jh82-tRvGxEVNIMN8kIHOBxOPNtULwkXcPNu4HhP0uxCcf6EGn8iKyrsW1xzLJhRUctPyWOBZVo6KKijwxGX2dKngtY4w5vhrAd-H-3BymVEqq2Ts111pFh7c/s1600/48.png" /></a>
        
     </div>
    
</div>
<style media="screen" type="text/css">
.suive{
 width:300px;
 height:123px;
 background: #FFFFFF; /* Old browsers */
 /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMGQwZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top,  #f3f2f2 0%, #d0d0d0 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f2f2), color-stop(100%,#d0d0d0)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* IE10+ */
 background: linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f2f2', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-8 */
 border-radius:5px;
}
.suive h1{
 font-size:22px;
 font-family:Arial;
 font-weight:500;
 color:#828181;
 text-align:center;
 padding:10px;
 margin:0;
}
.suive h1 b{
 color:#ff9000;
}
.suive .icone{
 height:42px;
 padding-right:40px;
}
.suive .icone a img{
 float:right;
 margin-left:20px;
 -webkit-transition: margin 0.2s ease-in-out;
    -moz-transition: margin 0.2s ease-in-out;
 -o-transition: margin 0.2s ease-in-out;
 -ms-transition: margin 0.2s ease-in-out;
 transition: margin 0.2s ease-in-out;
 }
.suive .icone a img:hover{
 margin-top:-3px;
 }


</style>
</div>

قم  بـتغير مايناسبك الدي باللون الأحمر

أكــمــل الــقــراءة Résuméabuiyad