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

Html
الان نبحث عن
]]></b:skin>

اضف الكود التالي فوقه مباشرتاً
هذا الكود الاصلي 
img {
border: 15px solid #000;
background: #000;
filter:alpha(opacity=60);
opacity:0.6;
padding: 1px;

}


الكود التالي معدل 
img {
border: 15px solid #33B0EA;
background: #FF0000;
filter:alpha(opacity=0);
opacity:1.0;
padding: 1px;

}

الذي هو باللون السمائي هو الاطار الخارجي
الذي هو بالون الاحمر الاطار الداخلي 
الذي هو باللون الاصفر الشفافيه
الذي هو بالون البرتقالي هو عرض الاطار

تم تجديد الموضوع أطار ثانيابحث عن 
]]></b:skin>
كما بالشرح السابق واضف قبله
الكود
.post-body img {
padding: 4px;
border: 1px solid #AAA;
background-color: #F0F0F0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 15px 10px -12px black;
-moz-box-shadow: 0 15px 10px -12px black;
box-shadow: 0 15px 10px -12px black;
}


وأيضا تستطيع تغيير الالوان والاحجام
اتمنى اني كون الشرح وافي وكافي سيتم نشر موضوع ثاني عن اطار للفيديو . دمتم بود

تابع القراءه...

ترقيم صفح مدونه بلوجر

---

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

درسنا اليوم اضافه رائعه للمدونات مقدم من يونى ايجى | ملتقى الدروس العربية
و هي اضافة هامة جدا ويحبث عنها الكثيرون من المدونين
وهى اضافة ترقيم صفحات البلوجر "المدونة"
اعرف ان الكثيرون بحثوا عن هذه الاضافة ولكن لاسف يتطرون دائما الى التعديل على القالب
ولكن لدى اليوم كود مختلف تماما ورائع فى نفس الوقت

اولا "مثال"


سوف يكون معنا بهذا الشكل ان شاء الله



طريقه التركيب




1-من لوحة البلوجر " نضغط على التخطيط"





2-ثم نضغط على " اضافة اداة "




3- ثم نضغط على (HTML/JavaScript إضافة )



كود الاضافة

رمز Code:

