خب دیگه برو بچ قالب دوم آماده شده و فایلاشم گذاشتم و به تازگی فهمیدم که نه تنها برچسب های آبی که ساختم خفنه بلکه بهتون کمک میکنه که آهننگ و فیلم هم توی ساید بار بزارید اونم از نوع وایرالش و حتی نظر سنجی خیلی خودم کیف کردم اصن حیف نیست منو تبلیغ نمیکنید نامردا فقط یه چیز بگم اگر این پست اولاش رو خوندید از قسمت آموزش قالب دوم بخونید که خب اول پست یه نقشه پست واستون ساختم که اگه خواستید تیکه تیکه بخونید لاو یو
خب مثل قبلی توضیح نمیدم چون طبیعی هستش که وقتی با نحوه کد های یه قالب بخصوص کار کردی باشی یکم واست ادیت کردن بقیه قالبا سخت باشه و بار قبل مشکل از من بود که خوب توضیح در مورد قالب ندادم پس الان با هم کاملا قالب دوم که اسمشو گذاشتم امام رضا بررسی میکنیم و اینم بگم اسمشو به این دلیل گذاشتم که خب من مشهد رو دوست دارم
برای خواندن هر بخش کلیک کنید یا تپ اگه با گوشی هستید
توضیحات کلی در مورد قالب 2
این قالب بچه ها اول این که خب یک سری چیزاش با بقیه قالبا فرق میکنه و نحوه پست گذاری توشم یکم متفاوت تره . و این که خب قبلا هم گفتم از چندین نوع انیمیشن به اصطلاح Attention seekers استفاده میکنه تا رابط کاربری جذاب تری داشته باشه وقتی که روی دکمه لایک میرید قلب ضربانش بیشتر و تند تر میشه همینطور زنگوله دکمه سابسکرایبم نگاه ها رو به خودش جلب میکنه انیمیشن بخش آخرین نظرات اگر روی یکی از گزینه های بخش آخرین نظرات تپ کنید یا با موس روش برید تصاویر به صورت یک اریگامی باز و از دوباره ساخته میشند صفحات مستقل با کلمه page در سمت راست بالا مشخص شده اند و همینطور بخش نویسنده هر مطلب به صورتی ساخته شده تا فرد هنگام لایک کردن مطلبی به خودشم یه قلب هدیه بده با دیدنش منظورمو بهتر میفهمید . و اما از همه مهم تر بخش برچسب های آبی هستش قبل از این که در مورد نحوه پست گذاشتن در برچسب های آبی بخوام بگم بریم ببینیم اصلا چرا باید همچین بخشی رو داشته باشیم؟!
برچسب های آبی "قالب 2"
آقا به نظرم این بخش خیلی نیازه واسه تمامی بلاگ ها حالا چرا؟ به این خاطر که خب ببنید وقتی ما میخوایم یه پست بی معنی یه به قول معروف چس ناله یه پست کوتاه و یا حتی بلند نامربوط به موضوع اصلی بلاگ بنویسیم خیلی به نظرم کمکمون میکنه اولین مشخصش اینه که جزو پست های اصلی بلاگ یعنی توی صفحه اصلی دیده نمیشه و با یه رنگ خاص در ساید بار دیده میشه و همین به جذابیتش اضاف میکنه و این که از اونجایی که الان بیماری گشادی کل دنیا رو فرا گرفته بخاطر کم بودنشون بیشتر مورد توجه قرار میگیرن و باعث میشه که فردی که وارد وب شما میشه مثل یک استوری کوچولو بهش نگاه کنه البته از نوع متنش که توی وب های بعدی که میسازم هی ارتقاش میدیم
آموزش ادیت هدر -قالب دوم (امام رضا) :
خب خب بریم سراغ آموزش قالب و این که بعدش بتونید ادیتش کنید آماده اید بزنید بریم✊»» |ساعت 2:38 دقیقه بامداد|
خب اول از همه از هدر شروع میکنیم به این تصویر دقت کنید
در تصویر بالا شما هدر رو میبینید که خب از 4 بخش تشکیل شده که از بالا سمت راست به ترتیب میشه :
- بخش شبکه های اجتماعی
- بخش نام وب
- بخش سرچ
- بخش منوی وب
خب بچه ها برای ادیت کردن هر قسمت کافیه که نام هر یک از بخش ها رو در قسمت : قالب » ویرایش CSS قالب فعلی » و در قسمت find کپی پیست کنید تا پس از زدن دکمه find به اون قسمت از قالب میرید تا بتونید ادیتش کنید . و اما توضیحات هر بخش :
بخش شبکه های اجتماعی
خب این بخش که در
و یک چیز دیگه واسه لینک دادن به هر کدوم از این آی ها در بخش قالب » ویرایش ساختار قالب فعلی برید و از قسمت find عبارت لینکدهی به بخش شبکه های اجتماعی رو سرچ کنید اونجا دیگه جلوی هر لینک توضیحات داده شده
اینم توضیحاتشون :
<div class="social"><!--لینکدهی به بخش شبکه های اجتماعی-->
<!--به جای # در لینک زیر آدرس ایمیل خود را وارد کنید-->
<arel="nofollow,noreferrer" href="mailto:#" id="m"><i class="fa fa-envelope-o ic"></i></a>
<!--به جای # در لینک زیر آدرس اینستای خود را وارد کنید منتها بدون @ یعنی اگر آدرس اینستاتون -->
<!--@farhan-->
<!--هستش بنویسید-->
<!--farhan-->
<arel="nofollow,noreferrer" href="www.instagram.com/#" id="i"><i class="fab fa-instagram ic"></i></a>
<!--خب اینم عین اینستاست دیگه فقط آیدی تلتون رو بدون @ بنویسید جای # موفق باشید-->
<arel="nofollow,noreferrer" href="www.telegram.com/#" id="t"><i class="fab fa-telegram ic"></i></a>
<!--لینک گفتینو تون یا چت ناشناستون رو بزارید به جای # یعنی پاکش کنید # رو و بعد لینکتون رو جایگزینش کنید-->
<arel="nofollow,noreferrer" href="#" id="g"><i class="fa fa-signal ic"></i></a>
</div>
بخش نام وب
این بخش رو توضیح بخصوصی نداره فقط این رو بگم که برای این که اسم بلاگتون جذاب بشه از
بخش سرچ
این بخش ؛ بخش جستجو هستش منتها واسه این که دو بار بخش جستجو تو وبتون پدیدار نشه باید به قسمت تنظیمات » تنظیمات ساده برید و از بخش نمایش کادر جستجو عبارت نمایش کادر جستجو در مکان دلخواه رو انتخاب کنید.
بخش منوی وب
بچه ها برای ادیت این بخش همونطور که در چندین پاراگراف قبل گفتم باید برید به بخش قالب » ویرایش CSS قالب فعلی و از قسمت find عبارت بخش منوی وب رو سرچ کنید تا بتونید ادیتش کنید
آموزش بخش گالری تصاویر ( )
بچه ها این بخش قبلا هم بوده منتها فرق این گالری اینه که تصاویر نامتقارن هستند و خب این رو اصلا تو بیان ندیدمش خب توضیح خاصی نداره چون همه میدونن که باید چیکار کنند که تصویر یه بخش از وب تغییر بکنه اما برای این که کارتون ساده تر بشه باز باید به بخش css وب که رفتید این عبارت بخش تعویض عکس های گالری رو توی قسمت find سرچ کنید تا بتونید هر 6 تا تصویر رو اونجا بگذارید . منتها برای این که بدونید ترتیب تصاویر چجوری هستش تصویر پایین رو ببنید. و البته اینم بگم که بچه ها اگر عکسی رو توی این بخش گذاشتید و تکرار شد کافیه زیر همون بخشی که آدرس عکس رو گذاشتید عبارت contain رو به cover تغییر بدید به طور کلی اگر تصویرتون بزرگ تر از این بخش ها هست باید contain باشه ولی اگر کوچک تر باشه باید cover باشه
آموزش ادیت بخش اطلاعات بلاگ : ()
خب بچه ها این بخش همون بخشی هستش که تصویر بلاگ اونجا قرار میگیره تنها دوتا چیز اینجا نیاز به ادیت داره که یکیش انیمیشن دکمه فالو هستش که باید اینو بگم که تنها انیمیشنی هستش که شما میتونید تغییرش بدید چون بقیه انیمیشن ها براساس یه حساب عددی به دست اومدن پس بهتره بقیه رو به هیچ وجه تغییر ندهید که خوشبختانه من هر جا که نباید تغییر میدادید رو توی ایل css گوشزد کردم و اما خب برای تغییر رنگ های این انیمیشن کافیه که این عبارت انیمیشن دکمه فالو رو در قسمت find سرچ کنید و بعدش رنگ ها رو تغییر بدهید. منتها یه چیزی هم بگم پس از این که به اون قسمت رفتید 5 بار این کد رو میبینید :
background:linear-gradient(*deg,#fullcolor,#palecolor )
خب در کد بالا شما باید قسمت full color و قسمت pale color رو تغییر بدهید . که در بهترین و زیبا ترین حالت ممکن بهتره که قسمت full color همونجور که از اسمش پیداست رنگ پر رنگ باشه مثل آبی پر رنگ و در قسمت pale color رنگ کم رنگ مثلا آبی آسمونی تا اون حالت گرادینت جذاب حفظ بشه!.
و اما نکته بعدی که باید بهش توجه کنید اینه که واسه کم نشدن جذابیت دکمه فالو بهتره که به بخش تنظیمات » تنظیمات ساده برید و از قسمت نمایش جعبه دنبال کنندگان عبارت نمایش جعبه دنبال کنندگان در مکان دلخواه رو بزنید.
و البته بچه ها واسه درست شدن دکمه فالو در بخش قالب ویرایش ساختار قالب فعلی برید و این عبارت رو سرچ کنید دکمه فالو و بعدش پرانتز رو کامل پاک کنید و آدرس وب خودتون رو بنویسید : یعنی اول کده اینجوریه :
<p>(*blog_description*)</p> <!--در قسمت پایین کاملا پرانتز را پاک کنید و به جای آن آدرس وب خود را بگذارید--><!--دکمه فالو-->
<a class="follow-button-farhan"rel="nofollow,noreferrer" href="http://blog.ir/panel/-/followed_blogs?follow=()">
حالا مثلا من میخوام آدرس وب خودم که
<p>(*blog_description*)</p> <!--در قسمت پایین کاملا پرانتز را پاک کنید و به جای آن آدرس وب خود را بگذارید--><!--دکمه فالو-->
<a class="follow-button-farhan"rel="nofollow,noreferrer" href="http://blog.ir/panel/-/followed_blogs?follow=grimboy.blog.ir">
و بخش دومی که ممکنه بخواید ادیتش کنید اون تصویر گرد کوچولو هستش خب اون رو میخواستم بزارمش که تصویر وب باشه اما با خودم گفتم واسه انعطاف پذیر تر بودن قالب بهتر که تصویر بتونه تصویری متفاوت هم باشه. خب حالا واسه ادیت این تصویر کافیه این عبارت این تصویر عکسی هست که روی تصویر بلاگ به صورت گرد نمایش داده میشود رو در قسمت find در بخش Css قالبتون سرچ کنید تا به اون قسمت برید و بتونید تصویر رو عوض کنید . اینم تصویر بخش اطلاعات بلاگ :
خب دیگه بچه ها بقیه بخش ها رو دیگه میتونید ادیت کنید و مشکلی نداره اما خب بریم سراغ نحوه پست گذاری در بخش برچسب های آبی
آموزش بخش برچسب های آبی ()
خب قبل از این که بخوام در مورد آموزشش صحبت کنیم بیایم در مورد ادیتش صحبت کنیم و بعدش بریم سراغ آموزش پست گذاری برچسب های آبی.
آموزش ادیت بخش برچسب های آبی
خب بچه ها واسه ادیت این قسمت کافیه که این عبارت بخش برچسب های آبی رو در بخش css قالبتون قسمت find سرچ کنید تا به این بخش برید و بتونید ادیتش کنید .
و اما آموزش پست گذاری برچسب های آبی خب قبل از اون بیایم امکانات این بخش رو بگیم که اصلن چیکارا میکنه !!!
امکانات بخش برچسب های آبی : ()
- خب بچه ها قبلا هم گفتیم که این بخش مناسب هر نوع پست کوتاه یا بلنده که با موضوع بلاگ متفاوته یا مثلا یه چس ناله یا فلانی بیا خصوصی
- یا یه آهنگ که بخواید توی قسمت ساید بار گذاشته بشه یا حتی یه فیلم هستش خب این ایده فک کنم به سوال خیلی هاتون جواب بده که چجوری یه آهنگ رو توی ساید بارم بدون این که بخوام کد بنویسم بزارم زرنگ کی بودم من میبینید با من باشید عشق کنید حالا بچه خوبی باش منم لینک کن
- و این که یه چیزی هم بگم بچه ها در این بخش تصویری نمایان نمیشه یعنی اگر پستی بنویسید که تصویر توش باشه توی ساید بار تصویره نمایش داده نمیشه که تر نزنه به بلاگ اما توی ادامه مطلبش نمایش داده میشه که همین خیلی جذابه (
- و خب یه چیزم بگم که 6 تا مطلب بیشتر در این بخش نمایش داده نمیشه بقیه مطالب میرن به صفحات دیگه .
- و اما خب این بخش یه ادامه مطلب داره که جون سیبیلای اسماعیل سگ سیبیل اگه مطلبتون طولانی شد ازش استفاده کنید و این که تغییر نام برچسب های آبی به مثلا برچسب های زرد و اینا هم آزاده بستگی به تمتون داره.
- خب اینم از این و اما بریم سراغ اصل مطلب یعنی پست گذاری در بخش برچسب های آبی.
آموزش پست گذاری به روش برچسب آبی ()
خب اول از همه ما باید یک بخشی رو در وبمون تعریف کنیم بچه ها در برنامه نویسی تعریف کردن یه جورایی به این معناست که شما بخشی یا دستوری یا حالا هر چیزی رو به سیستم یا حالا اون برنامه بشناسونید حالا ما هم میخوایم بیایم بخش برچسب های آبی رو به پنل مدیریت بیان بشناسونیم چیکار کنیم ؟! میریم به تنظیمات » تنظیمات پیشرفته میریم . به تصاویر زیر دقت کنید. (بچه ها این بخش میتونه خیلی خفن کارتونو تو خیلی از چیزا راه بندازه پس دو دقیقه به آموزشش نگاه کردن چیزی رو ازتون کم نمیکنه!)
خب همونطور که میبینیددر تصویر بالا من به بخش تنظیمات و سپس به بخش تنظیمات پیشرفته رفتم و خب دو بخش رو واسه شما مشخص کردم یه بخش قرمز رنگ و یه بخش آبی رنگ خب شما در این مرحله تیک هر دو رو باید بزنید اما قسمت پس از زدن تیک قسمت آبی رنگ بخشی برای شما باز میشه به تصویر زیر دقت کنید.
همونجور که در تصویر بالا میبینید من پس از زدن تیک قسمت آبی (استفاده از نشانه برای مطلب) یه بخش به اسم نشانه ها واسم باز شد خب اینجا کافیه روی دکمه نشانه جدید بزنید . پس از زدن بر روی دکمه نشانه جدید . بخشی به صورت پاپ آپ برای شما باز میشه به تصویر زیر دقت کنید :
در این بخش دوتا قسمت رو شما باید پر کنید در قسمت نام یک نام دلخواه بنویسید که ما اینجا نوشتیم برچسب های آبی جلو تر میفهمیم که این نام کجا میاد. و اما مهم ترین بخش اینجا شناسه لاتین هستش که 100% باید نام درست نشانه که blue-tasks-farhan هست رو بنویسید توجه داشته باشید که تغییر این نام یا کم یا زیاد نوشتن این نام باعث میشه که بخش برچسب های آبی واسه شما کار نکنه!
خب پس از این کار دکمه ذخیره رو بزنید .
و اما مرحله آخر شناسوندن برچسب های آبی ذخیره کلی هستش که پس از اون ذخیره بالا شما باید بار دیگه ذخیره کنید صفحه رو به تصویر زیر دقت کنید:
خب این مرحله آخره شناسوندن برچسب های آبی به بیان هستش فلش های صورتی مراحل و کارایی که کردیم رو نشون میدن و اون قسمتی که واسه تاکید 100 تا فلش زدم مرحله آخره آقا بعد از اون ذخیره ای که مرحله 3 انجام دادیم این یکی ذخیره رو هم بزنید یادتون نره ها . اگه این رو نزنید توی مرحله پست گذاشتن به مشکل برمیخورید
خب دیگه حالا که برچسب های آبی رو به بیان شناسوندیم بریم برای پست گذاشتن .
آموزش پست گذاری برچسب های آبی :
خب بعد از این که اون 4 مرحله بالا رو انجام دادید حالا وقتشه که بریم پست بگذاریم تصور کنید در یک روز تابستونی گرم فاز چسناله گرفتید و میرید توی پنل بلاگ واسه پست گذاشتن وقتی که واردصفحه انتشار مطالب میشید این رو میبینید :
یه بخش جدید به پنلتون اضاف شده به نام نشانه ها
و در آخر امیدوارم از این قالب خوشتون بیاد و در آخر دوست دارید بازم قالب بسازم ؟ ()
فایل اچ تی ام ال قالب : 
دریافت این فایل باید در بخش قالب »ویرایش ساختار قالب فعلی کپی پیست شود
فایل سی اس اس قالب : دریافت
خب دیگه دوستتون دارم خیلی زیاد به چشماتونم خیلی میاد شر و ور گفتم خدافظ
و نکته بسیار مهم: کپی برداری از کدهای قالب یا ایده برچسب های آبی به هر نحوی ممنوع هستش . با کپی کردن این چیزا نه خودتو شاخ کن نه یه برچسب بزن به پیشونیت و اینم واسه قالب های بعدی بگم از یک سری قالب ها با نام پلاس رایتر میاد بیرون که اون ها ایده های شما یا طرح های شما هست که پس از ساخت آدرس وبتون زیرش میوفته پس یه چند تا طرح داشته باشید