Advertisemen
Baca Juga Artikel Lainnya
apa kabar sobat lama tidak posting BLOGGER TRIK DAN TIPS semenjak blog ini kehilangan domain CO dot CC, karena banned oleh google pada domain tersebut,
langsung saja sobat Blogger memang mudah kita modifikasi Fitur blogger selain versi JavaScript widget Recent Posts, ada lagi Layout Widget,Salah satu Widget paling populer digunakan oleh para blogger adalah Pasang Widget Resmi Populer Blogger.
kemudian saya mencoba mengotak-atik dan memutuskan untuk mengedit gadget, dan memberikan Gaya Grid.
Bagaimana Gadget perubahanya setelah mengalami perubahan itu?
Jadi Berikut adalah Langkah-langkah untuk membuat Popular Posts Widget menjadi Grid Gambar atau berkotak-kotak dan sangat rapi.
1. Pergi ke Halaman Layout dan menambahkan Gadget Popular Posts, jika Anda belum menambahkan Gadgget tersebut
2. Edit Pengaturan Gadget sehingga menampilkan Thumbnail dan tidak yang Snippet
3. Sekarang Ke Template / Desain> Edit HTML. Klik pada kotak centang Expand Widget Template. Biarkan dicentang, dan mencari PopularPosts1 (Lakukan Ctrl + F untuk menemukannya dalam template Anda) dan Anda akan mendapatkan beberapa baris seperti ini
<b:widget id='PopularPosts1' locked='false' Posts' title='Popular type='PopularPosts'/>
4. Mengubah baris script di atas dengan di bawah ini.
<b:widget id='PopularPosts1' locked='false' type='PopularPosts'> Posts' title='Popular'/>
<b:includable id='main'>
<b:if cond='data:title'> <h2> <data:title/> </ h2> </ b: if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
cond='data:showThumbnails <b:if == "false"'>
<b:if cond='data:showSnippets == "false"'>
<- (1) Tidak ada potongan / thumbnail ->
<a expr:href='data:post.href'> <data:post.title/> </ a>
<b:else/>
<-! (2) Tampilkan hanya potongan ->
<div class='item-title'> <a expr:href='data:post.href'>
<data:post.title/> </ a> </ div>
<div class='item-snippet'> <data:post.snippet/> </ div>
</ B: if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<- (3) Tampilkan hanya thumbnail ->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<Img alt =''border = '0 'expr: height =' data: ThumbnailSize 'src =' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbt8R4BPrOaowTYeELKphHHVuHFK1nBMN1gD0b_NGyDbBi7xSdb5xukRPgkYnVcsin2rlTqOBKhMrIfKYWzSfyyCvej94jcMvxXjvIi6BCrzg5297TYJ8DtiQxr97lIujqmP4UdsKNjTg/s72-c/default. 'expr: width =' png Data: ThumbnailSize '/>
</ B: if>
</ A>
</ Div>
</ Div>
<b:else/>
<- Potongan Tampilkan (4) dan thumbnail ->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</ a>
</ div>
</ b: if>
<div class='item-title'> <a expr:href='data:post.href'>
<data:post.title/> </ a> </ div>
<div class='item-snippet'> <data:post.snippet/> </ div>
</ Div>
<div style='clear: both;'/>
</ b: if>
</ b: if>
</ Li>
</ b: loop>
</ Ul>
<b:include name='quickedit'/>
</ Div>
</ B: includable>
</ B: widget>
5. Kemudian Simpan Template Anda
6. Sekarang Buka Designer Template> Advanced> Tambah CSS dan paste potongan CSS di bawah berikut di kolom CSS yang tersedia dan akan berlaku untuk template Blog Anda
.. Populer-posting item-thumbnail {float: left;}
Populer-posting ul {padding-left: 0px;}.
. Populer-posting ul li {list-style-image: none; daftar-style-type:; display none: inline;}
URL posting akan hadir dalam gambar tersebut, Widget default yang akan ditampilkan jika posting tidak memiliki thumbnail gambar seperti yang berhubungan dengan posting ini.
Anda dapat memodifikasi untuk mendapatkan thumbnail standar kustom. Anda dapat menambahkan CSS untuk membuat grid terlihat lebih bagus di pandang.
silahkan anda meninggalkan modifikasi di atas Mengembalikan Kembali ke yang lama, Jika Anda tidak puas dengan tampilan yang terlihat, kemudian kembalikan seperti semula.
Berikut adalah langkah-langkahnya:
Langkahnya Hanya Hapus Widget Popular Posts dari Page Tata Letak Anda memerlukan versi asli,
kemudian tambahkan kembali lagi dan Hapus CSS yang ditambahkan ke Designer Template> Advanced> Tambah CSS Itu saja.
Saya berpikir bahwa cara otak-atik ini akan tampil dengan baik dan tampilan lebih menarik pada Blog Fotografi atau blog yang banyak mengandung isi gambar seperti blog download wallpaper pada setiap postingan.
langsung saja sobat Blogger memang mudah kita modifikasi Fitur blogger selain versi JavaScript widget Recent Posts, ada lagi Layout Widget,Salah satu Widget paling populer digunakan oleh para blogger adalah Pasang Widget Resmi Populer Blogger.
kemudian saya mencoba mengotak-atik dan memutuskan untuk mengedit gadget, dan memberikan Gaya Grid.
Bagaimana Gadget perubahanya setelah mengalami perubahan itu?
Jadi Berikut adalah Langkah-langkah untuk membuat Popular Posts Widget menjadi Grid Gambar atau berkotak-kotak dan sangat rapi.
1. Pergi ke Halaman Layout dan menambahkan Gadget Popular Posts, jika Anda belum menambahkan Gadgget tersebut
2. Edit Pengaturan Gadget sehingga menampilkan Thumbnail dan tidak yang Snippet
3. Sekarang Ke Template / Desain> Edit HTML. Klik pada kotak centang Expand Widget Template. Biarkan dicentang, dan mencari PopularPosts1 (Lakukan Ctrl + F untuk menemukannya dalam template Anda) dan Anda akan mendapatkan beberapa baris seperti ini
<b:widget id='PopularPosts1' locked='false' Posts' title='Popular type='PopularPosts'/>
4. Mengubah baris script di atas dengan di bawah ini.
<b:widget id='PopularPosts1' locked='false' type='PopularPosts'> Posts' title='Popular'/>
<b:includable id='main'>
<b:if cond='data:title'> <h2> <data:title/> </ h2> </ b: if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
cond='data:showThumbnails <b:if == "false"'>
<b:if cond='data:showSnippets == "false"'>
<- (1) Tidak ada potongan / thumbnail ->
<a expr:href='data:post.href'> <data:post.title/> </ a>
<b:else/>
<-! (2) Tampilkan hanya potongan ->
<div class='item-title'> <a expr:href='data:post.href'>
<data:post.title/> </ a> </ div>
<div class='item-snippet'> <data:post.snippet/> </ div>
</ B: if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<- (3) Tampilkan hanya thumbnail ->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<Img alt =''border = '0 'expr: height =' data: ThumbnailSize 'src =' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbt8R4BPrOaowTYeELKphHHVuHFK1nBMN1gD0b_NGyDbBi7xSdb5xukRPgkYnVcsin2rlTqOBKhMrIfKYWzSfyyCvej94jcMvxXjvIi6BCrzg5297TYJ8DtiQxr97lIujqmP4UdsKNjTg/s72-c/default. 'expr: width =' png Data: ThumbnailSize '/>
</ B: if>
</ A>
</ Div>
</ Div>
<b:else/>
<- Potongan Tampilkan (4) dan thumbnail ->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</ a>
</ div>
</ b: if>
<div class='item-title'> <a expr:href='data:post.href'>
<data:post.title/> </ a> </ div>
<div class='item-snippet'> <data:post.snippet/> </ div>
</ Div>
<div style='clear: both;'/>
</ b: if>
</ b: if>
</ Li>
</ b: loop>
</ Ul>
<b:include name='quickedit'/>
</ Div>
</ B: includable>
</ B: widget>
5. Kemudian Simpan Template Anda
6. Sekarang Buka Designer Template> Advanced> Tambah CSS dan paste potongan CSS di bawah berikut di kolom CSS yang tersedia dan akan berlaku untuk template Blog Anda
.. Populer-posting item-thumbnail {float: left;}
Populer-posting ul {padding-left: 0px;}.
. Populer-posting ul li {list-style-image: none; daftar-style-type:; display none: inline;}
URL posting akan hadir dalam gambar tersebut, Widget default yang akan ditampilkan jika posting tidak memiliki thumbnail gambar seperti yang berhubungan dengan posting ini.
Anda dapat memodifikasi untuk mendapatkan thumbnail standar kustom. Anda dapat menambahkan CSS untuk membuat grid terlihat lebih bagus di pandang.
silahkan anda meninggalkan modifikasi di atas Mengembalikan Kembali ke yang lama, Jika Anda tidak puas dengan tampilan yang terlihat, kemudian kembalikan seperti semula.
Berikut adalah langkah-langkahnya:
Langkahnya Hanya Hapus Widget Popular Posts dari Page Tata Letak Anda memerlukan versi asli,
kemudian tambahkan kembali lagi dan Hapus CSS yang ditambahkan ke Designer Template> Advanced> Tambah CSS Itu saja.
Saya berpikir bahwa cara otak-atik ini akan tampil dengan baik dan tampilan lebih menarik pada Blog Fotografi atau blog yang banyak mengandung isi gambar seperti blog download wallpaper pada setiap postingan.
Advertisemen