منتديات احفاد الرسول
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات احفاد الرسول

بسم الله الرحمن الرحيم قُلْ هُوَ اللَّهُ أَحَدٌ اللَّهُ الصَّمَدُ لَمْ يَلِدْ وَلَمْ يُولَدْ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ
 
الرئيسيةأحدث الصورالتسجيلدخولتفسير القران الكريم قراءة القران الكريماذاعات القران الكريمكتبقنواتقصص رائعة منتديات الياس عيساوي بث قناة الجزيرةاوقات الصلاةاستماع للقراءن الكريم
دليل سلطان للمواقع الإسلامية

 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
eliasissaoui
Admin
eliasissaoui


ذكر عدد المساهمات : 16999
تاريخ التسجيل : 04/07/2013
الموقع : https://www.youtube.com/watch?v=QriWAmC6_40

اضافة سلايد شو احترافي وانيق لمدونات البلوجر بالشكل جديد و متميز Empty
مُساهمةموضوع: اضافة سلايد شو احترافي وانيق لمدونات البلوجر بالشكل جديد و متميز   اضافة سلايد شو احترافي وانيق لمدونات البلوجر بالشكل جديد و متميز I_icon_minitimeالأربعاء أكتوبر 29, 2014 1:48 am



السلام عليكم ، احبائي أقدم اليكم اليوم سلايدشو احترافي للمدونات العربية ، سلايدشو ملائم مع المدونات الأخبارية و التعليمية بشكل مناسب دون اخطاء و سريع التحميل أيضا .

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


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

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

1. نتوجه الى المدونة ثم نختار قالب .
2. نضغط تحرير HTML .
3. نبحث عن الكود "استعمل CTRL+F"

اقتباس :
</head>

4. نضيف الكود الثالي من فوقه .

اقتباس :

لاضافة شكل الكتابة احترافي أضف الكود الثالي من فوق الكود السابق "هذا اختياري"

اقتباس :
<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>
<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoLight.css' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

5. الآن  توجه الى تخطيط .
6. ثم اضافة اداة   ثم اختار     HTML/Javascript
7. أضف الكود الثالي و ضغط حفظ .

اقتباس :
<style>
/* CSS Responsive Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){right:0;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:16px;bottom:0;color:#fafafa;width:100%;
padding:10px 90px 10px 10px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald',GESSTwoMediumRegular;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;right:10px;
padding:0;font-family:'Oswald',GESSTwoLight;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:15px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:12px;font-family:'Oswald',GESSTwoMediumRegular;
right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:14px;color:#fff;bottom:10px;z-index:3;right:10px;
position:absolute;background:rgba(255,101,83,0.Cool;padding:3px 6px;font-family:'Oswald',GESSTwoLight;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:29px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:14px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://www.dropbox.com/s/ouw82qk0vdkkxf4/slidershow.js?dl=1"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://hukmat.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

8. لا تنسوا تغيير رابط مدونة ووضع رابط مدونتك مكانه .

لأي استفسار ضعه في التعليق أسفل الموضوع .
جميع الحقوق محفوضة لمكونة حكمات للمعلوميات 
    المصدر    www.hukmat.blogspot.com
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://info-noor-islam.ahlamontada.com
 
اضافة سلايد شو احترافي وانيق لمدونات البلوجر بالشكل جديد و متميز
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» سلايد تلقائي لمدونات بلوجر بشكل عمودي
» أداة آخر التعليقات على البلوجر بشكل احترافي متناسق
» طريقة اضافة أقسام للمواضيع على البلوجر
» اللون الذهبي جديد و متميز لزفافك
» اضافة البحث المخصص لمحرك البحث جوجل الى مدونات البلوجر أنيق و جذاب

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احفاد الرسول :: منتدى: المعلوميات :: إضافات بلوجر المميزة Blogger widget-
انتقل الى:  
تعليقات فيسبوك

تابعنا على فيسبوك
اضافة سلايد شو احترافي وانيق لمدونات البلوجر بالشكل جديد و متميز Flags_1
online
تويتر طائر


هذه الرسالة تفيد أنك غير مسجل .

و يسعدنا كثيرا انضمامك لنا ...

للتسجيل اضغط هـنـا