support palestine banner - support palestine banner

support palestine banner

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

สนับสนุนแบนเนอร์ปาเลสไตน์

ยินดีต้อนรับสู่โครงการสนับสนุน Palestine Banner! พื้นที่เก็บข้อมูลนี้มีสัญลักษณ์มากมายเพื่อช่วยในการแสดงการสนับสนุนปาเลสไตน์บนเว็บ - รวมถึงแบนเนอร์เว็บไซต์แบนเนอร์ ReadMe และป้าย GitHub - ซึ่งสามารถใช้งานได้โดยโครงการ OSS เพื่อแพร่กระจายคำสนับสนุนสาเหตุและช่วยปาเลสไตน์ในสถานการณ์หายนะนี้

สารบัญ

วิธีใช้
ป้ายและแบนเนอร์
ส่วนประกอบแบนเนอร์สำหรับ React, Nextjs 13, Vue (V2 & V3) กับ Tailwind
การติดตั้งแบนเนอร์เว็บไซต์
Banner Custom Web Component
วิธีการมีส่วนร่วม
การแก้ไขปัญหา
ใช้โดย
ใบอนุญาต

วิธีใช้

เพื่อรวมแบนเนอร์สนับสนุนที่แสดงสำหรับการใช้งานในโครงการของคุณเอง-

ค้นหาแบนเนอร์สนับสนุนเฉพาะที่คุณต้องการใช้จากส่วน "ป้ายและแบนเนอร์" ด้านล่าง
คัดลอกและวางรหัส markdown ที่เกี่ยวข้องของแบนเนอร์ที่เลือกลงในไฟล์ readme ของคุณและ/หรือไฟล์ใด ๆ ที่รองรับ markdown ในโครงการของคุณ
หากต้องการรวมแบนเนอร์เว็บไซต์โปรดตรวจสอบให้แน่ใจว่าได้คัดลอกตัวอย่าง HTML จากส่วน "การติดตั้งแบนเนอร์เว็บไซต์" และวางทันทีหลังจากการเปิดแท็ก <body> ของไฟล์ HTML ของโครงการของคุณ
หากคุณต้องการปรับแต่งลิงก์ในแบนเนอร์สนับสนุนเพียงแทนที่ลิงก์ที่มีอยู่ด้วยลิงก์ที่คุณต้องการ
แบนเนอร์ควรแสดงทันทีหลังจากบันทึกการเปลี่ยนแปลง โปรดดูส่วน "การแก้ไขปัญหา" ด้านล่างและ/หรือเข้าถึงหากมีปัญหาใด ๆ เกี่ยวกับการดู

ป้ายและแบนเนอร์

