Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Wednesday, October 30, 2019

- October 30, 2019

Cara Mudah Menambahkan Widget Followers Blog

Widget Followers Blog Blogger

Widget Followers blog merupakan sebuah widget blog blogger yang di sediakan oleh google (blogger), dimana widget tersebut menampilkan profil atau identitas dari pemilik akun google. Pada widget ini mempunyai fitur yang anda bisa sesuaikan letak penempatanya pada situs blog anda sendiri, seperti halnya menambahkan widget pada sidebar blog maupun di footer blog dan lain sebagainya.

Dengan menambahkan widget atau plugin bawaan blogger tersebut tentu akan membuat situs blog anda menjadi mudah berinteraksi dengan pengikut blog atau penggemar blog yang anda kelola, Selain itu juga situs blog anda akan mendapatkan berbagai manfaat.

Apa saja yang dapat di peroleh dengan menambahkan widget followers?.

Manfaat memasang widget followers pada blog blogger

  • Menggunakan fitur ini dapat memberikan kemudahan yaitu dapat memungkinkan pengunjung pada situs blog anda terhubung langsung dengan anda sebagai admin situs blog tersebut.
  • Anda juga akan mendapatkan keuntungan untuk meningkatkan trafik dari hasil penayangan atau kunjungan pada situs blog anda.
  • Jika pengunjung blog anda menyukai konten maka mereka dapat mengikuti atau memfollow blog anda.
  • Dan memperindah tampilan situs blog

Jadi Penggunaan widget followers ini dapat memberikan kontribusi yang lebih bagi situs blog anda, maka pada kesempatan ini saya admin blog ini akan memberikan tips cara mudah menambahkan widget followers di blog blogger dan perhatikan tutorial singkatnya di bawah berikut ini;

Cara Membuat Widget Followers

1. Masuk ke dashboard blogger


2. Lalu pilih menu tata letak


3. Kemudian pilih dan tambahkan gadget


4. Selanjutnya akan muncul pop-up halaman jendela baru
5. Gulir ke bawah dan pilih gadget yang bertuliskan Pengikut


6. Bila anda sudah klik gadget widget nya maka akan muncul lagi pop-up halaman widget followersnya dan langsung saja klik menu tombol "simpan", Untuk lebih jelas penerapan nya perhatikan contoh gambar di bawah seperti berikut ini;


Nah, bagaimana,mudah bukan?? jika anda sudah lakukan seperti yang sudah di jelaskan diatas maka buka atau lihat blog dan lihat hasilnya.

Itulah penjelasan singkat dari tutorial cara mudah membuat ata menambahkan widget followers di blog blogger bila ada kekukarangan dalam penyajian tutorial artikel nya harap dimaklumi, kritik dan saranya silahkan sampaikan pada kolom komentar yang sudah tersedia dibawah artikel ini.

Semoga bisa bermanfaat selamat berkunjung salam blogger...

Friday, October 4, 2019

- October 04, 2019

Cara Membuat Scrollbar di Blog Dengan Mudah

Membuat Scrollbar di Blog

Memperindah scrollbar di blog mempunyai daya tarik tersendiri selain berfungsi sebagai hiasan yang dapat mempercantik tampilan blog anda dengan menambahkan effect-effect ini dapat membuat ciri khas dari blog kita sehingga pengunjung blog dapat menjadi tertarik dengan blog anda.

Membuat scrollbar effect di blog ini juga tidak terlalu sulit dan terbilang sangat mudah selain itu juga anda bisa merubah warna dari effect dengan kode warna yang sudah tersedia di internet, atau kode di bawah sesuai selera masing-masing bila anda berminat memasang nya di blognya.

Jadi untuk menerapkan cara tersebut cukup dengan menggunakan kode HTML ke template blog yang saya akan uraikan lebih detail dibawah beserta dengan tutorialnya anda hanya simak dan salin kode tersebut ke blog nya nanti setelah di paparkan berikut ini.

Cara Membuat Scrollbar di Blog

1. Masuk di Dasbor Blogger 
2. Buka halaman Template lalu pilih menu Tema
3. Klik pada tombol Edit HTML
4. Klik di mana saja di area kode
5. Tekan tombol [Control + F] atau [Command + F] untuk membuka kotak pencarian di sudut kanan atas jendela kode, kemudian tuliskan kode ]]></b:skin>
6. Tekan tombol Enter untuk mencari, jika sudah anda menemukan kode ]]></b:skin> kemudian salin dan tempelkan kode HTML berikut dibawah tepat di atas kode ]]></b:skin>

