بطاقة تغريدة تويتر html css

سلام عليكم ورحمة الله وبركاته و مرحبا بك في مدونة ماتريال ويب
اليوم أقدم لك عزيز متابع ماتريال ويب إضافة بطاقة تغريدة تويتر html css لتمييز تغريدة معينة و وضعها في موقعك أو مدونتك يمكنك إضافة النص تغريدة و كذلك هاشتاغات و إضافة روابط داخل تغريدة لك كامل حرية في إضافة هده بطاقة في مدونتك حيث يمكنك وضعها في قائمة جانبية أو داخل تدويتة ولأن نمر الي معاينة هدا إضافة

معاينة

طريقة إضافة بطاقة تغريدة تويتر html css

توجد طريقتين أولى أن تضيف كود إضافة موجود أسفله من التخطيط عن طريق إضافة أداة html/javascript
أما طريقة التانية وهي بوضع كود أسفله مباشرة في التدوينة من خلال لصق كود بعد ضغط على html

حماية مدونة بلوجر من الزيارات وهمية 

كود إضافة تغريدة تويتر html css

<style>

.dmd{
    display: block;
      box-sizing: border-box;
  
}
@media (max-width: 991px)
.widget-with-posts {
    width: 100%;
}
.najiri{direction: ltr;}

.post {
    padding: 15px;
}

.widget-twitter-inner {
    background: #1da1f2;
    padding: 25px 30px;
}

.widget-meta {
    color: #FFF;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    font-family: "Kanit", sans-serif;
    font-size: 13px;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.widget-meta i {
    margin-right: 10px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.widget-meta {
    color: #FFF;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    font-family: "Kanit", sans-serif;
    font-size: 13px;
    margin: 0;
}



.fa-twitter:before {
    content: "\f099";
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.widget-meta a {
    color: #fff;
    float: right;
    text-transform: none;
    font-style: italic;
    font-family: "Roboto", sans-serif;
}

a, .btn, button {
    text-decoration: none;
    outline: none;
    font-size: 13px;
    -webkit-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
}

a {
    color: #337ab7;
    text-decoration: none;
}



.widget-twitter-inner .tweet-texts {
    color: #fff;
    height: 210px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
}

.widget-twitter-inner .row {
    margin: 0;
}
.post .row {
    margin: 0;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
}

.widget-twitter-inner .tweet-texts p {
    margin: 0;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
p {
    margin: 0 0 10px;
}

.widget-twitter-inner .tweet-texts a {
    font-size: 15px;
    color: #fff;
}

.widget-twitter-inner .timepast {
    text-align: center;
    font-family: "Kanit", sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.75px;
}
.widget-twitter-inner .row {
    margin: 0;
}

</style>



<div class="dmd widget widget-twitter widget-with-posts post" style="position: absolute;">
                <div class="widget-twitter-inner">
                    <h5 class="widget-meta najiri"><i class="fa fa-twitter"></i>Twitter feed <a href="http://twitter.com/mnajiri" rel="nofollow noopener">@mnajiri</a></h5>
                    <div class="row tweet-texts">
                        <p>


طريقة حماية مدونة بلوجر من الزيارات وهمية و ضارة من أجل حماية حسابك أدسنس من إغلاق بإضافة كود لحماية مدونة بلوجر خاصة بك من زيارات وهمية

<a href="https://twitter.com/hashtag/%D9%85%D8%A7%D8%AA%D8%B1%D9%8A%D9%84_%D9%88%D9%8A%D8%A8" rel="nofollow noopener">#ماتريل_ويب</a>
                          

<a href="https://twitter.com/hashtag/%D8%AD%D9%85%D8%A7%D9%8A%D8%A9" rel="nofollow noopener">#حماية</a>

 <a href="https://twitter.com/hashtag/%D8%B2%D9%8A%D8%A7%D8%B1%D8%A7%D8%AA_%D9%88%D9%87%D9%85%D9%8A%D8%A9" rel="nofollow noopener">#زيارات_وهمية</a>
                          
<a href="https://twitter.com/hashtag/%D8%A8%D9%84%D9%88%D8%AC%D8%B1" rel="nofollow noopener">#بلوجر</a>
                          
<a href="https://twitter.com/hashtag/mdwab" rel="nofollow noopener">#mdwab</a>
                  
                  <a href="https://twitter.com/hashtag/protect" rel="nofollow noopener">#protect</a>
                          <a href="https://twitter.com/hashtag/blogger" rel="nofollow noopener">#blogger</a>
                          
 <a href="https://twitter.com/hashtag/fakehits" rel="nofollow noopener">#fakehits</a>
                          
 <a  href="https://mdwab.blogspot.com/2019/12/Protect-Bogger-Fake-Hits-adsense.html">https://mdwab.blogspot.com/2019/12/Protect-Bogger-Fake-Hits-adsense.html</a></p></div></div></div>

غير ما تريد حسب ما يناسبك من النص و الهشتاغات و الروابط

تجدر إشارة إلى أنه يجب توفر أيقونات اذا لم تجده في قالبك ضفه لكي تظهر أيقونة تويتر

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

ادا لم يكون موجود ضعه فوق <body/>

سكريبت العد التنازلي لمدونات بلوجر

وأخير تنتهى تدوينة اليوم مع هده إضافة بسيطة إذا أعجبتك أو لم تعجبك هده تدوينة إعطينا رأيك في تعليقات اسفله سلام عليكم ورحمة الله وبركاته

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام