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

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

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

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

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

اقرء المزيد

قائمة css فى قمة الإحترافية (صورة ، عنوان ، وصف)

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

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

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

<style>
#menu {
 background: white;
 width: 280px;
 padding:10px;
}
#menu ul {
 margin:0;
 padding:0;
 list-style: none;
}
#menu ul li {
 margin: 0;
 padding: 5px 0 10px;
 border-bottom: 1px dashed #EAEAEA;
}
#menu ul li img {
 float: right;
 padding: 3px 0 0 10px;
}
#menu ul li a {
 font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
 color: #007195;
 text-decoration:none;
}
#menu ul li a:hover {
 color:#CC3332;
}
#menu ul li span {
 font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
 color:#7D7D7D;
}
#menu li span:hover {
 color: #494949;
}
</style>
<div id="menu">
 <ul>
<!--design:mdwanblog.blogspot.com-->
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIM0Iu_lyadqWhPnVw-G6_soIhflajyTvNiKTLw5R_raZvY07ko7Q3mfw3kBGUB9e_1mskUhPLyvyGOMWPKupZYwrXonuzXI9glwQyydffbYITjkuRSs27u9T57Yh6G67_W0h3u8xaSc/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggsFHBky1-PKvW30NkMz0XW45kFmPaLtXbz0ua4H7YCKU98N5laBmjf-pUeDQrv7MvHQPPDR1uy4X2tryAcKcQa4-lEQaRcZ-ootP9uB51ag6PHzZHJJ98BhHjawMKUfO8QSk_FY9LjuE/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6yPryUEJODKIs0cMrouzg-1kf_qWMJAkZs0G6BGUNVjY-u7kHf12zF5SLN-yupQOKtZednNLmTfcYMIG0TwecsPGpwHwxWF3u7iWPoLy_mHMYtPIjT52lDPxaONIc2hwgAWFf_QzruCY/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDQ4FGiuFJzhfUO0ZUrSrEi8emmPV8K8J_cx05p0BHT7TJaNyT32pgKfXyksDD0yX9m8xdDdDqG-3tLUUrKJFY-3gPltQrvuNfMleKbT5kVuknBWYvrfnn_Xwg3DfWhjfymretHDmJLY/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<!--design:mdwanblog.blogspot.com-->
 </ul>
</div>

أتمنى إنها تنال إعجابكم 

اقرء المزيد

أيقونات تطبيقات مصغرة إحترافية داخل ملف psd

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

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

تحميل الأيقونات

اقرء المزيد

إضافة تأثير 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>
ثم غير ما باللون الأحمر بما يناسبك

اقرء المزيد

شروط جديدة للتبادل الإعلانى فى مدونة مدون

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

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

الشــروط كالتالى

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

البنرات المتوفرة الخاصة بنا

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrwlBMzQ90-X1YYoFgqM9OghZRndoqJY-_I1d9MVsC5RETu1L1a0eOUNvJzFqTCqg4MpiDyv4MHV91sJKhat8HLkLGMHIJ7eHurSmq68eszCRmEgSL9Bjq9yNu1jW6s2iIgTd2vnMRiP5/s1600/Untitled-1.png
البنر الثانى

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KCMQO2Zl5pSxItng45BZg4PcwMWkE0oWdn7n53z_Qv8mlM5LXZskiegETCzNkPB4PyMeXDhaJnhFsyINGsVPLncmzJyWnzKe2IsEwkoT2BVfUJjOvSWJjC8YI8-rMNESMxSLTIO326XR/s1600/%D8%A4%D9%8A%D8%A8%D8%B1%D9%8A.gif
البنر الثالث

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7bOejMuLafJZxsiBaFtMMGb3Ja1iLs68UFGBTX41tsvVGlV6A-nQh5tHyF4O3edoGqVK9zIrJQ7MXyLKYcL37X3BfXvxAHkTsk6vANHMqVtEdaZ8i8N7PinvI_evhNbJuz4D-PC7EzyH3/s1600/%D8%A8%D9%86%D8%B1-%D8%A7%D8%B9%D9%84%D8%A7%D9%86%D9%89-%D8%AE%D8%A7%D8%B5-2.png
البنر الرابع

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhroRnHRsA33wMbh1bWLqvmT04dIhqZnrvKTQDIRsjeiJ8q_5bPDSUHehlV9wYKvNRyJN1_322qp7ftJhizBnAp2NL3J-15jXpAbq_FxsNzzcHCxuYYseiTxy2hRd87Zq-ZvbTCoip_FGak/s1600/%D8%A8%D9%86%D8%B1-%D8%AE%D8%A7%D8%B5-%D8%A8%D9%89-125.png
مـــســـاحــات أخرى متوفرة يمكنك التبادل عليها 468x60
البنر الأول

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZaJCN_8DGEAUCklAj5tVKr7Eg8DjB6ff0p4jV3M2XRiOXvPFUPPemhKDur6JJUNiOPJIYhleL04Am6CF_M14YNnS9Yn-rhLMQ7h_j5RS_nvdNObEIQANN8_rJc9DFAGIXmDaFF7xO1Ss/s1600/4.gif

