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

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

summer-festival-banner

بخش دانلود

فرمت : 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 آپلود شود دقت کنید. دانلود عکس

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

موفق باشید.

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

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

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

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

مصطفی قدیمی هستم متولد 1373 مدیر و موسس شرکت آوینا وب , علاقه مند به راهکار های نوین تجارت الکترونیک و راه اندازی کسب و کار های اینترنتی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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