https://erfanwd.blog.ir/ fa https://blog.ir/ Sat, 06 Aug 2016 10:53:21 +0430 https://erfanwd.blog.ir/1395/05/04/header-creator-online <div style="direction:rtl"><script src="http://bayanbox.ir/download/1819069377284381211/jscolor.js"></script><script src="http://bayanbox.ir/download/8513280444449450747/headerSazEncrypted.js"></script><p>ارتفاع هدر : <span style="color: #bfbfbf;">px</span> <input id="headerHeight"></p> <p>رنگ پس زمینه هدر : <input id="headerBgColor" class="jscolor"></p> <p>لینک تصویر پس زمینه : <input id="headerBgImg"></p> <p>تنظیمات تکرار تصویر پس زمینه : <select id="headerbgImgRepeat"><option value="none">پیش فرض</option> <option value="repeat">تکرار شود</option> <option value="no-repeat">تکرار نشود</option> </select></p> <p>تنظیمات سایز تصویر پس زمینه : <select id="headerbgImgCover"><option value="">پیش فرض</option> <option value="cover">پوشش تمام کادر</option> </select></p> <p>محل قرار گیری تصویر پس زمینه : <select id="headerbgImgPosition"><option value="">پیش فرض</option> <option value="center">وسط</option> <option value="right">راست</option> <option value="left">چپ</option> </select></p> <p>میزان گردی گوشه های هدر: <span style="color: #bfbfbf;">px</span> <input id="headerBorderRadius"></p> <p>محل قرار گیری عنوان و توضیح مختصر وبلاگ : <select id="headerTitlePosition"><option value="right">راست</option> <option value="left">چپ</option> <option value="center">وسط</option> </select></p> <p>اندازه فونت عنوان وبلاگ : <span style="color: #bfbfbf;">px</span> <input id="headerTitleFontSize"></p> <p>فونت عنوان وبلاگ : <select id="headerTitleFontFamily"><option value="">پیش فرض</option> <option value="yekan,tahoma">یکان</option> <option value="tahoma">tahoma</option> </select></p> <p>تنظیمات فونت عنوان وبلاگ : <select id="headerTitleFontStyle"><option value="">پیش فرض</option> <option value="bold">bold</option> <option value="normal">normal</option> </select></p> <p>فاصله عنوان و توضیح مختصر وبلاگ از بالای هدر : <span style="color: #bfbfbf;">px</span> <input id="headerPdTop"></p> <p>فاصله عنوان و توضیح مختصر وبلاگ از راست : <span style="color: #bfbfbf;">px</span> <input id="headerPdRight"></p> <p>فاصله عنوان و توضیح مختصر وبلاگ از چپ : <span style="color: #bfbfbf;">px</span> <input id="headerPdLeft"></p> <p>رنگ عنوان وبلاگ : <input id="headerTitleColor" class="jscolor"></p> <p>رنگ توضیح مختصر وبلاگ : <input id="headerDesColor" class="jscolor"></p> <p>اندازه فونت توضیح مختصر وبلاگ : <span style="color: #bfbfbf;">px</span> <input id="headerDesFontSize"></p> <p>فونت توضیح مختصر وبلاگ : <select id="headerDesFontFamily"><option value="">پیش فرض</option> <option value="yekan,tahoma">یکان</option> <option value="tahoma">tahoma</option> </select></p> <p>تنظیمات فونت توضیح مختصر وبلاگ : <select id="headerDesFontStyle"><option value="">پیش فرض</option> <option value="bold">bold</option> <option value="normal">normal</option> </select></p> <p>فاصله عنوان وبلاگ از پایین و بالا : <span style="color: #bfbfbf;">px</span> <input id="headerTitlePaddingT"></p> <p>فاصله توضیح مختصر وبلاگ از پایین و بالا : <span style="color: #bfbfbf;">px</span> <input id="headerDesPaddingT"></p> <p>اندازه خط دور کادر هدر : <span style="color: #bfbfbf;">px</span> <input id="headerBorderSize" value="0"></p> <p>نوع خط کادر دور هدر : <select id="headerBorderStyle"><option value="">نداشته باشد</option> <option value="solid">خط</option> <option value="dashed">خط چین</option> <option value="dotted">نقطه چین</option> <option value="double">دو خطی</option> </select></p> <p>رنگ خط دور کادر هدر : <input id="headerBorderColor" class="jscolor"></p> <p>فاصله هدر از اطراف:</p> <p>فاصله از بالا : <span style="color: #bfbfbf;">px <input id="headerMarginTop" value="0"> فاصله از پایین : <span style="color: #bfbfbf;">px <input id="headerMarginBotton" value="0"> </span></span></p> <p>فاصله از راست : <span style="color: #bfbfbf;">px <input id="headerMarginRight" value="0"> فاصله از چپ : <span style="color: #bfbfbf;">px <input id="headerMarginLeft" value="0"> </span></span></p> <style type="text/css">#headerPreview { width: 90%; padding: 20px; border-top: 4px solid #e5e5e5; background: #fafafa; margin: 10px 0px; Direction: rtl; } #headerCode { width: 90%; height: 100px; overflow: auto; margin: 10px; direction: ltr; background-image: url(http://bayanbox.ir/view/3986601338215813803/textareaback.png); background-position: center; background-repeat: no-repeat; } #buttonMakeCode { border-radius: 2px; cursor: pointer; background: #243238; border: 1px solid #3d5762; color: #fff; padding: 6px 10px; } #buttonMakeCode:hover { background: #3f5b66; }</style> <p style="text-align: center;"><button id="buttonMakeCode" onclick="erfanwd()">پیش نمایش + کد</button></p> <div id="headerPreview"> </div> <p><textarea id="headerCode" onclick="javascript:this.select();"></textarea></p> <p style="border-bottom: 1px solid #dedede;"> </p> <p> </p> <p>+ ویدئوی آموزش استفاده از این ابزار ( حجم : 5.3 مگابایت ) " <a href="http://bayanbox.ir/download/2569294485628449676/HeaderMaker.mp4">دانلود</a> "</p> <div>+ طریقه استفاده : کدی که ابزار در اختیارتون  قرار میده رو کپی کنید و جایگزین کد هدر فعلی قالبتون در قسمت ویرایش ساختار قالب فعلی کنید .</div> <div>+ اگر میخواین عنوان و توضیح مختصر نمایش داده نشه میتونین اندازه فونتشون رو صفر بزنین ...</div></div> Mon, 25 Jul 2016 21:42:08 +0430 https://erfanwd.blog.ir/1395/05/04/header-creator-online#comments عرفـــــ ـــان http://blog.ir/blogs/FZkJSP6Q6Fo/posts/oFgC53nL0KM 67 آموزش تغییر هدر قالب ساخت هدر برای بیان هدر بلاگ بیان هدر ساز آنلاین برای بیان هدر سفارشی برای بلاگ بیان https://erfanwd.blog.ir/1394/11/02/training-change-header-and-background <div style="direction:rtl"><p><a href="//bayanbox.ir/info/44398795195717002/Change-background" target="_blank" spfieldtype="null"><img src="//bayanbox.ir/view/44398795195717002/Change-background.jpg" height="507" width="1000" spfieldtype="null"></a></p> <p>قالب &gt; ویرایش CSS قالب فعلی</p> <p>کد زیر رو به body اضافه کنید ...</p> <p>و داخل پرانتر لینک عکسی که میخواین تو پس زمینه قالبتون قرار بگیره رو بذارید ...</p> <style> code{width:98%;direction:ltr;padding:1%;background: #ededed;border-radius: 4px;font-family:tahoma;font-size: 12px;} .pattern-back {border:2px solid #ededed; width: 19%;} </style> <code>body {<br>background: url(http://bayanbox.ir/view/7755955799473286638/96345.png);<br> }</code> <br><br><div>بهتره از تصاویری استفاده کنین که الگو هستن و تکرار میشن ...<div>ولی اگه خواستین عکسی استفاده کنین که تکرار نشه این کد رو در ادامه کد بالا وارد کنین تا تصویر پس زمینه قالب تکرار نشه ...</div> <div><br></div> <code>body {<br>background: url(http://bayanbox.ir/view/7755955799473286638/96345.png) no-repeat;<br> }</code> </div> <br><div>حالا تغییر تصویر هدر قالب :)</div> <div><br></div> <div>قالب &gt; ویرایش CSS قالب فعلی</div> <div>اینبار این کد رو پیدا کنین header ...</div> <div>البته تو قالبایی که قبلا طراحی کردم اسمش رو گذاشته بودم header-top !</div> <div>اینجا دیگه خودش کد بک گراند رو داره داخلش فقط کافیه شما لینک تصویر داخل پرانتر رو تغییر بدین و لینک عکسی که میخواین تو هدر قرار بگیره رو جایگزین کنید ...</div> <div><br></div> <code>.header {<br>background: url(http://bayanbox.ir/view/5207068158693719412/3826208.png);<br> }</code> <br> <br><div>اینجا یه نکته داره اونم این که اگه عکسی که میخواین تو هدر قرار بدین الگو نیست و تکرار شونده نیست !</div> <div>باید عرضش رو هم اندازه با عرضی که برایِ هدر تعریف شده قرار بدین ...</div> <div>ارتفاعش رو هم همینطور ...</div> <div>اکثر قالب ها عرضِ هدر ۸۰۰ هست و ارتفاعش هم ۲۰۰ ...</div> <div>یعنی ۸۰۰ پیکسل در ۲۰۰ پیکسل ...</div> <div>حالا یا فوتوشاپ یا با هر نرم افزار دیگه ای عرض و ارتفاع تصویرتون به این اندازه ها تغییر بدین بعد عکستون رو آپلود کنین و لینکش رو داخل پرانتز قرار بدین ...</div> <div>اگرم خواستین ارتفاع هدر قالب رو تغییر بدین تا عکس با ارتفاع بیشتری اونجا قرار بدین اندازه کد زیر رو تغییر بدین ...</div> <div><br></div> <code>.header {<br>background: url(http://bayanbox.ir/view/5207068158693719412/3826208.png);<br> height: 200px; /*این ارتفاع هدر هست میتونین به هر اندازه که میخواین تغییرش بدین*/<br> }</code> <br> <br><div>چند نمونه عکس تکرار شونده برایِ پس زمینه و هدر قالب " <a href="http://erfanwd.blog.ir/1394/12/28/tasvir-pas-zamine-ghaleb" target="_blank">کلیکـــ</a> "</div> <style> .ghaleeb{display:none;} </style></div> Fri, 22 Jan 2016 20:25:53 +0330 https://erfanwd.blog.ir/1394/11/02/training-change-header-and-background#comments عرفـــــ ـــان http://blog.ir/blogs/FZkJSP6Q6Fo/posts/-mpMjBvSR7o 84 آموزش آموزش تغییر بک گراند قالب آموزش تغییر هدر قالب هدر هدر قالب پس زمینه پس زمینه قالب کد قالب بیان