دروستکردنی سڵاید شۆ بۆ بلۆگەرەکەت بە سیستمی CSS3

چۆنیەتی دروستکردنی سڵاید شۆ بۆ بلۆگەرەکەت بە سیستمی CSS3

بینینی ڕاستەوخۆی کارەکە

ڕێگەکانی دروستکردنی :

قۆناغی یەکەم :

1. بچۆرە ‌حسابەکەت لە بلۆگەر  و بلۆگەر داش بۆرد بکەرەوە.

2. کلیک لەسەر Template بکە  .

3. کلیک لەسەر   EDIT HTML بکە .
4. کلیک لەسەرProceed بکە .  
5.Ctrl+F  بکەو    ]]></b:skin>  بدۆزەرەوە .
6.  ئەم کۆدەی لای خوارەوە کۆپی بکە و ڕاستەوخۆ لەبەشی سەرەوەی ]]></b:skin پەیستی بکە و سەیڤی بکە . 

}
@-webkit-keyframes cycletwo {
 0%  { top:-325px; opacity:0; }
 16% { top:-325px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:325px; opacity:0; z-index:0; }
 41% { top:-325px; opacity:0; z-index:-1; }  
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-325px; opacity:0; }
 36% { top:-325px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:325px; opacity:0; z-index:0; } 
 61% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-325px; opacity:0; }
 56% { top:-325px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:325px; opacity:0; z-index:0; }
 81% { top:-325px; opacity:0; z-index:-1; }
 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-325px; opacity:0; }
 76% { top:-325px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
}

 قۆناغی دووەم: 

1 . بچۆرە ‌حسابەکەت لە بلۆگەر و Layout بکەرەوە  

2.  کلیک لەسەر Add Gadget and select بکەو  HTML/Javascript’ هەڵبژێرە ‘

3. پاشان ئەم کۆدەی لای خوارە کۆپی بکە و لەوێ پەیستی بکە و پاشان کلیک لەسەر  Save arrangement بکە  واتە سەیڤی بکە .

<a href="لینکی پەیجەکەت یان ماڵپەڕەکەت">
            <img src="لینکی وێنەکەت" alt=""/>
            </a>
            <div class="tooltip">
            <h1>تایتڵی وێنەکەت</h1>
            </div>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="لینکی پەیجەکەت یان ماڵپەڕەکەت">
            <img src="لینکی وێنەکەت" alt=""/>
            </a>
            <div class="tooltip">
            <h1>تایتڵی وێنەکەت</h1>
            </div>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="لینکی پەیجەکەت یان ماڵپەڕەکەت">
             <img src="لینکی وێنەکەت" alt=""/>
            </a>
            <div class="tooltip">
            <h1>تایتڵی وێنەکەت</h1>
            </div>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="لینکی پەیجەکەت یان ماڵپەڕەکەت">
            <img src="لینکی وێنەکەت" alt=""/>
            </a>
            <div class="tooltip">
            <h1>تایتڵی وێنەکەت</h1>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>