Sizlere Blogger için yeni kodladığım, oldukça sade ve özelleştirilebilir bir eklentiden bahsetmek istiyorum. Apple'ın kurucu ortaklarından olan Steve Jobs'a ait birçok anlamlı söz mevcut. Dilerseniz, aşağıdaki sözü kullanabilir, dilerseniz de istediğiniz bir alıntıyı paylaşabilirsiniz. Öncelikle sitenize Font Awesome yüklemeniz gerekecektir. Ancak merak etmeyin, bu işlem oldukça basittir.

Aşağıdaki adımları sırası ile uygulamanız durumunda, dilediğiniz bölüme ekleme sağlayabilirsiniz. Elbette, ilgili eklenti tamamen responsive, mobil uyumludur. Dilerseniz hemen şimdi ilgili adımlara geçiyor olacağız.

Blogger'da "Steve Jobs Sözleri" Eklentisi Nasıl Yapılır?

1) Öncelikle temanızda aşağıdaki kodu bulun.

</head>

2) Yukarıdaki kodun öncesine aşağıdaki kodu ekleyin.

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

3) Temanızın CSS kısmına aşağıdaki kodları ekleyiniz.

.stevejobs p{padding:50px;background: var(--gray-bg) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkyvqTtULNQorTtmYdGJA6KYXXr2czdbBjHm8gzaIX2ix4eHx37l4rhua3KEwZoDW2sE0JRSahojHtRXrLFAn-UXCq6PSpV0LlprFijd1If_ZternFRpCMrYMyQ6KKOciRW8ocdnkfJj8TbsihN89gSJ5TqG_JKvQxqm7mXV86toZhQleZkqgTG5mG/s16000/steve-jobs.png) no-repeat;background-size: cover;background-position: center center}.stevejobs{font-family: 'Georgia', sans-serif;font-style:italic;text-align:center;width: 100%;max-width:100%;font-size:20px;margin: 50px auto;background-color: var(--widget-bg);box-sizing: border-box;position: relative;color: var(--title-color);line-height: 2.5em;overflow: hidden;border-radius: var(--radius);box-shadow: var(--widget-shadow)}.stevejobs:before {content: '\f10d';font-style:normal!important;font-family: 'Material Icons Round';font-size: 50px;padding:30px;font-weight: bold;color: #C9302C;display: flex;justify-content: center;align-items: center}p.stevej{font-weight:bold;color:#C9302C;font-style:normal!important;padding:30px;font-size:25px;background: var(--widget-bg)!important;}

4) Temanızın dilediğiniz alanına ise aşağıdaki kodları ekleyiniz.

<div class='stevejobs'>
<p>Büyüdüğünüz zaman size içerisinde bulunduğunuz dünyada nasıl yaşamanız gerektiği söylenir, bazı şeyleri çok zorlamamanız, ufak bir aile kurup, arada para biriktirmek suretiyle mutlu bir dünyanın kapılarını açmanız gerektiği öğütlenir. Bu fikirler pek tabii hayatımızı kısıtlamaktan ileriye gidemezler zira tüm dünyanın sizden çok daha zeki olmayan insanların yarattığı bir hayâlden başka bir şey olmadığını gördüğünüz anda işler değişir. Bu dünyayı değiştirmek hepimizin elinde ve bir kez bu değişimi yapmayı öğrendiğiniz zaman artık o eski sizden eser kalmayacaktır.</p>
<p class='stevej'>Steve Jobs</p>
</div>

Örnek bir görüntü aşağıda yer almaktadır.