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

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

امام حسین(ع) : بخشنده‌ترین مردم کسی است که به آنکه چشم امید به او نبسته ، بخشش ‌کند.
برای استعلام یا ارسال سفارش اینجا کلیک کنید.
فونت جوپی ام آپلود

بخش دانلود

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

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

موفق باشید.

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

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

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

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 683 بار دسته بندی : آموزش ، آموزش css ، آموزش html دیدگاه : 10 تاريخ : 26 اردیبهشت 1395
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
Avatar

من محمد پورداداش متولد سال ۱۳۶۷ در خدمت شما هستم. طراحی گرافیک و وب مهترین مسئولیت من بوده و است. سعی خواهم کرد بهتر از همیشه در خدمت شما باشم. خوب بودن به حرف نیست به رفتار نیک و عمل پسندیده است.

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

Avatar
علیکاربر سایت
پاسخ
جمعه , 29 مرداد 1395

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

Avatar
محمد پورداداشمدیر سایت
پاسخ
شنبه , 30 مرداد 1395

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

Avatar
علیکاربر سایت
پاسخ
یکشنبه , 21 شهریور 1395

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

Avatar
محمد پورداداشمدیر سایت
پاسخ
سه شنبه , 23 شهریور 1395

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

Avatar
به ملودیکاربر سایت
پاسخ
یکشنبه , 26 اردیبهشت 1395

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

Avatar
محمد پورداداشمدیر سایت
پاسخ
یکشنبه , 26 اردیبهشت 1395

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

Avatar
علیکاربر سایت
پاسخ
یکشنبه , 26 اردیبهشت 1395

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

Avatar
علیکاربر سایت
پاسخ
یکشنبه , 26 اردیبهشت 1395

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

Avatar
محمد پورداداشمدیر سایت
پاسخ
یکشنبه , 26 اردیبهشت 1395

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

Avatar
masoudکاربر سایت
پاسخ
یکشنبه , 26 اردیبهشت 1395

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