اضافة سلايدر شو رائع .....

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

درس اليوم ان شاء الله هو اضافة جديدة ورائعة لمدونات بلوجر وهو اضافة سلايدر شو  بطريقة سهلة ورائعة ولا تأثر علي سرعة اداء المدونة
لمعاينة الاداة الاداة موجودة علي المدونة

طريقة تركيب الاداة 

1- اذهب الي لوحة التحكم بالمدونة 

2- تخطيط 

3- اضافة اداة html

4-ضع الكود التالي ثم احفظ 

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://inf0tec.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

5- غير ماهو باللون  الاحمر لرابط مدونتك

6- مبروك عليك الاضافة
والي اللقاء في موضوع جديد علي تكنولوجيا المعلومات
لاتنسي لايك لصفحتنا واضف تعليقك ولو بكلمة شكر

أكمل القراءة

انفراد .. اجعل مدونتك مركز رفع للصور

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

لاداعي للقلق والاستغراب انت اليوم مع الانفراد والتميز بعد ماقمت بكتابة تدوينة

"انفراد.. اضافة تعدد الالوان في مدونات بلوجر"

 اليوم اليك بانفراد اخر وهو كيف تجعل من مدونتك مركز لرفع الصور. 

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

فلاداعي للذهاب بعيدا عن مدونتك فهي اداة حقا رائعة تجعل زائر المدونة لايتركها 

 لمعاينة الاداة اضغط هنا

لتركيب الاداة ليس صعبا فالامر في غاية البساطة افتح لوحة التحكم >تخطيط> اضافة html 

وضع الكود التالي 

 style="text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1" cellspacing="1" width="70%"><tbody><tr><td style="text-align: center;"><center><div id="form_upload">
            <form action="http://www.servimg.com/fa_upload.php" enctype="multipart/form-data" method="post" name="upload">
                <p class="champ" style="text-align: center;">
                    <input onclick="switchuploadaddress(true);" checked name="uploadtype" style="border: 0pt none;" type="radio" /><label>اختيار صورة</label><span id="upfile"><input name="pic_file" size="25" style="width: 220px;" type="file" /></span></p>
                <p style="text-align: center;">
                    <span id="upurl" style="display: none;"><input name="pic_url" size="35" style="width: 200px; direction: ltr;" type="text" /></span><input name="cat_id" value="0" type="hidden" /><input name="email" value="goboy1000@gmail.com" type="hidden" /><input name="password" value="aa5c0a95aa1045a565c96df47c9f66" type="hidden" />"إن الله بما تعملون بصير"</p>
                <p class="submit_button" style="text-align: center;">
                    <input name="submit" value="تحميل / رفع" type="submit" /></p>
            </form>
        </div><center>
</center></center></td></tr></tbody></table>

ثم قم بحفط ومبروك

واللي اللقاء في تدوينة اخري

أكمل القراءة

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

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

تعدد الالوان للرابط

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

ليس غريبا ذلك فلا داعي للاستغراب وليس صعبا بالمرة نعم ليس صعبا تعالو معي نجرب الاداة 

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

لتركيب الاداة اذهب اللي قالب > تحرير قالب >وابحث عن <head>

وضع تحتها مباشرا الكود

ثم قم بعمل حفظ للقالب ومبروك عليك

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

أكمل القراءة