تركيب سلايد شو رائع بشكل الاكورديون لبلوجر

اولا اذهب الى القالب البلوجر ثم اختار المكان الذى تود ان تضع الاسلايد شو به 

والصق كود  html التالى :-
--------------------------------------------------------------------------------------------------------------------------

<div class='acc'>
<ul>

<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع الاول</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFt0dmA_qVS3uSSwlkFQItlcpk66UaJX-3r7emPDldO8UwfOG3yhHOjp6Fu0XWOfuY-R-KJzedCLYxBj8yQ5RMCC88_PGO-TeAb6WssRpmiCMo6xeKIY4RUkrsK_vMXeesXew9CuQrbw/s1600/Full-Hd-Wallpapers-1080p-2.jpg'/>
</li><li>

<a href='http://qassemblog.blogspot.com/'>الموضوع الثانى</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0dAMTsvsxRI-sgjO6iJX-s_eU7zA9XMSo0njM2LjQ9St4YRwLtFoMkStTyI3mddsDuRQBv5123nBqKXHcRzJIIQUDMrXsyaGYA8SVoMOBRdl72_pS9RFNetRXOVY_Yn0yp6hHul57nF0/s1600/Free%252BHD%252BWallpapers%252B8.jpg'/>
</li><li>
<a href='http://qassemblog.blogspot.com/'> الموضوع الثالث</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrLDY-UZ3k1kNVILSiRPZlnlEzytwr0SKTLxAjIQqEh9BkGvgqqQlNDAYKz1_TlFFk_xWEWS7C7YvtC7vh0z0_eJ8_ouUNs0HhKnlJz24VS1Kk9ellBmBJbizDw2aEwsBO3lcjX4W5HSg/s1600/pc-1080p-wallpaper-hd4.jpg'/>
</li>
<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع الرابع</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZzaGogbHhMFAKBJXcRZhEEIsAwUYXyCCvvm9diwMl8hTCCOfthTBAdKQe9iXvrQwX4Gh5DEux-Sh4qJoXNVaQ4IP0F-bCvE-gaPNJJrkZo8t4C61pUkY9NiCtuUmEeEA4DCefwghvzs/s1600/Hd-Wallpapers-1080p-8.jpg'/>
</li>

<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع الخامس</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoICH0mpnCXxXD-hG0Icie7vWty0AJBEWYYcp1ojgGau0jhavCugF2t27HzDmo7WgN5OQgjVxhPNaz7A54Jv4EQnSFGuyIhjbAh5csk2UsiZf8dVeeLRb-9QyTBSZom_t3_Kn-AiKVTCY/s1600/sonic_riders_1080p_game-HD.jpg'/>
</li>
<li>

<a href='http://qassemblog.blogspot.com/'>الموضوع السادس</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2zUSq1poca533s08Z2ycuPtmD0Ec82FTtbgofhX67SKSQKrjCdYjJaaJPfa4_ICTxzJmNdSD_06gXAZAn01MstGDHsvwbEIeQXJtr6bKbR6zRiQiCvgG-C-Yvhtb71YIjTTXt1Yw1Rk/s1600/pc-1080p-wallpaper-hd6.jpg'/>
</li>

<li>
<a href='http://qassemblog.blogspot.com/'>الموضوع السابع</a>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQBA_cb8ZhEkOApz_bPLsnThSdlRu2jjLdhwgSrPL8jTI_wD_BdDbf6Umq_YJAO2ILTwpx1oo_Jjw98rFWwGR4CgLSOYuAONhXqkKXccYH_2TaynkuNoIr7DvQ5CasnaTZN0l-VvjQ6Y/s1600/paris-architecture-wallpaper-1080p-HD.jpg'/>
</li>
</ul>

</div>
--------------------------------------------------------------------------------------------------------------------------

الان ابحث عن   ]]></b:skin>
 والصق الكود التالى قبلها-فوقها- مباشرة 

--------------------------------------------------------------------------------------------------------------------------
/*every thing by abdelhaakeem from qassemblog so plz keep rights on :)*/


.acc img{width:700px; height:200px;}
.acc {width:1100px; height:200px; margin:1px auto; border:1px solid black; overflow:hidden}
.acc ul{  list-style:none; }
.acc ul li {float: left; width:150px; position:relative; transition :2s;}
.acc ul li a{ display:block; display:block; text-decoration:none; color:white; background:rgba(0,0,0,.5); position:absolute; bottom:0; padding:15px ; width:1100px; }
.acc ul:hover li{width:60px;}
.acc ul li:hover{width:600px;}

-------------------------------------------------------------------------------------------------------------------------

استبدل اسم الموضوع الاول بالكلمات التى تحب وكذلك رابط الصورة وكرر نفس الطريقة مع كل المواضيع السبع :)

ومبروك عليك الاضافة :)

-------------------------------------------------------------------------------------------------------------------------

لمعاينة الاضافة :