يناير 2015

Archive for يناير 2015

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة نوافذ التسجيل

معاينة
وهذه صورة للاضافة :

تعمل مع :

...5, Safari 4

...7, Internet Explorer 6

...3, Firefox 2

...4, Google Chrome 3

...10, Opera 9

Torch,spark

نبدا بالشرح

خطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الاكواد تحته (اسفله) :
<script type="text/javascript" src="https://0.s3.envato.com/files/3402416/javascript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://0.s3.envato.com/files/3402416/javascript/msgbox/jquery.msgbox.css" />
<script type="text/javascript" src="https://0.s3.envato.com/files/3402416/javascript/msgbox/jquery.msgbox.min.js"></script>
<style>

pre
{
white-space: pre-wrap;
padding:10px;
margin:0 0 10px 0;
width:98%;
overflow:auto;
overflow-y: visible;
}

#top
{
background:#FFFFFF none repeat scroll 0 0;
border-color:#464238;
border-style:solid;
border-width:25px 0;
color:#333333;
margin:0 auto;
padding:15px;
position:relative;
width:560px;
}

#top ul
{
list-style:inside square;
margin-bottom:10px;
}

.thumb img {
background:#EEEEEE none repeat scroll 0 0;
border:1px solid #AAAAAA;
padding:5px;
}
.thumb:hover img {
border-color:#777777;
}
#toc {
background:#CCEAFF none repeat scroll 0 0;
border:1px solid #0075D9;
color:#333333;
float:right;
margin:0 0 40px 10px;
padding:0 10px;
width:250px;
}
#toc h2 {
border:0 none;
color:#336699;
margin:10px 0 5px;
}
#toc a {
color:#336699;
}
.hastoc {
margin-right:0;
}
.hastoc {
margin-right:0;
}
.b {
font-weight:bold;
}
.doc {
list-style-type:none;
margin-left:0;
padding-left:0;
}
.doc li {
margin:5px;
padding:5px;
}
.doc li h5 {
color:blue;
font-size:1.2em;
margin:0 0 5px;
}
h1 small, h2 small, h3 small, h4 small, h5 small {
color:#333333;
font-size:0.7em;
font-weight:bold;
}
.doc li dl {
margin:5px 0 0;
}
.doc li dt {
font-weight:bold;
position:absolute;
text-transform:lowercase;
}
.doc li dd {
margin-left:80px;
}
#header #login-form {
float:right;
padding-top:5px;
width:330px;
}
#menu {
margin:0 27px;
overflow:hidden;
}
* html #menu {
height:1%;
}
#menu ul, #menu li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#menu li {
background:#00B0D8 no-repeat scroll 0 0;
float:left;
}
#menu li a {
background:#FFFFFF none repeat scroll 0 0;
display:block;
float:left;
padding:4px 12px;
text-decoration:none;
}
#menu li.current a, #menu li a:hover {
background:transparent no-repeat scroll right top;
color:#FFFFFF;
text-decoration:none;
}
.message {
background:#00B0D8 no-repeat scroll 0 0;
color:#FFFFFF;
font-size:1.3em;
line-height:1.4em;
margin:0 auto 20px;
position:relative;
width:788px;
}
.message p {
background:transparent no-repeat scroll 0 100%;
margin:0;
padding:20px;
}
.message a{
color:#FFFFFF;
font-weight:bold;
}

.container {
-x-system-font:none;
background:white none repeat scroll 0 0;
border-bottom:1px solid black;
border-right:1px solid black;
color:#333333;
font-family:"Trebuchet MS",sans-serif;
font-size:1em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:100%;
line-height:1.6em;
padding:15px 15px 50px;
width:900px;
}
td {
font-size:11px;
line-height:1.65em;
}
td strong {
font-size:13px;
}
td h2 {
padding-bottom:10px;
}
.download-widget {
border:1px solid #CCCCCC;
position:relative;
width:100%;
}
.download-widget td, .download-widget th {
background:#EEEEEE none repeat scroll 0 0;
margin:1px;
padding:5px;
}
.download-widget th {
background:#E0E0E0 none repeat scroll 0 0;
font-weight:bold;
text-align:left;
}

#login {
width: 238px;
margin: 0 auto;
padding:20px 0 0 43px;
background: url(sexyimages/user.png) no-repeat left center;
}

#login label {
display:block;
font-size:12px;
padding-bottom:5px;
text-align:right;
}
#login label em{
width:80px;
display:block;
float:left;
font-style: normal;
}
#login input {
width:146px;
height:22px;
border:1px solid #ccc;
}

#login input.submit {
width:auto;
height:auto;
border:1px solid #ccc;
float:right;
}

