اینفوگرافی تبلیغات فیسبوک

اینفوگرافی تبلیغات در فیسبوک

آمار های بازاریابی فیسبوک در سال 2016

فیسبوک به طور مداوم در حال رشده و حدود 1 ممیز 44 میلیارد کاربر فعال ماهانه داره که  1.25  میلیارد از اون ها با موبایل وصل شدند !!

اون وقت مدیران ایرانی دنبال سایت های غیر ریسپانسیو هستند چون هزینه اش کمتر میشه !!😐 😐 😐 😐

اینم در نظر بگیر که هر ثانیه 20 هزار کاربر فعال داره 😱 😱 و این آمار ها فیسبوک رو جز بزرگ ترین شبکه اجتماعی قرار میده و یک فرصت خیلی خوبی برای بازار یاب

هاست

 

 

ادامه مطلب …

سئو محلی وطراحی سایت واسه اونا

8 نوع از کسب و کار ها که به سئو شدیداا احتیاج دارند , البته همه احتیاج دارندا !!

اولش من بگما این نوشته با تعصب خاص روی سئو نوشته شده ولی من شدیدا به سئو ایمان دارم که برای هر تجارتی جواب میده

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

search-engine-optimization-www.seoworld.ir_

اشتباهات رایج در سئو

اشتباهات رایج در سئو

  استفاده نکردن کلمات کلیدی گوگل

کلمات کلیدی یکی از قواعد مهم در سئو سایت است بطوری که آنقدر از این قاعده استفاده شده که به یک رویه تبدیل شده است! و یه همین دلیل بعضی از وبمستر ها اکراه دارند که از این کلمات استفاده کنند! اما این اشتباه است شما نباید هیچ وقت کلمات کلیدی را فراموش کنید! اشتباه رایج دیگر این است که وبمستر ها می روندد و روی کلمات عمومی که فکر می کنند با آن کلمات کلیدی ترافیک بیشتری بدست می آورند! اما می توانند کار کردن روی تعدادی از کلمات  با رقابت پایین رنکینگ خوبی کسب کنند!

نداشتن عنوان و توضیحات

یکی از اشتباهاتی که مدیران سایت ها مرتکب می شوند این است که  برای هر صفحه خود عنوان منحصر به فرد ندارند.توضیحات  هم باید منحصر به فرد ، بدون پر شدن از کلمه کلیدی و جذاب برای بازدیدگننده سایتباشد. یک توضیح خوب میتواندکلیک خوری سایت  شما را افزایش دهدو اگر محتوای شما با آنچه در توضیحات وعده آن را داده اید مطابق باشد احتمال اینکه مطلبتان بحث و گفتگوی بالای در بر داشته باشد هم زیاد است.

seo

فعالیت در شبکه های اجتماعی

شبکه های اجتماعی از نو آوری های وب3 است که با ورود خود تحول بزرگی در وب ایجادکرد و کسب کارهای کوچک توانستند با ایجاد صقحه در این شبکه ها گاربر های زیادی را جذب کنند اشتباه بزرگی است اگر شما در حداقل یک شبکه اجتماعی فعال نباشید. سیگنالهای خارج شده از این شبکه ها یکی از عوامل افزایش رنک در سئو می باشد. این شبکه ها در بالا رفتن ترافیک سایت نیز موثر می باشد.

 

ثبت نکردن سایت در ابزار وب مستر گوگل و بینگ

ثبت نکردن سایت در گوگلوو بینگ شبیه رانندگی با چشمان بسته است! این کار نفع زیادی  دارد و فرآیند انجام آن به قدری ساده است که حتی تازه کارها هم می توانند آن را انجام دهند. به جای اینکه حدس بزنید چه چیزی درباره سایت شما اشتباه است که ترافیک بالایی از موتورهای جستجوگر دریافت نمیکنید،

 

photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 3

آموزش جاوا اسکریپت 3

در جاوا اسکریپت برای مشخص کردن نمایش اعداد با اعشار مورد نظر از تابع toFixed استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
var x = 9.656;
document.getElementById(“demo”).innerHTML =
x.toFixed(0) + “<br>” +
x.toFixed(2) + “<br>” +
x.toFixed(4) + “<br>” +
x.toFixed(6);
</script>

</body>
</html>

خروجی مثال بالا:

10
9.66
9.6560
9.656000

نکته:این تابع هم عدد را رند می کند هم تعداد رقم اعشار را مشخص می کند.

 

تفاوت تابع toPrecision با toFixed:

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

مثال:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
var x = 9.656;
document.getElementById(“demo”).innerHTML =
x.toPrecision() + “<br>” +
x.toPrecision(2) + “<br>” +
x.toPrecision(4) + “<br>” +
x.toPrecision(6);
</script>

