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

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

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

موفق باشید.

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

اولین نفر باید که به این مطلب امتیاز میدهید

لینک های دانلود

سازنده محمد فامو منبع
وبیت این پست توسط نگارش شده است.

اسم من محمد پورداداش هست و متولد سال 1367 در خدمت شما هستیم . تخصص من طراحی گرافیک و کدنویسی وب است و سعی خواهم کرد بهترین خدمات را به شما وبمستران و گرافیست های عزیز ارائه کنم. به ترس هات غلبه کن تا در زندگی همیشه پیروز باشی.

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 10 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود

  • علی 29 مرداد 1395 پاسخ

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

    • محمد پورداداشمدیر سایت[ در پاسخ به علی ] 30 مرداد 1395 پاسخ

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

      • علی[ در پاسخ به محمد پورداداش ] 21 شهریور 1395 پاسخ

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

        • محمد پورداداشمدیر سایت[ در پاسخ به علی ] 23 شهریور 1395 پاسخ

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

  • به ملودی 26 اردیبهشت 1395 پاسخ

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

    • محمد پورداداشمدیر سایت[ در پاسخ به به ملودی ] 26 اردیبهشت 1395 پاسخ

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

  • علی 26 اردیبهشت 1395 پاسخ

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

    • علی[ در پاسخ به علی ] 26 اردیبهشت 1395 پاسخ

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

      • محمد پورداداشمدیر سایت[ در پاسخ به علی ] 26 اردیبهشت 1395 پاسخ

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

  • masoudعضو سایت 26 اردیبهشت 1395 پاسخ

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

مشاهده نظرات بیشتر

همکاران وبیت