loading...
| 0 التعليقات ]



بـــِــــسم الله الرحمن الرحيـــــــمـ ْ   




والصلاة والسلام على من بعثه الله هادياً ومبشراً ونذيراً ،



 نبينا محمد وعلى آلهـ 





وصحبه أجمعين ..



أمـــآ بعـــد :


درســنـــآ اليـــوم يتحدث عن طريقة إضافة أداة " المشاركات الشآئعة " ،


ستظهر هذه الإضـــآفة في الصفحة الرئيسية و صفحات المواضيع ،،


ولا تأخد حيزا كبيرا في تصميم المدونة ،،


كـــمآ أن تركيبهـــآ سهل ،،


لنتـــآبع الخـــطوآت ،،


نتجه إلى : 



التــخطيط > إضــآفة أدآة > HTML/JavaScript > المشــآركات الشــآئعة ،،


لاحظ الصورة : ( ننزع العلامة من" المقتطف " ونتركـ الصورة فقط )




الآن نتجه إلى : 



قـــآلب  > تحريــر HTML  > توسيع العنــــآصر ،،


وإبحث عن الوسم : ]]></b:skin>


وألــصق هذا الكوود تحته مبـــآشرة :





<style type='text/css'> .PopularPosts .item-title{display:none} .PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float: right; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important} .PopularPosts .item-thumbnail{margin:0 8px !important} .item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #C7E95F; height:53px; padding:3px; width:53px} .item-thumbnail img:hover{border:5px solid #BBB; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)} </style>




إلـــى هنـــآ نصل إلى نهــــآية الدرس ،،


لاتنسوا مشــــآركتنــآ التعليقــآت ،،
...تابع القراءة

| 0 التعليقات ]




بـــِــــسم الله الرحمن الرحيـــــــمـ ْ   




والصلاة والسلام على من بعثه الله هادياً ومبشراً ونذيراً ، نبينا محمد وعلى آلهـ 






وصحبه أجمعين ..



أمـــآ بعـــد :




إبـــحث عن هذا الوســم : 

]]></b:skin>


وألصق هذا الكوود قبله ،،
.accordion {
width: 620px;
text-align: center;
border-bottom: solid 1px #c4c4c4;}
.accordion h3 {
background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-yZlsC4hnO59I3cByE4h63BOaES0HXVXSajhBQh1v6BKwfY7-i7vHtJQk4Wy4AnBC7Zq1KOJo9Z2fhtIVDZmDI9ExV3j9Rz1skCxtv7Ie8mlMgL188Gci2V8tMyo5aU-SPs-iE7hOmQF1/s320/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;}
.accordion h3:hover {
background-color: #e3e2e2;}
.accordion h3.active {
background-position: right 5px;}
.accordion p{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtv2d6-dVE_xWk-DCpO8mplzVlwR1dj6ATbmiJFxE6I7J6rFLpsfSYM5quUUU_LAcr356lwx3cKmbFXP7o-79aJRQd-8Zg93H19l1c0ysX4OCVMbbeqvLpEJ63ag20kArK4Ox7MRTx6r0/) ;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;}


ثــم إبحث عن الكوود التالي ،،


</head>


وألصق هذا الكوود قبـــله ،،

 <script src='http://blogspacetech.googlecode.com/files/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();
$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});
});
</script><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>


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

<data:post.body/>

ثم قم بلصق هذا الكود بعده :

<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTDgKvX-sxI-6NbdFcvdeLW1_RDtebQofQBlW5qQybQ-C-m6XIeXtRmCuHcnU96UbusGyJ6dlgM16R_K_anW7ol5vuiOjfKKvoXDfWTlyqVXO60whbu96rXkfeoeUql0e7RgpZB3cehk/s128/no-image.blogspacetech.jpeg&quot;;
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = &quot;#E67C15&quot;;
jaBold = true;
jtext = &quot;التعليقات&quot;;
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
numposts = 10;
label = &quot;أدوات بلوجر&quot;;
home_page = &quot;http://www.rib7i.blogspot.com/&quot;;
</script>
<div class='accordion'>
<script src='http://blogspacetech.googlecode.com/files/new.recent-posts.js' type='text/javascript'/>
</div>
</b:if>
  • width: 620px    يتـــغير العرض بتغيير القيمة ،،

  • أدوات بلوجر : مقــم بتغيير هذه الجملة بأحد التسميــآت في مدونتك ،، 

إلــــــــى هنـــآ نصل إلى نهاية الدرس ،،

لاتنسوا مشاركتنـــآ  التعليـــقآت ،،

أخووكم : Mr ChàFiài 
...تابع القراءة

| 0 التعليقات ]




بـــِــــسم الله الرحمن الرحيـــــــمـ ْ   



والصلاة والسلام على من بعثه الله هادياً ومبشراً ونذيراً ، نبينا محمد وعلى آلهـ 



وصحبه أجمعين ..



