كود الإعلانات البنرية مثل مدونة مدوّن

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

حبيت ان أقدم لكم كود التبادل الإعلانى البنرى لان الكثير طلبوه منى عبر البريد مع العلم إنه "متوفر" على الإنترنت ولكن حبيت ان أضعه لكم كود إحترافى وراح يعجبكم مثل الموجود حالياً فى مدونة مدوّن وهو ليس من تصميمنا .

الكود تركيبة سهل للغاية ستضع الكود التالى فى اداة جافاسكريبت

<style>
#advertise{
  margin: auto;
}
 .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
 .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
 .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 .adss img {-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; max-height: 75px; max-width: 75px; }
 #adsanime:hover { opacity:0.2; }
 #adsanime a strong {
    -webkit-transition-property: opacity;
     -webkit-transition-duration: 500ms;
     -moz-transition-property: opacity;
      -moz-transition-duration: 500ms; }
 #adsanime a strong {
   opacity:0;
    -webkit-transition-property: opacity, top;
     -webkit-transition-duration: 300ms;
      -moz-transition-property: opacity, top;
       -moz-transition-duration: 300ms; }
 #adsanime {
    opacity:0.5;
     -webkit-transition-property: opacity, top;
      -webkit-transition-duration: 300ms;
       -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms; }
 #adsanime:hover { opacity:1; }
 #adsanime:hover a strong { opacity:1; top:-10px; }
</style>
<center>
<div class="adss" id="adsanime">
<a href="http://arabe-eye.blogspot.com">
   <img src="http://i72.servimg.com/u/f72/17/70/27/78/arabe-10.gif" />
   <strong>عين العرب</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://www.alamfour.blogspot.com/">
   <img src="http://im42.gulfup.com/k40nO.gif" />
   <strong>Alamfour</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://a7trafy.blogspot.com">
   <img src="http://im31.gulfup.com/M3GmW.gif" />
   <strong>مدونة احترافي</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="/">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>اعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="/">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>اعلن</strong></a>
    </div>   
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>اعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>          
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div> 
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>       
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div> 
<div class="adss" id="adsanime">
<a href="">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsiStqS3lL1KKct8e-3s3artzs2UUEEYHIpUHh-ZOgCT7aX6GRoPq8xLl4klPJq8F-77ngumjZdPZZQsPIpVcvnWblqAH7YA8VCFak7d6D7tmFwCbVKQ1JR7UiIvVmnkKzxzrYqJLMkkIu/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>             
</center>

وغير ما يلزمك حتى يناسبك

اقرء المزيد

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

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

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

من تحرير القالب قم إبحث عن هذا الوسم 

]]></b:skin>

وضع فوقة مباشرة الكود التالى 

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url
(http://3.bp.blogspot.com/
_McxL-_3YYuM/TBG843o8-TI/
AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif)
 no-repeat 50% 50%
;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}
.fullsize .scroll_thumb {
 display:none;
}
.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}

الخطوة الثانية تفعيل الجافاسكريبت

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

</body>

قم إستبدله بهذا الكود 

<script src='
http://scriptabufarhan.googlecode.com/
svn/trunk/paginator3000.js'
 type='text/javascript'></script
>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/
svn/trunk/paginator3000-
forblogger-v1.0.0.js' type='text/javascript
'/>
</body>

اقرء المزيد

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

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

تحرير القالب ثم إبحث عن هذا الكود ]]></b:skin> وضع فوقة مباشرة الكود التالى

