مژده

به نام خدا.وبلاگ html5 css3 قصد دارد قالب بسازد.لطفا قالب مورد نظر خود را بفرستید تا ما آن را ساخته و برای شما در قسمت قالب ها قرار میدهیم.به دلیل اینکه من بهتر با قالب های بلاگ بیان و بلاگفا راحت تر هستم از پذیرش طرح ها برای دیگر سرویس ها معذوریم.

وبلاگ html5 css3 نرم افزار خود را برای راهنمایی منتشر کرد:

دریافت
حجم: 44 کیلوبایت
توضیحات: راهنمای وبلاگ html5 css3

  • علی رضا آهنی
  • جمعه ۲۲ دی ۹۶

ساخت پخش کننده آهنگ

برای قرار دادن موزیک در سایت یا وبلاگ خود به کمک سیستم ساخت آنلاین کد آهنگ ، می توانید فایل صوتی دلخواه خود را در صفحه سایت یا وبلاگ برای بازدید کنندگان خود پخش کنید. در زیر 2 نوع پلیر آهنگ برای استفاده شما ساخته شده که هر یک ویژگی خاص خود را دارد. این موزیک پلیر قابلیت پخش انواع فایل های صوتی و به تعداد نامحدود را با تکنولوژی HTML5 دارد.

کد جاوا اسکریپت هست و خوب کار میکنه:

<script language="javascript" src="http://1abzaar.ir/abzar/tools/player/?pl=2&amp;start=1&amp;color=رنگ"></script>
<script>listmusic1abzar[0] = {title:"عنوان",url: "لینک"};</script><div style="display:none"><h2><a href="http://www.1abzar.com/abzar/music.php">موزیک پلیر</a></h2></div>

توی قسمت لینک لینک آهنگ رو مینویسید.

توی قسمت رنگ رنگ رو به زبان html مینویسید.

توی قسمت عنوان عنوان آهنگ رو مینویسید.

نکات:

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

  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

روبان برای مطلب ها

کد جاوا اسکریپت نیست و خیلی کاربردی هست.کد:

<div class="wrapper">
       <div class="ribbon-wrapper-green">
<div class="ribbon-green">متن روی روبان</div></div>
محتوای درون باکس
</div>​

<style>
.wrapper {
  background: none repeat scroll 0 0 white;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  height: 300px;
  margin: 32px 32px;
  position: relative;
  width: 300px;
  z-index: 90;
}

.ribbon-wrapper-green {
  height: auto;
  position: absolute;
  right: -38px;
  top: 1px;
  width: auto;
}