</body>
</html>

خروجی:

9.656
9.7
9.656
9.65600

برای تبدیل اعداد اعشاری به اعداد صحیح بدون آن که اعداد را رند کنیم باید از تابع parseInt استفاده کنیم:

مثال:

<!DOCTYPE html>
<html>
<body>

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML =
parseInt(“10”) + “<br>” +
parseInt(“10.33”) + “<br>” +
parseInt(“10 6”) + “<br>” +
parseInt(“10 years”) + “<br>” +
parseInt(“years 10”);
</script>

</body>
</html>

خروجی:

10
10
10
10
NaN

نکته: خروجی آخرین عدد به خاطر این که به جای عدد رشته وارد شده است NaN است.

 

برای ایجاد یک عدد تصادفی از تابع random در کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.random();
}
</script>

</body>
</html>

در خوجی دکمه ای نمایش داده می شود که با کلیک بر روی آن یک عدد تصادفی بین 0 تا 1 ایجاد می کند.
برای نمایش کوچک ترین عدد بین اعداد از تابع min از کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML =
Math.min(0, 150, 30, 20, -8, -200);
}
</script>

</body>
</html>

خروجی: -200

برای نمایش بزرگ ترین عدد بین اعداد از تابع max از کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML =
Math.max(0, 150, 30, 20, -8, -200);
}
</script>

</body>
</html>

خروجی: 150

برای رند کردن عدد از تابع round در کلاس Math استفاده می کنیم.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.round(4.4);
}
</script>

</body>
</html>

خروجی: 4

نکته:این تابع قسمت اعشار عدد را حذف نمی کند بلکه عدد را رند می کند.
تفاوت تابع ceil با تابع round:

تابع round عدد را فقط رند می کند ولی ceil عدد را رو به بالا رند می کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.ceil(4.4);
}
</script>

</body>
</html>

خروجی: 5

تفاوت تابع floor با تابع ceil:

تابع ceil عدد را رو به بالا رند می کند ولی floor عدد را رو به پایین رند می کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = Math.floor(4.7);
}
</script>

</body>
</html>

خروجی: 4

برای ایجاد یک عدد تصادفی بین 0 تا 10 باید هم از تابع floor استفاده کرد و هم از تابع random.

مثال:

<!DOCTYPE html>
<html>
<body>

<button onclick=”myFunction()”>Try it</button>

<p id=”demo”></p>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML =
Math.floor(Math.random() * 11);
}
</script>

</body>
</html>

خروجی این کد هر بار که بر روی دکمه کلیک کنید تفاوت خواهد کرد.

نکته: برای تعیین محدوده عدد تصادفی باید یک رقم بیشتر از بزرگ ترین عدد وارد شود.(در کد زیر عددی بین 0 تا 10 ایجاد می شود نه 0 تا 11)

 

photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 2

آموزش جاوا اسکریپت 2 :
نمایش متن در پنجره هشدار مرورگر:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

در مثال بالا وقتی صفحه وب شما اجرا می شود حاصل جمع(5+6) را در پنجره هشدار نمایش می دهد.

نکته: می توانید به جای(5+6) هر متنی که دوست دارید نمایش دهید.

حتما متن را بین” ” قرار دهید.
نمایش متن در صفحه با جاوا اسکریپت:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

در مثال بالا حاصل جمع (5+6) را در صفحه نمایش می دهد.

نکته: می توانید به جای(5+6) هر متنی که دوست دارید نمایش دهید.

حتما متن را بین” ” قرار دهید.

در جاوا اسکریپت برای ایجاد متغیر از کلمه var استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Statements</h1>

<p>Statements are separated by semicolons.</p>

<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>

<p id=”demo”></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById(“demo”).innerHTML = z;
</script>

</body>
</html>

در مثال بالا سه متغیر ایجاد شده که مقدار یکی 6 و دیگری 5 است و در متغیر سوم حاصل جمع آن ها حساب می شود و در صفحه نمایش داده می شود.

نکته: در جاوا اسکریپ یک نوع متغیر وجود دارد که مقدار موجود در آن ها نشان می دهد که چه نوعی است.(رشته ای یا عددی)

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Statements</h1>

<p>Statements are separated by semicolons.</p>

<p>The variables x, y, and z are assigned the values 5, 6, and 11:</p>

<p id=”demo”></p>

<script>
var x = “s”;
var y = “s”;
var z = x + y;
document.getElementById(“demo”).innerHTML = z;
</script>

</body>
</html>

