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

 راهنمای قدم به قدم


 ۱- نرم افزار کد ساز وبلاگ رو باز کرده و به بخش ساخت دکمه های گرافیکی برین.

۲- با اعمال تنظیمات مورد نظرتون روی ابزار روی دکمه «کد بساز» کلیک کنید و سپس روی دکمه «کپی کردن کد» کلیک کنید.

توجه کنید که اگه در بخش ساخت کد، تیک گزینه «شیوه نامه را نیز در کد درج کن» رو برداشتین حتما باید قبلش کد های CSS دکمه رو داخل بخش «ویرایش CSS قالب فعلی» سایتتون کپی کرده باشید. در غیر این صورت تیک این گزینه رو برندارید. کد های CSS در انتهای مطلب درج شدن.

در آموزش زیر تیک گزینه مورد نظر برداشته شده.

۳- با استفاده از راهنمای تصویری زیر ، وارد بخش ویرایشگر مطالب بلاگ HTML Code Editor بشین. بلاگ بیان دارای سه نوع ویرایش گر مختلفه که ورود به بخش Code Editor برای هر کدوم متفاوته. (در صورتی که از سیستم وبلاگدهی غیر از Blog.ir استفاده میکنید با مراجعه به راهنمای وبلاگ بخش ویرایشگر خودتون رو پیدا کنید)

  • ۳- الف: ویرایشگر ساده بلاگ بیان (پیش فرض)
    در صورتی که از ویرایشگر پیش فرض بلاگ بیان استفاده میکنین با استفاده از دکمه <> ، بخش ویرایش کد را فعال کنید و بعدش کد دکمه رو اونجا بچسبونین. 
  • ۳- ب: ویرایشگر CK-Editor
    در صورتی که از قسمت تنظیمات مرکز مدیریت بلاگ ویرایشگر خودتونو به ویرایشگر CKEditor تغییر دادین از دکمه «منبع» برای ورود به بخش ویرایش سورس استفاده کنید.
  • ۳- پ: ویرایشگر پیشرفته TinyMCE
    در صورتی که از قسمت تنظیمات مرکز مدیریت بلاگ ویرایشگر خودتونو به ویرایشگر TinyMCE کامل تغییر دادین از دکمه «HTML» برای ورود به بخش ویرایش سورس استفاده کنید. بعد از اون یه پاپ آپ باز میشه که کد ها باید اونجا نوشته بشه.

کد CSS دکمه ها

.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);}