/* scrollbar effect */
::-webkit-scrollbar {
width:15px; height:7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba( 106, 53, 42 );
background:#FFE5CC;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba( 205, 59, 28 );
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba( 238, 180, 168 );
7. Kemudian Save Template
Keterangan:
Anda bisa ganti #FFE5CC dengan kode warna yang anda inginkan.
Untuk ukuran ganti lebar scrollbar rubah angka yang sudah di beritanda warna merah width:15px; height:7px

Demikian cara membuat scrollbar di blog dengan mudah. semoga bermanfaat dan terimakasih atas kunjungannya. dan bisa anda memberikan komentarnya dibawah postingan ini. mohon dipahami jikalau ada salah eja dari isi artikel singkat nya wasalam salam blogger.

Tuesday, August 20, 2019

- August 20, 2019

Cara Tambah Widget Komentar Terbaru Pada Sidebar

Tambah Widget Komentar Terbaru Pada Sidebar

Para pemilik blog pasti sudah tidak asing lagi dengan widget yang satu ini. Seperti apakah widget yang di maksud? yaitu widget recent comments (widget komentar terbaru), fungsi dari widget ini adalah menampilkan aktivitas komentar terbaru dari pengunjung yang mengomentari postingan artikel pada situs blog dan bisa di tampilkan pada widget sidebar.

Walaupun demikian, masih banyak yang belum tahu bagaimana caranya agar bisa menampilkanya ke sidebar blognya, bagi yang belum tau cara pasang nya maka dalam artikel ini saya akan membagikan beberapa langkah dan cara agar blog anda mempunyai widget recent comments, Caranya mudah hanya menambahkan kode HTML Java script pada template blog.

Berikut adalah Cara Memasang Kode Widget Komentar Terbaru:
1. Masuk ke akun Blogger
2. Pilih menu Tema
3. Lalu Klik Edit HTML
4. Cari kode </head> untuk memudahkan nya tekan CTRL F Bersamaan
5. Lalu salin dan tempelkan kode HTML Java script dibawah tepat diatas kode </head>

<script type='text/javascript'> //<![CDATA[ function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}} //]]> </script>

6. Lalu simpan Tema dan agar bisa tampil widget komentar terbaru ke sidebar blog blogger Anda, langkah selanjutnya adalah pergi ke "Tata Letak " halaman blog Anda lalu "tambahkan gadget " pada bagian sidebar atau yang lain di mana Anda ingin munculkan widget komentar terbaru.

7. Pilih "HTML/JavaScript " pada widget
8. Dan salin kode di bawah ini ke dalam "HTML/JavaScript " widgetnya.

<script>var a_rc = 5; var m_rc = false; var n_rc = true; var o_rc = 100;</script> <script src="https://www.iyaseo.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Catatan:
Ganti url blog yang diberi tanda warna merah dengan url blog milik anda dan anda juga dapat mengubah angka 5 berapa banyak komentar yang harus tampilkan dalam widget komentar terbaru atau sesuaikan setelannya sesuai yang anda inginkan.

9. Langkah terakhir simpan dan muat ulang situsblog Anda. dan lihat apakah widget Komentar terbaru ini bisa berfungsi pada situsblog anda.




Demikian sudah Cara Tambah Widget Komentar Terbaru Pada Sidebar. Jika tidak berhasil silahkan sampaikan di kolom komentar di bawah, ya. Nanti bisa di bantu sampai bisa.

Friday, August 2, 2019

- August 02, 2019

Cara Mudah Membuat Widget Label Posts Keren

label posts blog blogger


Sahabat blogger artikel kali ini saya akan berbagi tentang bagaimana cara membuat widget label post yang keren di sidebar blog blogger. Sebenarnya widget label ini sudah banyak pengguna blogger yang menggunakanya dan juga sudah banyak postingan artikel blog tentang widget label posts, namun saya juga ingin memposting artikel terkait dengan widget label tersebut agar blog ini bisa seperti mereka dan khususnya bisa berada di pencariaan google.

Karena hari ini admin baru sempat memposting artikel disebabkan oleh keterbatasan waktu sebab kebelakangan ini hanya menghabiskan waktu dan aktivitas mengotak-atik template blog ini agar bisa tampilan nya seperti sekarang ini itupun masih ada yang kurang entar kapan-kapan di refisi lagi, dan barulah hari ini saya admin bisa berbagi tentang hal ini kepada sahabat blogger semuanya.

Sebenarnya cara membuat widget label posts keren disidebar blog sangatlah mudah, semudah pada saat membuat popular post di blog yang sempat kemarin saya bahas dalam artikel blog ini. Pada dasarnya widgets label posts ini sudah ada semenjak kita mulai membuat blog blogger(default).

Widgets label posts bisa dibuat dengan menggunakan berbagai macam kode-kode, diantara nya CSS HTML Javascript. Namun untuk pengguna blogger yang belum mengerti cara menerapkan CSS HTML Javascript dan masih tetap memakai atau menggunakan widget label standar blogger.

Dan jika ingin membuat tampilan widget label posts nya lebih keren lagi di blognya, maka sahabat blogger yang masih baru tidak perlu khawatir karena masih banyak jalan untuk belajar dan solusinya di bawah ini adalah salah satu cara membuat widgets label posts yang keren yang nantinya bisa anda terapkan di blog bloggernya.

Berikut Cara Memasang Widget Label Posts di Blog Blogger;


1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.label-size {background:#fff;display:block;float:left;margin:0 4px 4px 0;color:#999;font-size:11px;line-height:1.2;}
.label-size a,.label-size span{display:inline-block;color:#666;padding:6px 10px}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;color:#999;}
.label-count:hover {color:#5e94ef;}
.label-size{position:relative;border:0;display:block;float:left;color:#fff;font-size:12px;margin:0 4px 4px 0;}
.label-size a{background:#fff;display:inline-block;color:#fff;border-radius:3px;border-bottom: 1px dotted #ddd;}
.label-size a:hover {background:#4267b2;color:#fff}
.label-size a:hover,.label-size span::hover{background:#4aa3df}


Langkah selanjutnya, klik Simpan dan lihat hasilnya.


OK..Nah..bagaimana tertarik bukan? Sebenarnya masih banyak lagi yang keren-keren sahabat blogger bisa nambah ilmunya di searching google disana nantinya bisa anda temukan widget yang lebih keren dari artikel ini,memasang banyak widget di blog juga akan membuat loading blog pun terasa lama dan berat. Oleh karena itu bagi sahabat blogger yang masih baru jika ingin menambah widget di blog blogger saya sarankan agar jangan terlalu berlebihan sama halnya seperti yang sudah admin sampaikan pada pembahasan artikel sebelumnya.

Selamat mencoba dan Semoga tutorial dan Cara Mudah Membuat Widget Label Posts Keren Di Sidebar ini bermanfaat. Salam Bloggers...
- August 02, 2019

Membuat Widget Popular Posts Di Sidebar

Cara Membuat Widget Popular Posts Di Sidebar

Setiap pengguna blogger sudah pasti sering menambah atau mengedit template blognya agar melihat tampilannya lebih keren dan juga lebih profesional dan pada saat untuk menambahkan kode kodenya masih bingung dalam menerapkan nya ke template blognya tersebut.

Misalnya widget yang berada di sidebar yang kurang menarik dengan tampilan yang diinginkan atau widget dari sidebar template tersebut masih belum cukup dan masih perlu atau ada yang ingin di tambahkan.

Artikel kali ini saya akan berbagi tips blog tentang bagaimana cara menambah atau menerapkan widget pada sidebar template blog yaitu widget popular posts yang keren dan profesional. Untuk menambah atau menerapkan widget popular posts ini pada sidebar template blog terbilang sangatlah mudah.

Tips ini juga bisa anda gunakan sebagai referensi untuk menambah tampilan template blognya menjadi lebih enak dipandang ketika ada pembaca dan pengunjung situsblog milik anda yang terdapat pada widget di sidebar.

Di dalam menerapkan widget popular posts ini adalah pada penempatan dari kode CSS yang harus tepat perhatikan langkah dan caranya berikut ini;

Berikut Cara Memasang Widget Popular Posts di Blog Blogger;


1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>
/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}



Berikut ilustrasi dalam gambar contoh penerapan di dalam template Blog di bawah ini;

Membuat Widget Popular Posts Di Sidebar

Membuat Widget Popular Posts Di Sidebar



Langkah selanjutnya, klik Simpan dan lihat hasilnya.

Selamat mencoba dan Semoga tutorial dan Cara Membuat Widget Popular Posts Di Sidebar ini bermanfaat. Salam Bloggers...

Monday, June 24, 2019

- June 24, 2019

Cara Mudah Membuat Widget Headline di Blog

Cara Mudah Membuat Widget Headline di Blog Blogger


Jika Anda tidak sudah terbiasa dengan Model tampilan halaman depan Home atau beranda situsblog nya hanya itu-itu saja maka beralih lah ke tampilan yang lebih keren dan juga lebih profesional, sama halnya dengan widget.

Headline untuk memperindah gaya desain tampilan tema blog dengan berupa foto atau gambar dan text yang dapat dipasang untuk blog blogger Anda. Anggap saja seperti Featured Posts dan Popular Posts yang berada di sidebar Blog Blogger.

Dengan mengembangkan desain template cukup sederhana untuk melakukan satu hal dan melakukannya dengan sangat baik. Headline telah menjadi salah satu widgets yang paling menonjol pada desain template blog yang anda bisa terapkan dengan gaya atau tampilan berfoto grid di halaman pages home blog blogger anda nantinya.

Hal yang paling besar tentang menggunakan atau memasang widgets Headline adalah bahwa itu bukan hanya untuk semata hiasan saja. Konten blog atau Artikel blog bisa muncul dan tampil bersama widgets headline di beranda blog dengan memanfaatkan fitur ini tentunya akan memberikan dampak positif dan baik terhadap blog karena kabar terbaru dalam postingan artikel bisa di tampilkan agar mereka yang mengunjungi situs blog terkesan dalam hati untuk membaca keseluruhan isi konten blog dan bisa berlangganan artikel blog atau mendesain ulang template blog pengunjung dan pembaca.

Pengunjung dan pembaca beraktifitas ke blog akan mempunyai trafik kunjungan yang berjumlah cukup banyak dari pengguna blogger yang aktif lainnya per harinya, dan apa lagi mempunyai postingan terbaru setiap harinya. Itu adalah jumlah yang menguntungkan bagi blog yang menyediakan fitur headline bagi blog Anda untuk membuat dengan menambahkan headline di Blogger sebagai widget.

Anda dapat menerapkan fitur headline untuk kabar terbaru dari situsblog dan memungkinkan pengunjung untuk mengunjungi blog anda membaca artikel di tab perhalamannya.

Dengan mempunyai tampilan unik dan keren untuk widgets blog yang di pasang disekitaran pada template blog blogger Anda akan memberi keunikan tersendiri ke manapun Anda memakai dan di pasang ke template blog miliknya, Anda dapat membuat dan menampilkan gambar grid dengan menerapkan kode CSS/HTML dan memasang kode-kode nya dengan mengedit Edit HTML ke Tema Blog Anda. dari dalam template blog.

Kode CSS widget yang sudah dirancang khusus oleh pengembang desain template blog untuk Widgets Headline di Blogger yang akan menampilkan bentuk desain gambar grid di situsblog Anda. Bahkan pengunjung yang bukan pengguna Blogger dapat memperoleh manfaat dari artikel postingan tersebut.

Kode CSS HTML yang akan saya share dalam artikel postingan ini yaitu cara mudah dan siapapun dapat dengan mudah menggunakannya.

Hanya memasang kode CSS headline pada template blog milik anda dan sangat menarik yang dapat anda terapkan dan disesuaikan dengan design situsblog. Ada beberapa kode CSS HTML yang bisa digunakan di blogger.

 Berikut Cara Memasang kode dengan mengedit Edit HTML template Langkah yang dilakukan:

Masuk ke Dasbor Blogger anda 
Klik Tema > Lalu Edit HTML 
Tambahkan kode Salin (Copy) kode CSS dibawah ini;

#Headline {background:#ececec}
.repost1 {background: #fff;margin:0;padding:0;display: block;border-top:1px solid #fff}
.repost1 h2 {color: #fff;font-size: 16px;margin: 10px 0 0 0;padding: 0;text-transform: uppercase;}
.repost1 .wrapper {display: block;float: left;margin: 10px 20px 20px 0;width: 198px;position: relative;}
.repost1 .wrapper img {height: 130px;width: 100%;}
.repost h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover{color:#0d68b1}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {line-height: normal;color:#fff;text-shadow:none}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover hover{color:#fff}
.repost1 .wrapper .reposth, .repost1 .wrapper .reposth a {display:none;color: #fff;font-size: 12px;text-transform: capitalize;}
.repost1 .wrapper .reposth a:hover {color: #fff;}
.repost1 .wrapper:nth-child(4) {margin-right: 0 !important;}
@media screen and (max-width:603px) {
.repost1 .wrapper {width:31%;}
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width: 480ppx) {
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width:600px) {
.repost1 .wrapper {width: 30.8%;}
}
@media screen and (max-width: 480px) {
.repost1 .wrapper {width:100%;margin:0 0 15px;}
.repost1 .wrapper img { height:auto; }
.repost1 .wrapper .reposth{position:relative;top:-6px;}
}


Kemudian cari kode dibawah  Lalu letakan tepat dibawa kode berikut ini;






</style>
<b:if cond='data:view.isHomepage'>
<style>

Contoh dalam bentuk gambar untuk menerapkan kode CSS nya di bawah sebagai berikut;

Cara Mudah Membuat Widget Headline di Blog Blogger


Untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya Klik simpan pada tema Selesai.


Selanjutnya Jika sudah Untuk mengaktifkan headline gambar grid nya atau menampilkan Fitur ini ke halaman depan home blog maka kembali Masuk ke Dasbor Blogger anda Klik Tata Letak > Tambahkan Gadget>Lalu Tambahkan kode Salin (Copy) kode CSS dibawah ini;

<script src='/feeds/posts/summary?orderby=published&amp;max-results=3&amp;alt=json-in-script&amp;callback=repost1'/></script>



Nah Itulah Cara Mudah Membuat Widget Headline di Blog Blogger semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.