.img_container { height:130px; }
.img_container ul {display:block;padding:0;margin:0;list-style:none;}
.img_container ul li{float:left;width:100px;margin:10px;}
.img_container ul li a img {
width:93px;
height:93px;
border:1px solid #574331;
padding:5px;
background:#eee;
}
.imageborder img{
width:93px;
height:93px;
border:1px solid #574331;
padding:5px;
background:#eee;
float:left;
margin:0 10px;
}
.img_container ul li a:hover img, .imageborder:hover img { background:#e8e8e8; border-color: darkred; }

span.comment { color: #008080; font-weight: normal; }
span.oper { color: #0000f0; font-weight: normal; }
span.var { color: #d56000; font-weight: normal; }
span.func { color: #aa00ff; font-weight: normal; }
span.string { color: #777777; font-weight: normal; }
span.num { color: #990000; font-weight: bold; }
span.reg { color: #8d7f07; font-weight: normal; }

</style>

خطوة 3 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript او داخل </body> في تحرير html مباشرة ثم ضع الكود المناسب لك . تحقق من المعاينة :

الكود 1 :

<button onclick="$.msgbox("The selection includes process white objects. Overprinting such objects is only useful in combination with transparency effects.");">معاينة</button>

صورة للكود :

الكود 2 :

<button onclick='$.msgbox("Are you sure that you want to permanently delete the selected element?", {type: "confirm",buttons : [{type: "submit", value: "Yes"},{type: "submit", value: "No"},{type: "cancel", value: "Cancel"}]}, function(result) { $("#result2").text(result); });'>معاينة</button>

صورة للكود :

الكود 3 :
<button onclick='$.msgbox("jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.", {type: "info"});'>معاينة</button>
صورة للكود :

الكود 4 :
<button onclick='$.msgbox("An error 1053 ocurred while perfoming this service operation on the MySql Server service.", {type: "error"});'>معاينة</button>

صورة للكود :

الكود 5 :
<button onclick='$.msgbox("Insert your name below:", {type: "prompt"}, function(result) {if (result) {alert("Hello "+result);}});'>معاينة</button>

صورة للكود :

الكود 6 :
<button id="advancedexample1">معاينة</button>

بعد وضع الكود 6 في مكانه المخصص . يجب ان تبحث عن </body> وتضع قبله هذا الكود :
<script type="text/javascript">
$("#advancedexample1").click(function() {
$.msgbox("<p>In order to process your request you must provide the following:</p>", {
type : "prompt",
inputs : [
{type: "text", label: "Insert your Name:", value: "George", required: true},
{type: "password", label: "Insert your Password:", required: true}
],
buttons : [
{type: "submit", value: "OK"},
{type: "cancel", value: "Exit"}
]
}, function(name, password) {
if (name) {
$.msgbox("Hello <strong>"+name+"</strong>, your password is <strong>"+password+"</strong>.", {type: "info"});
} else {
$.msgbox("Bye!", {type: "info"});
}
});
});

</script>

صورة للكود :

خطوة 5 : غير كلمة معاينة الى الكلمة المناسبة لك واللون الاصفر هو نص قابل للتغيير . لا تعرف كيف تضيف الاكواد او واجهت خطاً . اكتب المشكلة في قسم الاسئلة .

قائمة تنزل مع تنزيل الصفحة

الجمعة, يناير 16, 2015

اضافات بلوجر

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو قائمة تنزل مع تنزيل الصفحة

لا توجد معاينة متوفرة

وهذه صورة للاضافة :

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

نبدا بالشرح

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
خطوة 3 : في اي مكان داخل <body> ضع الكود التالي :
<div id="jquery-script-menu">


</div>

استبدل  بالاكواد الخاصة بك مثلا استبدله بـ
<p> هذا هو مثال </p>

سلايد شو (11)

الجمعة, يناير 16, 2015

اضافات بلوجر سلايد سلايد شو سلايدر

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو احترافي رقم 11

للمعاينة : اضـــغط هنا

وهذه صورة للسلايدر

نبدا بالشرح

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :

خطوة 3 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير :

سلايد شو (10)

الجمعة, يناير 16, 2015

اضافات بلوجر سلايد سلايد شو سلايدر

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو احترافي رقم 10

للمعاينة : اضـــغط هنا

وهذه صورة للسلايدر

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :

خطوة 3 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير :

سلايد شو (9)

الجمعة, يناير 16, 2015

اضافات بلوجر سلايد سلايد شو سلايدر

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو احترافي رقم 9

للمعاينة ( سلايدر الصور) : اضـــغط هنا
للمعاينة ( سلايدر الفيديو) : اضـــغط هنا

صورة للسلايدر ( سلايدر الصور)

صورة للسلايدر ( سلايدر الفيديو)

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://showcase.awkwardgroup.com/jquery.aw-showcase.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 700,
content_height: 470,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: true,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'hslide', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: false,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'vertical', /* vertical/horizontal */
thumbnails_slidex: 2, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: true, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
custom_function: null /* Define a custom function that runs on content change */
});
});

</script>

خطوة 3 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير ( سلايدر الفيديو)
:

سلايد شو (8)

الجمعة, يناير 16, 2015

اضافات بلوجر سلايد سلايد شو سلايدر

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو احترافي رقم 8

للمعاينة : اضـــغط هنا

وهذه صورة للسلايدر

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/3DGallery/css/style.css" />

خطوة 3 : ابحث عن <body/> الصق الاكواد التالية فوقه ( اعلاه ) :

$(function() {

$('#dg-container').gallery();

});

</script/>

خطوة 4 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير
:

مربع بحث لمدونات بلوجر

الخميس, يناير 01, 2015

اضافات بلوجر CSS

السلام عليكم ورحمة الله

موضوع طريقة اضافة مربع بحث الى مدونات بلوجر

الكود مطور ( مطور الى تصميم فلات حصري فقط في هذه المدونة )

نبدا بالشرح :

1- اذهب الى بلوجر واختر مدونتك

2 - اذهب الى تخطيط ثم اختر اداة جديدة بعد فتح نافذة الادوات اختر اداة html/java script من القائمة اضف فيها الاكواد التالية :

<form class="form-wrapper" action="/search" method="get"> <input id="search" name="q" type="text" placeholder="بحث في الموقع ..." style="width: 221px;" /> <input id="submit" type="submit" value="بحث" style="width:85px;height: 42px; " /> </form> <style> .form-wrapper { width: 321px; padding: 8px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8); } .form-wrapper #search { width: 180px; height: 20px; padding: 10px 5px; float: left; font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; -moz-box-shadow: 0 1px 1px #bbb inset; -webkit-box-shadow: 0 1px 1px #bbb inset; box-shadow: 0 1px 1px #bbb inset; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;} .form-wrapper #submit { float: right; border: 1px solid #00748f; height: 42px; width: 70px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; background-color: #0483a0; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #1ED3EB; } .form-wrapper #submit:active { outline: 0; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style>

{css} : خاصية ( z:index )

الخميس, يناير 01, 2015

CSS

السلام عليكم ورحمة الله وبركاته

خاصية z-index في الـ CSS مهمتها هي ترتيب العناصر فوق بعضها البعض

نبداء بالامثلة والتطبيق :

سنقوم بأنشاء 2 div هكذا :

<div class="box1"></div>
<div class="box2"></div>

وستكون لهما خصائص css :

div{
width: 200px;
height: 200px;
}
.box1{
background-color: #d50000;
}
.box2{
background-color: #4a148c;
}

ستكون النتيجة الطبيعيه هكذا :

[CSS] خاصية z-index وطرق استخدامها بالتفصيل

الآن سنعطي خاصية z-index للعنصرين، بحيث يكون الـ .box2 فوق الـ .box1، وسنلاحظ النتيجة :

div.box1{
z-index: 1;
}
div.box2{
z-index: 2;
}

في الكود السابق، من المفترض أن يصبح العنصر div.box2 فوق العنصر div.box1، ولكن لن يتغير أي شيء عن السابق،
لأن العناصر لا تحمل خاصية position، أن خاصية z-index لا تعمل إلا مع خاصية position
لذا سنقوم باعطائها الخصائص التالية :

div{
position: absolute;
}

ستكون النتيجة كالتالي :

الآن سنجعلهم واحد فوق الاخر :

div.box1{
left: 100px;
top: 100px;
}
div.box2{
left: 200px;
top: 200px;
}

ستكون النتيجة كالتالي :

الآن سنشرح الجزء الأهم، والذي يواجه الجميع مشكلة فيه،
الآن سنضيف عنصر جديد div.box1-2 داخل العنصر الأب div.box1
ليصبح الكود كالتالي:

<div class="box1">
<div class="box1-2"></div>
</div>
<div class="box2"></div>

كود css الخاص به سيكون بالشكل التالي :

div.box1-2{
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background-color: #00bfa5;
}

ستكون النتيجة بالشكل التالي :

الآن المشكلة التي تواجه البعض، هو أنه يريد إن يجعل العنصر div.box1-2 فوق كل شيء، فيعطيه الخاصية بالشكل التالي :

div.box1-2{
z-index: 9999;
}

رغم أننا أعطينا الخاصية z-index أعلى قيمة، أي من المفترض أن تكون فوق كل العناصر، ولكن سنلاحظ أن النتيجة أن الترتيب بقي كما هو :

للتوضيح بـ 3D :

الترتيب النهائي الذي سيظهر لنا على المتصفح كالتالي:

1 - div.box1
2 - div.box1-2
3 - div.box2 ما السبب أن العنصر div.box1-2 لم يكن أعلى العناصر من حيث الترتيب، رغم حصوله على أعلى قيمة ؟
السبب : لأن العنصر div.box1-2 موجود داخل div.box1 و له ترتيب أقل من العنصر الآخر الموجود فوق كل شيء وهو div.box2
الشرح منقول مع توضيح اكثر .