ازرار تحميل جديده لبلوجر بتقنية css

السلام عليكم اليوم شرح كيفية اضافة ازرار التحميل بتقنية css




مثال مباشر صورة متحركة:


الآن نأتي لطريقة التركيب

◘ ادخل الى لوحة التحكم ثم إبحث عن  ]]></b:skin>



وأضف فوقها الكود التالي | 

/* Start */
/*

Project Name : Neo CSS Download Button Three
Version : 1.1
Author : alinael|| ..
Author Url : http://alinaeliq.blogspot.com
Inspirated by : http://alinaeliq.blogspot.com
Check for Update & report bugs: http://www.indaam.com/projects/css/neo-download-button
CSS license : Copyleft, Public domain (free for all and free for commerical projects)

copyleft : http://en.wikipedia.org/wiki/Copyleft
Public domain : http://en.wikipedia.org/wiki/Public_domain

Changelog
v1.0 2012-01-06 (Release)
v1.1 2012-03-21
	*Edit core
	
How to Use?
1. Copy All CSS
2. Set value the tag A
	For sample;

<a class='neo-download-three styleone skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>

<a class='neo-download-three styleone styleone-b skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>

*/
/* Framework */
.neo-download-three{
	text-transform: capitalize;
	font: bold 18px arial, helvetica, sans-serif;
	float: left;	
	color:#ffffff;
	padding:10px 0;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-ms-border-radius:10px;
	}
.neo-download-three,
.neo-download-three:link,
.neo-download-three:visited{
	text-decoration: none;
	}
.neo-download-three:focus{
	outline: none;
	box-shadow:1px 1px 1px #548193;
	-moz-box-shadow:1px 1px 1px #548193;
	-webkit-box-shadow:1px 1px 1px #548193;
	-ms-box-shadow:1px 1px 1px #548193;
}
/* End Framework */
/* skybluecolor and silvercolor:hover */
.silvercolor:hover,	
.skybluecolor{
	/* background and gradient */
	background: #1DB3EF;
	background: -webkit-gradient(/* old webkit */
		linear,
		left top,
		left bottom,
		color-stop(0%, #BAEAFE),
		color-stop(40%, #1DB3EF),
		color-stop(40%, #00ABEF),
		color-stop(100%, #0094CF));	
	background: linear-gradient(top,
		#BAEAFE 0%,
		#1DB3EF 40%,
		#00ABEF 40%,
		#0094CF 100%);
	background: -moz-linear-gradient(top,
		#BAEAFE 0%,
		#1DB3EF 40%,
		#00ABEF 40%,
		#0094CF 100%);
	background: -webkit-linear-gradient(top,
		#BAEAFE 0%,
		#1DB3EF 40%,
		#00ABEF 40%,
		#0094CF 100%);
	background: -o-linear-gradient(top,
		#BAEAFE 0%,
		#1DB3EF 40%,
		#00ABEF 40%,
		#0094CF 100%);
	background: -ms-linear-gradient(top,
		#BAEAFE 0%,
		#1DB3EF 40%,
		#00ABEF 40%,
		#0094CF 100%);
	/* end background and gradient */
	
	text-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	border: 1px solid #5FD1FF;
	}
.silvercolor:hover span.elementone:before,
.skybluecolor span.elementone:before{
	box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	-moz-box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	-webkit-box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	-ms-box-shadow: -1px 0 #0089BF, 0 -1px #0089BF;
	}
.silvercolor:hover span.elementtwo:before,
.skybluecolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	-moz-box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	-webkit-box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	-ms-box-shadow: 0 -1px 0 #0089BF, -1px 0 0 #0089BF;
	}
.silvercolor:hover span.elementtwo:after,	
.silvercolor:hover span.elementtwo:before,
.skybluecolor span.elementtwo:after,	
.skybluecolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #0089BF;
	-moz-box-shadow: 0 -1px 0 #0089BF;
	-webkit-box-shadow: 0 -1px 0 #0089BF;
	-ms-box-shadow: 0 -1px 0 #0089BF;
	}
.silvercolor:hover span.elementtwo,
.skybluecolor span.elementtwo{
	/* background and gradient */
	background: #007DAF;
	background: -webkit-gradient(/* old webkit */
		linear,
		left bottom,
		right bottom,
		color-stop(0%, #007DAF),
		color-stop(100%, #00668F));
	background: linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -moz-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -webkit-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -o-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	background: -ms-linear-gradient(left,
		#007DAF 0%,
		#00668F 100%);
	/* end background and gradient */
	}
.silvercolor:hover span.elementtwo:before,
.skybluecolor span.elementtwo:before{
	border-color: #006C98 #006C98 transparent transparent;
	}

/*
end skybluecolor and silvercolor:hover
*/

/*
silvercolor and skybluecolor:hover
*/
.skybluecolor:hover,
.silvercolor{
	/* background and gradient */
	background: #E0DFE3;
	background: -webkit-gradient(/* old webkit */
		linear,
		left top,
		left bottom,
		color-stop(0%, #efefef),
		color-stop(40%, #BFBFBF),
		color-stop(40%, #b8b8b8),
		color-stop(100%, #909090));			
	background: linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -moz-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -o-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -webkit-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	background: -ms-linear-gradient(top,
		#efefef 0%,
		#BFBFBF 40%,
		#b8b8b8 40%,
		#909090 100%);
	/* end background and gradient */
	border: 1px solid #BFBFBF;
	text-shadow: -1px 0 #828282, 0 -1px #828282;
	}
.skybluecolor:hover span.elementtwo,
.silvercolor span.elementtwo{
	/* background and gradient */
	background: #686767;
	background: -webkit-gradient(/* old webkit */
		linear,
		left bottom,
		right bottom,
		color-stop(0%, #686767),
		color-stop(100%, #5B5959));	
	background: linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -moz-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -o-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -webkit-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	background: -ms-linear-gradient(left,
		#686767 0%,
		#5B5959 100%);
	/* end background and gradient */
	}
.skybluecolor:hover span.elementone:before,
.silvercolor span.elementone:before{
	box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	-moz-box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	-webkit-box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	-ms-box-shadow: -1px 0 0 #828282, 0 -1px 0 #828282;
	}
.skybluecolor:hover span.elementtwo:before,
.silvercolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	-moz-box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	-webkit-box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	-ms-box-shadow: 0 -1px 0 #828282, -1px 0 0 #828282;
	}
.skybluecolor:hover span.elementtwo:after,
.skybluecolor:hover span.elementtwo:before,
.silvercolor span.elementtwo:after,
.silvercolor span.elementtwo:before{
	box-shadow: 0 -1px 0 #828282;
	-moz-box-shadow: 0 -1px 0 #828282;
	-webkit-box-shadow: 0 -1px 0 #828282;
	-ms-box-shadow: 0 -1px 0 #828282;
	}
.skybluecolor:hover span.elementtwo:before,
.silvercolor span.elementtwo:before{
	border-color: #5B5B5B #5B5B5B transparent transparent;
	}
/* end silver color */
.styletwo:hover span.elementtwo:before{
border-color: #fff transparent transparent transparent;
}

/*
.downloadbotton:hover span.elementone:before
.downloadbotton:hover span.elementtwo:after,
*/
.styletwo-b:hover span.elementone:before,
.styleone-b:hover span.elementone:before,
.stylesix:hover span.elementone:before,
.stylefive:hover span.elementone:before,
.stylethree:hover span.elementone:before,
.stylefour:hover span.elementtwo:after,
.stylethree:hover span.elementtwo:after,
.styletwo:hover span.elementtwo:after,
.stylesix:hover span.elementtwo:after,
.stylefive:hover span.elementtwo:after,
.stylefour:hover span.elementtwo:after,
.styletwo-b span.elementone:before,
.styleone-b span.elementone:before,
.stylesix span.elementone:before,
.stylefive span.elementone:before,
.stylethree span.elementone:before,
.stylefour span.elementtwo:after,
.stylethree span.elementtwo:after,
.styletwo span.elementtwo:after,
.stylesix span.elementtwo:after,
.stylefive span.elementtwo:after,
.stylefour span.elementtwo:after{
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-ms-box-shadow: none;
}
.stylesix span,
.stylefive span,
.stylefour span,
.stylethree span,
.styletwo span,
.styleone span{
	display: block;
	padding: 0 20px 0 65px;
	}
.stylesix:hover span.elementtwo,
.stylefive:hover span.elementtwo,
.stylefour:hover span.elementtwo,
.stylethree:hover span.elementtwo,
.styletwo:hover span.elementtwo,
.styleone:hover span.elementtwo,
.stylesix span.elementtwo,
.stylefive span.elementtwo,
.stylefour span.elementtwo,
.stylethree span.elementtwo,
.styletwo span.elementtwo,
.styleone span.elementtwo{
	font-size: 14px;
	font-weight: normal;
	background: transparent;
	}
.stylesix span.elementone:before,
.stylefive span.elementone:before,
.stylefour span.elementone:before,
.styletwo span.elementone:before,
.styleone span.elementone:before{/* to styleone, styletwo, this style for created circle */
	position: relative;
	border: 4px solid #fff;
	content: '';
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -55px;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	}
.stylefour,
.stylefive{
	overflow: hidden;
	}
.styletwo-b span.elementone:before,
.styleone-b span.elementone:before{
	border-color: transparent;
	}
.stylefour span.elementone:before{
	margin: 0 0 0 -66px;
	border: none;
	background: #fff;
	opacity: 0.5;
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	}
.stylesix span.elementone:before,
.stylefive span.elementone:before{
	height: 60px;
	margin: -20px 0 0 -66px;
	border: none;
	background: #fff;
	opacity: 0.5;
	
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	}
.stylesix span.elementone:before{
	margin: -11px 0 0 -66px;
	height: 62px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	}
.stylesix{
	padding-bottom: 0;
	overflow: hidden;
	}
.stylethree span.elementone:before{
	position: relative;
	background: #fff;
	content: '';
	float: left;
	width: 40px;
	height: 40px;
	margin: 0 0 0 -55px;
	opacity: 0.6;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	}
.stylethree-b span.elementone:before{
	background: transparent;
	}
.styleone span.elementtwo:before{
	position: relative;
	z-index: 2;
	content: '';
	width: 10px;
	height: 14px;
	float: left;
	border-width: 16px 16px 16px 16px;
	margin: -10px 0 0 -36px;
	background: #fff;
	}
.styletwo span.elementtwo:before{
	position: relative;
	clear: both;
	content: '';
	width: 0;
	height: 0;
	float: left;
	border-style: solid;
	border-width: 12px 12px 12px 12px;
	margin: -32px 0 0 -43px;
	border-color: #fff transparent transparent;
	}
.stylesix span.elementtwo:after,
.stylefive span.elementtwo:after,
.stylefour span.elementtwo:after,
.stylethree span.elementtwo:after,
.styletwo span.elementtwo:after,
.styleone span.elementtwo:after{/* triangel */
	position: relative;
	clear: both;
	content: '';
	width: 0;
	height: 0;
	float: left;
	border-style: solid;
	border-width: 12px 12px 12px 12px;
	margin: -23px 0 0 -43px;
	border-color: #fff transparent transparent;
	}
.stylethree span.elementtwo:after{
	border-width: 10px 10px 10px 10px;
	margin: -23px 0 0 -45px;
	}
.stylesix span.elementtwo:after,
.stylefive span.elementtwo:after,
.stylefour span.elementtwo:after{
	margin: -26px 0 0 -57px;
	border-top-color: #fff;
	opacity: 0.8;	
	}	
.stylesix span.elementtwo:after{
	margin-top: -34px;
	}
.styleribbon{
	padding: 15px 0 20px 0;
	}
.styleribbon span.elementone{
	display: block;
	padding: 0 20px 0 70px;
	}
.styleribbon span.elementtwo{
	float: left;
	margin: -25px 0 0 -7px;
	font-size: 14px;
	font-weight: normal;
	padding: 5px 5px 5px 5px;
	text-shadow: none;
	clear: both;
	position: relative;
	z-index: 2;
	display: block;
	border-radius: 3px 3px 3px 0;
	-moz-border-radius: 3px 3px 3px 0;
	-webkit-border-radius: 3px 3px 3px 0;
	}
.styleribbon span.elementtwo:before{
	content: '';
	width: 0;
	position: relative;
	z-index: 1;
	height: 0;
	float: left;
	border-style: solid;
	border-width: 3px;
	top: 21px;
	left: -5px;	
	}
/* End */




بعدها عند كتابتك لتدوينة اذهب الى html وأضف احد الاكواد التالية (ملاحظة كل كود من هذه الاكواد له شكل معين جربها بنفسك)



<!-- Start -->
<a class='neo-download-three styleone skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>
<!-- End -->

استبدل 
#1 برابط التحميل
وكلمة download بالاسم الذي ترغب به
وكذلك كلمة free 0.1
أو



<!-- Start -->
<a class='neo-download-three styleone styleone-b skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>
<!-- End -->

أو



<!-- Start -->
<a class='neo-download-three styletwo skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>
<!-- End -->

أو




<!-- Start -->
<a class='neo-download-three styletwo styletwo-b skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>
<!-- End -->

أو



<!-- Start -->
<a class='neo-download-three stylethree skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>
<!-- End -->

أو



<!-- Start -->
<a class='neo-download-three styleribbon skybluecolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 <!-- please using   for space -->Free</span>
</a>
<!-- End -->

أو



<!-- Start -->
<a class='neo-download-three stylefive silvercolor' href='#1'>
	<span class='elementone'>download</span>
	<span class='elementtwo'>0.1 Free</span>
</a>
<!-- End -->

عمر ناصر

عمر 17 عام الجنسية، مصمم و معرب قوالب بلوجر، مهووس ألعاب فيديو و ذو عدة مدونات، لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهى Xxx لكي أساعد كل شخص ولو شيء بسيط.

Newer Post
Older Post

3 تعليقات

XXX © 2014-2018 . صمم بـ ♥ بواسطة XXX . مدعوم بواسطة بلوجر