22 Template Blog SEO Friendly Responsive Keren Terbaik Tahun 2017
22 Template Blog SEO Friendly Responsive Keren Terbaik Tahun 2017 - Template blog merupakan salah satu elemen penting yang harus ada pada sebuah...
Home » Semua posting
22 Template Blog SEO Friendly Responsive Keren Terbaik Tahun 2017 - Template blog merupakan salah satu elemen penting yang harus ada pada sebuah blog. Karena dengan adanya template blog tentu akan membuat tampilan blog kita menjadi lebih indah lagi dan tentunya enak dipandang oleh pengunjung blog kita.
Saat ini banyak sekali template blog yang keren - keren yang bertebaran di internet bahkan kamu bisa menggunakannya secara cuma - cuma alias gratis. Namun ada beberapa hal yang harus kamu perhatikan sebelum menggunakan template blog yang sudah dimodifikasi, yakni sebagai berikut :
Itulah 22 Template Blog SEO Friendly Responsive Keren Terbaik Tahun 2017 yang bisa kamu gunakan ke blog kamu. Semoga bermanfaat ya. Dicky Khusnaedy May 10, 2017 Admin Bandung Indonesia
Saat ini banyak sekali template blog yang keren - keren yang bertebaran di internet bahkan kamu bisa menggunakannya secara cuma - cuma alias gratis. Namun ada beberapa hal yang harus kamu perhatikan sebelum menggunakan template blog yang sudah dimodifikasi, yakni sebagai berikut :
- Harus SEO Frienly,
- Mobile Friendly,
- Fast Load,
- dan juga harus Responsive.
Untuk itu, saya akan membagikan 22 template blog yang SEO Friendly Responsive keren dan terbaik tahun 2017. Berikut template - template-nya.
22 Template Blog SEO Friendly Responsive Keren Terbaik Tahun 2017
1. Sigma Blog/Magazine Blogger Template
2. Sora Seo Responsive Blogger Template
3. Jarid Responsive Blogger Template
4. Sure Mag Responsive Blogger Template
5. Easy Blog Responsive Blogger Template
6. Dream Line Personal Blogger Template
7. Smartseo Blogger Template
8. Reading Responsive Blogger Template
9. G Vusion 2 - Responsive Template
10. Vienna Lite 2 Blogger Template
11. Invision - Responsive Blogger Template
13. Google SEO V2 Blogger Template
14. New Thesis SEO V3 Blogger Template
Demo | Download
15. Zura Janai Responsive Blogger Template
16. New Johny Wuss V3 Blogger Template
17. Revoltify Blogger Template
18. Blogku Blogger Template
19. Loveria Grid - Galeri Blogger Template
20. Jurnalistik Blogger Template
21. Sparks Blogger Template
22. Newstopia Blogger Template
Itulah 22 Template Blog SEO Friendly Responsive Keren Terbaik Tahun 2017 yang bisa kamu gunakan ke blog kamu. Semoga bermanfaat ya. Dicky Khusnaedy May 10, 2017 Admin Bandung Indonesia
Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger - Selain Facebook dan Google+, kita juga bisa memanfaatkan Twitter umtuk mempromosikan halaman blog kita ke semua orang. Caranya pun mudah, kita hanya tinggal share artikel atau halaman blog kamu ke Twitter, sehingga blog kamu memiliki kesempatan untuk dikunjungi oleh pengguna Twitter.
Nah, untuk mempermudah penggunanya dalam share atau berbagi artikel, Twitter telah memfasilitasinya dengan membuat kode khusus yang diberi nama Twitter Card, yaitu sebuah kode perintah berupa Meta Tag HTML dengan aturan - aturan khusus yang dapat di letakkan di template blog, baik berplatform Blogger, Wordpress, ataupun yang lainnya.
Dengan menggunakan Twitter Card, kita bisa menampilkan image, video, judul postingan, deskripsi postingan, url postingan, dan lainnya pada tweet. Pemasangan Meta Tag Twitter Card ini sedikit berbeda dengan Open Graph Facebook. Meta Tags Twitter Card memerlukan Card Validasi oleh Twitter untuk memastikan bahwa Meta Tags Twitter Card yang ada pada blog kamu dapat dikenali oleh robot crawl Twitter.
Berikut ini contoh salah satu tweet saya yang menggunakan Meta Tags Twitter Card.
Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini: Alasan Kenapa iPhone… https://t.co/JHOgZla9VR— Dicky Khusnaedy (@DiickyKhusnaedy) 2 Mei 2017
Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger
Ada beberapa tahap yang harus kamu lakukan sebelum menerapkan Meta Tags Twitter Card ini ke blog kamu, yaitu seperti berikut ini.
1. Memilih Card Type
Sebelum memasang Meta Tags Twitter Card ke blog, kamu harus memilih Card Type yang akan kamu terapkan ke blog kamu. Ada 4 Card Type yang bisa kamu pilih sesuai dengan konten blog kamu, yaitu diantaranya :
- Summary Card - Twitter Card jenis ini merupakan Twitter Card default atau bawaan dari Twitter yang akan menampilkan judul blog, judul artikel, deskripsi blog, deskripsi artikel, ringkasan artikel, dan thumbnail image atau gambar ilustrasi yang ada di postingan blog.
- Summary Card with Large Image - Twitter Card jenis ini hampir sama dengan Summary Card, hanya saja yang membedakannya Twitter Card jenis ini menampilkan gambar dengan ukuran yang lebih besar.
- App Card - Twitter Card jenis ini akan menampilkan detail sebuah aplikasi mobile dengan direct download atau link download-nya.
- Player Card - Twitter Card jenis ini akan menampilkan audio, video, atau media lain
Untuk info lengkapnya mengenai Card Type kamu bisa mengunjugi link https://dev.twitter.com/cards/types.
2. Memasang Meta Tags Twitter Card
Berikut ini kode Meta Tags Twitter Card jenis Summary Card with Large Image yang saya gunakan pada blog ini. Berikut cara memasangnya.
1. Login ke Blogger > Theme/Tema > Edit HTML.
2. Copy dan paste kode berikut ini dibawah <head>
<!-- Meta Tag SEO Twitter -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@DiickyKhusnaedy' name='twitter:site'/>
<meta content='@DiickyKhusnaedy' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='URL-IMAGE' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- Meta Tag SEO Twitter End -->- Ganti @DiickyKhusnaedy pada twitter:site dan twitter:creator dengan username akun Twitter punya kamu.
- Ganti URL-IMAGE dengan URL Image Logo Blog kamu atau images lainnya dengan ukuran 280 X 150 px. Tujuannya untuk menggantikan gambar jika di postingan artikel kamu tidak ada gambar atau bisa dikatakan Gambar Alternatif atau ketika halaman homepage blog kita di tweet.
- Jika blog kamu tidak menggunakan gambar dengan ukuran besar, maka kamu bisa mengganti kode summary_large_image dengan kode summary. Nantinya image atau gambar akan tampil dalam bentuk thumbnail disamping deskripsi. (seperti pada contoh tweet diatas)
3. Save Template.
3. Card Validation atau Validasi Twitter Card
Setelah memasang Meta Tags Twitter Card ke dalam blog, hal yang harus kamu lakukan selanjutnya adalah melakukan Card Validation dengan validator yang telah disediakan oleh Twitter. Tujuannya adalah untuk memastikan bahwa Meta Tags Twitter Card yang kamu pasang ke dalam blog dapat berjalan dengan sempurna. Untuk melakukan Card Validation, ikuti langkah - langkah berikut ini.
1. Kunjungi link https://cards-dev.twitter.com/validator. Lalu, login dengan akun Twitter kamu.
2. Masukkan URL Blog kamu. Kemudian klik "Preview Card'.
3. Jika berhasil, maka tampilannya akan seperti ini.
4. Selesai.
Demikianlah Cara Mudah Memasang Meta Tag Twitter Card untuk Blogger. Semoga bermanfaat dan selamat mencoba.
Dicky Khusnaedy
May 07, 2017
Admin
Bandung Indonesia
Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger
Cara Mudah Memasang Meta Tag Twitter Card Untuk Blogger - Selain Facebook dan Google+, kita juga bisa memanfaatkan Twitter umtuk...
Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini - Persaingan antara iPhone dan smartphone Android semakin hari semakin seru untuk diikuti. Beragam inovasi dan teknologi canggih pun telah diciptakan oleh Apple Inc. dengan iPhone-nya dan Google Inc. dengan Android-nya untuk menarik konsumen yang lebih banyak lagi.
Namun sepertinya saat ini, Android telah merajai pasar smartphone dunia. Meski Android menguasai pasar smartphone dunia, kepopuleran iPhone tidak pernah hilang di mata pengguna setia-nya dan bahkan iPhone tetap menjadi smartphone tebaik hingga saat ini.
Lantas apa yang membuat iPhone menjadi smartphone terbaik hingga saat ini? Padahal iPhone itu memiliki spesifikasi yang bisa dibilang pas - pasan. Daripada bertanya - tanya simak penjelasannya berikut ini.
Seperti yang kita ketahui, saat ini pasar smartphone dunia masih dikuasai oleh Samsung. Namun banyak anggapan yang mengatakan bahwa iPhone tidak akan bisa mengalahkan Samsung dari banyak hal. Jika anggapan kamu seperti itu, maka anggapan kamu itu sangatlah subjektif.
Jika ditelusuri lebih dalam lagi, sebenarnya iPhone itu menang dalam beberapa hal dari Samsung ataupun dari smartphone flagship Android lainnya yang memiliki spesifikasi yang cukup gahar. Oleh sebab itu, meski kalah dari segi spesifikasi, iPhone tetap menjadi smartphone terbaik hingga saat ini.
Tanpa kamu sadari, banyak aplikasi atau game di Android yang justru membuat smartphone menjadi berat. Bahkan RAM 3 GB pun masih belum mampu mengimbanginya sehingga membuat smartphone selalu kekurangan yang membuat terjadinya lag - lag yang akan membuat kamu menjadi emosi.
Baik Android ataupun iOS sebenarnya sama - sama bagus. Kedua OS Mobile tersebut pastinya memiliki keunggulannya masing - masing. Tapi memiliki tujuan yang sama, yakni untuk memudahkan penggunanya dalam beraktivitas.
Namun sepertinya saat ini, Android telah merajai pasar smartphone dunia. Meski Android menguasai pasar smartphone dunia, kepopuleran iPhone tidak pernah hilang di mata pengguna setia-nya dan bahkan iPhone tetap menjadi smartphone tebaik hingga saat ini.
Lantas apa yang membuat iPhone menjadi smartphone terbaik hingga saat ini? Padahal iPhone itu memiliki spesifikasi yang bisa dibilang pas - pasan. Daripada bertanya - tanya simak penjelasannya berikut ini.
Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini
Seperti yang kita ketahui, saat ini pasar smartphone dunia masih dikuasai oleh Samsung. Namun banyak anggapan yang mengatakan bahwa iPhone tidak akan bisa mengalahkan Samsung dari banyak hal. Jika anggapan kamu seperti itu, maka anggapan kamu itu sangatlah subjektif.
Jika ditelusuri lebih dalam lagi, sebenarnya iPhone itu menang dalam beberapa hal dari Samsung ataupun dari smartphone flagship Android lainnya yang memiliki spesifikasi yang cukup gahar. Oleh sebab itu, meski kalah dari segi spesifikasi, iPhone tetap menjadi smartphone terbaik hingga saat ini.
Ini Buktinya!
Seperti yang kita ketahui bahwa spesifikasi smartphone iPhone dibandingkan dengan smartphone Android jelas jauh berbeda. iPhone 7 yang merupakan penerus iPhone 6 saja memiliki spesifikasi yang bisa dibilang pas - pasan. Lain halnya dengan smartphone Android yang memiliki spesifikasi yang cukup gahar. Misalnya saja smartphone Android sudah ada yang menggunakan RAM 6 GB sedangkan iPhone masih menggunakan RAM 3 GB.
Meskipun spesifikasi iPhone sangatlah rendah atau pas - pasan, namun performa-nya jauh lebih unggul dibandingkan dengan smarpthone Android bahkan sekelas flagship sekalipun. Hal itu dapat dibuktikan dari situs GeekBench Browser, situs pengukur performa smartphone.
 |
