‏إظهار الرسائل ذات التسميات أكواد html. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات أكواد html. إظهار كافة الرسائل

إضافة تاثير تعدد الألوان للينكات فى مدونتك



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

إبحث عن هذا الكود 

</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>

هذا هو الكود المخصص فى سرعة تحول اللون 
 
var rate = 15 ;  


فى رعاية الله 

أكمل القراءة »

إضافة يمكنك عمل مركز رفع صور بسيط


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


الكود لا يحتاج لتعديل فقط أضف أداة جديدة ثم ضع فيها هذا الكود 
 
تأكد من نسخ الأكواد التى بداخل الأطار كاملة
<table 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>



المصدر|منتديات معهد خبراء بلوجر 

كاتب التدوينة الأصلى| أخى chhibo
 
أكمل القراءة »

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






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






إذهب إلى لوحة التحكم الرئيسية>التخطيط>إضاقة اداة جافاسكريبت
وضع بها الكود التالى



<!-- بداية كود الاعجاب -->

<style type="text/css">

#topbar{
position:absolute;
border: 1px solid black;
padding: 4px;
background-color: white;
width: 150px;
visibility: hidden;
z-index: 0;
}

</style>

<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center"> <thead> <tr> <td class="tcat"> <a style="float:left" onclick="return toggle_collapse('quickregister')"></a> <strong>

<span lang="ar-sa">تابعنا على فيس بوك</span></strong> </td> </tr> </thead> <tbody id="collapseobj_quickregister" style=""> <tr> <td class="alt1" align="center"> <span class="smallfont"><script type="text/javascript" src="clientscript/vbulletin_md5.js"></script> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=382"></script> <form action="http://www.shbabelyom.com/register.php?do=addmember" name="register" method="post" onsubmit="return verify_passwords(password, passwordconfirm);"> <input type="hidden" name="s" value="c57548fc566e37c8e11103abdf95594d" /> <input type="hidden" name="securitytoken" value="guest" /> <input type="hidden" name="do" value="addmember" /> <input type="hidden" name="url" value="" /> <input type="hidden" name="agree" value="" /> <input type="hidden" name="password_md5" /> <input type="hidden" name="passwordconfirm_md5" />


اضغط على اعجبني - like ليصلك كل ما هو جديد <span lang="ar-sa"> </span><br /><br />

<img border="0" src="http://store2.up-00.com/Jan12/eKm76891.gif" />
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/mdwanblog&amp;layout=button_count&amp;show_faces=true&amp;w idth=90&amp;action=like&amp;font=arial&amp;colorsc heme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowtransparency="true"></iframe>
</form> </span></td> </tr> </tbody> </table></div>

<!-- نهاية كود الاعجاب -->



مع تغير اللون      برابط صفحتك على الفيس بوك

أكمل القراءة »

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


أهلا بكم إخوانى ...

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





لوحة تحكم بلوجر الرئيسية>تخطيط > إضافة أداة جافاسكريبت


ضع أحد الكودين التاليين بالمربع

<div align="center"><a href="http://twitter.com/mdwan_blogger"><img src="http://twitterbuttons.sociableblog.com/images/Twitter_Badge_4.png" title="تابعنى على تويتر" width="250" height="170" border="0" /></a><br /></div>

<div align="center"><a href="http://twitter.com/mdwan_blogger"><img src="http://twitterbuttons.sociableblog.com/images/Twitter_Bar_3.png" title="تابعنى على تويتر" width="200" height="90" border="0" /></a><br /></div>

غير ما باللون الأحمر برابط حسابك على تويتر
اللون      يمثل الشكل الأول
اللون      يمثل الشكل الثانى
فى رعاية الله

أكمل القراءة »

كود المتابعه على المواقع الاجتماعيه بشكل وتاثير إحترافى


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

--------------------------------------------------------------------



إذهب إلى رئيسية بلوجر<إضافة اداه<جافاسكريبت وضع بها الكود التالى



<html>
<head>
<style>
#social {
margin:5px auto 0 auto;
text-align: center;
}

#social img {
margin-right: 2px;
margin-left: 0px;
}

#social img:hover {
opacity: 0.6;
}
</style>
</head>
<body>
<!-- / تم صنع الكود بواسطة مدونة مدون -->
<!-- / نرجو عدم حزف السابق -->
<div id='social'>
<a href='#'><img alt='Twitter' src='http://img221.imageshack.us/img221/3171/twittericont.png' title='تابعنى على تويتر'/></a>
<a href='#'><img alt='Feed' src='http://img521.imageshack.us/img521/3997/rssiconldl.png' title='الخلاصات'/></a>
<a href='#'><img alt='Facebook' src='http://img707.imageshack.us/img707/5055/facebookiconq.png' title='تابعنى على الفيس بوك'/></a>
<a href='#'><img alt='Google Plus' src='http://img9.imageshack.us/img9/6204/googleplusiconl.png' title='جوجل بلس'/></a>
<a href='#'><img alt='Youtube' src='http://img835.imageshack.us/img835/1835/youtubeiconf.png' title='تابعنى على يوتيوب'/></a>

