0
Kayıt Ol

Bu şekilde witget nasıl yapılıyor?

5

●

166

  • 22-02-2022, 17:21:58
    #1
    systemkruger
    systemkruger
    Arkadaşlar resimde görülen witget nasıl yapılıyor bilen var mı?


  • 22-02-2022, 17:26:57
    #2
    mucahitergul
    mucahitergul
    Html ve css ile hazırlanmış isterseniz aynı şekilde alıp sitenize koyabilirsiniz. Özel Html bileşeni ile widget olarak eklenmiş.
  • 22-02-2022, 17:46:36
    #3
    systemkruger
    systemkruger
    mucahitergul adlı üyeden alıntı: mesajı görüntüle
    Html ve css ile hazırlanmış isterseniz aynı şekilde alıp sitenize koyabilirsiniz. Özel Html bileşeni ile widget olarak eklenmiş.
    Hocam üzerini tıklayıp “incele” dediğimde yanda ki pencerede bişeyler çıkıyor evet. Ancak ordakini alıp özelleştir bölümünde ki “özell css ekle” kısmına eklediğimde bu şekilde çalışmıyor.
    rica etsem biraz daha detay verme şansınız var mı?
  • 22-02-2022, 21:47:52
    #4
    mucahitergul
    mucahitergul
    systemkruger adlı üyeden alıntı: mesajı görüntüle
    Hocam üzerini tıklayıp “incele” dediğimde yanda ki pencerede bişeyler çıkıyor evet. Ancak ordakini alıp özelleştir bölümünde ki “özell css ekle” kısmına eklediğimde bu şekilde çalışmıyor.
    rica etsem biraz daha detay verme şansınız var mı?
    Hocam detaylıca yazıyorum yine olmazsa buradan sonrasını ücretli yardımcı olabilirim artık

    Temanızın css dosyası içerisine şu kodları ekleyin :

    .list-panel a,
.qlapse {
    display: block;
    position: relative;
    padding: 5px 5px 5px 50px;
    background-color: #ebebeb;
    border-radius: 3px;
    margin: 0 auto 10px;
    color: #999;
    font-size: 16px;
    width: 100%;
    text-align: left
}

.list-panel a:hover,
.qlapse:hover {
    background-color: #c5c5c5;
    color: #555;
    cursor: pointer
}

.list-panel a:hover .updated,
.qlapse:hover .updated {
    opacity: 0
}

.list-panel-title {
    font-size: 16px;
    padding-right: 70px
}

.list-panel-number {
    position: absolute;
    padding-top: 30px;
    font-size: 48px;
    font-family: proxima_nova_rgbold, sans-serif;
    top: 0;
    left: 10px;
    color: #fff
}

.list-panel .updated {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #aaa;
    z-index: 2
}

.list-panel p {
    position: relative;
    z-index: 3
}

.list-panel p:last-of-type {
    margin-bottom: 0
}


    Html bileşen olarakta bunu ekleyin :


    <div class="list-panel">
<a href="https://wpmavi.com/blog/blog-acmak.html" target="_blank" rel="noopener" data-wpel-link="internal">
<h4 class="list-panel-title">NEDEN BLOG AÇMALISINIZ</h4><p>Önsöz / Giriş Neden Bir Bloga Sahip Olmalısınız ››</p><span class="list-panel-number">1</span></a><a href="https://wpmavi.com/blog/blog-nasil-acilir.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">ADIM ADIM BLOG NASIL AÇILIR ?</h4><p>Blog nasıl açılır ? Detaylı anlatım ››</p><span class="list-panel-number">2</span></a><a href="https://wpmavi.com/blog/blog-actiktan-sonra-ilk-yapilmasi-gerekenler.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">BLOG AÇTIKTAN SONRA İLK YAPMANIZ GEREKENLER</h4><p>Blog açtıktan sonra ilk yapılması gereken 19 şey ››</p><span class="list-panel-number">3</span></a><a href="https://wpmavi.com/seo/google-da-ust-siralara-cikmak.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">BAŞARILI BİR BLOG YAZARI OLMANIN SIRRI !</h4><p>Google’da Üst Sıralara Çıkmak ve Bir Blogun Başarı Sırrı !  ››</p><span class="list-panel-number">4</span></a></div>



  • 23-02-2022, 00:16:43
    #5
    systemkruger
    systemkruger
    mucahitergul adlı üyeden alıntı: mesajı görüntüle
    Hocam detaylıca yazıyorum yine olmazsa buradan sonrasını ücretli yardımcı olabilirim artık

    Temanızın css dosyası içerisine şu kodları ekleyin :

    .list-panel a,
.qlapse {
    display: block;
    position: relative;
    padding: 5px 5px 5px 50px;
    background-color: #ebebeb;
    border-radius: 3px;
    margin: 0 auto 10px;
    color: #999;
    font-size: 16px;
    width: 100%;
    text-align: left
}

.list-panel a:hover,
.qlapse:hover {
    background-color: #c5c5c5;
    color: #555;
    cursor: pointer
}

