4 كيفية وضع خلفية للمواضيع او الادوات اوالاكواد






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

افتح موضوع جديد واضفها في مكان عنوان الموضوع
او حول الموضوع الي html واكتب الكلام او الكود ثم انشر الموضوع

الكود



<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div style="-webkit-box-shadow: #F0860D 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 4px 4px; background-attachment: initial; background-clip: initial; background-color: #13b0b2; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: #ffffff; border-image: initial; border-style: dashed; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 2px; box-shadow: #13B0B2 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; color: white; font-size: 21px; line-height: 1.3em; margin: 10px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: center; text-shadow: #13B0B2 -1px -1px;">هنا الكلمة المرادة</div>

غير اللذي باللون الاحمر #13b0b2 الي اي كود تريده

استبدل الاخضر
(هنا الكلمة المرادة) الي الكلمات التي تريديها


إقرأ المزيد Résuméabuiyad

2 اضافة تأثير الدوران على الصور بالمدونة





السلام عليكم ورحمة الله,اليوم جئتكم بإضافة جميلة بتقنية css تضيف لصور المدونة حركة دوران عند مرور الماوس عليها

معـــاينة





1)تسجيل الدخول الى بلوجر

2) خيارات> تحرير القالب > ضع علامة على توسيع القالب 

3) ابحث عن الكود التالي بإستعمال مفتاحي ctrl+f
]]></b:skin>
4) ضع الكود التالي فوق الكود السابق الذي ةجدته

.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);


ليصبح في الاخير هكذا:
contoh:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

 ]]></b:skin>


7) وأخيرا اضغط على حفظ القالب

إقرأ المزيد Résuméabuiyad

3 ازرار رائعة بتقنية css...حصريا


السلام عليكم ورحمة الله وبركاته،اليوم احببت ان اعرض عليكم هذه الاضافة الرائعة والتي هي عبارة عن ازرار يمكن استعمالها في العديد من الاماكن داخل المدونة وما يميزها هو امكانية التحكم في حجمها واللون الذي تختاره وايضا انها تعمل بتقنية  CSS والتي تعطي للمدونة مظهرا جميلا وبدون ان اطيل عليكم تابعوا الشرح 

معاينة مباشــرة ↓



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

 اول خطوة هي اضافة الكود التالي للمدونة

تسجبل الدخول الى المدونة.
تحرير القالب.
اضغط على زر توسعة القالب. 
 ثم ابحث عن الكود التالي باستعمال مفتاحي  ctrl+f 

]]></b:skin>


اضف الكود التالي فوقه مباشرة

.button, .button:visited {
 background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}

.button:hover {
 background-color: #111;
 color: #fff;
}

.button:active {
 top: 1px;
}

.small.button, .small.button:visited {
 font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
 background-color: #e22092;
}

.pink.button:hover {
 background-color: #c81e82;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}

.green.button:hover {
 background-color: #749a02;
}

.red.button, .red.button:visited {
 background-color: #e62727;
}

.red.button:hover {
 background-color: #cf2525;
}

.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}

.orange.button:hover {
 background-color: #d45500;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}

.blue.button:hover {
 background-color: #2575cf;
}

.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}

.yellow.button:hover {
 background-color: #fc9200;
}

واخيرا احفظ القالب

والان نأتي الى اختيار الازرار المناسبة

طريقة استعمال الازرار؟


يمكنك استعمال هذه الازرار في اي مكان حنى داخل المواضيع ولادراج الازرار في اداة الجافا اتبع التالي

  1. اختر الكود الذي يعجبك من الاسفل
  2. قم بإضافة اداة الجافا سكربت فأي مكان تريده
  3. الصق الكود داخل هذه الاداة 

  1. كود الازرار كبيرة الحجم
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>


2.كود ازرار متوسطة الحجم

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

  • غير كلمة LINK HEREبالرابط الذي تريد
  • غير كلمة LINK TEXT HERE بالجملة او الكلمة التي ستظهر داخل الازرار.
  • ويمكن اختيار الون عن طريق تغيير اسماء الالوان 



إقرأ المزيد Résuméabuiyad

2 كيفية عمل سكرول متحرك لاداة الارشيف في مدونة بلوجر



معاينة


السلام عليكم و رحمة الله وبركاته ..  كثير من اصحاب المدونات يرغب في وضع اداه الارشيف في القائمه الجانبيه والغالبيه العظمي تلجأ الي جعل الاداه تعمل علي شكل قائمه منسدله من خلال الاختيارت التي تمنحها الاداه . غير ان الكثير يود ان يتم عرض الارشيف علي شكل اسبوعي او شهري او يومي ولكن بوضعه الطبيعي والافتراضي وليس كقائمه منسدله وما يمنع تلك الرغبه  هي المساحه التي ياخذها الارشيف لو وضعناه بتلك الطريقه فلو كانت المدونه تحتوي علي موضوعات كثيره فغالبا اداه الارشيف ستحتل القائمه الجانبيه باكملها وحلا لتلك الاشكاليه سيتم عمل هذا التعديل البسيط ... ولعمل مثل هذا التعديل يلزمك تسجيل الدخول الي لوحة تحكم مدون بلوجر  ثم الذهاب الي عناصر تصميم الصفحه ووضع اداة الارشيف في القائمه الجانبيه لمدونتك من خلال انشاء اداه جديده ثم اذهب بعد ذلك الي  تحرير HTML  وابحث عن الكود التالي <div id='ArchiveList'> ستجد فوقه مباشرة <div class='widget-content'> قم بتظليل الكود الاخير واستبدله بالكود التالي


<div class='widget-content' style='overflow:auto; height:200px'>
 
معاينة التعديل


والسلام مسك الختام



إقرأ المزيد Résuméabuiyad

2 طريقة تغيير خط الكتابة بالمدونة


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

يمكنكم مشاهدة المعاينة على الصورة او على المدونة



 1- ابحث عن هذا الكود ]]></b:skin> باستعمال ctrl+f
2-بعدها اختر احد اكواد الخطوط بالاسفل والصقه فوق الرمز الذي وجدته 

DroidKufi-Bold

كود css:
@font-face {


font-family: 'DroidKufi-Bold';

src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.eot');

src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Bold.ttf') format('truetype'); }  






____________________________________

DroidKufi-Regular

كود css:
@font-face {


font-family: 'DroidKufi-Regular';

src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.eot');

src: url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidKufi-Regular.ttf') format('truetype'); }  






____________________________________

DroidNaskh-Bold

كود css:
@font-face {


font-family: 'DroidNaskh-Bold';

src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.eot');

src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.ttf') format('truetype'); }  






____________________________________

DroidNaskh-Regular

كود css:
@font-face {


font-family: 'DroidNaskh-Regular';

src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.eot');

src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.eot?') format('embedded-opentype'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.woff') format('woff'),
url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Regular.ttf') format('truetype'); }  


الآن وبعد لصق كود الخط المناسب، تأتي خطوة تغيير اسم الخطوط حسب المكان الذي تريد ظهور الخط فيه (العنوان، عنوان التدوينات، ..) وغالبا ما يكون كود الخط في تحرير HTML على شكل font-family، ولاستخدام الخطوط أعلاه هذه العبارات التي يجب إضافتها للfont-family :



'DroidKufi-Bold'

'DroidKufi-Regular'
'DroidNaskh-Bold'
'DroidNaskh-Regular'


إقرأ المزيد Résuméabuiyad

2 طريقة تحريك الروابط داخل المدونة...جديد







معاينة:


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


1) قم بتسجيل الدخول الى blogger

2) لوحة التحكم >> التخطيط >> عناصر الصفحة >> اضافة اداة >> واضف اداة Html / Javascript

3) قم بنسخ الكود التالي والصقه في اداة Html / Javascript :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
400 - يمكنكم التعديل على القيمة التالية والتي تمثل سرعة حركة الروابط

4) وأخيرا قم بحفظ الاداة

إقرأ المزيد Résuméabuiyad

1 تغيير لون الروابط داخل المدونة بألوان عدة وفي نفس الوقت


السلام عليكم ورحمة الله
اليوم جئتكم بكود رائع يغير لون الروابط عند تمرير الماوس عليه ويعطيه شكل رائع وفي الاخير لايسعني الا ان اترككم لتجربته




المعاينة المباشرة


طريقة تركيب كود  HTML
1) تسجيل الدخول الخاص بك المدون حساب
2) لوحة التحكم الرئيسية> التصميم> إضافة أداة> HTML / Javascript
3) انسخ الكود التالي والصقه في الاداة  HTML / Javascript


<script src="https://sites.google.com/site/tutorialcursorsparkle/rainbow.user.js" type="text/javascript">
/***********************************************
http://بfor-tek.blogspot.com/
***********************************************/
</script>

4) واخيرا قم بحفظ الاضافة 
إقرأ المزيد Résuméabuiyad

0 كريات مضيئة تنبثق من وسط المدونة...اداة رائعة





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


المعاينة المباشرة



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

  قم بنسخ الكود التالي والصقه في الاداة:


<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var warp=3; // from 1 to 10
var stars=100; // number of stars
var colour="#66FF66"; // colour of stars
var position=0; // set to '-1' for stars to appear behind text on page

/****************************
* Star Warp Effect *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by Polskahackrew *
****************************/
var i;
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var swide=800;
var shigh=600;
warp/=100;
window.onload=function() { if (document.getElementById) {
var b, s, temp;
set_width();
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.zIndex=position;
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.backgroundColor=colour;
strs[i].style.overflow="hidden";
strs[i].style.position="absolute";
stdy[i]=Math.random()*4-2;
stdx[i]=Math.random()*6-3;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
b.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=1+warp;
stdy[i]*=1+warp;
if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {
strs[i].style.left=Math.floor(strx[i])+"px";
strs[i].style.top=Math.floor(stry[i])+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
stry[i]+=stdy[i]=Math.random()*4-2;
strx[i]+=stdx[i]=Math.random()*6-3;
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
}
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-13;
shigh=self.innerHeight-13;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
swide-=2;
shigh-=2;
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>
يمكنكم التعديل على لون الكريات وذلك بتغيير الكود الذي باللون الاخضر  66FF66 ولقد ادرجت موقع اكواد الالوان بالاسفل ويمكنكم اختيار كود اللون المناسب
        
           


إقرأ المزيد Résuméabuiyad

 

جدونا على التويتر

Ping your blog, website, or RSS feed for Free

فكرة،سؤال،ملاحظة...

Ping your blog, website, or RSS feed for Free

جدونا على الفيس بوك

Ping your blog, website, or RSS feed for Free