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

آخر الأخبار

شريط آخر الأخبار المتحرك مع الإعداد والتنسيق

شاهد المقال
News Bar Blogger Widget

طبعا لا تستغني المواقع الإخبارية او المواقع ذات النشر المكثف عن مثل هذا الشريط , الشريط يقوم بعرض عناوين آخر المواضيع بشكل متحرك ولافت للانظار مما يجعل الزائر يقبل على الضغط وزيارة الموضوع قبل ان ندخل في طرق التركيب والتنسيق يمكنك القاء نظرة على الشريط وتجربته من المعاينة التالية
طريقة التركيب أضف الكود التالي داخل آداة HTML/JavaScript
<style>
#cnmunewasbar {
  background: #fff;
  box-shadow: 0 0 1px #777;
  height: 30px;
  width: 100%;
}
.cnmunbtile {
  background:#008EFA;
  color: #fff;
  display: inline-block;
  float: right;
  font: bold 14px/30px tahoma;
  height: 100%;
  margin-left: -112px;
  text-align: center;
  width: 110px;
}
.cnmu-newsb-srp {
  float: right;
  font: 14px/28px tahoma !important;
  margin-right: 112px;
}
</style>
<script type="text/javascript">
    var cnmuWidth= 100;
    var cnmuScrollAmount=0;
    var cnmuScrollDelay=80;
    var cnmuDirection="right";
    var cnmutargetlink="yes";
    var cnmunumPosts=10;
    var cnmuBulletchar =">>>";
    var cnmuimagebullet="yes";
    var cnmuimgurl="https://lh6.googleusercontent.com/-YHYwSfOe3XY/VEIv0ZeiOZI/AAAAAAAAE40/3ZHADkTW5Io/s35/jaded.gif";
    var cnmufontsize=16;
    var cnmubgcolor="transparent";
    var cnmulinkcolor="008EFA";
    var cnmulinkhovercolor="CD0317";
</script>
<div id="cnmunewasbar">
<span class="cnmunbtile">آخر الأخبار</span>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/newsbar.js' type='text/javascript'></script>
<script type="text/javascript" src="http://blogeinter.blogspot.com/feeds/posts/default?alt=json-in-script&callback=cnmuAdvRecentPostsScrollerv3&max-results=50" ></script>
<div style='clear: both;'></div>
</div>

أهم الإعدادات

استبدل http://blogeinter.blogspot.com برابط مدونتك
الرقم 80 هو سرعة الشريط كلما قل كلما كان اسرع كلما زاد اصبح بطئ
ان اردت فتح الروابط في نفس الصفحة استبدل هذه الكلمة yes بهذه no
هذا 10 هو عدد الموضوعات

أهم التنسيقات

هذا #fff لون خلفية الشريط البيضاء
هذا #008EFA لون خلفية كلمة آخر الأخبار والتي يمكنك تغييرها هي الأخرى
وهذا #fff هو لون خط كلمة آخر الأخبار
الرابط الزهري هو صورة جديد يمكنك استبداله برابط صورة أخرى
هذا 008EFA هو لون الروابط ملحوظة لا نضيف للون هنا رمز #
هذا CD0317 هو لون الروابط عند تمرير الماوس وايضاً لا نضيف له الرمز #
هذا tahoma هو نوع الخط يمكنك استبداله بخط آخر مخصص
الرقم 14 هو حجم الخط الاول خاص بكلمة آخر الأخبار والثاني خاص بالروابط
هذا 30 هو بعد الخط من الاعلى للكملة وهذا 28 للروابط

هام : في حالة اردت عرض الأخبار من قسم معين

استبدل كلمة default بهذه الكلمة default/-/# مع تعديل رمز الـ # بإسم القسم الذي تريد
هذه هي اهم الإعدادات والتنسيقات وتجربه موفقة بإذن الله

طريقة رائعة لإضافة أيقونات المواقع الإجتماعية على شكل قنينات مشروبات غازية

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

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



نمر لشرح الطريقة:

1.توجه إلى لوحة التحكم الخاصة بمدونتك.
2.إضغط على قالب.
3. ثم تحريرhtml.
4.إضغط على متابعة.
5.إختار توسيع القالب
6. إبحث عن هذا الكود باستعمال Ctrl+F:


</head>

