اداة عرض اخر المواضيع بصورة متحركة لمدونات بلوجر

مواضيع المدونة من اهم الاجزاء الاساسية في المدونة ولابد من عرضها للزائر لكي يستطيع تصفحها بسهولة ووسائل طرق وعرض المواضيع مختلفة واليوم نقدم لكم اداة عرض مواضيع المدونة بصورة متحركة و تاثيرات جميلة ومميزة .

شرح تركيب الاضافة :
نتوجه الى لوحة التحكم > التخطيط > اضافة اداة > جافا سكريبونلصق فيها الكود التالي :

<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/AVvXsEj1zX60oHgNIFNQGzwZ8ISk2hoMRf2ZPYlwWqUbN1wmNpD88I1b7z9vwSvuOM_VEcYqYektI4ceMyrFvGpCyVNAdi0TcDX_2nra-t9-4w4rsGYIBxevCBHSm5pHVv_XCN6LQ_7QxhL53kA/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/AVvXsEgy28vOg8-5E9tNQ37RrPN3s0LQ0qYu6Qzsr3BQhWEWUM0XxyTrm4mVkiTiq6-2XqaDXa4uZdbOpt2ZylP_xitr-PGngdbi2p2Zvq2RYUk7rw6OF27lyxHUF45p3TNh2DgC4Rtd8NCxd-U/s1600/defaultimage.jpg";
    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy28vOg8-5E9tNQ37RrPN3s0LQ0qYu6Qzsr3BQhWEWUM0XxyTrm4mVkiTiq6-2XqaDXa4uZdbOpt2ZylP_xitr-PGngdbi2p2Zvq2RYUk7rw6OF27lyxHUF45p3TNh2DgC4Rtd8NCxd-U/s1600/defaultimage.jpg";
    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy28vOg8-5E9tNQ37RrPN3s0LQ0qYu6Qzsr3BQhWEWUM0XxyTrm4mVkiTiq6-2XqaDXa4uZdbOpt2ZylP_xitr-PGngdbi2p2Zvq2RYUk7rw6OF27lyxHUF45p3TNh2DgC4Rtd8NCxd-U/s1600/defaultimage.jpg";
    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy28vOg8-5E9tNQ37RrPN3s0LQ0qYu6Qzsr3BQhWEWUM0XxyTrm4mVkiTiq6-2XqaDXa4uZdbOpt2ZylP_xitr-PGngdbi2p2Zvq2RYUk7rw6OF27lyxHUF45p3TNh2DgC4Rtd8NCxd-U/s1600/defaultimage.jpg";
    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy28vOg8-5E9tNQ37RrPN3s0LQ0qYu6Qzsr3BQhWEWUM0XxyTrm4mVkiTiq6-2XqaDXa4uZdbOpt2ZylP_xitr-PGngdbi2p2Zvq2RYUk7rw6OF27lyxHUF45p3TNh2DgC4Rtd8NCxd-U/s1600/defaultimage.jpg";
    imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy28vOg8-5E9tNQ37RrPN3s0LQ0qYu6Qzsr3BQhWEWUM0XxyTrm4mVkiTiq6-2XqaDXa4uZdbOpt2ZylP_xitr-PGngdbi2p2Zvq2RYUk7rw6OF27lyxHUF45p3TNh2DgC4Rtd8NCxd-U/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://mudwwin.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></div></center>

* ثم نقوم بتغيير الرابط { http://mudwwin.blogspot.com } الى رابط المدونة الخاصة بنا .

* ثم نقوم بحفظ الاداة .

بالتوفيق ...