إضافة أداة "أحدث المواضيع" مع الصور على بلوجر

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

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

انتقـــل إلى لوحـــــــــة تحكــــــــــم مدونتــــك، إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript والآن الصق داخل المستطيل الكود التالي :

<style type="text/css" > #spylist-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; font-family:calibri; } #spylist-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #spylist-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBn9o6NeIDqj__vO8z_KmexCGgRFwZes-XCAP37vCoD4-0MvB3cYXtCCL_rL3FsONaRlJaC8aXn3uLL3OEZK1n517Hu_xWuKhA70SfSlVqEjBBfiJ1RxYiht4Xgs3it3E6IaBIn0ksSh4/s320/latesthack.com-.jpg) repeat-x; border: 1px solid #ddd; } #spylist-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #spylist-widget img { float: left; margin-top: 5px; margin-right: 15px; background: #EFEFEF; border: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #spylist-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .spydate { overflow: hidden; font-size: 10px; color: #0284C2; padding: 2px 0px; margin: 1px 0px 0px 0px; height: 15px; font-family: Tahoma,Arial,verdana, sans-serif; } .spycomment { overflow: hidden; font-family: Tahoma,Arial,verdana, sans-serif; font-size: 10px; color: #262B2F; padding: 0px 0px; margin: 0px 0px; } </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKrUNcqbXv9K3Q4mVarlq1iVWywx5EzO7IajONQ3WfPSk1Zkz4CF3qmzoHrouIXkr2CckbQhcD2KKbBzcL7vOGVddbw8QcOYlusSklwSWD0yhF80afBSGeX8Ra1POn-TVgkZFmKMzfMU/s1600/defaultimage.jpg"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKrUNcqbXv9K3Q4mVarlq1iVWywx5EzO7IajONQ3WfPSk1Zkz4CF3qmzoHrouIXkr2CckbQhcD2KKbBzcL7vOGVddbw8QcOYlusSklwSWD0yhF80afBSGeX8Ra1POn-TVgkZFmKMzfMU/s1600/defaultimage.jpg"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKrUNcqbXv9K3Q4mVarlq1iVWywx5EzO7IajONQ3WfPSk1Zkz4CF3qmzoHrouIXkr2CckbQhcD2KKbBzcL7vOGVddbw8QcOYlusSklwSWD0yhF80afBSGeX8Ra1POn-TVgkZFmKMzfMU/s1600/defaultimage.jpg"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKrUNcqbXv9K3Q4mVarlq1iVWywx5EzO7IajONQ3WfPSk1Zkz4CF3qmzoHrouIXkr2CckbQhcD2KKbBzcL7vOGVddbw8QcOYlusSklwSWD0yhF80afBSGeX8Ra1POn-TVgkZFmKMzfMU/s1600/defaultimage.jpg"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKrUNcqbXv9K3Q4mVarlq1iVWywx5EzO7IajONQ3WfPSk1Zkz4CF3qmzoHrouIXkr2CckbQhcD2KKbBzcL7vOGVddbw8QcOYlusSklwSWD0yhF80afBSGeX8Ra1POn-TVgkZFmKMzfMU/s1600/defaultimage.jpg"; imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKrUNcqbXv9K3Q4mVarlq1iVWywx5EzO7IajONQ3WfPSk1Zkz4CF3qmzoHrouIXkr2CckbQhcD2KKbBzcL7vOGVddbw8QcOYlusSklwSWD0yhF80afBSGeX8Ra1POn-TVgkZFmKMzfMU/s1600/defaultimage.jpg"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 60; thumbheight = 60;fntsize = 9; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://karkera.blogspot.com/"; limitspy=5; intervalspy=4000; </script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> <center> <div id="spylist-widget"> <script src='http://latest-hacks.googlecode.com/svn/gadgets/scrollingrecentposts/scrollingrecentposts.js' type='text/javascript'></script></center> </div>

والآن الخطـــــــــــــوة الأهـــــــــــم : يجـــــب عليك تبديل عنـــــــوان المدونة http://karkera.blogspot.com/ بعنــــــــــــوان مــــــــــــــدونتــــــــــــــك