مرجع بلاگ اسکای

منوی باز شونده از بالا برای وبلاگ

برای گذاشتن منو بسیار زیبایی که در دمو بالا مشاهده میکنید طبق دستوری که در ادامه مطلب ذکر میکنیم عمل کنید:

ادامه مطلب ...

منوی باز شونده منو کشویی کد منو برای وبلاگ منو ی جالب برای وبلاگ منوی زیبا منو بالای صفحه

محمد حسین یکشنبه 20 مرداد 1392 ساعت 20:48

0 نظر

کد پرچم ایران برای وبلاگ

برای گذاشتن پرچمی که در دمو بالا مشاهده میکنید، کد زیر را در جایی از قالب که میخواهید نمایش داده شود قرار دهید:

.flagwave {
    position: absolute;
    
    top: -3px;
    left: -3px;
    
    width: 231px;
    height: 156px;
    
    z-index: 2;

background-image: 
        
        -webkit-gradient(
            linear, 
            0% 30%, 
            50% top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(90%,rgba(255,255,255,.3)), 
            color-stop(100%,rgba(255,255,255,0))),
        
        -webkit-gradient(
            linear, 
            50% 30%, 
            100% top, 
            color-stop(0%,rgba(224,225,225,0)), 
            color-stop(25%,rgba(225,225,225,.3)), 
            color-stop(50%,rgba(224,225,225,0)), 
            color-stop(80%,rgba(224,225,225,.3)), 
            color-stop(100%,rgba(224,225,225,0)));
    
    background-size: 200%;
    background-position: right;
    
    -webkit-animation-name: flagwave;
    -webkit-animation-duration: 14s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes flagwave {
    
        0% {
            background-position: -400px 0px, -400px 0px, -400px 0px,-400px 0px;
        }
    
        100% {
            background-position: 800px 0px, 800px 0px, 800px 0px, 800px 0px;
        }
    }
</style>
<div class="flag">
    <div class="flagwave"></div>
</div>

کد کد پرچم ایران برای وبلاگ کد پرچم یک کد کد پرچم css پرچم ایران

محمد حسین شنبه 19 مرداد 1392 ساعت 22:31

0 نظر

کد لوگو css - کهکشانی

اگه شما هم حوصله طراحی لوگو در فتوشاپ رو ندارید میتونید از کدی که امروز براتون میذارم استفاده کنید.

با این کد لوگو شما به صورت css و بسیار زیبا درست میشه به این صورت که انگار از پشت لوگو یک کهکشان در حال گذشتنه.

این کد رو به دو صورت آماده کردم یکی به صورت استفاده عمومی و دیگری مخصوص کاربرا بلاگ اسکای که به صورت خودکار عنوان وبلاگشون در این کد قرار بگیره.

ادامه مطلب ...

کد لوگو لوگو css کد لوگو زیبا logo زیبا css logo یک کد فول css

محمد حسین شنبه 19 مرداد 1392 ساعت 14:12

0 نظر

کد دکمه فول css

در این پست برای شما کد دکمه های زیبایی را گذاشتم که در موارد مختلفی میتوانید از آنها استفاده کنید. این دکمه ها کاملا از css ساخته شده اند.

ابتدا کد زیر را در head خود قرار دهید :

.container > .button { margin: 0 10px; }

.button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  min-width: 96px;
  line-height: 46px;
  padding: 0 24px;
  font-size: 14px;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px #154c86;
  background-color: #247edd;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #1c65b2 #18589c #18589c;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
}

.button:before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -20%;
  right: -20%;
  border-radius: 50%;
  background: transparent;
  -webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
}

