صندوق التنبيهات أو للإعلان

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

,

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

تعليقان2:07 م, مرسلة بواسطة Hady store


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

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

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


فى رعاية الله 

إقرأ المزيد... Résumé3efrit blogger
, ,

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

تعليق واحد4:16 ص, مرسلة بواسطة Hady store

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


الكود لا يحتاج لتعديل فقط أضف أداة جديدة ثم ضع فيها هذا الكود 
 
تأكد من نسخ الأكواد التى بداخل الأطار كاملة
<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
 
إقرأ المزيد... Résumé3efrit blogger
, ,

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

5 تعليق9:28 ص, مرسلة بواسطة Hady store





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






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



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

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

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



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

إقرأ المزيد... Résumé3efrit blogger
,

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

تعليق واحد10:11 م, مرسلة بواسطة Hady store

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

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





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


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

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

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

إقرأ المزيد... Résumé3efrit blogger
, ,

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

3 تعليق4:04 م, مرسلة بواسطة Hady store

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



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



 فى رعاية الله

إقرأ المزيد... Résumé3efrit blogger
, , ,

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

7 تعليق11:53 ص, مرسلة بواسطة Hady store





كود قائمة جميله وإحترافية لمدونات بلوجر بتقنية الـ 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>





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

إقرأ المزيد... Résumé3efrit blogger
, , ,

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

تعليقان11:48 ص, مرسلة بواسطة Hady store





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

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

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

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

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

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



إقرأ المزيد... Résumé3efrit blogger
,

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

تعليق واحد2:10 ص, مرسلة بواسطة Hady store

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



إذا إستفدت من الموضوع فلا تحرم غيرك من الإستفادة
إقرأ المزيد... Résumé3efrit blogger
, ,

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

أضف تعليق3:19 ص, مرسلة بواسطة Hady store




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



إحفظ القالب



إقرأ المزيد... Résumé3efrit blogger
, ,

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

تعليق واحد11:13 م, مرسلة بواسطة Hady store






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

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






إقرأ المزيد... Résumé3efrit blogger