.list-panel a:hover .updated,
.qlapse:hover .updated {
    opacity: 0
}

.list-panel-title {
    font-size: 16px;
    padding-right: 70px
}

.list-panel-number {
    position: absolute;
    padding-top: 30px;
    font-size: 48px;
    font-family: proxima_nova_rgbold, sans-serif;
    top: 0;
    left: 10px;
    color: #fff
}

.list-panel .updated {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #aaa;
    z-index: 2
}

.list-panel p {
    position: relative;
    z-index: 3
}

.list-panel p:last-of-type {
    margin-bottom: 0
}


    Html bileşen olarakta bunu ekleyin :


    <div class="list-panel">
<a href="https://wpmavi.com/blog/blog-acmak.html" target="_blank" rel="noopener" data-wpel-link="internal">
<h4 class="list-panel-title">NEDEN BLOG AÇMALISINIZ</h4><p>Önsöz / Giriş Neden Bir Bloga Sahip Olmalısınız ››</p><span class="list-panel-number">1</span></a><a href="https://wpmavi.com/blog/blog-nasil-acilir.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">ADIM ADIM BLOG NASIL AÇILIR ?</h4><p>Blog nasıl açılır ? Detaylı anlatım ››</p><span class="list-panel-number">2</span></a><a href="https://wpmavi.com/blog/blog-actiktan-sonra-ilk-yapilmasi-gerekenler.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">BLOG AÇTIKTAN SONRA İLK YAPMANIZ GEREKENLER</h4><p>Blog açtıktan sonra ilk yapılması gereken 19 şey ››</p><span class="list-panel-number">3</span></a><a href="https://wpmavi.com/seo/google-da-ust-siralara-cikmak.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">BAŞARILI BİR BLOG YAZARI OLMANIN SIRRI !</h4><p>Google’da Üst Sıralara Çıkmak ve Bir Blogun Başarı Sırrı !  ››</p><span class="list-panel-number">4</span></a></div>



    Hay Allah razı olsun hocam çok tşk ediyorum. Sabah ilk işim denemek olacak.
  • 23-02-2022, 00:16:57
    #6
    systemkruger
    systemkruger
    mucahitergul adlı üyeden alıntı: mesajı görüntüle
    Hocam detaylıca yazıyorum yine olmazsa buradan sonrasını ücretli yardımcı olabilirim artık

    Temanızın css dosyası içerisine şu kodları ekleyin :

    .list-panel a,
.qlapse {
    display: block;
    position: relative;
    padding: 5px 5px 5px 50px;
    background-color: #ebebeb;
    border-radius: 3px;
    margin: 0 auto 10px;
    color: #999;
    font-size: 16px;
    width: 100%;
    text-align: left
}

.list-panel a:hover,
.qlapse:hover {
    background-color: #c5c5c5;
    color: #555;
    cursor: pointer
}

.list-panel a:hover .updated,
.qlapse:hover .updated {
    opacity: 0
}

.list-panel-title {
    font-size: 16px;
    padding-right: 70px
}

.list-panel-number {
    position: absolute;
    padding-top: 30px;
    font-size: 48px;
    font-family: proxima_nova_rgbold, sans-serif;
    top: 0;
    left: 10px;
    color: #fff
}

.list-panel .updated {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #aaa;
    z-index: 2
}

.list-panel p {
    position: relative;
    z-index: 3
}

.list-panel p:last-of-type {
    margin-bottom: 0
}


    Html bileşen olarakta bunu ekleyin :


    <div class="list-panel">
<a href="https://wpmavi.com/blog/blog-acmak.html" target="_blank" rel="noopener" data-wpel-link="internal">
<h4 class="list-panel-title">NEDEN BLOG AÇMALISINIZ</h4><p>Önsöz / Giriş Neden Bir Bloga Sahip Olmalısınız ››</p><span class="list-panel-number">1</span></a><a href="https://wpmavi.com/blog/blog-nasil-acilir.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">ADIM ADIM BLOG NASIL AÇILIR ?</h4><p>Blog nasıl açılır ? Detaylı anlatım ››</p><span class="list-panel-number">2</span></a><a href="https://wpmavi.com/blog/blog-actiktan-sonra-ilk-yapilmasi-gerekenler.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">BLOG AÇTIKTAN SONRA İLK YAPMANIZ GEREKENLER</h4><p>Blog açtıktan sonra ilk yapılması gereken 19 şey ››</p><span class="list-panel-number">3</span></a><a href="https://wpmavi.com/seo/google-da-ust-siralara-cikmak.html" target="_blank" rel="noopener" data-wpel-link="internal"><h4 class="list-panel-title">BAŞARILI BİR BLOG YAZARI OLMANIN SIRRI !</h4><p>Google’da Üst Sıralara Çıkmak ve Bir Blogun Başarı Sırrı !  ››</p><span class="list-panel-number">4</span></a></div>



    Hay Allah razı olsun hocam çok tşk ediyorum. Sabah yapacağım hemen.