<!-- Stylish colored  Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.uniegy.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.uniegy.blogspot.com */
.showpageNum  a, .showpage a {color: #fff;text-decoration:none;border:1px  solid  #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0   3px;padding:3px 5px; background: #9dd53a; background:   -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a   100%); background: -webkit-gradient(linear, left top, left bottom,   color-stop(0%,#9dd53a), color-stop(50%,#a1d54f),   color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',   endColorstr='#7cbc0a',GradientType=0 ); }/* www.uniegy.blogspot.com */
.showpageNum  a:hover, .showpage a:hover {border: 1px solid #ccc;  background:  #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%,  #54a3ee 50%,  #3690f0 51%, #1e69de 100%); background:  -webkit-gradient(linear, left  top, left bottom, color-stop(0%,#6db3f2),  color-stop(50%,#54a3ee),  color-stop(51%,#3690f0),  color-stop(100%,#1e69de)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',   endColorstr='#1e69de',GradientType=0 ); } /* www.uniegy.blogspot.com */
.showpagePoint  {color: #aaaaaa;text-decoration:none;border:1px solid   #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0   3px;padding:3px 5px; background: #e2e2e2; background:   -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe   100%); background: -webkit-gradient(linear, left top, left bottom,   color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb),   color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter:   progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',   endColorstr='#fefefe',GradientType=0 ); }/* www.uniegy.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.uniegy.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.uniegy.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=9;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com -->

اضغط هنا للتحميل رابط مباشر لملف Text

تم وضع الكود بملف " Text " لضمان وضع الكود كامل وعدم حدوث اعتراض مع اكود بلوجر

للتعديل على الكود على حسب الراغبة

وهذه تعنى عدد المواضع فى الرئيسية
var postperpage=5

وهذه تعنى عدد ارقام الصفحات فى الرئيسية
var numshowpage=9


4- ثم نضع الكود السابق هنا ونضغط على ( حفظ )

5- ثم نقوم بسحب الاداة ونضعها اسفل ( رسائل المدونة الإلكترونية )





6- سوف تكون معنا بهذا الشكل ان شاء الله





و مبروك عليكم الاضافه

وانتظرونى فى الدرس القادم ان شاء الله

تابع القراءه...

تغيير شكل الماوس

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

معكم محدثكم عمار الشمري ومعكم طريقة تغير شكل الماوس على مدونات بلوجر

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

تغيير شكل السهم الماوس لاي شكل تحبة في مدونتك 

ادخل علي تخطيط
أضافة اداة
Html

موقع اخر للاكواد 
للدخول الى الموقع اضغط هنا

ضع الكود

ضلل الكود

<style type="text/css">body, a, a:hover {cursor: url(xxxxx), progress;}</style>

ثم استبدل الحروف

xxxxx 

برابط السهم صورة الي انت تبيه في مدونتك

هذي مجموعة من الاسهم أضغط علي السهم علشان تعرف الرابط 

 http://cur.cursors-4u.net/cursors/cur-2/cur116.cur 

                    http://cur.cursors-4u.net/cursors/cur-2/cur117.cur

                   http://cur.cursors-4u.net/games/gam-3/gam257.cur

                  

 http://cur.cursors-4u.net/people/peo-3/peo334.cur

                    http://cur.cursors-4u.net/cursors/cur-2/cur125.cur 

                    http://cur.cursors-4u.net/people/peo-4/peo350.cur 

  

                 

 http://cur.cursors-4u.net/symbols/sym-6/sym530.cur 

                   http://cur.cursors-4u.net/cursors/cur-2/cur121.cur

                    

                                                                

                     http://cur.cursors-4u.net/toons/too-5/too430.cur

                     http://cur.cursors-4u.net/sports/spo-1/spo39.cur

                     http://cur.cursors-4u.net/anime/ani-9/ani874.cur 

                      http://cur.cursors-4u.net/cursors/cur-1/cur11.cur 

                            http://cur.cursors-4u.net/user/use-1/use3.cur 

                           http://cur.cursors-4u.net/user/use-1/use32.cur 

                   http://cur.cursors-4u.net/games/gam-6/gam503.cur

               

 http://cur.cursors-4u.net/games/gam-11/gam1048.cur

تابع القراءه...

اضافه قطار الموقع الاجتماعيه

السلام عليكم 

اليوم الدرس الثالث من اضافات بلوجر

هو تركيب قطار متحرك 

المدونه القطار الذى يحمل جميع الموقع الالكترونيه (الاجتماعيه)

 

1.  إذهب إلى لوحة تحكم بلوجر
2.  تخطيط ثم إضافة أداة Html & javascript
3.  ثم إنسخ الكود التالى وألصقه بالأداة

الكووووووووود

 

<!--http://www.condaianllkhir.com/--> 
<div style="bottom: -3px; left: 0px; position: fixed; width: 100%; z-index: 65535;">
<marquee>
<style media="screen" type="text/css">

  *
  {
   padding: 0;
    margin: 0;
  }
   body
   {
    padding: 0;
    margin: 0;
   }
   #flexbox
   {
    //display: -webkit-box;
    //-webkit-box-orient: horizontal;
    //-webkit-box-align: stretch;
    //width: auto;
   }
/*---- http://www.condaianllkhir.com/---*/
  </style>
<a href="https://plus.google.com/105400830730395545290/posts" rel="nofollow" target="_blank"><img alt="google-plus-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJs-iSx5EuEmiUM-4RznuebkzTnQU-q7QNQUm7CE9YjD_mE3UHSeFOjsg2p8tP1hQZll5HLaBolq8C9ccsk3OFXyGM_48pO7X4A4jpv7P5g6nQpnFCdnT-1hMLSGeFsOoJyQ4MbGlowtcg/w391-h389-o-k/%25D8%25AC%25D9%2588%25D8%25AC%25D9%2584-%25D8%25A8%25D9%2584%25D8%25B3.png" style="border: 0px none; margin: 0px; padding: 0px;" title="google-plus-icon" /></a>
   <a href="https://twitter.com/DrRo2" rel="nofollow" target="_blank"><img alt="tweeter-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF-nGPpFSICo4QgA16xeAymmgDgbx10oa3N4E3Ay6nPQmNRdUqYpB90wczyDGMXw3fidDE7Yu2kHO_H-m9mzGQ-onSYC_LhSR1mhEBtkLae9sYwHqV3TSbUyHK6QGxloKsH-F0v6r8tVcG/s70/tweeter.png" style="border: 0px none; margin: 0px; padding: 0px;" title="tweeter-icon" /></a>
<a href="http://www.facebook.com/designsblog" rel="nofollow" target="_blank"><img alt="facebook-icon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJZuaiIS-CzWaBVvg8VHGwYBmOKiVvKRyiwrZlmWSqq-sVDEoqhnWRdlUaEVzrMc7X9MmqNkphN5HzoN7tTNi5tl0MYQHoxnwxxsMd73sZn2vVqZsUn3roOOXAvK9x5eXGhIzbHyXXyWcr/s150/%D9%81%D9%8A%D8%B3-%D8%A8%D9%88%D9%83.png" style="border: 0px none; margin: 0px; padding: 0px;" title="facebook-icon" /></a>
   </marquee></div>
<a href="http://www.condaianllkhir.com/" target="_blank"> <span style="font-size: xx-small;">Blogger widgets </span></a></div>


  

 
التعديل على الروابط الموجودة بالكود كالتالى:
إستخدم الكيبورد Ctrl+F فى البحث عن الروابط
قم بتغيير رابط صفحة جوجل بلس الملون باللون الأصفر برابط صفحة جوجل بلس الخاصة بموقعك
قم بتغيير رابط الفيس بوك الملون باللون  الأخضر برابط صفحتك على الفيس بوك
قم بتغيير رابط تويتر الملون باللون الأزرق برابط تويتر الخاص بموقعك

لا تنسو الردددد

 

تابع القراءه...

قالب مدونه اهرام نت

مرحبا احبتي ومتابعي المدونة

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

القالب جميل وذو مظهر حديث مع خصائص ممتازة 

مميزات القالب ^_*

1- القالب ذو مظهر جذاب
2- القالب ذو مظهر حديث 

3- القالب متوافق مع محركات البحث 

4- القالب من تطوير ايادي عربية

5- القالب متوافق مع جميع محركات البحث

صورة القالب 

• معاينة القالب 

• تحميل القالب

تابع القراءه...

قالب الأمن المطور

مرحباً بكم في مدونتي 

اليوم نقدم لقم قالب مميز ويستحق تجربة 




قالب الأمن المطور 

معاينه|تحميل

تابع القراءه...

إضافة مواضيع ذات صلة أسفل كل تدوينة

مرحباً بكم زوار مدونتي اضافات بلوجر

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

في دروسنا عن الاضافات في بحر بلوجر أتيت اليكم ومعي اضافة مهمة جداً لكل مدونة 

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

هذه الاضافة انا استعملها شخصياً لكنني قمت بتطويرها لكي تناسب مدونتي تماماً ^_^

 

صورة الاضافة 

 

طريقة التركيب ..( ركز معي عزيزي الزائر)


اولاً اذهب الى لوحة تحكم المدونة 

ثم الى قالب ثم تحرير Html

الان اضغط Ctrl+f

للبحث عن 

</head>

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

الكود

<style> #related-posts { float : left; width : 600px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 14px DroidKufi-regular; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 11px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; padding-right:2px;} #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijf4unrySqJFl2JhBT__LHb0xMYSS62Poyp3iuc_Rmj-9h3hN02WLaZdLncrm3vg6K0wnyEP81ZxH5-7Aqahn9zo0HfihPqCMqre49wfl5u5bOtmyTrLaZ-LkMk5cb7QUr4DfiKfYUrlM/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #000000; } </style> <script src='http://yourjavascript.com/250120301911/related.js' type='text/javascript'/>

وكخطوة أخيرة ابحث عن

<div class='post-body> أو <data:post.body/>

سوف تجد اكثر من واحدة الثانية هي المطلوبة (اذا لم تنجح جرب الاولى والثالثة لكنني متاكد الثانية هي المطلوبة)

وضع الكود التالي اسفلها مباشرتاً الكود التالي

الكود :

<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://add-b.blogspot.com/2013/08/related-posts-for-blogger-widget.html'><img alt='Related Posts Widget for Blogger' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a> <br/> <br/> <h2 style='color: #fff; font: 20px droidkufi-bold; padding: 5px 8px; background: #1D94C8 ; display: inline-block; border: none;'>شـــاهـــد أيـــضـــا</h2> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> </b:if>

وقم بتغيير كلمة شاهد ايضاً الى اي كلمة اخرى 

ملاحظة : اذا لم يقبل قم بمسح ما هو بالحمر وسوف يقبل (هذا حدث معي)

واضغط حفظ  والف مبررررروك

اتمنى انكم احببتم الاضافة 

دمتم بود

تابع القراءه...