a.noopln {
-moz-transition: all 0.1s ease-in 0s ;
transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
a.noopln:hover {
margin-left: 12px;
}

إضافة تاثير الجى كويرى إبحث عن الكود الآتى
<head> وضع بعدة مباشرة الكود التالى 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

آخر خطوة إبحث عن هذا </head> وضع قبلة الكود التالى 

<!--Netoops Link Nudge Start-->
<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
$(this).animate({paddingLeft: &#39;13px&#39;}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLuFYO1l0-qBLor5EQ-pXIwj2_k55RAbxe18nA7rEmDWReuqhiZvelIqfGpVMpYI_hP82cOpHw2mYMDrzq2Rz7AGaAzgN1H_mNoJw5rCg33sHUFsXQjVPBRurQOk3IOOULNCu3hkj3xA/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End-->

عند كتابة تدوينة جديدة ضع السهم على HTML وضع الكود التالى

<a class="noopln" href="http://mdwanblog.blogspot.com">MDWAN BLOG</a>
ثم غير ما باللون الأحمر بما يناسبك

اقرء المزيد

إضافة زر المتابعة على المواقع بشكل متحرك

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

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

لوحة التحكم الرئيسية / التخطيط / أداة جافاسكريبت وضع بها الكود التالى

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><style type="text/css">#MD-circle-mod{bottom: 0 !important;left: 5px;position: fixed;}#MD-container-circle{position:relative;height:100px;width:100px}#MD-base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.MD-btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#MD-fb.open{top:-125px;left:25px}#MD-fb.open.clicked{top:-135px;left:15px}#MD-tw.open{top:-105px;left:80px}#MD-gplus.open{top:-75px;left:125px}#MD-rss.open{top:-30px;left:160px}#MD-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".MD-btn");$("#MD-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://gj37765.blogspot.com" style="position:absolute;z-index:-11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLuFYO1l0-qBLor5EQ-pXIwj2_k55RAbxe18nA7rEmDWReuqhiZvelIqfGpVMpYI_hP82cOpHw2mYMDrzq2Rz7AGaAzgN1H_mNoJw5rCg33sHUFsXQjVPBRurQOk3IOOULNCu3hkj3xA/s1600/1x1juice.png" /></a><div id="MD-circle-mod"><div id="MD-container-circle"><a id="MD-fb" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumNgM08DAEXlXWfwyLLY9IMCVxL5ekl-tvb9A4VJeo5qQsmj97wu-VLEYmKUi_8LCPLWfRsGnagLzWBTNcuuCdQ1lb0-LG_vO1L_q0VElNIgI1hRVX5jFw_gK7AOSffXWrIi44lkaypKe/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/mdwanblog" rel="nofollow" target="_blank"></a><a id="MD-tw" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumNgM08DAEXlXWfwyLLY9IMCVxL5ekl-tvb9A4VJeo5qQsmj97wu-VLEYmKUi_8LCPLWfRsGnagLzWBTNcuuCdQ1lb0-LG_vO1L_q0VElNIgI1hRVX5jFw_gK7AOSffXWrIi44lkaypKe/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/#" rel="nofollow" target="_blank"></a><a id="MD-gplus" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumNgM08DAEXlXWfwyLLY9IMCVxL5ekl-tvb9A4VJeo5qQsmj97wu-VLEYmKUi_8LCPLWfRsGnagLzWBTNcuuCdQ1lb0-LG_vO1L_q0VElNIgI1hRVX5jFw_gK7AOSffXWrIi44lkaypKe/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="#" rel="nofollow" target="_blank"></a><a id="MD-rss" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumNgM08DAEXlXWfwyLLY9IMCVxL5ekl-tvb9A4VJeo5qQsmj97wu-VLEYmKUi_8LCPLWfRsGnagLzWBTNcuuCdQ1lb0-LG_vO1L_q0VElNIgI1hRVX5jFw_gK7AOSffXWrIi44lkaypKe/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="#" rel="nofollow" target="_blank"></a><a id="MD-mail" class="MD-btn" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhumNgM08DAEXlXWfwyLLY9IMCVxL5ekl-tvb9A4VJeo5qQsmj97wu-VLEYmKUi_8LCPLWfRsGnagLzWBTNcuuCdQ1lb0-LG_vO1L_q0VElNIgI1hRVX5jFw_gK7AOSffXWrIi44lkaypKe/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=#&loc=en_US" rel="nofollow" target="_blank"></a><a id="MD-base-button"><span class="plus">+</span></a></div></div><a href="http://gj37765.blogspot.in" rel="dofollow"></a>

مع تغيير اللوان الأحمر بالروابط الخاصة بك

اقرء المزيد

إضافة أيقونة تويتر فلاش بشكل إحترافى لمدونات بلوجر

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

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON0/twitbutton.swf" width="150" height="150"><param name="movie" value="http://www.buzzbuttons.com/BUTTON0/twitbutton.swf" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><param name="wmode" value="transparent" /><param name="flashvars" value="username=mdwan_blogger" /><a href="http://www.gj37765.blogspot.com/" title="Widget for Blogger by Making Different">Widget for Blogger by Making Different</a><embed src="http://www.buzzbuttons.com/BUTTON0/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=mdwan_blogger"></embed></object>

التعديل على رابط صفحتك أنت غير هذا الإسم بإسم حسابك انت 
mdwan_blogger

اقرء المزيد

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

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

 

لوحة التحكم / تحرير القالب / إبحث عن الكود التالى 

<div class='post-footer-line post-footer-line-1'/>

ضع بعدة مباشرة الكود التالى 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='mdpostfblikebox'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakingdifferent&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23e1e1e1&amp;stream=false&amp;header=false&amp;' style='border:none; overflow:hidden; width:250; height:250px;'/>
</iframe></div>
<div id='mdpost-likebox'>
<div class='row'>
<div class='fb-like' data-href='https://www.facebook.com/mdwanblog' data-send='true' data-show-faces='false' data-width='450'/>
</div>
<div class='row'>
<a href='http://feeds.feedburner.com/00000000' target='_blank' title='Suscribe to RSS feed'>
<img alt='rss' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0WpZuHf9__TBuqkBFOZtqDLGnVWZa-VBUtfz2d5-VCXcMJThZMZVelTbzuyMgm7ARp2O2WS89vGwzI4Q3YeIVg1v5ZWcP-pCCXWyWUC2tm2JOtm6HN8GQiKGQpp3GSYiefq4ZTsBYS8QF/s1600/mdRSS.png'/></a> <a href='http://twitter.com/mdwan_blogger' target='_blank' title='Follow me on Twitter'>
<img alt='twitter' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1X0gYJIBuZuBX3u44ozqKYsFqQm2xazp8KplbziT8DvNnR6QjH8UFuNj3pW9-_igiEwM7AuZeTIM6av7j2jQkevcriv1usLKUxQggD2AEOg5D-BRLu4tfu0sVuxNkB1ns19nBOgj1YEq/s1600/mdTwitter.png'/></a> <a href='http://www.facebook.com/mdwanblog' target='_blank' title='Became Fan on Facebook'>
<img alt='facebook' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ35nfrnRd6w1qXRF13_cnsBY5QGaPX83B4kJrWEZw1MMoWHFuCUUA7brbNV7T4z-Ed8n9_8phj0QEUdzZLkaq4CVc8dQlZ0Q3m60X09VsIogOzwEjSymm5PBf_f62VT0zGPNHYR4q60wg/s1600/mdFaceBook.png'/></a>
</div>
<div class='row'>
<h6>إشترك ليصلك كل جديد</h6>
</div>
<div class='row'>
<div class='email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=00000000&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='00000000'/>
 <input name='loc' type='hidden' value='en_US'/>
 <input class='emailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك&quot;) {this.value = &quot;&quot;}' type='text' value='أدخل بريدك'/>
<input class='emailbutton' title='' type='submit' value='سجل'/>
</form>
</div>
</div>
<div class='row'>
<script language="javascript">
document.write( unescape( '%3C%73%6D%61%6C%6C%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%6D%64%77%61%6E%62%6C%6F%67%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%3EBy%20Blog%20Mdwan%3C%2F%61%3E%3C%2F%73%6D%61%6C%6C%3E' ) );
</script>
</div>
</div>
</div></b:if>

 الخطوة الأخيرة إبحث عن هذا الكود ]]></b:skin> وضع فوقة مباشرة الكود التالى 

#mdpost-likebox{
margin:10px 10px 0 0;
overflow:hidden;
text-align:center;
float:right;
max-width:250px;
min-width:250px;
min-height:250px
}
#mdpost-likebox h2{
font-size:25px;
font-style:italic;font-variant:small-caps
}
#mdpost-likebox h6{
font-size:1.1em;
font-family:"Myriad Pro",Helvetica Neue,Helvetica,Arial,sans-serif
}
#mdpost-likebox div.row{
text-align:center;
margin-bottom:10px
}
#mdpost-likebox img{
display:inline-block;
border:none !important;
}
#mdpost-likebox .email{
clear:none
}
#mdpostfblikebox{
margin:10px 10px 0 0;
text-align:left;
float:left;
overflow:hidden
}
.emailbutton{
background:#f7f8f9;
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888 !important;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-decoration:none !important
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important
}
.email{
clear:none
}
.email{
clear:both;
width:100%;
margin:10px 0
}
.emailform{
position:relative;
width:250px;
background:#fff;
margin:0 auto;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;border:1px solid #ddd
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:none;
background:none;
font-family:georgia;
font-style:italic;
font-size:14px;
color:#666
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:-1px;
bottom:-1px;
display:block;
line-height:16px
}
.emailbutton{
padding:8px !important
}
.emailinput{
padding-right:70px !important;
width:170px !important
}
.emailform, .emailinput {
width: 245px !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
height:auto;
}