در مثال بالا به متغیر ها مقدار رشته داده شده است.

 

در آخر دستورات جاوا اسکریپت استفاده از سمی کالن ; اجباری است.
در جاوا اسکریپت برای دادن اولویت برای حساب کردن می توانید از () استفاده کنید.

یعنی جواب مقادیر زیر متفاوت است:
(5 + 6 )* 10
مساوی 110

5 + 6 * 10
مساوی 65

جاوا اسکریپت به حروف بزرگ و کوچک حساس است.
مثلا:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>

<p>Try change lastName to lastname.</p>

<p id=”demo”></p>

<script>
var lastName = “Doe”;
var lastname = “Peterson”;
document.getElementById(“demo”).innerHTML = lastName;
</script>

</body>
</html>

خروجی مثال بالا Doe است چون ما گفته ایم محتوای lastName را نمایش دهد نه lastname

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

روش اول برای نوشتن comment یک خطی است که از دو عدد/ استفاده می شود.

روش دوم برای نوشتن comment چند خطی است که از /* استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 id=”myH”></h1>
<p id=”myP”></p>

<script>
/*
The code below will change
the heading with id = “myH”
and the paragraph with id = “myp”*/
//in my web page:

document.getElementById(“myH”).innerHTML = “My First Page”;
document.getElementById(“myP”).innerHTML = “My first paragraph.”;
</script>

<p><strong>Note:</strong> The comment block is not executed.</p>

</body>
</html>

 

photo_2016-01-18_02-03-32

آموزش جاوا اسکریپت 1

آموزش جاوا اسکریپت 1

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

که در این روش باید به اشیا  شناسه یا id بدهیم تا مشخص کنیم متن کدام شی تغییر کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id=”demo”>JavaScript can change HTML content.</p>

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

</body>
</html>

در مثال بالا متنی نمایش داده می شود که به تگ <p> آی دی به نام demo داده شده و زمانی که روی دکمه کلیک می شود متتن را تغیید می دهد.

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

در خط بالا یک دکمه ایجاد می شود و در onclick دکمه با کد document.getElementById گفته می شود سندی با آی دی (‘demo’) را زمانی که دکمه فشار داده شد با کد innerHTML محتوای آی دی demo را تغییر بده.

Click Me! متن روی دکمه است.و ‘Hello JavaScript!'” متنی است که به جای محتوای قبلی آی دی demo قرار می گیرد.

جاوا اسکریپت یکی از 3 زبانی است که همه توسعه دهندگان وب باید یاد بگیرند:

1. HTML برای تعریف محتوای صفحات وب

2. CSS برای مشخص کردن طرح صفحات وب

3. JavaScript برنامه نویسی رفتار صفحات وب

خب با نوشتن تگ scriptشروع می کنیم!

نوشتن جاوا اسکریپت در تگ <script>:

می توانید برای منظم نوشتن کد ها جاوا اسکریپت را در تگ <script> بنویسید و هر جا که می خواهید استفاده کنید.

مزایای نوشتن جاوا اسکریپت در تگ <script>:

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

مثال:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

</body>
</html>

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

یعنی در <button type=”button” onclick=”myFunction()”>Try it</button> گفته شده که وقتی روی دکمه کلیک شد function به نام myFunction اجرا شود تا متن موجود در آی دی demo تغییر کند.
شما می توانید تگ <script> را حتی در <body> بنویسید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript in Body</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>

</body>
</html>

نوشتن جاوا اسکریپت به صورت یک فایل جداگانه:

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

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>External JavaScript</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

<p><strong>Note:</strong> myFunction is stored in an external file called “myScript.js”.</p>

<script src=”myScript.js”></script>

</body>
</html>

در مثال بالا از فایل myScript.js کد های جاوا اسکریپت را می خواند.
کد های مربوط به فایل myScript.js:

function myFunction() {
document.getElementById(“demo”).innerHTML=”Paragraph changed.”;
}

 

font-face

چگونه فونت دلخواه خود را داشته باشیم؟

 

 

همیشه انتخاب فونت از مواردی بوده که مدیرهای سایت ها و طراحان اون رو بزحمت انداخته!  فونت عامل تعیین کننده ای در زیبایی سایت هست و همچنین نشون دهنده شخصیت اون سایته!  حالا با سرچ ساده ای در گوگل و گشت و گذاری در سیات های فارسی می فهمیم که فونت های زیبا و متنوعی در صفحات وب بوجود اومده که هر کدوم از اونها نشان دهنده سطح و شخصیت سایت هست!