</div>
<div style='clear: both'/>
<!-- / تم صنع الكود بواسطة مدونة مدون -->
<!-- / نرجو عدم حزف السابق -->
</body>
</html>



الآن قم بتغيير اللون     مع الوصلات الخاصة بك



 فى رعاية الله

أكمل القراءة »

شرح تركيب قائمه إحترافية لمدونات بلوجر






كود قائمة جميله وإحترافية لمدونات بلوجر بتقنية الـ css قائمة رائعه
موقع way2blogging هو كل ما فعلته هو تعريب القائمة وإزالة منها الإضافات
الغير هامة أيضا تركيبها على مدونتك بسيط جداً وسهل أم بالنسبة للمبتئين هم يحتاجون فقط بعض التركيز
لكى يقومون بذلك القائمة لن تجدها إلى على مدونة مدون فقط الآن مع شرح تركيب القائمة.

 


  1. إذهب إلى لوحة تحكم بلوجر الرئيسية >تحريرhtml
  2. إبحث عن ]]></b:skin> ثم ضع الكود التالى قبله
 .w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: right;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fffs;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;right: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;right: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:50px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-right: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}
 



ثم إذهب إلى إضافة اداه جافاسكريبت
وضع به الكود التالى 


<ul id="w2bajaxmenu" class="w2bmenu">
    <li>
        <a href="#">الرئيسية</a>
    </li>
    <li>
        <a href="#"><<إنضم إلينا</a>
        <ul>
            <li><a href="#">فيس بوك</a></li>
            <li><a href="#">تويتر</a></li>
            <li><a href="#">يوتيوب</a></li>
       
        </ul>
    </li>
    <li>
        <a href="#">من نحن</a>
        <ul>
           
        </ul>
    </li>
    <li><a href="#">عن مدونة مدون</a></li>
</ul>





غير ما يلزم بالكود

أكمل القراءة »

شرح تصميم أزرار إحترافية لمدونتك






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

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

بعد الدخول إلى الموقع أضبط ألوان وشكل الزر كما تريد 
وببعد الانتهاء من ضبط الالون والشكل أضغط على الزر الي عملته 
ثم أنظر أسفل مكان الزر سوف تجد فراغان الاول صغير والثاني كبير أنسخ الكود الي بالفراغ الكبير
ثم توجه إلى تصميم >> تحرير html

أبحث عن الوسم التالي " ]]></b:skin> "

وضع الكود قبل الوسم السابق الان توجه إلى الموقع وأنسخ الشفير الي بالفراغ الصغير
سوف تكون بهذا الشكل
"<a href="#" class="myButton">my button</a>"

بمكان علامة المربع أضف الرابط وبمكان "my button" أضف الاسم الظاهر لزر
مثال
"<a href="http://mdwanblog.blogspot.com/" class="myButton">مدونة مدون</a>"



أكمل القراءة »

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


كود الإعلانات البنرية بشكل جديد ومطور من صنعى فقط من مدون
الكود يظهر الإعلانات بشكل جديد غير العادى وايضاً بمساحات
مختلفة غير المساحه 125x125 لقد غيرت هذة المساحه بمساحه أخرى
لتعطى شكل جزاب وأفضل للمدونة وشكل الإعلان جيد لا يأخذ مكان فى المدونة
وشكله طولى يمكنك وضعه فى أى مكان فى المدونة ولكن ننصح بأنك تختار أداه
يكون العرض مساحته كبيرة حتى يظهر الكود كامل لقد صنعته ليس عمودى 
حتى لا يأخذ مكان كبير من المدونة شاهد الصوره التالية 





هذا هو شكل الكود بسيط ورائع ولا يأخذ مكان 

 


لوحة التحكم الرئيسية > التخطيط > إضافة اداة جافاسكريبت

 <!-- http://mdwanblog.blogspot.com/  -->
<div align="center">
<table border="2px "  cellpadding="2" cellspacing="6" width="50%" bgcolor="#ffffff">
<tbody><tr>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>


<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>

<td><center><a href="رابط المعلن" rel="nofollow"><img border="0" alt="وصف الإعلان" width="180" src="http://img515.imageshack.us/img515/7149/88858688.gif" title="أعلن هنا" height="72" /></a></center></td>


</tbody></table>

</div>

<!-- http://mdwanblog.blogspot.com/  -->



ملحوظة/ المساحه المستخدمة هى 180 عرضاً و 72 طولاً


"الآن مع الالوان وتغير الكود ليناسبك"


  1.       يمثل رابط صورة المعلن لديك
  2.       يمثل إسم الموقع المعلن لديك
  3.       يمثل رابط / وصله الموقع
  4.       يمثل وصف الإعلان إذا أحببت ذلك



