في قوقل تجد الكثير بهذا الامر لبحث Blogger labels
واخترت لكم المناسب
واخترت لكم المناسب
الاشكل الاول هنا المصدر
هنا المصدر
هنا المصدر تطبيق جافا سكربت HTML/JavaScript
هنا المصدر
هنا المصدر
واكتفي بها وافضل عمل من شرحي وموجد في البلوجر بلا تعب
في قوقل تجد الكثير بهذا الامر لبحث Blogger labels
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH1DH5Xmu7XnvGKPcqCsBmFDiGeD870FSrTppAEXUaOuYdvrZvZrza63ylbn8fS6fHcKGfzgOwIgFcVtrpt8KOpJCMSIwMJ2pUwdOasF6idXDzSLVTGATN-AjlXN82Jebn0JIPG9v87KdW/
واخترت لكم المناسب
البحث
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH1DH5Xmu7XnvGKPcqCsBmFDiGeD870FSrTppAEXUaOuYdvrZvZrza63ylbn8fS6fHcKGfzgOwIgFcVtrpt8KOpJCMSIwMJ2pUwdOasF6idXDzSLVTGATN-AjlXN82Jebn0JIPG9v87KdW/
واخترت لكم المناسب
البحث
]]></b:skin>فوقه هذا الكود
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; }.label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out; -moz-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1;} .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }
ثم فوق الوسم
]]></b:skin>أضف الكود التالي
#Label1 li { float: right; background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnZgqditgcPa9Q5ouTrn0Lou4cwzB6Uzl8m9wwfG4KQiKyoFfHhhJHKHcDc3Lt-8ViEG6vjAniLRjJImcv3Jxua91PFWRVzL-1bnQFU3AiOkc1i6bnaxNZRCFQ1LdwW5ZsXnnc2zl9Gs2/s16/folder.png)no-repeat scroll 121px 9px;padding: 5px 25px 7px 9px; font-size: 12px; margin: 0 4px 10px 0; display: inline-block; border: 1px solid #d7d7d7; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;color:#aeaeae; width:108px; } #Label1 li a{color:#000;} #Label1 li:hover { background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnZgqditgcPa9Q5ouTrn0Lou4cwzB6Uzl8m9wwfG4KQiKyoFfHhhJHKHcDc3Lt-8ViEG6vjAniLRjJImcv3Jxua91PFWRVzL-1bnQFU3AiOkc1i6bnaxNZRCFQ1LdwW5ZsXnnc2zl9Gs2/s16/folder.png)no-repeat scroll 121px 9px;}ثم فوق الوسم
]]></b:skin>أضف الكود التالي
.label-size{ margin:0; padding:0; position:relative; }.label-size a{ text-decoration:none; float:left; height:18px; line-height:18px; position:relative;margin-bottom: 9px; margin-left:10px; padding:10px; background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #333; font: bold 12px verdana; text-align: center; text-shadow: 0 1px 0 #eee; } .label-size a:hover { background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb)); background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(top, #dddddd, #bbbbbb); border: 1px solid #bbb;border-bottom: 1px solid #999; text-shadow: 0 1px 0 #ddd; } button.clean-gray:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
وسلامتكم
0 تعليقات