اما این فونت های متنوع از کجا اومده؟ بهتون می گم با ورود css3 قابلیتی بنام @font-face بوجود اومد که بوسیله اون می شه هر فونتی رو توی صفحه وبتون نمایش بدید! اما چطور ؟ با هم می بینیم!

ساختار اصلی @font-faceبصورت زیر هست!

  1. @font-face {
  2. font-family‘B yekan’;
  3.  url(‘http://ifont.ir/eot/BYekan.eot?#’format(‘eot’),
  4.  url(data:application/octet-stream;base64,) format(‘woff’),
  5.  url(‘http://ifont.ir/svg/byekan.svg’format(‘svg’);
  6. font-weight:normal;
  7. }

font-family در @font-face اسم فونت مورد نظر شما هست که می تونید بطور دلخواه هر اسمی که می خواهید بگذارید روش!

در خطوط پایین تر شما فرمت می بینید و آدرس خود فونت که محل لود شدن اون قرار دادشده! اما منظور از فرمت چیه؟

فرمت استاندارد فرمت ttf هست و به زودی تمامی مرورگر ها از این فرمت پشتیبانی می کنن اما فرمت های اصلی عبارتند از گوگل کروم : ttf و SVG و  فایرفاکس : otf و ttf  و اپرا و سافاری : ttf , otf و SVG و اینترنت اکسپلورر : eot

خب! اما حالا ما یه فونت داریم چطوری اینها رو به این فرمت ها در بیام و لود کنیم؟ کافیه که به سایت  @font-face Kit Generator برید و فونت خودتون رو آپلود کنید و فایلی با این فرمت ها رو دریافت کتید! به همین سادگی!

خوب حالا چطور از این @font-face استفاده کنیم؟ کافیه که هرجا می خواهید این فونت اعمال بشه خصوصیت

 font-family: ‘B yekan’;

رو بنویسید!

امیدوارم این آموزش براتون مفید باشه و نحوه استفاده از این خصوصیت خوب  css رو فراگرفته باشید!

چگونه فونت دلخواه خود را داشته باشیم؟

 

mobile-friendly

طراحی موبایل فرندلی چیست؟

طراحی ریسپانسیو یکی از آخرین تغیرات در دنیای وب است! این تغیر آنقدر بزرگ بوده که شکل سایت ها و حتی الگوریتم های سرچ و جستجو را تغیر داده است! بطوری که اگر سایت شما ریسپانسیو یا موبایل فرندلی باشد رتبه بالاتری نسبت به سایت های دیگر پیدا می کند! دلیل اهمیت ریسپانسیو بودن این است که کاربران وب بیشتر به سمت استفاده از موبایل هاو تبلتها رفته اند! و این خود نشانه ای از تحولاتی است که در آینده باید منتظر به وقوع پیوستنش باشیم!

موبایل فرندلی mobile friendly 

طراحی موبایل فرندلی چیست؟

نحوه نمایش سایت باید به طوری باشد که وقتی کاربر با گوشی موبایل خود به صفحه سایت می آید شکل و ابعاد سایت متناسب با ابعاد نمایگشر موبایل کاربر تغیر کند!  این تعریف در مورد دستگاه های دیگر نظیر تبلت هم صادق است! بطور کلی اندازه سایت باید با اندازه نمایشگر تغیر کند! این طراحی را طراحی ریسپانسیو می گویند! و سایت را که این ویژگی را داشته باشد را سایت موبایل فرندلی می نامند!

 

تاثیر-موبایل-فرندلی-در-سئو-سایت-طراحی-شده

 

اثر موبایل فرندلی در سئو

اگر شما یک فروشگاه اینترنتی یا سایت خبری یا هر نوع سایت دیگری راه اندازی کرده اید! نیاز به مخاطب و بازدیدکننده دارید! پس به دنبال افزایش رتبه خود در جستجوها می روید و به دنبال آن انواع راه ها را برای بهترین کردن سئو سایت خود انجام خواهید داد! یکی از عوامل موثر در سئو سایت های راه اندازی شده همین موبایل فرندلی بودن است! علاوه بر این وقتی سایت شما موبایل فرندلی باشد کاربر احساس خوشایندی از ورود به سایت شما پیدا خواهد کرد! و مطمئن باشید به سرعت از سایت شما خارج نخواهدشد!

در طراحی رسپانسیو سایت باید به این نکته دقت کرد! که رنگ و طراحی اصلی سیات حفظ شود بطور کلی نباید هویت سایت شما با کوچکتر شدن ابعاد تغیری کند!

 

1wanderlust-travel-hero-images-o-800x532

با این سه نکته وب سایت خود را بهتر کنید

با گسترش فضای وب این امکان برای بسیاری فراهم شده تا بتوانند با راه اندازی یک سایت اینترنتی کسب و کار کوچکی راه بیندازند! تا اینجای کار خوب است! ولی بعد از مدتی مدیران این نوع کسب وکارها متوجه می شوند که کابران آن ها شده اند و مثل قبل دیگر مشتری ندارند! یکی از دلایل این ریزش کاربان بروز نبودن سایت است! بله!! کسی که می خواهد کسب و کار پایداری داشته باشد باید خودش را با آخرین تکنولوژی ها و پیشررفت ها وقف بدهد!

امروز می خواهیم بعضی از این نکات را که شاید از دید شما پنهان مانده با هم مرور کنیم! شما می توانید با این سه نکته وب سایت خود را بهتر کنید

 

پس زمینه متحرک!

یکی از ویژگی های زیبا و در عیم حال کاربردی HTML5 پس زمینه متحرک است! این پس زمینه شامل تصاویر متحرکی هستکه وقتی پشت سرهم اجرا می شوند شبیه به یک ویدئو عمل میکنند! البته یکی از نقاط ضعف این تکنولوژی می تواند حجم زیاد آن باشد که باعث می شود تا سرعت بارگذاری صفحه شما کم بشود!

تصاویر و فونتهای بزرگ

 

 با آمدن تکنولوژی مردم کم حوصله شده اند!! آ« ها هیچ وقت چند دقیقه از وقت خود را تلف نمی کنند تا توضیحات شما درباره کسب و کارتان را بشنوند پس سعی کنید! همیشه در کوتاه ترین شکل و با فونت بزرگ و خوانا منظور خود را برسانید!

دکمه شبح

قبلا در مورد این نوع دکمه ها توضیح دادیم!! دکمه های بی رنگی هستند که کاربر را وسوسه می کنند تا بروی آن ها کلیک کند!! این دکمه تقریبا در تمام سایت ها یافت می شوند! دکمه های شبه زیبا هستند و در عین حال کاربردی می توانید استفاده از آن ها را امتحان کنید!این نوع دکمه ها معمولا شکل های مستطیلی و بیضوی دارند! داخلشان توپر بوده و با رفتن موس روی آن ها با رنگی پر می شوند البته می توان عملکرد های مختلفی برایشان در نظر گرفت! بطور معمول در داخل آن یک یا دو کلمه نوشته شده تا کاربر سیات را راهنمایی کند!

simple-ghost-button-css

این سه موردی که امروز مرور کردیم تنها بخش کوچکی از تغیراتی هستند که شما می توانید در سایت خود ایجاد کنید!  خود را بروز نگه دارید تا بتوانید همیشه کسب وکار پر رونقی داشته باشید!!

 

 

fixed-menu-on-scroll

چگونه منوی ثابت بسازیم؟

در این چند وقت  طراحی سایت های تک صفحه و پارالکس اسکورولینگ افزایش یافته است! قبلا دلیل این رواج یافت را گفتیم که عمده ترین آن جذب بازدیدکننده به وبسایت بود!

جز جدایی ناپذیر این نوع طراحی استفاده از منوهای ثابت است! این منو ها با قرارگرفتن در بالای صفحه این امکان را فراهم می آورد تا کاربران بتوانند به راحتی به بخش های مختلف سایت دسترسی داشته باشند!

حالا می خواهیم به این سوال پاسخ دهیم که چگونه منوی ثابت بسازیم؟

بطور مثال وقتی می خواهیم اسکرول کنیم در صفحه منو همراه با اسکورل به پایین بیاید برای اینکار کافی ست تا از کد های جاوااسکریپت کمک بگیریم به این صورت!


jQuery(function($){
$(window).on('scroll',function(){
if ($(window).scrollTop()>90) {
$('.Menu').addClass('Menu-Fix');
}else{
$('.Menu').removeClass('Menu-Fix');
}
})

 خب! حالا باید خود منو را در html بنویسیم

<div class=”Menu”>
<nav>
<ul class=”sf-menu”>
<li><a href=”/”>خانه</a></li>
<li><a href=>طراحی سایت</a></li>
<li><a href=”/Post”>نمونه کارها</a></li>
<li><a href=”/contact”>درباره ما</a></li>
</ul>
</nav>
</div>

و می توانید برای شکل منو هم این کد css را اضافه کنید!!

.Menu-Fix {
background-color: #ffff;
height: 45px;
left: 0;
padding: 3px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

 

حالا شما یک منوی ثابت در صفحه خود دارید!! به اینها اکتفا نکنید! سعی کنید خودتان اینها را توسعه دهید !! از امتحان کردن نترسید! سوالی بود در خدمتیم!