الآن إحفظ القالب وتوجه إلى مدونتك وعاين التغييرات 

اقرء المزيد

إضافة إستطلاع رأى أون لاين بشكل إحترافى لمدونتك

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

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

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

ستواجه أمامك مثل الصورة التالية 

1 - وهو السؤال التى تود الإستطلاع عليه                         

2 - هذة الإجابات الخاصة بالسؤال                                   

3 - ويمكنك من خلاله زيادة عدد الإجابات على حسب رغبتك

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

لا تنسى بكتابة بريدك الألكترونى على الجانب الأيمن

آخر خطوة ستنسخ الكود بداخل المربع وستذهب إلى إضافة أداة جافاسكريبت وتضع بها الكود

اقرء المزيد

إضافة مواضيع ذات صلة بشكل لطيف وبطريقة سهلة

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

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

الخطوة الأولى 
إبحث عن هذا الكود

</head>

وضع فوقة مباشرة الكود التالى 

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7OykFHMYFlXqdccOFkXgcEHz_5wjV1XSFq4NqUtj2nGwkYsAeasmYdHmqknd65kNMJKl9w-02OScoSOYNXYFAygRSQJrWNk2R9RRtBC_8m_wbx-fsJfy6zdwknusyacEqxi8cVpOyL5p/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r;
  var output;
  var dirURL = document.URL;
  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {
      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
     
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {
      r++;
    } else {
     
      r = 0;
    }
    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>

ملاحظــــات

• لتعديل عدد إظهار التدوينات غير القيمة باللون الأحمر
• لتغير عدد الأحرف فى الملخص غير القيمة باللون الأخضر
• لتغير الصورة للتدوينات دون صور باللون الأزرق

الخطوة الثانية
إبحث عن هذا الكود 

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

ثم إستبدلة بهذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

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

</b:includable><b:includable id='postQuickEdit' var='post'>

ثم أضف فوقة هذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>مواضيع ذات صلة</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

الخطوة الرابعة 
إبحث عن هذا الوسم

]]></b:skin>

 وضع هذا الكود فوقة مباشرة 

.relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
  width: 120px;
  height: 210px;
}

.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
  /* link properties */
color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}

أى إستفسار قم بطرحة

اقرء المزيد

طريقة تركيب أزرار المتابعة داخل الهيدر بطريقة سهلة جداً

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

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

أول خطوة وهو الذهاب إلى محرر بلوجر وسنبحث عن هذا الوسم ]]></b:skin> وسنضع الكود التالى قبلة

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

 الخطوة الثانية - إبحث عن هذا 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

وفوقة مباشرة ضع الكود التالى

<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/mdwanblog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghoON087BDlPbzFuSgBG3z9TbtfX2l0WMmIeOVpInZ50-YmpUBM1r5jjJvsGrV-40t_VYcvcm3xK_Udzmxaz7Nl9GkLrh6pbrwFNj-iuMyW1QDsCKpMMvSe6jLaRuiQOoTTo0T1Qq874g/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/mdwan-blogger'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdixWGRidcb12MIj82iKDzCR5m9uLJtEeoio3UNka3ggBGVysO8nK7EsftFJqHjRxRqoRGWoLSXwsQEJ5ICT5sYkigJ_0U93tLpkGLEKlQP-MGIjeSAJU-Y0vaDzw-K-WsmUgTeDRor0U/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/googleplus/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLc8OpPJbu_R7bF7a08OcgK6IA1jsWZ7DjjYQQWFcDhwxKGUjWpyC75tdQJ3SmXaL6C9lWwgVYpmN02LOB25NQ55tLl_Jnp_Lfgu-Ob6mqN9zoJgHNl4hZuEkwaZGe7ixGlalZI_Nbys/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://name-of-rss/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPERR1z5tENtS0SUXF-olu7FK_0iUA3X5NWqY_i8XLMHHfkeGcQOiZ_CxMxYIPbBH4krB6Tl2NkcagCRqMAwC7nGE97iJJX8izpZDudp-vXxRyy09TjJLyh54-A7Qmt-8BoxgV8NpepUg/s1600/RSS.png'/></a></li>
</ul></div>

 أتمنى الإستفادة للجميع 

