امروز : پنج شنبه ۳ اسفند ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

بخش دانلود

فرمت : zip حجم : 3 کیلوبایت سازنده : محمد فامو لینک تاپیک مطلب منبع : وبیت

آموزش ساخت باکس اطلاع رسانی کانال تلگرام

 tg-sidebar آموزش ساخت باکس اطلاع رسانی کانال تلگرام

آموزش ساخت باکس اطلاع رسانی کانال تلگرام

آموزش کد نویسی ساخت باکس اطلاع رسانی

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

آموزش ساخت باکس اطلاع رسانی :

اگر از قالب وردپرس استفاده می کنید فایل سایدبار خود را باز کنید (معمولا اسمش sidebar.php هست) و کد های زیر را در محل مناسبی قرار دهید. دقت کنید که در محل مناسب قبل از بسته شدن تگ پایانی سایدربار کد قرار گرفته شود.

<a class="telegram" title="کانال تلگرام ما" href="https://telegram.me/MFamo" target="_blank">
<span class="title_tg">کانال تلگرام ما</span>
<span class="desc_tg">ما را از طریق کانال دنبال کنید.</span>
</a><!-- telegram -->

توجه داشته باشید به جای https://telegram.me/MFamo لینک کانال خود رو درج کنید.

خوب حالا فایل استایل style.css ( در قالب های وردپرس با نام style.css شناخته می شود.) پوسته خود رو باز کرده و کد های css زیر رو درون فایل جایگذاری کنید.

.telegram {
    background: url('images/telegram.png') no-repeat scroll 12px center #5C90D2;
    display: block;
    color: #F2F2F2;
    text-align: center;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 3px;
    clear: both;
    font: bold 11px tahoma;
}
.telegram .title_tg {
    text-align: right;
    text-indent: 5px;
    margin-bottom: 5px;
    display: block;
}
.telegram .desc_tg {
    font: 11px tahoma;
    text-align: right;
    text-indent: 5px;
    opacity:0.7;
    display: block;
}
.telegram:hover{
    color: #fff;
}

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

background:url('images/telegram.png') no-repeat 12px center #5C90D2;

توجه کنید عکس زیر رو دانلود کنید و در پوشه images واقع در پوسته خود کپی کنید. (اگر چنین پوشه ای وجود نداشت پوشه جدید با نام images ایجاد کنید.)

عکس باید با نام telegram.png آپلود شود دقت کنید. دانلود عکس

فایل نهایی را دانلود کنید.

موفق باشید.

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : جهت ورود به تاپیک آموزش و مشکلات این مطلب کلیک کنید.

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 1,172 بار دسته بندی : آموزش ، آموزش css ، آموزش html دیدگاه : ۱۰ تاريخ : ۲۶ اردیبهشت ۱۳۹۵
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما

دیدگاه کاربران تعداد دیدگاه : ۱۰

علیکاربر سایت
پاسخ
جمعه , ۲۹ مرداد ۱۳۹۵

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

مصطفی قدیمی
محمد پورداداشمدیر سایت
پاسخ
شنبه , ۳۰ مرداد ۱۳۹۵

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

علیکاربر سایت
پاسخ
یکشنبه , ۲۱ شهریور ۱۳۹۵

سلام اقا محمد
عیدتون مبارک
همچنان منتظر آموزش برای هدر هستیم ها 🙂

مصطفی قدیمی
محمد پورداداشمدیر سایت
پاسخ
سه شنبه , ۲۳ شهریور ۱۳۹۵

سلام
حتما انجام خواهد شد
موفق باشید

به ملودیکاربر سایت
پاسخ
یکشنبه , ۲۶ اردیبهشت ۱۳۹۵

محمد جان دست گلت درد نکنه عالیه.

مصطفی قدیمی
محمد پورداداشمدیر سایت
پاسخ
یکشنبه , ۲۶ اردیبهشت ۱۳۹۵

ممنون وظیفه است
موفق باشی
یاعلی

علیکاربر سایت
پاسخ
یکشنبه , ۲۶ اردیبهشت ۱۳۹۵

دستتون درد نکنه اینقدر دنبال این بودم حد نداشت.ممنونم

علیکاربر سایت
پاسخ
یکشنبه , ۲۶ اردیبهشت ۱۳۹۵

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

مصطفی قدیمی
محمد پورداداشمدیر سایت
پاسخ
یکشنبه , ۲۶ اردیبهشت ۱۳۹۵

علی عزیز؛
حتما طوری طراحی میشه که مشتری و کاربر پسند کنه
موفق باشید

masoudکاربر سایت
پاسخ
یکشنبه , ۲۶ اردیبهشت ۱۳۹۵

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