| Hasil data Single Core - Data per 29 April 2017 |
Berdasarkan data dari GeekBench Browser untuk Single Core, iPhone 7 Plus jauh mengungguli smartphone flagship Android, seperti Huawei Mate 9 dengan mendapatkan skor 3329, sedangkan Huawei Mate 9 mendapatkan skor 1899. Dari perbedaan skor tersebut jelas iPhone 7 Plus jauh lebih unggul dibandingkan dengan smartphone Android lainnya,
 |
| Hasil data Multi Core - Data per 29 April 2017 |
Lalu, untuk Multi Core, mungkin smartphone Android yang lebih unggul. Pasalnya, smartphone Huawei Honor V9 mendapatkan skor yang cukup tinggi, yakni 6060, sedangkan iPhone 7 Plus mendapatkan skor 5511. Meski iPhone kalah dari segi multi core, tetap saja iPhone jauh lebih baik dibandingkan dengan smartphone Android.
Mengapa?
Tanpa kamu sadari, banyak aplikasi atau game di Android yang justru membuat smartphone menjadi berat. Bahkan RAM 3 GB pun masih belum mampu mengimbanginya sehingga membuat smartphone selalu kekurangan yang membuat terjadinya lag - lag yang akan membuat kamu menjadi emosi.
Hal itu bisa terjadi karena manajemen sistem operasi Android yang belum seefisien sistem operasi milik iPhone. Itulah yang membuat iPhone bisa disebut smartphone terbaik karena sistem operasi yang digunakannya sangatlah stabil meskipun digunakan pada iPhone yang menggunakan RAM 1 GB.
Kesimpulan
Baik Android ataupun iOS sebenarnya sama - sama bagus. Kedua OS Mobile tersebut pastinya memiliki keunggulannya masing - masing. Tapi memiliki tujuan yang sama, yakni untuk memudahkan penggunanya dalam beraktivitas.
Tetapi semua itu tergantung dari diri kamu sendiri, mau menggunakan Android atau iOS ( iPhone ). Jika budget kamu pas - pasan lebih baik menggunakan Android, atau jika budget kamu diatas 6 atau 7 juta lebih baik memilih iPhone karena iPhone jauh lebih baik dibandingkan dengan Android.
Namun semua itu kembali lagi pada diri kamu sendiri mau memilih yang mana?
Itulah Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini. Semoga bermanfaat ya.
Dicky Khusnaedy
May 02, 2017
Admin
Bandung Indonesia
Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini
Alasan Kenapa iPhone Selalu Jadi Smartphone Terbaik Hingga Saat Ini - Persaingan antara iPhone dan smartphone Android semakin hari semakin seru untuk...
8 Style Widget Popular Posts Keren Terbaru Untuk Blogger - Buat kamu yang suka ngeblog mungkin sudah tahu dengan yang namanya widget popular posts. Ya, widget popular posts merupakan salah satu widget yang harus ada dalam sebuah blog. Karena widget popular posts memiliki peranan yang cukup penting bagi sebuah blog untuk meningkat trafik pengunjung pada sebuah blog.
Widget popular posts sendiri akan menampilkan daftar posting yang paling sering dilihat oleh pengujung yang bisa disesuaikan atau diurutkan berdasarkan 7 hari terakhir, 30 hari terakhir, tahun lalu, ataupun setiap saat.
Karena begitu pentingnya widget ini dalam sebuah blog, untuk itu saya akan membagikan widget popular posts dengan tampilan yang keren untuk blog kamu yang tentunya bisa menarik perhatian pengunjung dan juga meningkatkan trafik. Berikut penjelasannya.
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
Setelah itu, tambahkan kode JavaScript berikut ini tepat di atas </body>.
Demikianlah informasi mengenai widget popular post keren untuk blogger. Semoga bermanfaat. Dicky Khusnaedy April 26, 2017 Admin Bandung Indonesia
Widget popular posts sendiri akan menampilkan daftar posting yang paling sering dilihat oleh pengujung yang bisa disesuaikan atau diurutkan berdasarkan 7 hari terakhir, 30 hari terakhir, tahun lalu, ataupun setiap saat.
Karena begitu pentingnya widget ini dalam sebuah blog, untuk itu saya akan membagikan widget popular posts dengan tampilan yang keren untuk blog kamu yang tentunya bisa menarik perhatian pengunjung dan juga meningkatkan trafik. Berikut penjelasannya.
Cara Memasang Widget Popular Post Ke Dalam Blog
Sebelum memodifikasi tampilan widget popular posts, pastikan widget popular posts di blog kamu sudah aktif. Jika belum aktif, kamu bisa mengikuti langkah - langkah yang ada pada gambar GIF berikut ini untuk mengaktifkan widget ini ke blog kamu.
Untuk pengaturan widget popular posts nya bisa kamu atur sesuai dengan keinginan kamu.
Cara Membuat Tampilan Widget Popular Posts Menjadi Keren
Catatan :
Jika ditemplate blog kamu sudah terpasang atau sudah ada CSS Popular Post, maka hapus terlebih dahulu CSS tersebut atau menggantinya dengan CSS Popular Posts berikut ini. Agar tidak terjadi kesalahan saat menyimpan template.
Jika ditemplate blog kamu sudah terpasang atau sudah ada CSS Popular Post, maka hapus terlebih dahulu CSS tersebut atau menggantinya dengan CSS Popular Posts berikut ini. Agar tidak terjadi kesalahan saat menyimpan template.
Widget Popular Posts Warna Warni ( Style 1 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Widget Popular Posts Dengan Tampilan Elegan ( Style 2 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
.widget .widget-item-control a img{border:none;width:20px!important;height:20px!important;padding:none;background:none;-moz-box-shadow:none;-webkit-box-shadow:none;-ie-box-shadow:none;box-shadow:none}
.sidebar .PopularPosts .widget-content ul li{padding:0;height:73px!important;overflow:hidden!important;list-style-type:none!important;list-style:none}
.sidebar .popular-posts ul{list-style-type:none!important;counter-reset:popcount;margin:0;padding:0!important}
.sidebar .popular-posts ul li:before{background:rgba(247,247,247,1);color:#000;content:counter(popcount,decimal);counter-increment:popcount;float:right;font-size:15px;line-height:20px;list-style-type:none;padding:0 6px 1px 5px;border-radius:0 0 7px 7px;position:relative;display:inline-block;box-shadow:-2px 2px 10px rgba(187,187,187,0.7);font-weight:400;top:0;right:1px;z-index:999999999999;border:solid #B5B5B5;border-width:0 1px 1px}
.sidebar .PopularPosts .item-thumbnail{float:left;margin:0!important}
.sidebar .PopularPosts img{padding-right:0!important;width:72px;height:72px;overflow:hidden!important;margin-right:0}
.sidebar .PopularPosts .item-title a:hover{background:#f6f6f6;color:#000}
.sidebar .PopularPosts .item-title a{background:#EAEAEA;color:#6E6E6E;display:block;font-size:14px;font-weight:400;line-height:normal;font-family:"Oswald",sans-serif;padding:10px 30px 0 78px;transition:all .4s ease-in-out;height:62px;text-decoration:none;border-bottom:1px solid #ccc}Widget Popular Posts Dengan Tampilan Hitam Putih ( Style 3 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:#000;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0!important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:700;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#111}
.PopularPosts ul li:nth-child(2){background-color:#222}
.PopularPosts ul li:nth-child(3){background-color:#333}
.PopularPosts ul li:nth-child(4){background-color:#444}
.PopularPosts ul li:nth-child(5){background-color:#555}
.PopularPosts ul li:nth-child(6){background-color:#666}
.PopularPosts ul li:nth-child(7){background-color:#777}
.PopularPosts ul li:nth-child(8){background-color:#888}
.PopularPosts ul li:nth-child(9){background-color:#999}
.PopularPosts ul li:nth-child(10){background-color:#aaa}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-snippet{font-size:11px}Widget Popular Posts Keren Warna Warni Ala Kang Mousir ( Style 4 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:#000;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0!important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:700;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#f1c40f}
.PopularPosts ul li:nth-child(2){background-color:#f39c12}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71}
.PopularPosts ul li:nth-child(4){background-color:#27ae60}
.PopularPosts ul li:nth-child(5){background-color:#e67e22}
.PopularPosts ul li:nth-child(6){background-color:#d35400}
.PopularPosts ul li:nth-child(7){background-color:#3498db}
.PopularPosts ul li:nth-child(8){background-color:#2980b9}
.PopularPosts ul li:nth-child(9){background-color:#ea6153}
.PopularPosts ul li:nth-child(10){background-color:#c0392b}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-snippet{font-size:11px}Widget Popular Post Keren Warna Warni Ala Mas Sugeng ( Style 5 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:#000;counter-reset:num}
.PopularPosts ul li img{display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left}
.PopularPosts ul li{background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:400;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-snippet{font-size:11px}
.widget-content ul li{margin:0;padding:6px 0;border-bottom:1px solid #ededed}
.widget-content ul li:last-child{border-bottom:medium none!important}
.widget-content ul li a{color:#333}
.widget-content ul li a:hover{color:#C80441}
.item-date{font-size:11px;font-style:italic;font-weight:700;color:#FC0}Widget Popular Posts Keren With Number ( Style 6 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
.popular-posts ul{padding-left:0;counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-right:15px;padding:.3em .6em;counter-increment:popcount;content:counter(popcount);font-size:16px;background:#292D30;color:#fff;position:relative;font-weight:700;font-family:georgia;float:left;border:2px solid #ddd;box-shadow:1px 2px 9px #666}
.popular-posts ul li{border-bottom:1px dashed #ddd}
.popular-posts ul li:hover{border-bottom:1px dashed #696969}
.popular-posts ul li a{text-decoration:none;color:#5A5F63}
.popular-posts ul li a:hover{text-decoration:none}Widget Popular Posts Keren ( Style 7 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
.PopularPosts ul{padding:0;margin:0}
.PopularPosts li{display:block;padding:3px 25px!important;margin:5px 0 0 20px;position:relative;border:1px solid #00aeef;transition:all .15s}
.PopularPosts a{color:#333;font-weight:700}
.PopularPosts li:before{content:"f0c1";position:absolute;top:6%;left:-5%;background:#00aeef;padding:10px;border-radius:50%;height:12px;width:12px;font:normal normal normal 14px/1 FontAwesome;color:#fff;text-align:center;border:1px solid #00aeef}
.PopularPosts .item-snippet{text-align:left;margin-bottom:3px;cursor:default;font-size:11px}
.PopularPosts .item-title{text-align:center}
.PopularPosts li:hover{background:#00aeef;color:#fff;border:1px solid #d8d9da}
.PopularPosts li:hover a{color:#fff}
.PopularPosts li:hover:before{border:1px solid #f5f8fa}
.item-content .item-thumbnail{display:none}Widget Popular Posts Keren With Images ( Style 8 )
Login ke Blogger > Template / Tema > Edit HTML. Lalu, copy dan pastekan kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>.
#PopularPosts1 ul{padding:10px 0;margin-top:-15px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}Setelah itu, tambahkan kode JavaScript berikut ini tepat di atas </body>.
<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(//s72-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>
Catatan :
Jika sudah, jangan lupa pilih "Simpan Template".
Jika sudah, jangan lupa pilih "Simpan Template".
Demikianlah informasi mengenai widget popular post keren untuk blogger. Semoga bermanfaat. Dicky Khusnaedy April 26, 2017 Admin Bandung Indonesia
8 Style Widget Popular Posts Keren Terbaru Untuk Blogger
8 Style Widget Popular Posts Keren Terbaru Untuk Blogger - Buat kamu yang suka ngeblog mungkin sudah tahu dengan yang namanya widget popular posts....
Bagi kamu pengguna komputer mungkin sudah tidak asing lagi dengan istilah shutdown. Ya, shutdown sendiri merupakan sebuah proses yang berfungsi untuk mematikan atau memutuskan setiap proses yang terjadi ke seluruh komponen komputer secara total. Proses ini sangat wajib kamu lakukan jika kamu telah selesai menggunakan komputer atau laptop. Hal ini bertujuan agar performa komputer kamu tetap ngebut dan komponen yang ada di komputer kamu jadi tidak cepat rusak, terutama hard disk.
Angka " 60 " pada script tersebut mengacu pada satuan detik. Itu artinya komputer atau laptop akan melakukan shutdown secara otomatis dalam waktu 1 menit. Jika kamu ingin membuat komputer atau laptop kamu shutdown otomatis dalam waktu 1 jam (60 menit), silahkan ganti angkanya menjadi " 3600 " ( 3600 = 60 menit X 60 detik ).
3. Setelah itu, simpan script tadi dengan cara : File > Save As. Ganti namanya dengan Auto Shutdown.bat.
4. Jika kamu ingin menggunakannya, kamu tinggal klik File tersebut. Maka akan muncul tampilan seperti ini.
Pekerjaan saya belum selesai nih, bagaimana cara membatalkannya? Tenang, caranya ada kok. Berikut penejelasannya.
3. Untuk menggunakannya, silahkan klik file tersebut. Jika sukses, maka akan muncul pesan seperti berikut ini.
Gimana? Mudah bukan. Hanya bermodalkan Notepad saja kamu bisa melakukannya dengan mudah. Jadi, mari kita lindungi komputer atau laptop kita dengan selalu menggunakan shutdown ketika selesai menggunakan komputer atau laptop. Selamat mencoba.
Dicky Khusnaedy
April 22, 2017
Admin
Bandung Indonesia
Jika kamu sering mematikan komputer tanpa melalui shutdown atau laptop sering mati karena kehabisan baterai, maka bisa menyebabkan hard disk jadi bad sector. Tentu sangat berbahaya kan. Nah, untuk itu saya akan membagikan informasi mengenai cara membuat komputer kamu melakukan shutdown secara otomatis dalam waktu tertentu tanpa perlu instal software dari pihak ketiga. Berikut penjelasannya.
Cara Membuat Komputer Shutdown Otomatis Tanpa Software
1. Pertama, buka Notepad. Disini kita akan membuat sebuah script virus yang akan membuat komputer atau laptop kamu melakukan shutdown secara otomatis.
2. Copy dan paste script berikut ini ke Notepad.
shutdown -s -t 60Seperti gambar di bawah ini.
Angka " 60 " pada script tersebut mengacu pada satuan detik. Itu artinya komputer atau laptop akan melakukan shutdown secara otomatis dalam waktu 1 menit. Jika kamu ingin membuat komputer atau laptop kamu shutdown otomatis dalam waktu 1 jam (60 menit), silahkan ganti angkanya menjadi " 3600 " ( 3600 = 60 menit X 60 detik ).
3. Setelah itu, simpan script tadi dengan cara : File > Save As. Ganti namanya dengan Auto Shutdown.bat.
4. Jika kamu ingin menggunakannya, kamu tinggal klik File tersebut. Maka akan muncul tampilan seperti ini.
Pekerjaan saya belum selesai nih, bagaimana cara membatalkannya? Tenang, caranya ada kok. Berikut penejelasannya.
Cara Membatalkan Komputer Melakukan Shutdown Otomatis
Untuk membatalkannya, caranya pun juga sama. Hanya saja yang membedakannya, kode script nya aja.
1. Buka Notepad. Lalu, copy dan paste script berikut ini ke Notepad.
shutdown -a2. Setelah itu, simpan script tersebut dengan cara : File > Save As >. Ubah namanya menjadi Cancelled.bat. Selesai!
3. Untuk menggunakannya, silahkan klik file tersebut. Jika sukses, maka akan muncul pesan seperti berikut ini.
Gimana? Mudah bukan. Hanya bermodalkan Notepad saja kamu bisa melakukannya dengan mudah. Jadi, mari kita lindungi komputer atau laptop kita dengan selalu menggunakan shutdown ketika selesai menggunakan komputer atau laptop. Selamat mencoba.
Cara Membuat Komputer Shutdown Otomatis Tanpa Software Tambahan
Bagi kamu pengguna komputer mungkin sudah tidak asing lagi dengan istilah shutdown. Ya, shutdown sendiri merupakan sebuah proses yang berfungsi untuk...