.button:hover { background-color: #1a74d3; }

.button:active {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 -1px #154c86;
  background: #1f71c8;
  border-color: #113f70 #154c86 #1c65b2;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
  background-image: -webkit-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: -moz-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: -o-linear-gradient(top, #1a5da5, #3a8be0);
  background-image: linear-gradient(to bottom, #1a5da5, #3a8be0);
}

.button:active:before {
  top: -50%;
  bottom: -125%;
  left: -15%;
  right: -15%;
  -webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
}

.button-green {
  text-shadow: 0 1px #0d4d09;
  background-color: #1ca913;
  border-color: #147b0e #11640b #11640b;
}

.button-green:hover { background-color: #159b0d; }

.button-green:active {
  text-shadow: 0 -1px #0d4d09;
  background: #189210;
  border-color: #093606 #0d4d09 #147b0e;
  background-image: -webkit-linear-gradient(top, #126d0c, #20c016);
  background-image: -moz-linear-gradient(top, #126d0c, #20c016);
  background-image: -o-linear-gradient(top, #126d0c, #20c016);
  background-image: linear-gradient(to bottom, #126d0c, #20c016);
}

.button-red {
  text-shadow: 0 1px #72100d;
  background-color: #cd1d18;
  border-color: #9f1713 #891310 #891310;
}

.button-red:hover { background-color: #c01511; }

.button-red:active {
  text-shadow: 0 -1px #72100d;
  background: #b61a15;
  border-color: #5b0d0b #72100d #9f1713;
  background-image: -webkit-linear-gradient(top, #921511, #e4201b);
  background-image: -moz-linear-gradient(top, #921511, #e4201b);
  background-image: -o-linear-gradient(top, #921511, #e4201b);
  background-image: linear-gradient(to bottom, #921511, #e4201b);
}
</style>

سپس کد رنگ دلخواه را از ادامه بردارید و در جایی که میخواهید کد نمایش داده شود قرار دهید.

ادامه مطلب ...

کد دکمه فول css کد دکمه زیبا برای وبلاگ دکمه css سی اس اس

محمد حسین پنج‌شنبه 17 مرداد 1392 ساعت 17:36

0 نظر

کد ساعت فول css

تمام کد هایی که برای گذاشتن ساعت در اینترنت پیدا کنید ، همه بصورت فلش درست شده و برای سرعت لود و سئوی سایت ضرر دارد

برای اولین بار در یک کد، ساعت فول css گذاشتم تا در عین زیبایی و شیک بودن برای سئو نیز ضرری ندارد.

دمو این ساعت را در اینجا ببینید : http://jsfiddle.net/mhmk/QgbNB/embedded/result/

برای استفاده، کد زیر را در جایی که میخواهید قرار دهید:

</ul>

</div>

</div> 
		</div>

</div>

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- GENERAL-CLASSES ---------- */

.container {
	height: 228px;
	left: 50%;
	margin: -124px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
}

/* ---------- APP ---------- */

.app {
	text-align: center;
}

.app-title {
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 5px #15181f;
}

.clock {
	background: #1a1d24;
	border-radius: 35px;
	-webkit-box-shadow: 0 8px 0 #15181f;
	box-shadow: 0 8px 0 #15181f;
	height: 200px;
	margin-bottom: 24px;
	position: relative;
	width: 200px;
}

.clock-inner {
	background: #f9f9f9;
	border-radius: 50%;
	height: 160px;
	left: 50%;
	margin: -80px 0 0 -80px;
	position: absolute;
	top: 50%;
	width: 160px;
}

.clock-center,
#clock-seconds,
#clock-minutes,
#clock-hours {
	left: 50%;
	position: absolute;
	top: 50%;
}

.clock-center {
	background: #1a1d24;
	border-radius: 50%;
	height: 12px;
	margin: -6px 0 0 -6px;
	width: 12px;
	z-index: 4;
}

#clock-seconds {
	background: #c40206;
	border-radius: 2px;
	height: 60px;
	margin: -60px 0 0 -1px;
	-webkit-transform-origin: 1px 60px;
	-moz-transform-origin: 1px 60px;
	-ms-transform-origin: 1px 60px;
	-o-transform-origin: 1px 60px;
	transform-origin: 1px 60px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 2px;
  z-index: 3;
}

#clock-minutes {
	background: #aaa;
	border-radius: 4px;
	height: 50px;
	margin: -50px 0 0 -2px;
	-webkit-transform-origin: 2px 50px;
	-moz-transform-origin: 2px 50px;
	-ms-transform-origin: 2px 50px;
	-o-transform-origin: 2px 50px;
	transform-origin: 2px 50px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 4px;
  z-index: 2;
}

#clock-hours {
	background: #1a1d24;
	border-radius: 4px;
	height: 40px;
	margin: -40px 0 0 -2px;
	-webkit-transform-origin: 2px 40px;
	-moz-transform-origin: 2px 40px;
	-ms-transform-origin: 2px 40px;
	-o-transform-origin: 2px 40px;
	transform-origin: 2px 40px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 4px;
  z-index: 1;
}

.clock-numbers {
	color: #888;
	display: block;
	font-size: 16px;
	font-weight: bold;
	height: 120px;
	margin: -60px 0 0 -60px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 120px;
}

.clock-numbers li {
	height: 20px;
	line-height: 20px;
	margin: -10px;
	position: absolute;
	text-align: center;
	width: 20px;
}

.clock-numbers li:nth-child(1) {
	left: 50%;
	top: 0;
}

.clock-numbers li:nth-child(2) {
	right: 0;
	top: 50%;
}

.clock-numbers li:nth-child(3) {
	bottom: 0;
	left: 50%;
}

.clock-numbers li:nth-child(4) {
	left: 0;
	top: 50%;
}
</style>

var clockSeconds = document.getElementById('clock-seconds'),
	clockMinutes = document.getElementById('clock-minutes'),
	clockHours = document.getElementById('clock-hours');

function getTime() {

var date = new Date(),
		seconds = date.getSeconds(),
		minutes = date.getMinutes(),
		hours = date.getHours(),

degSeconds = seconds * 360 / 60,
		degMinutes = (minutes + seconds / 60) * 360 / 60,
		degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
		clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
		clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
	}

setInterval(getTime, 1000);
	getTime();

} ());
</script>

کد ساعت کد ساعت برای وبلاگ ساعت فول css ساعت زیبا برای وبلاگ

محمد حسین پنج‌شنبه 17 مرداد 1392 ساعت 00:46

0 نظر

معرفی mhmk webmaster tools

امروز صفحه ای از وبسایت mhmk را به نام mhmk webmaster tools برای شما آماده کرده و معرفی میکنم.

mhmk webmaster tools در 2 قسمت آموزشی و ابزار با یک طراحی زیبا آماده شده تا کمک زیادی برای وبمستری شما باشد.

در بخش آموزش:

1- مقالات آموزشی برای وبلاگ نویسی .

2- فهرست بیشترین کلماتی که توسط ایرانی ها طی هفته اخیر در گوگل جستجو شده .

3- بعضی کد های مفید جهت استفاده در وبلاگ .

و در بخش ابزار :

1- تست بودن سایت شما در لیست سیاه گوگل

2- تست سرعت لود و حجم سایت

3- ابزار ساخت کد های css3

4- ابزار ساخت کد های html

5- ابزار نمایش نتیجه کد

6- ابزار ساخت بنر های css

7- ابزار ساخت منو

8- ابزار ساخت جعبه دانلود

البته ابزار ها به مرور بیشتر خواهند شد.

لینک ورود به این صفحه در منو موجود است

برای ورود کلیک کنید

webmaster tools mhmk webmaster tools ابزار وبمستر آموزش وبلاگ نویسی

محمد حسین دوشنبه 14 مرداد 1392 ساعت 21:07

0 نظر

منوی بسیار زیبا و ثابت در بالای صفحه

با استفاده از این کد ، می توانید یک منوی بسیار زیبا و ثابت در بالای صفحه را در وبلاگ و سایت خود قرار دهید. این منو از تکنولوژی جی کوئری (jQuery) نیز استفاده می کند.

برای استفاده می بایست شما عنوان لینک و آدرس لینک درون کد این ابزار را جایگزین کنید.

بهتر است کد این ابزار را در این صفحه کپی کنید و با تسلط بیشتری آن را ویرایش کنید.

منوی زیبا منو ثابت منو بالای صفحه جی کوئری jQuery

محمد حسین دوشنبه 14 مرداد 1392 ساعت 20:44

2 نظر

کد ماشین حساب زیبا

ماشین حساب پیشرفته

برای قرار دادن این ماشین حساب زیبا در وبلاگ خود از کد زیر استفاده کنید

ماشین حساب

کد ماشین حساب آنلاین ماشین حساب برای وبلاگ زیبا گرافیکی

محمد حسین پنج‌شنبه 3 مرداد 1392 ساعت 18:12

0 نظر

مرجع بلاگ اسکای

مرجع بلاگ اسکای

محمد حسین مشمول

نظرسنجی

منوی باز شونده از بالا برای وبلاگ

کد پرچم ایران برای وبلاگ

کد لوگو css - کهکشانی

کد دکمه فول css

کد ساعت فول css

معرفی mhmk webmaster tools

منوی بسیار زیبا و ثابت در بالای صفحه

کد ماشین حساب زیبا

محمد حسین مشمول

نظرسنجی

پیوندها

دسته‌ها

ابر برجسب

برگه‌ها

جدیدترین یادداشت‌ها

نویسندگان

بایگانی

جستجو