اقرء المزيد

إضافة آخر المشاركات بشكل أكثر إحترافية فقط من مدوّن

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

زوار ومتابعين مدونة مدوّن اليوم جئت لكم بـ إضافة أكثر من رائعه وهو كود لإضافة آخر المشاركات بشكل إحترافى جزاب أنيق ، ويظهر مدونتك بشكل إحترافى ده + إن الكود بيعمل بخاصية الـ Tooltip ، ولمن لا يعرف هذة الخاصية هذة الخاصية هى توفر لك عند وضع المؤشر على الرابط يظهر لك عنوان التدوينة ونبذة عنها بشكل رائع جداً.

للمعاينة المباشرة للكود من | هنا

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

<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#333333;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#999999;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "آخر المشاركات",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://softglad.at.ua/images/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://mdwanblog.blogspot.com";       // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>

التعديل فقط هو تغيير الرابط باللون الأحمر برابط مدونتك

اقرء المزيد

أزرار المتابعة بشكل جديد إحترافى لمدونتك

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

كود إضافة أزرار المتابعة بشكل إحترافى وجديد ولن تجدة إلا هنا فقط فى مدونة مدوّن

أزرار المتابعة لمدونات بلوجر تعطى شكل أنيق لمدونتك وتظهرها إحترافية أكثر الكود يضم

أزرار متابعه المواقع الإجتماعية 5 مواقع فقط والآن مع شرح التركيب.

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

لوحة التحكم - القالب - إستخدم f3 وإبحث عن هذا الكود

]]></b:skin>

وضع الكود التالى قبلة مباشرة 

.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}    

الخطوة الثانية والأخيرة

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

<!-- http://mdwanblog.blogspot.com/ !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/إسم الحساب" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ إسم الحساب " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ إسم الحساب " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/إسم الحساب" target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ إسم الحساب " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- http://mdwanblog.blogspot.com/ !-->

مع تغيير اللون الأحمر بروابط حساباتك

اقرء المزيد