تم ضع قبله مباشرة الكود التالي:

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}

.bubblewrap li img{
width: 64px; /*Ancho de cada imagen*/
height: 64px; /*Alto de cada imagen*/
border:0;
margin-right: 1px; /*Espacio entre cada imagen al crecer*/
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-webkit-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
-o-transform:scale(1.8); /*Escala en la que crece la imagen 1.8x*/
}

</style>


7.الآن التوجه ألى لوحة التحكم الخاصة  بمدونتك.
8. تخطيط.
9.إضافة أداة.
10.اختار  Html/Javascript.
11.أضف الكود التالي:


<ul class="bubblewrap">
<li><a href="رابط مدونتك"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchOr2JfeR9Nl-YGzthVKSOe0aXJc8esz94-gxkwx7ktn3mW6ImABEQiUQo6a4_SFcEn3cjAmJfeMuFFV_woB5umRRio87AkCVUTqT3EIp6M0Z8ZJgveWbASpKG4ymruQfFI2XpHKOesJ8/s320/Charkleons-Blogger.png" title="Blogger" /></a></li>
<li><a href="رابط الخلاصة RSS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_6Ym53IUnoSgmCjWHu1CnWtSbedfYE3MPkMhOt9MNLnI8YerfWnR7xVa3BYOJeIzeNILhnh_8lbtO9-i8wuh6q6uS8-o0x1GdheszCa9f3tVhY0jpim2sFFU6Jh_edGdpJ_RSvn9hvuh/s320/Charkleons-Feedburner.png" title="RSS" /></a></li>
<li><a href="رابط صفحتك على تويتر"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7t8EuPIlGab-L3yf6aEiCbBEI6xMCGT-h9jQVuEbqxTdg4b8ToWq3l72-nC_kgoYJXmz-N1-0odmcfDuj0ArMJi57BIYvAQRDFT4osBnVrHzeoOFsmSl6nIhVw5m2E9IRga229xv3zJug/s320/Charkleons-Twitter.png" title="Twitter" /></a></li>
<li><a href="رابط صفحتك على غوغل +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzNIw-cxKYN2BhrgpGpZsSj3dTDJ9Bx5iIeY-QXhK1rf4Vkwzl003wCV2lhJXqfbbfqMWewqcQypiMSzn302O4_8FdJewY5tVwedMeqtLJwBzke14xOhnbi_QdXh_W0ntXA7E4MjGvat2/s320/Charkleons-Google%252B.png" title="Google+" /></a></li>
<li><a href="رابط صفحتك على فايسبوك"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE7raaeNgk7Syazd21ocdxyXZeW9N1FpQFBnL6lt4mR3UbuCJ3M8QHtGZTIyLp96Y8W1W7jUFma6C_39Jps-ly87euxJCX2JQH4pDHnG7I9k7JZl_0IRT8hpliPB9IiOZzXyik7luqTXFD/s320/Charkleons-Facebook.png" title="Facebook" /></a></li>

<li><a href="رابط قناتك على يوتيوب"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNRrx34zu8dQMLTZcwVRxiAxOQOG1fAp11oAftSkv3W9ch5ifJUQX3vHOyjfO1L7e-qpv4wsohbBRCR3XbpAR8lsdGtV8Uhz6xtS5x5VwMYpjZGuyk4Tog-FFgXWSQ9WyoZyzu0GNdv_W/s320/Charkleons-YouTube.png" title="Youtube" /></a></li>
</ul>


ملاحظة:

-قم بتعديل المكتوب بالأحمر بما يناسبك.
-يمكنك سحب الإضافة للمكان الذي يناسبك.

12.قم بحفظ الأداة.
تمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.

طريقة وضع خلفية لكل موضوع بشكل غير الاخر في بلوجر

شاهد المقال
بسم الله الرحمن الرحيم به نستعين والصلاة والسلام علي اشرف المرسلين ثم اما بعد ودرس اليوم درس شايق وجميل وحصري

وهو وضع خلفية مطرازة لكل موضوع  ساريكم مثال حي الان كالعادة وبعدها ساشرح لكم


U




اذا اعجبتكم تابعوا معي الشرح

اذا اردت اضافة خلفية لعنوان ضع هذا الكود في مكان عنوان الموضوع  

طريقة وضع خلفية لكل موضوع بشكل غير الاخر في بلوجر
الكود الخاص به