.ribbon-green {
  background-color: #bfdc7a;
  background-image: -moz-linear-gradient(center top , #bfdc7a, #8ebf45);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  color: #6a6340;
  font: bold 15px sans-serif;
  left: -5px;
  padding: 7px 0;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  top: 15px;
  transform: rotate(40deg);
  width: 154px;
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​
</style>

دمو:


درباره ی مطلب

این مطلب کم پیدا میشه و مهم وزیبا هست.راستی میتونید فرمان های html راهم درون این باکس درج کنید.خداخافظ!

  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

افکت بزرگ نمایی تصویر

این کد جاوا نیست و خیلی زیباست:

<style>
.imm img{
	margin-top:10px;
	margin-left:10px;
	transition: width 1s , height 1s ;
	-moz-transition: width 1s, height 1s;
	-webkit-transition: width 1s, height 1s;
	-o-transition: width 1s, height 1s;
	width: widthpx;
	height: heightpx;
	box-shadow: 0px 0px 10px black;
	border-radius: 5px; 
	animation:myfirst 0.5s infinite;
	-moz-animation:myfirst 0.5s infinite;
	-webkit-animation:myfirst 0.5s infinite;
}
.imm img:hover{
	box-shadow: 0px 0px 10px black;
	width: width+2px ;
	height: height+2px ;
	box-shadow: 0px 0px 10px black;
	border-radius: 5px; 
}

@keyframes myfirst
{
0%   {box-shadow: 0px 0px 2px;-o-box-shadow: 0px 0px 2px;-ms-box-shadow: 0px 0px 2px;-khtml-box-shadow: 0px 0px 2px;}
50%  {box-shadow: 0px 0px 15px;-o-box-shadow: 0px 0px 15px;-ms-box-shadow: 0px 0px 15px;-khtml-box-shadow: 0px 0px 15px;}
100% {box-shadow: 0px 0px 2px;-o-box-shadow: 0px 0px 2px;-ms-box-shadow: 0px 0px 2px;-khtml-box-shadow: 0px 0px 2px;}
}

@-moz-keyframes myfirst
{
0%   {box-shadow: 0px 0px 2px;-moz-box-shadow: 0px 0px 2px;}
50%  {box-shadow: 0px 0px 15px;-moz-box-shadow: 0px 0px 15px;}
100% {box-shadow: 0px 0px 2px;-moz-box-shadow: 0px 0px 2px;}
}

@-webkit-keyframes myfirst
{
0%   {box-shadow: 0px 0px 2px;-webkit-box-shadow: 0px 0px 2px;}
50%  {box-shadow: 0px 0px 15px;-webkit-box-shadow: 0px 0px 15px;}
100% {box-shadow: 0px 0px 2px;-webkit-box-shadow: 0px 0px 2px;}
}
</style>

<center class="imm">
	<img src="http://" alt="��� ���" />
</center>

مثال:

��� ���
  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

تشخیص عضویت در بیان

همان طور که میدانید رای دادن فقط برای عضای بیان هست.اگه بخواهید این موضوع را گوشزد کنید بایسیتی از کد زیر استفاده کنید:

<div id="aryan_log">کاربر میهمان ؛ به سایت خوش آمدید</div>
<script>
	if (constant.loggedIn == 1) {
		document.getElementById('aryan_log').innerHTML = 'شما در سایت blog.ir عضو هستید و میتوانید رای دهید';
	}
</script>

یه باکس درست کنید بعدشم این کدو توش بنویسید.راستی جاوا اسکریپت هم هست.

  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

دکمه دانلود سبر رنگ

ابتدا این کد را در آخر css خود قرار دهید.(قبل آخرین { )

<style>.button{text-decoration:none;color: #fff;font-weight:bold;padding:12px 20px;font-size:18px;border-radius:10px;background-color:#666666;box-shadow:0 5px 5px #313131,0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);position:relative;border-bottom:1px solid rgba(255,255,255,0.2);display:inline-block;font-family:b nazanin,b koodak,Arial,Helvetica,sans-serif !important;text-shadow:0px -1px 0px rgba(0,0,0,0.2);}.button:hover{box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);color:#fff!important;}.button:active{top:7px;box-shadow:0 2px 0 #393939,0px 4px 4px rgba(0,0,0,0.4),inset 0px 2px 5px rgba(0,0,0,0.2);color: #fff !important;}.shield {border-radius:5px 5px 35px 35px;padding-left:25px;padding-right: 25px;}.criss-cross{border-radius:35px 5px;}.rectangular{border-radius:10px / 35px;}.one-corner{border-radius:5px 5px 35px 5px;padding-right:25px;}.red{background-color:#c34747;box-shadow:0 5px 5px #853232,0 9px 0 #5e2525,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);}.red:hover{box-shadow:0 5px 5px #853232,0 9px 0 #5e2525,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 15px rgba(255,255,255,0.4),inset 0 -2px 9px rgba(0,0,0,0.2);}.red:active{box-shadow: 0 2px 0 #5e2525,0px 4px 4px rgba(0,0,0,0.4),inset 0px 2px 5px rgba(0,0,0,0.2);}.orange {background-color:#c37846;	box-shadow:0 5px 5px #855031,0 9px 0 #5e3a25,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);}.orange:hover{box-shadow:0 5px 5px #855031,0 9px 0 #5e3a25,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 15px rgba(255,255,255,0.4),inset 0 -2px 9px rgba(0,0,0,0.2);}.orange:active {box-shadow:0 2px 0 #5e3a25,0px 4px 4px rgba(0,0,0,0.4),inset 0px 2px 5px rgba(0,0,0,0.2);}.green {background-color: #7fc345;box-shadow:0 5px 5px #508530,0 9px 0 #385e25,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);}.green:hover {box-shadow:0 5px 5px #508530,0 9px 0 #385e25,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 15px rgba(255,255,255,0.4),inset 0 -2px 9px rgba(0,0,0,0.2);}.green:active {box-shadow: 0 2px 0 #385e25,0px 4px 4px rgba(0,0,0,0.4),inset 0px 2px 5px rgba(0,0,0,0.2);}.pink {box-shadow:0 5px 5px #782d54,0 9px 0 #5e254c,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);background-color: #d7298b;}.pink:hover {box-shadow:0 5px 5px #782d54,0 9px 0 #5e254c,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 15px rgba(255,255,255,0.4),inset 0 -2px 9px rgba(0,0,0,0.2);}.pink:active {box-shadow:0 2px 0 #5e254c,0px 4px 4px rgba(0,0,0,0.3),inset 0px 2px 5px rgba(0,0,0,0.2);}.blue {background: #2a8ad8;box-shadow:0 5px 5px #364a8e,0 9px 0 #25325e,0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);}.blue:hover {box-shadow:0 5px 5px #364a8e,0 9px 0 #25325e,0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4),inset 0 -2px 9px rgba(0,0,0,0.2);}.blue:active{box-shadow:0 2px 0 #25325e,0px 4px 4px rgba(0,0,0,0.3),inset 0px 2px 5px rgba(0,0,0,0.2);}.purple{background-color:#8a26d3;box-shadow:0 5px 5px #54307b,0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px rgba(0,0,0,0.2);}.purple:hover {box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);}.purple:active{box-shadow:0 2px 0 #42255e,0px 4px 4px rgba(0,0,0,0.3),inset 0px 2px 5px rgba(0,0,0,0.2);}</style>


بعد هر وقت خواستید لینک بزارید از این کد استفاده کنید:
<a href="http://" class="button green normal">متن مورد نظر</a>
  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

کد خوش آمد گویی

سلام.این کد جاوا اسکریپت هست و باید قبل آخر قالبتون  قرار بگیره.کد:

<style>#support{position:fixed;top:110px;right:0;width:200px; height:126px;}#supporting {background: url("http://bayanbox.ir/id/5496439216747475432?view") no-repeat scroll left center rgba(0, 0, 0, 0);float: right;height: 126px;width: 35px;transition-duration:1s;}#supp {float:right;margin-right:-165px; background:#eaeaea;border:1px solid #bfbfbf;border-left:none;width:165px; height:124px;}#supporting:hover #supp {display:block;margin-right:-166px;}#supporting:hover {padding-right:165px;transition-duration:1s;}#supp a{display:block; width:140px;direction:rtl;text-align:right;background:#e3e3e3;font:bold 11px tahoma;padding:4px 8px 8px 8px;text-shadow:1px 1px 0px rgba(256,256,256,0.3); margin:1px 5px 5px;color:#666;}#supp a:hover {background:#2ea1c0;text-shadow:1px 1px 0px rgba(0,0,0,0.2);color:#fff;}#supp a img {float:left;}</style>
<div id="support">
 <div id="supporting">
  <div id="supp">
    <a href="(*blog_link*)" target="_blank">صفحه اصلی</a>
   <a href="http://">تبادل لینک با ما</a>
   <a href="http://" target="_blank">پروفایل مدیر</a>
   <a href="ymsgr:sendim?your_id">گفت و گو در یاهو</a>
  </div>
 </div>
</div>

لینک هارو هم بلدید دیگه!یا باز باس آموزش بدم؟

  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

قالب مورد علاقه

سلام.لطفا لطفا لطفا لطفا لطفا لطفا لطفا لطفا لطفا لطفا لطفا لطفا قالبی که در بلاگ عمومی هست و شما دوست داریدش روبفرستید.

  • علی رضا آهنی
  • سه شنبه ۲۶ دی ۹۶

توجه توجه

به نام خدا.دوستان بلاگی لطفا باهم به بلاگ پیام دهید که این وبلاگ چرا مارا دق میدهد؟ ۱ سال و چندین ماه است که این بلاگی هیچ فعالیتی ندارد.لطفا بلاگی ها لطفا چون بعد از این اتفاق دگر هیچ قالب جدیدی دربلاگ وجود ندارد و تولید نمیشود.

لینک

  • علی رضا آهنی
  • دوشنبه ۲۵ دی ۹۶

پرش به بالا بدون نیاز به جاوا اسکریپت.

سلام.اگه به آخر لینک وبسایت/وبلاگ خود عبارت زیر را اضافه کنید به بالا میروید:

/#top

مثل:

http://html5-css3.blog.ir/#top

با همین روش میتوانید بدون جاوا اسکریپت به بالا پرش کنید.مثلا این کد:

<a hrfe="http://html5-css3.blog.ir/#top">پرش به بالا</a>

البته دیگه این کد یک جا ثابت هست.جای آدرس وبلاگ آدرس سایت/وبلاگ خود را بنویسید.

پرش

  • علی رضا آهنی
  • دوشنبه ۲۵ دی ۹۶

دکمه آبی

هیچی نداره!

کد:

<style>.clickp {  -moz-border-bottom-colors: none;  -moz-border-left-colors: none;  -moz-border-right-colors: none;  -moz-border-top-colors: none;  background: none repeat scroll 0 0 #3498db;  border-color: -moz-use-text-color -moz-use-text-color #0077aa;  border-image: none;  border-style: none none solid;  border-width: 0 0 2px;  box-shadow: 0 -3px #0077aa inset;  color: white;  cursor: pointer;   font-family: "B Yekan","X Yekan","Yekan","DinarOne",Tahoma,sans-serif;  font-size: 13px;  font-style: normal;  margin-left: 5px;  padding: 5px;  position: relative;  text-align: center;  text-decoration: none;}.clickp:focus {  box-shadow: none;  outline: 0 none;  top: 1px;}</style>
<a class="clickp" href="http://">txt</a>

جای txt متن روی دکمه را بنویسید .

جلوی http:// لینک را بنویسید.

  • علی رضا آهنی
  • دوشنبه ۲۵ دی ۹۶

جعبه دانلود به صورت پیشرفته(بدون جاوا اسکریپت)

سلام.این جعبه دانلود خیلی خفنه!گفتم بزارم دیگه از لینک های ساده استفاده نکنید:

<style>
A { text-decoration: none; }
.p
{

background:tomato;
display: block;
width: 400px;
height: 40px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font:20px b yekan;
direction:rtl;
padding-top:10px;
padding-right:10px;
margin-top:3px;

}
.p:hover
{
background: #5d90ff;
width: 420px;
height: 40px;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
}
.p1
{
background:tomato;
display: block;
width: 400px;
height: 40px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font:20px b yekan;
direction:rtl;
padding-top:10px;
padding-right:10px;
margin-top:3px;

}
.p1:hover
{
background: #5dff74;
width: 420px;
height: 40px;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
}
.p2
{
background:tomato;
display: block;
width: 400px;
height: 40px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font:20px b yekan;
direction:rtl;
padding-top:10px;
padding-right:10px;
margin-top:3px;

}
.p2:hover
{
background: #ff5dad;
width: 420px;
height: 40px;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
}
.p3
{
background:#f37b51;
display: block;
width: 195px;
height: 40px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font:17px b yekan;
direction:rtl;
padding-top:10px;
padding-right:10px;
margin-top:3px;
position:absolute;
margin-left:206px

}
.p3:hover
{
background: #d35dff;
width: 195px;
height: 40px;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
position:absolute;

}
.p4
{
background:#f37b51;
display: block;
width: 195px;
height: 40px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font:13px b yekan;
direction:rtl;
padding-top:10px;
padding-right:10px;
margin-top:3px;
position:absolute;

}
.p4:hover
{
background: #ffcf5d;
width: 195px;
height: 40px;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
position:absolute;

}
</style>
<div class="p"><a href="w">q</a></div>
<div class="p1">e</div>
<div class="p2">r</div>
<div class="p4">t</div> 

اون چهار خط پایانی رو در نظر بگیرید:

<div class="p"><a href="w">q</a></div>
<div class="p1">e</div>
<div class="p2">r</div>
<div class="p4">t</div> 

جای w لینک دانلود و جای q متن رو مینویسید.

جای e فرمت رو مینویسید رو مینویسید.

جای r رمز رو مینویسید.

جای t مینویسید:منبع **** است

دمو:

e
r
t







  • علی رضا آهنی
  • دوشنبه ۲۵ دی ۹۶

حذف عبارت ارسال نظر آزاد است ولی...

سلام.این پیغامه برای کسانی که از دامنه استفاده میکنن خیلی آزار دهندهس!خوب کد زیر رو توی CSS تون بزارید:

.item_success{ border-color: #1A989F; background: #FFFFFF; border-radius: 0; font-size: 14px;} 
.item_success .icon { background-position: right -36px; } 
.item_success a{ color: #088F1B; } 
.item_success a:hover{background-color: #088F1B;color: #FFF;}

باید دقت کنید که این کد باید قبل آخرین { باشه.البته برای بعضی ها جواب نمیده!(نمیدوم چرا!)

  • علی رضا آهنی
  • دوشنبه ۲۵ دی ۹۶
به نام پروردگار زیبایی ها! سلام.این وبلاگ کاملا رایگان برای دادن خدمات وبلاگ نویسی و قالب های سرویس های پارسی بلاگ-پرشین بلاگ-رز بلاگ-بلاگفا*-بلاگ بیان است.
*:این وبلاگ هیچ مصعولیتی در قبال حذف سایت ندارد.