البنر الثانى
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahEdJmQwT9-BjYY14VbcInsOxysNjmZf3_li3lk0poawSaNVLuYU7P4Q_1KjoJ7nE1FqGlj23aP9CV5xrIkwINaT7ABZJiPRkCpzMqUDNli2zm79bn1Bf4r-ahKunuXbSDWV9IYH8uqI/s1600/460ali.gif  

أخر تعديل كان في يوم الأربعاء 18 سبتمبر من سنة 2013 ، هذه التدوينة قابلة للتعديل وقت اللزوم

اقرء المزيد

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

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

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

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

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

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

اقرء المزيد

شرح تخصيص نموذج التصويت المعتمد من بلوجر

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

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

أولاً سيتم وضع الأكواد الخاصة بالـ css فى القالب الخاص بك قبل هذا الوسم ]]></b:skin>

الكود الأول 

/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}

لمن لا يعلم عن الـ css إليك بعض الملاحظات الأتية :

1. عندما تقوم بعمل تصويت ستقوم بلوجر بتسمية المعرف بـ Poll1 إذا كان لديك إثنان فسيكون رقم الأول والآخر Poll2 فلا بد أن تحدد تريد تغيير أى نموذج 
2. لقد تم منحها لون الخلفية الصفرء  ذلك عن طريق تغير هذا الكود (#FFFF00) يمكنك تغييرة إلى لون تريدة عن طريق كود اللون لمعرفتة يمكنك زياة هذة الصفحة أكواد الألوان
3. وهو حدود الإطار وذلك لونة سيكون #736AFF  أم الـ 3px ذلك هو سمك الإطار كلما زاد زاد السمك 
4. وهو إعطاء مساحة 10px للجوانب اليسار واليمين 

 بهذة الإعدادات فسيكون الشكل فى النهاية هكذا 

التعديل الثانى سيكون على الخط بهذة الأكواد يمكنك التلاعب بالإعدادات لكى تناسبك

/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}
#Poll1 h2{
text-align:center;
font-size:140%;
color:#F87431;
font-family:arial;
font-weight:bold;
}

الجزء باللوان الأحمر هو الخاص بالتعديل على حجم ولون الخط 

اقرء المزيد

أزرار تحميل بألوان مختلفة بشكل جزاب فى ملف psd

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

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

تحميل الأزرار

اقرء المزيد

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

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

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

إذهب إلى تحرير القالب وإبحث عن </body> وضع فوقة / قبله الكود التالى

<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at mdwanblog.blogspot.com */
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

لإضافة الزر إلى التدوينة html وضع الكود التالى 

<div class="abt-button">
      <a href="#">تحميل</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div> 

اقرء المزيد

تحميل أكشن إيربن الأكثر إحترافية

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

كيفكم أعزائى أقدم لكم فى هذة التدوينة أكشن إيربن الأكثر من رائع بمعنى الكلمة وهو الأفضل من بين الأكشنات وتاثيراته رائعة جداً وتعطى طعم جميل لتصميماتك إذا كنت من المصممين بالفوتوشوب فأنصحك بتحميل هذا الأكشن وقم بتجربتة فقط حملة من مدونة مدون التاثيرات اللونية مثل ما فى الصورة أعلاه وهناك المزيد فى الأكشن أكشن إيربن -  Urban Action

حمل الأكشن

اقرء المزيد

تحميل خط شكارى خط الرقعة بشكل إحترافى

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

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

تحميل الخط

اقرء المزيد

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

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

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

تحميل الأيقونات

اقرء المزيد

أغنية مصطفى كامل - وقت الشدايد Mp3

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

تحميل الأغنية

اقرء المزيد