<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div style="-webkit-box-shadow: #13B0B2 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 4px 4px; background-attachment: initial; background-clip: initial; background-color: #13b0b2; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: #ffffff; border-image: initial; border-style: dashed; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 2px; box-shadow: #13B0B2 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; color: white; font-size: 21px; line-height: 1.3em; margin: 10px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: center; text-shadow: #13B0B2 -1px -1px;">هنا الكلمة المرادة</div>



استبدل الاخضر بالعنوان

استبدل ماباللون الاحمر

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

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




كود تهنئة العيد مع صوت التكبير لموقعك

شاهد المقال
بسم الله الرحمن الرحيم
كل عام وأنتم بخير
بمناسبة  حلول العيد أعاده الله عليكم بالخير واليمن والبركات

يمكنكم من خلال لصق هذا الكود بمدونتكم 
سماع صوت تكبيرات العيد مع صورة للتهنئة بالعيد

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

إضافة أداة >> Html >>> نسخ أحد الأكواد الآتية
كود تهنئة بالعيد


<b:if cond='data:blog.url == data:blog.homepageurl'> <embed name="takbir" src="http://sites.google.com/site/simoxooorg/Home/tkber_alafasy.mp3" volume="60" loop="false" hidden="true" autostart="true"> </embed> </b:if> <div style="float:top left; position:absolute; overflow:visible; left:130px; top:0px; height:116px; width:116px;"> <a href="http://blogeinter.blogspot.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5t-Zk3DO0r_b4VKLcYN1jvG3YrnBeimnE_lYmJBMMiLAANEv5JslrIwVoLR887Oz-kswMBlyquedkn7xaXuDjB-co_pf0yzDvuDxQ0kShc6h8khCsP9E2n0c9t3HuN8Fvp0zGmhDW_Lzb/s1600/%25D8%25A7%25D9%2584%25D8%25B9%25D9%258A%25D8%25AF1.png" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" /> </a></div>

كل عام وانتم بخير


<b:if cond='data:blog.url == data:blog.homepageurl'>
<embed name="takbir"
src="http://sites.google.com/site/simoxooorg/Home/tkber_alafasy.mp3"
volume="60"
loop="false"
hidden="true"
autostart="true">
</embed>
</b:if> 
<div style="float:top left; position:absolute; overflow:visible; left:130px; top:0px; height:116px; width:116px;">
<a href="http://blogeinter.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2oREm7os9koHcgOB5WHQhANHi3Y684xl9boizSKEI3nYwn0tUWE3B_6157n1PTEXySK3JTH30LtrX27FjmSQdIPo7e8xYo23dPsN6zNPDVp9z2lSpyG65lIV9uNhyC4QUHFQi2hNHxo_o/s1600/%25D8%25A7%25D9%2584%25D8%25B9%25D9%258A%25D8%25AF2.png" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" />
</a></div>



عيد سعيد


<b:if cond='data:blog.url == data:blog.homepageurl'>
<embed name="takbir"
src="http://sites.google.com/site/simoxooorg/Home/tkber_alafasy.mp3"
volume="60"
loop="false"
hidden="true"
autostart="true">
</embed>
</b:if> 
<div style="float:top left; position:absolute; overflow:visible; left:130px; top:0px; height:116px; width:116px;">
<a href="http://blogeinter.blogspot.com/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRGhp25vTgbxtSLnC_6R4D6Allf3MJtPcD5Ih4JBCipq4zN0QqwjaOzZhMz5PntKsxQkfMASdVUUPkWE-Hq0VUFHeOu7zfSR-kAUylW3-c5mkqYLyyy3kQED07OSzA3EO3ayqZNFP8Kn4/s1600/%25D8%25A7%25D9%2584%25D8%25B9%25D9%258A%25D8%25AF+4.png" alt="عيد مبارك سعيد" title="احصل على هذه الإضافة" border="0" />
</a></div>





قد يهمك أيضاً

فلاشات تهنئة لعيد الأضحى (العشر الأوائل من ذى الحجة,الحج)أكواد Fbml,Html

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا


صمم شعار مدونتك بسهولة

شاهد المقال


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

أترككم مع الشرح:


رابط تحميل المستخدم في الشرح البرنامج بورتابلAAA Logo:من هنا