EDITBLOGTEMA

J ika Anda memperhatikan avatar atau gambar penulis yang secara  otomatis terpasang pada halaman blog ini ternyata banyak juga pertanyaan yang menanyakan bagaimana caranya membuat bentuk gambar dalam bingkai bulat? Jawabannya adalah dengan trik CSS. CSS mengatur bagaimana HTML harusnya terlihat secara visual ke layar monitor atau ke hadapan pemirsa. Perhatikan pengaturan styling yang saya buat berikut: img { border :solid;border-color:pink;   border -radius: 50%; } Ya itu dia. Hanya butuh pengaturan di atas yang diletakan di atas tag penutup kode </head> di dalam template HTML blogger Sedangkan HTMLnya adalah sebagai berikut: < img src=" https://1.bp.blogspot.com/-rjQYqDrMJwc/YAbdNt87j0I/AAAAAAAAG2Q/-ztU4n0dYtwh7UVV0hqnlYOlbe3Ao7WmACLcBGAsYHQ/s317/20210119_202134.jpg " alt="Adelina" style="width:200px"> Atau  lebih jelasnya sebagai berikut: See the Pen MWjxadq by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Demikian trik mengatur tampilan

M emasang gambar, avatar atau photo penulis agar ia berada di atas setiap postingan template default blogger soho ternyata sedikit berbeda dengan template contempo dan emporio.  Pada kedua template yang saya sebutkan admin menyertakan kode berikut dan meletakannya di atas kode <data:post.body/> :  <div class='post-header-container container'>  Yang mana hal tersebut harus di hindarkan pada template Soho karena akan merusak tampilan mobilenya, menjadi tidak responsif lagi. Tampilan konten setelah di modifikasi maka gambar avatarnya akan tampil lebih kurang seperti pada gambar yang saya screenshoot berikut: DE MO LANGKAH PERTAMA TAMBAHKAN CSS Tambahkan CSS berikut ke dalam template bagian CSS tepat di atas kode ]]></b:skin>: .post-author-profile-pic-container{background-color:pink;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;} .post-author-profile-pic-container{animation: shake 0s; background-color:#f0f0f0; animation-iteration-count:

Apa manfaatnya gambar profile di tampilkan? Awalnya saya hanya sering buka situs situs luar buat mengasah ketrampilan bahasa Inggris (wajar dong latihan dan membiasakan membaca dalam bahasa Inggris, namanya juga otodidak). Dan iseng iseng buka buka halaman halaman situs yang berbeda, ternyata kebanyakan situs dengan branding besar itu selalu menampilkan photo profile penulis mereka di atas setiap postingan. Adapun, tujuannya menurut saya sih adalah: Memperkenalkan data profile penulis karena jika nama kita di klik akan muncul gambar profile dan data diri penulis secara lengkap contoh By :  Diri Saya Sendiri . Ini penting jika kita lihat manfaatnya pada medsos seperti Facebook, IG, Twitter dll.  Blogger, Worpress juga tidak jauh beda. Sebagai ajang promosi yang efektif secara psikologis, teknis dan praktisi. Contohnya Mas sugeng lebih terkenal daripada halamannya. Namun karena itu halamannya juga di kunjungi oleh pengikutnya. Anda harus tahu semakin ramai profile di kunjungi, semakin ti

Satu satunya template bawaan (template default) blogger yang memiliki fitur ini adalah template terbaru blogger Notable. Itupun agar supaya tampilannya menjadi bulat kita harus mengedit pengaturan CSSnya melalui halaman editor HTML blogger.   Jadi kami merangkumnya menjadi tutorial lengkap agar pembaca mudah menerapkannya ke dalam template blogger lama maupun template blogger terbaru. Perlu kalian ketahui template bawaan blogger itu terbagi dua: Template lama: Simple (sederhana), Dynamic, Awesome (PT.Keren Sekali), Travel (Perjalanan), Picture Window (Jendela), Watermark (Tanda Air), Ethereal dst Template terbaru (rilis tahun 2017): Contempo, Emporio, Soho dan Notable Pentingkah photo profile atau avatar di atas postingan? Tergantung, akan tetapi google lebih menyukai pemilik yang menampilkan jati dirinya dengan jelas, demikian juga dengan pembaca (pengunjung) yang akan menjadi bakal atu calon pelanggan blog. Apakah itu kelak menjadi bisnis atau hanya sekedar blo

Alih alih di bawah setiap postingan atau di sidebar, ini adalah sebuah konten tutorial yang berisikan teknik yang berbeda dalam meletakan photo profile atau avatar kalian di atas setiap postingan blogspot dan ingat: bukan di bawah postingan tapi di atas setiap postingan!. Contohnya pada postingan blog kami ini, diatasnya terpampang gambar atau photo profile saya sebagai penulisnya dan itu otomatis ditampilkan menurut link dari profile saya sendiri, artinya: Jika profile ID blogger saya telah di lengkapi dengan gambar saya sendiri. meletakan photo penulis di atas setiap postingan blog Begitu juga ketika penulis tamu menulis artikel atau konten di blog ini, maka pada bagian atas artikel yang dia tulis akan terpampang photo profile penulis tersebut jika ia telah melengkapi akun atau ID bloggernya dengan photo dirinya, jika dia menggunakan gambar lain (avatar) maka avatarnya tersebutlah yang akan ditampilkan secara otomatis, demikian cara fitur ini bekerja. Dan kebetulan saya menemukan tri

Quality Templates. Ayo cari di Google ada gak tutorial berbahasa Inggris dan Indonesia yang menjelaskan bagaimana cara menampilkan profile penulisnya di atas setiap postingan blog? Yang ada paling di bawah postingan, ya kan. Itupun sudah bawaan blogger. Kecuali wordpress yang kaya dengan addon dan di tulis berbasis php, menempatkan profile penulis di atas setiap postingan itu mudah. cara menampilkan profile penulis di atas setiap postingan blogger Nah pada template terbaru blogger blogspot, hanya template varian Notable yang memiliki fitur penampil photo atau gambar setiap penulisnya di atas setiap postingan blog. Kalau ingin mengedit profile author di atas postingan pada setiap template Notable begini caranya: Cara mengedit bingkai profile yang aslinya persegi menjadi bundar atau bulat seperti konten milik Forbes pada template Notable sebenarnya telah saya tulis tapi baiknya akan saya ulangi: Masuk kepengaturan blogger Pilih Tema Pilih edit HTML Cari kode berikut

P rinsipnya membuat widget itu mudah, kali ini kami ingin berbagi sebuah trik blogger membuat image profile untuk blogger dengan multi-constributors (penulisnya lebih dari satu orang seperti editblogtema). Pokoknya semua rahasia pembuatan template kami akan kami bongkar habis sampai ke akar akarnya kalau bisa sih he he he.. proses pembuatan widget konstributor pada blog RINGAN Pembuatan widget ini tidak terlalu mengorbankan kecepatan blog, selain hanya link link penghubung gambar profile seputaran internal blogger saja, perhatikan saja Pen admin berikut:  See the Pen zYYpPKB by sufyan ( @sufyan33 ) on CodePen . Perhatikan, kodenya hanya HTML dan CSS saja. CSS untuk membuat style seperti ukuran image, border-radius yang membuat bingkai menjadi bulat. Sedangkan HTML untuk menghubungkan dan membentuk image atau gambar profile menjadi tampil sebagai sebuah widget berujud "constributor". Kalian bisa menerapkannya dengan cara: Masuk ke pengaturan blogger Pilih