إذا إستفدت من الموضوع فلا تحرم غيرك من الإستفادة
أكمل القراءة »

نبذه عن الكاتب بشكل جديد ورائع لمدونات بلوجر





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





  • الخطوة الأولى تركيب الـ css
  1. الذهاب إلى لوحة التحكم الرئيسية> تصميم> تحرير HTML.
  2. ننصح بأخذ نسخه إحتياطية لتجنب أى أخطاء لا قدر الله
  3. ثم إبحث عن ]]></b:skin>

وضع الكود التالى فوقه 


.author_info {
 float: right;
 width: 520px;
 padding: 10px;
 border: 5px double #000000;
 margin-bottom: 15px;
 margin-top: 15px;
 background: #FCDFFF;
        font-family:verdana;
       

       
}
.author_info h3 {
 margin-bottom: 10px;
        font-family:consolas;
       
       
}
.author_photo {
 float: right;
 margin: 15 5 6 15px;
}
.author_photo img {
 border: 1px dashed #4C7D7E;
}






  • الخطوة الثانية إضافه القطعه
والآن نبحث عن <div class='post-footer-line post-footer-line-1'/>



ثم إلصق الكود التالى أسفله 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://img801.imageshack.us/img801/8797/32834310.png'/ height="110" width="120"></div>
                   
                                       

                   <div align="center"> <h3><p> مدونة مدون تهتم ببلوجر والفوتوشوب من دروس واضافات وهاكات وايضاً ملحقات الفوتوشوب ،خطوط،أكشنات،إستايلات،أيقونات،كل شئ عن الفوتوشوب ملحقات إحترافية </p><h3>
                   </div>
                  
                   <div align="center"><p>تابعنى على  <a href='http://twitter.com/mdwan_blogger'>تويتر</a> أو <a href='http://www.facebook.com/mdwanblog'>فيس بوك</a><br</p></div>
                   <!--http://mdwanblog.blogspot.com/-->




</b:if>







  1. الآن مع الجزء الذى سيتم تغييره بما يناسبك 
  2.       هذا اللون غير رابط الصوره بما يناسبك 
  3.       غير هذا اللون بنبذة عنك أو عن مدونتك
  4.       غير هذا اللون بإسم صفحتك على الفيس بوك 
  5.       اللون هذا قم بتغير إسم حسابك على تويتر
  



إحفظ القالب



أكمل القراءة »

كود الإعلانات النصية بتقنية الـ css من مدونة مدون







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










  1. إذهب إلى لوحة تحكم بلوجر الرئيسية
  2. الخطوة الثانية أنقر على تخطيط
  3. إختار إضافة اداه html/javaccript 


    أولا الكواد الخاص بالـ css















#navlist {
    margin: 0px auto 0px auto;
    padding: 0px;
    list-style-type: none;
    float: center;
    display: block;
   
   
}


#navlist a {
    background-color:#CFECEC;
    border: 1px solid #EDEDED;
    font-family: tahoma ;
    font-size: 12pt;
   

    text-decoration: none;
    color:#F6358A;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;
   
}
#navlist a:hover {
    background-color:#F660AB;
    border: 1px solid #000000 none;
    font-family: tahoma;
    font-size: 12pt;
    text-decoration: none;
    color: #000000;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;
   
}



ثانياً الكود كاملاً



<html>
<head>
<p>تم تصميم الكود بواسطة مدونة مدون</p>
<title>كود الإعلانات النصية</title>
<style type="text/css">
#navlist {
    margin: 0px auto 0px auto;
    padding: 0px;
    list-style-type: none;
    float: center;
    display: block;
   
   
}


#navlist a {
    background-color:#CFECEC;
    border: 1px solid #EDEDED;
    font-family: tahoma ;
    font-size: 12pt;
   

    text-decoration: none;
    color:#F6358A;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;
   
}
#navlist a:hover {
    background-color:#F660AB;
    border: 1px solid #000000 none;
    font-family: tahoma;
    font-size: 12pt;
    text-decoration: none;
    color: #000000;
    display: block;
    text-align: center;
    line-height: 30px;
    padding-right: 0px;
    margin-right: 0px;
   
}

</style>

</head>

<body>

<!-- إعلانات نصية -->


<ul id="navlist">
<table width="25 %" align="center">
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
</tr></table>
<table width="25%" align="center">
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" > إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" > إعلانك النصى هنا</a>
<tr>
<td width="25%" align="center">
<a target="_blank" href="#" >إعلانك النصى هنا</a>
</td></tr>
</table></ul>
<!-- / إعلانات نصية -->


</body>
</html>

ثم قم بتغير ما باللون الأحمر بالروابط الخاصه بك






أكمل القراءة »
يتم التشغيل بواسطة Blogger.