แบนเนอร์ป้าย

 [ ![ StandWithPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md )

แบนเนอร์ readme

 [ ![ ReadMeSupportPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-support.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md )

Readme Banner สำหรับโครงการ

 [ ![ ReadMeSupportPalestine ] ( https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/banner-project.svg )] ( https://github.com/Safouene1/support-palestine-banner/Markdown-pages/Support.md )

ส่วนประกอบแบนเนอร์สำหรับ React, Nextjs 13, Vue (V2 & V3) กับ Tailwind

ตัวอย่างมือถือที่มีโหมดมืด

ตัวอย่างรูปภาพ Mobile Dark Mode

ตัวอย่างเดสก์ท็อปพร้อมโหมดแสง

ตัวอย่างโหมดแสงเดสก์ท็อป

ส่วนประกอบเหล่านี้ออกจากกล่องรองรับ

	คุณสมบัติ
	จาวาสคริปต์
	ตัวพิมพ์ใหญ่
	ส่วนประกอบเซิร์ฟเวอร์
	ตอบสนอง
	ซึ่งปิดได้
	วางตำแหน่งเหนียวหรือสัมพัทธ์

หากคุณไม่ได้ใช้ Tailwind ให้นำเข้าไฟล์ CSS นี้: Banner.css

ส่วนประกอบสามารถพบได้ที่นี่

การติดตั้งแบนเนอร์เว็บไซต์

ใช้ตัวอย่างนี้เพื่อแสดงการสนับสนุนของคุณสำหรับชาวปาเลสไตน์ที่ด้านบนของเว็บไซต์ของคุณ การติดตั้งใช้เวลาไม่กี่นาที

ภาพ

เกี่ยวกับแบนเนอร์เว็บไซต์

รหัสนี้เพิ่มแบนเนอร์สีดำขนาดเล็กที่ด้านบนของเว็บไซต์ของคุณด้วยธงปาเลสไตน์และข้อความสนับสนุน มันเชื่อมโยงไปยังเว็บไซต์บริจาคของอิสลาม-นูน แต่คุณสามารถเปลี่ยนลิงก์เพื่อชี้ไปที่ช่องทางสนับสนุนที่คุณเลือก

ภาพ

แบนเนอร์การติดตั้ง

การติดตั้งเป็นเรื่องง่าย เพียงคัดลอกรหัสนี้ไปยังเทมเพลตของคุณทันทีหลังจากแท็กเปิด <body>

 < style >
  body {
    margin-top: 35px;
  }
  .support-palestine,
  .support-palestine:visited {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 10000;
    text-decoration: none;
    font-family: arial;
  }
  .support-palestine:hover,
  .support-palestine:active {
    background: black;
    display: flex;
    background: rgb(80, 80, 80);
    text-decoration: none;
  }
  .support-palestine__flag {
    margin-right: 10px;
  }

  .support-palestine__label {
    color: white;
    font-size: 12px;
    line-height: 24px;
  }
  .background {
    background: darkgreen;

    height: 21px;
  }
  .top {
    background: black;
    width: 40px;
    height: 8px;
    z-index: 1;
  }
  .middle {
    background: white;
    width: 100%;
    height: 8px;
    z-index: 1;
  }
  .triangle {
    background: auto;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid red;
    z-index: 2;
    position: relative;
    top: -16px;
    left: 0;
  }
</ style >
< a
  class =" support-palestine "
  href =" https://www.islamic-relief.org.uk/giving/appeals/palestine/ "
  target =" _blank "
  rel =" nofollow noopener "
  title =" Donate to support palestine "
>
  < div
    class =" support-palestine__flag "
    role =" img "
    aria-label =" Flag of palestine "
  >
    < div class =" background " >
      < div class =" top " > </ div >
      < div class =" middle " > </ div >
      < div class =" triangle " > </ div >
    </ div >
  </ div >
  < div class =" support-palestine__label " > Donate to support Palestine </ div >
</ a >

Banner Custom Web Component

อ่านเพิ่มเติมเกี่ยวกับองค์ประกอบเว็บที่กำหนดเองที่นี่

วิธีการมีส่วนร่วม

ยินดีต้อนรับโครงการนี้! หากมีสิ่งใดที่คุณต้องการเพิ่มลงในที่เก็บนี้คลิกที่นี่เพื่อหาแนวทางการสนับสนุน

การแก้ไขปัญหา

หากแบนเนอร์ไม่ปรากฏบนเว็บไซต์ของคุณ?
วิธีแก้ปัญหา: ตรวจสอบอีกครั้งและตรวจสอบให้แน่ใจว่าคุณใส่รหัส HTML ที่ต้องการทันทีหลังจากแท็ก <body> เปิด จากนั้นตรวจสอบข้อผิดพลาด CSS ที่ขัดแย้งกันในการจัดแต่งทรงผม

หากข้อความของแบนเนอร์ไม่สามารถอ่านได้?
การแก้ไข: ค้นหารหัส HTML ที่วางและแก้ไขคุณสมบัติ CSS สำหรับสีของข้อความและพื้นหลังเพื่อปรับปรุงความคมชัด