أمـــآ بعـــد :


درســــنـــآ اليــوم يتحــدث عن طريـــــقة إضافة النوافـــذ الجانبية للشبكات الإجتمــآعية ،،

هـــذه الإضــآفة تضم نــوافــذ الشبكات الإجــتــمــآعية الثلاثة :

فــآيسبووكـ ، قوقل بلــس ، خلاصات RSS ، تــويتر 

طــريقة التركــيب سهلــة ، لنـــتآبع : 


إتــجــه إلـــــى : 


لوحة التحكم > قــالــب > تحرير HTML > توسيع الــقالب 


نبحـــث عــن الوسم التالي  بالــضغط على ( Ctrl + F) ،،

 ]]></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/AVvXsEi12FjPwOycCHTPWzB5Yhtds7nNCFhkydUAoT6uTcetzLzHMmt3vGngQIMmYmQ4KUxDRvrJUwY5YPGS4sMXa46QJ30Xul4YrAGpMZlFdKrvSR8V00jM6IS_bul5DrCM-xrM2ipj7F18Zpk9/s1600/facebook-icon.png" alt=""/><iframe src="//www.facebook.com/plugins/likebox.php? href=http%3A%2F%2Fwww.facebook.com%2FRib7iBlog&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/AVvXsEjEMp25geJAKvvFD1FH7hJR3SJizxUsBKLYUNR5ADM8QwWJbGkqIytYX30baiYPVnBTQ42M71-usrp4f-og4tAqsQ0ILbKtgxJHlE4BOBp-2WtMi9aWIrrHZMUS3dGbVJ_b4-6Cfl-F13fg/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('TheBossMed').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/AVvXsEg7FWf0-HRxZ1tUkF3_6wXcYi75ejpEtXomiIYKgimKPVNSovtKlVDbbl80HX5kmh3FnhzAmCJy7uGn1-g4Cl59LZyIx7UymvJ7Tee1aeKvYmJvWtuAoUtsQ1hpxwwCeYMQI9cows12SCaw/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=http://feeds.feedburner.com/blogspot/pTSvp', '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="http://feeds.feedburner.com/blogspot/pTSvp" 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/AVvXsEjklClaEnxyUOx56m8qwG8Dj3VT1EpVIkL-CHPh6J-M0eb0_K2z_IOV2vfiwUuleAigALqlGXRqFQk0bF3RTZFcwveWXaVGqjd9SyYYH-_KFLhiDjCDyiclWcDys3duuN6GqQfXcqPvntA/s1600/rssfeed.png"/></div></div></div></div>


مـــع تغيير : 

اللون الأزرق بحــســآبك على الفيد برنرز 

اللون الأحمر بحســآبك على توييتر 

اللون البنفســجي بصفحة مدونتك على الفــآيسبووكـ 



  إلـــى هــنــآ نصل إلى نــهاية الدرس ،،

لاتنسوا مشــــآركتنــآ التعليقـــآت ،،

أخــوكم : Mr ChàFiài



...تابع القراءة

| 1 التعليقات ]



بـــِــــسم الله الرحمن الرحيـــــــمـ ْ  


والصلاة والسلام على من بعثه الله هادياً ومبشراً ونذيراً ، نبينا محمد وعلى آلهـ 



وصحبه أجمعين ..




أمـــآ بعـــد :


درسنا اليوم يتحدث عــن طـــريقة  إضــآفة نـــص أو صوورة فوق صندوق التعليقــآت ،،


الطـــريقة سهلة وتمكنكـ من إضــآفة صوورة أو نص توصل به معلومــآت إلى المعلقين ،،



لنتابــع الشــــرح :



أولا نتــجه إلى لوحة التحكم ،،



قــآلـــب > تحرير HTML > توسيع الــــقآلـــب 


نبـــحث عن الوســم :  <p><data:blogCommentMessage/></p>


نـــــضيف هــذا الكوود تحته : 



لإضــــآفة صورة : 




<img src="رابط الصورة" border="0" />

لإضــــآفة جــمل  ( صندوق HTML) :



<div class="warning" style="background:#F3F9FB url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ8bfTxj0rRD35r6tYcNX63XT-mp517wQ5_BtDEmgV2-uE1kKu0cWn-CcMVNlrcXhYz7zlbcUrpEhbJUeBMMXhG3rEVu5sQh8RfI3_hjcpML-8QgT1IBx_wMEu9dedu5bEmctZEaPVxWQ/) 8px 6px no-repeat ; border:#A8D1E6 1px solid; padding: 5px 5px 5px 40px;"> فقرة من بضع جمل </div>


إلــــى هـــنـــآ نصل إلى نهاية الدرس ،،


لاتنســـوا مشاركـــتـــنآ التعــيقــآت ،،


أخـــوكم : Mr ChàFiài 
...تابع القراءة

أحـصل على مـآستـر كـآرد مـجـآنـية بمـمـيزآت رهـيبة !