آموزش قرار دادن کادر جستجو و آیکون شبکه های اجتماعی در کنار هم در position-0

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

ماژول مربوطه را در مدیر ماژول جوملا باز کنید و به برگه Advanced بروید. در این برگه کادری برای Module Class Suffix خواهید یافت. در این کادر می توانید کلاسی به ماژول اختصاص دهید تا بعدا در فایل استیل شیت کلاس را تعریف کنید.

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

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

طریقه تخصیص کلاس به ماژول

ماژول مربوطه را در مدیر ماژول جوملا باز کنید و به برگه Advanced بروید. در این برگه کادری برای Module Class Suffix خواهید یافت. در این کادر می توانید کلاسی به ماژول اختصاص دهید تا بعدا در فایل استیل شیت کلاس را تعریف کنید.

ماژول مربوطه را در مدیر ماژول جوملا باز کنید و به برگه Advanced بروید. در این برگه کادری برای Module Class Suffix خواهید یافت. در این کادر می توانید کلاسی به ماژول اختصاص دهید تا بعدا در فایل استیل شیت کلاس را تعریف کنید.

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

برای هر دوی ماژول های جستجو و شبکه اجتماعی خود یک عبارت مختلف تخصیص دهید. نام کلاس های تخصیص یافته به این دو ماژول یکسان نباشد.

ماژول ها را ذخیره کرده و وب پیج خود را باز کنید. اگر حالا به کد منبع (source code) وب پیج خود نگاه کنید، چیزی شبیه زیر را در صفحه مرورگر پیدا خواهید کرد:

<div class="header-search pull-right">
    <divclass="custom socialicons">
    ...    
    <div class="finder searchbox">
    ...

ویرایش استیل شیت برای سبک بندی نام کلاس جدید

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

.pull-right {width: 40%}
.searchbox {float: right; display: inline; margin-left: 15px;}
.socialicons {float: right; display: inline; margin-left: 15px;padding-top: 10px;}

استایل فوق ابتدا پهنای کلاس pull-right. را ست می کند تا فضای کافی برای این دو ماژول برای قرار گرفتن در کنار هم ایجا شود. ماژول ها بصورت پیش فرض float : right هستند. بنابراین ماژول اول در سمت راست ماژول دوم قرار می گیرد. ترتیب قرار گیری ماژول های جستجو و آیکون شبکه اجتماعی را به طور دلخواه در مدیر ماژول جوملا (Module Manager) تعیین کنید.

ویرایش استیل ماژول ها برای صفحه نمایش کوچک

ممکن است از شیوه ظاهر شدن ماژول ها در نمایشگرهای باریک و موبایل و تبلت راضی نباشید.. می توانید استیل های media@ ایجاد کنید که نمایشگرهای باریک را هدف قرار می دهد. مثلا می خواهید ماژول ها در صفحه نمایشگر باریک بجای راست به سمت چپ شناور شوند:

@media (max-width: 767px) {
    .searchbox {float: left;}
    .socialicons {float: left;}
} 

سفارشی کردن قالب پروتواستار

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

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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