| [ حصرياَ ] سلايد شو منتدى العاشق لمدونة بلوجر 2014 |
بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الأنبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
سلايد شو منتدى العاشق لمدونة بلوجر 2014 :
اليوم أطرح لكم مفاجئه من العيار الثقيل بمناسبة عيد الحج , وبمناسبة كثر الطلبات على هذا السلايد شو الرائع الذي كل مدون يرغب به ويريده , اليوم أتيت لكم بسلايد شو منتدى العاشق للأنمي وتم تحويله الى مدونات بلوجر من طرفي , السلايد شو وجدت به بعض الأخطاء وقمت بأصلاحها , ايضاَ قمت بتطويره لكي يتناسب مع جميع المدونات بأذن الله .السلايد شو متحرك , ايضاَ هو يدوي بمعنى انك تضيف روابط الصور يدوياَ .
سلايد شو منتدى العاشق لمدونة بلوجر 2014 :
صور من سلايد شو منتدى العاشق لمدونة بلوجر :
| [ حصرياَ ] سلايد شو منتدى العاشق لمدونة بلوجر 2014 |
| [ حصرياَ ] سلايد شو منتدى العاشق لمدونة بلوجر 2014 |
طريقة تركيب سلايد شو منتدى العاشق لمدونة بلوجر 2014 :
- اولاَ : ادخل مدونتك .
- ثم إذهب الى القالب .
- حرر القالب وأبحث عن : <head>
- الصق هذا الكود مباشرة بعدها :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
ثانياَ : ابحث عن </body>
وضع هذا الكود فوقه :
<script src='http://hal-slider.googlecode.com/svn/trunk/slider4/js/plugin.js' type='text/javascript'/><script>
$(document).ready(function() {
$('#slider li .adv:last-child').addClass('last');
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false
});
});
</script>
ثاثاَ وأخيراَ : ضع أكواد الـ HTML و CSS داخل المكان الذي ترغب به , مثلاَ مثلاَ تحت القائمة العلوية , او ضعها في التخطيط في مكان عالي بحيث تكون تحت الهيدر او المكان الذي ترغب .
<div id='slider_container'>
<div class='slidewrap' data-autorotate='5000'>
<ul class='slidecontrols'>
<li><a class='next' href='#slider'>Next</a></li>
<li><a class='prev' href='#slider'>Prev</a></li>
</ul>
<ul class='slider' id='slider'>
<li class='slide'>
<div class='adv'>
<a href='#'>
<img alt='حلول بلوجر' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqaIjEDf2Oz5WYjh8lu5ZJAqbCbaaZfFrq9AbOhD5g-2h-h4buGFLjCLNZyzoUHzxyZrrpGhyphenhyphen-dn5wqRuoltY9SqAlUKt3h4U7WUTpF7JOwhgLDBp3EwYrRFONR8aBRn7aL2IF0kM5-uJO/h120/tfl0.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='http://3asqanime.blogspot.com/2013/09/329-naruto-shippuden-episode-329_10.html'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ64edtNrX6Az3EF94z8vGKOPO0hYsLdUCP7IJp0U6iLUW-5hiMynK711vgI63rsUfFhyiY1Bh79KVvfeaXiHawFpSpXtgp_2W5uOVfKmv351JUHdoW65w3UEsrkNGk91kpL1rtX_wuXM/s1600/Untitl2ed-2.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='http://3asqanime.blogspot.com/2013/09/610-611-one-piece-episodes-610611.html'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqd90XfMQPD8hYFYNdgc1di4PlT8Zq-MT8B699Cb5Oi6Py2NGi7KfamOs8QNLjuJDg5Ss_QR5IwfCkzxryLlk9GzDJkAuHWb2GObB78quWqT4hW7wXxwUtslRYYYgGqxLG-_gwlMCbk4/s320/Untitled-1.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gk_ctXIpKDYFyS8Gj12-rg7XbplMdEOKUosEm5nHymPmRPBlR7jDOfe2zCC-zoIULv-acolwa7OzmKb_XfFETTenCTz44SzXKny2CIMuzQ7qMAdGlNywYwnOVS3_emvcH0lZ4ZBZ-lGP/s1600/HLQsd.png' width='235'/>
</a>
</div>
</li>
<li class='slide'>
<div class='adv'>
<a href='http://3asqanime.blogspot.com/2013/09/95-hunter-x-hunter-episode-95.html'>
<img alt='' height='100' src='http://im41.gulfup.com/SmmEB.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpx7etXSqaE5JYIht7tqKPAlaGXOee1R1SlPODYmsxG9w7r7L3C8r1Ce1mXFnH5q4fftxc0fhzAS0c5LNtZxQUzdvcVA2n0w55srtfOm-oIyxeVDC-i06EV77tH5JNwY9hup9BQlArv68h/s1600/GEHVX.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUYhZhXuO7aXdRzpzgRN2PlGyaFbSZgxsMF5svPOGIbyI2YmaNjSVvkHvdvo6tl6tS4p-FXb6NXU4MAvxMtDJIcBPgIZowIukxoNioXU0U4q_wJ-5XN6bnukbB4UEEr_mbpNsFWKKVqo_A/h120/4agw.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6FoE9a_zyT6vWEpBHJkA82Q0VR3inSwS7i1e4jET_j6ehjDt7m437VBc6qbZQpXKaNdKu-HOnmfGEIPi_agAWVpO5fnuAAQ74_FeitXDGJIG_YKTiQy43LDhaDEUXi8hfBOgYactMjQD/h120/hiou.png' width='235'/>
</a>
</div>
</li>
<li class='slide'>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZd-QLfZgyfAmnvXLS6KywvZowY9frYENiwvxwG3cQcdJzm3PL4amut0ZCMH0EuYwp4xlbI8qrNwFW9aDnGYfspUeSyNMnwyQU613hUnKESwTZvye0GIuvPQOVB5Crg1c2j8PKEXApInY_/h120/zlxe7.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDW7YgS0gCLxhKmRpkh8PldKXrKHkwjYndyfGfEhmrolTF6697XeItliQtV9LXceQTmxyUtpuQvFijMMIXNxWeMManfz63LalfWCVoAZc1tmCOXCIJ5VS8sIKwxbx49W8irkQe0DVN4L8F/h120/Fsilx.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8YDnMfGPGFKhYtB-cKK3qBZmXI8uy2MJRRVpWtTuYlITeBd9-DhJJLNJJQgJmKpTp1Jyu7R1_lhyphenhyphencO9hQAKSGDwUHEKAtITi7XXVR4xNg8YYZjaeqhKreL2pYy6qWNrbFOrzJmdEmNoe/h120/tfl0.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3SkpBGgrruCPO6OAQYTD7CjLQo21ODSa-xvTzN7acBlpSBNaQz6AoAC2A2EAkIz6kZA2lKWz8lrWeQRPWPijzL9v-lgRkPZUN1YByCEwpGVvMo-m6hjh2gOsy793SzP8bpJduFEE-ekIt/h120/HLQsd+%281%29.png' width='235'/>
</a>
</div>
</li>
<li class='slide'>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_I-gh4kttEfEWRRBeF4lLMblqRGXYAd-EErbflH5iNbOdBSXrkFFwpDxlZxG4MsgTL7qu-D6ReVJNSiADmitIvOU9T47d-MZiz3NmYFi1c_KEDNwDEEzxPW4F9r1AcGfiimTnuxZhI8-3/h120/ysweA+%281%29.jpg' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixN9DU_2MZ86m_bdJ6rUfkoICveLC6Y8B6QTz1Tv6gkUCB11HvUKd94v6DNTs9_Pev9BvzrjmOb4caL_JHjjxEb6m5wCMP9mcfDvdzZ7MQODGIBfQJcgh677n8PetjflY0TnKvO9_Gj63N/h120/tfl0+%281%29.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTbakkJbvCYtLb_6t8H120knAV-dGxRv7lYYRJUFuaFApwYTbfW6m7QEnFzHMRMsVQ9EWoiyoUIoVjijAJuRPfX4NyKhG5L2alOjP3L13lxQjgq1xt8gYZccxfnY6qrWmr1efRQvSk3ke/h120/Fsilx+%281%29.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3SkpBGgrruCPO6OAQYTD7CjLQo21ODSa-xvTzN7acBlpSBNaQz6AoAC2A2EAkIz6kZA2lKWz8lrWeQRPWPijzL9v-lgRkPZUN1YByCEwpGVvMo-m6hjh2gOsy793SzP8bpJduFEE-ekIt/h120/HLQsd+%281%29.png' width='235'/>
</a>
</div>
</li>
<li class='slide'>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_I-gh4kttEfEWRRBeF4lLMblqRGXYAd-EErbflH5iNbOdBSXrkFFwpDxlZxG4MsgTL7qu-D6ReVJNSiADmitIvOU9T47d-MZiz3NmYFi1c_KEDNwDEEzxPW4F9r1AcGfiimTnuxZhI8-3/h120/ysweA+%281%29.jpg' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbAGhRKcMpfaFRiumPhN8dlcPTSbP83f51niOvgjxp3bkvfHIGl6TjTyof0h3_kG62OHJh2gs2EPk1hAin2DPAG86gSw9YKAXk99JHtwUUkHPWambPul1ZqcHAi8Xa1IqCmgRfTFtRHHB/s1600/GEHVX+(1).png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtisYAkZj7azgHtf4tECr8_57WgCOnXnZXI4CML2G80hkK0LO8NchvyKlfp4zpDHKeC_LSsjSNfkfk29Ntz7C42BNokVAQnJWZNXekcKjpLwprMVEclhkKxMFPBZYEYGUO11c8s9DzvX-/h120/hiou+%281%29.png' width='235'/>
</a>
</div>
<div class='adv'>
<a href='#'>
<img alt='' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocRvidQNv65uLiNc5Wycer80F42joFQYtdwITrIXCnPjsb0ap4XHsNTEQ34055etJr0xTlyYWnESHoCeMTLE1LMTxBk0zMW0kZHQTt6sqWr1iNu8Sau-h9duO7VGk0SHdOvAqHz5WyACS/s1600/zlxe7+(1).png' width='235'/>
</a>
</div>
</li>
</ul>
</div>
<a href="http://7lolblogger.com" rel="dofollow" ></a>
<style>
ul, ol { margin: 0; padding: 0; list-style: none; }
#slider_container{
overflow: hidden;
width: 955px;
height: 100px;
padding: 5px 22px;
clear: both;
margin: auto;
position: relative;
border: 1px solid #CCC;
-webkit-box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
-o-box-shadow: 0 0 5px #999;
}
#slider{}
#slider li .adv{
float: right;
margin-left: 5px;
}
#slider li .adv.last{
margin-left: 0px !important;
}
#slider_container ul.slidecontrols{}
#slider_container ul.slidecontrols li a{
position: absolute;
top: 50%;
z-index: 5;
width: 22px;
height: 100px;
margin-top: -16px;
text-indent: -999em;
overflow: hidden;
background: #000;
background-position: 0 0;
background-repeat: no-repeat;
}
#slider_container ul.slidecontrols li a.next{
left: 0px;
top: 21px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU2U86ZMfnPV1atk44PWe3CrLFXC97RrHcx9tFr1StvOsoV7UGmbFQPegsbxsnKA0IYBA6LsRa4-fUTqDo_VhY_3Si2HzUnTVp6TkodMrMTIO5h-gRF-ldHmC6t_TxKeL_ApOosbHcW1I/h120/left.png);}
#slider_container ul.slidecontrols li a.prev{
right: 0px;
top: 21px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOjhYNlLSdc86qXpecpCU6tqvsQUApjnp36FaR_d61fKGEt3QCygV8iNNgLrQ4TASS4TP-yll6vw4CiNP2JkaiYaFnMDtr9veCq0dzoz5JuU4TjR-eKWVRz9lbTdgNW7bo6UgIR_swrs/s1600/right.png);}
</style>
التعديلات :
: رابط الصورة: عرض الصورة
: عنوان الصورة
: طول الصورة
: رابط الموضوع
الأن انتهيناَ ولله الحمد , في حال يوجد أستفسارات فأنا هنا لاتتردد وضع تعليقك *
أيضا لاتكن لئيماَ تأخذ ماتريد وترحل _ كلمة شكر ستكون كافية في حقي *
ملاحظة أخيرة : لا أحلل ولا أبيح من ينقل الموضوع دون ذكر المصدر ( سيتم أبلاغ قوقل بشكوى قانونيه ضد المواضيع المنسوخه دون المصدر :)
بالتوفيق
ملاحظة مهمه جداَ تم تحديثها بتاريخ 17/10/2013:
السلام عليكم .
يا أخوان في شيء نسيت انبهكم عليه وهو مهم مهم مهم جداَ كي يعمل السلايدشو بكامل أناقته وبدون مشاكل .
هذا الشي المهم هو كود الأجاكس الي في اول خطوة , الكود هذا يجب ان يكون وحده وليس هناك كود اجاكس غيره في الهياد .
بمعنى انك ستبحث في القالب عن : ajax.googleapis
وستحذف اي كود موجود في الهياد , وتجعل فقط كود الأجاكس الي انا وضعته في الدرس .
هذي هي المشكلة بأختصار , سأعيدها عليكم كي تفهموها مضبوط .
أبحثوا في القالب عن : ajax.googleapis
ستجدون كود مثلا مثلا هكذا :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/66.3/jquery.js' type='text/javascript'/>
قوموا بحذفه وأذا وجدتم غيره أيضا أحذفوه , ليس في كل القالب ولاكن فقط في الهياد <head>... <head/>
وبعدها سيعمل السلايدشو .
0 التعليقات: