<!--<head><style type='text/css'>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxP.ttf)format('truetype');}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc9.ttf)format('truetype');}</style>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1967239390418511736&zx=1e6367b9-b828-4189-b629-5cd278579f0a' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1967239390418511736&zx=1e6367b9-b828-4189-b629-5cd278579f0a' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head>-->

Home › CSS › Widget

Cara Membuat Popular Post Simple, Ringan dan Keren

6/05/2016

Cara membuat populer post simple, ringan dan Keren - Populer post merupakan widget yang berfungsi untuk menampilkan artikel artikel populer yang ada di Blog kamu.

Berbicara soal widget populer post, kali ini saya hanya akan berbagi tutorial sederhana yaitu cara membuat popular post lebih simple, ringan dan lebih mudah penerapannya. Populer post ini hanya menampilkan judul dan deskripsi, tapi kamu juga bisa menghilangkan deskripsinya yakni hanya dengan menampilkan judul.

Untuk pemasangannya di Blog, kamu bisa mengikuti panduannya di bawah ini langkah demi langkah :

Cara Memasang Popular Post di Blog

Langkah Ke-1

1. Pertama anda login keakun Blogger
2. Klik Layout/Tata letak
3. Klik tombol Tambah Gatget
4. Pilih Entri populer

5 Simpan

Langkah Ke-2

1. Login ke akun Blogger
2. klik Template dan Edit HTML
3. Copy kode CSS berikut, letakkan sebelum kode ]]></b:skin>

/* Popular Post by aak-share */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE51BDuz7xMq9zh8UUXrs_uzaPA5TLKABvOpr2V-qpu7FF9flMRzmbzWRr32W3evNCo6cQx0HB5Q5chL07cJJJf0TmwBDetKpa4nPhdiXkDE06X8NVmr0hSgzsRm-U793AHdg0IMgR9SKx/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
/*--- End Popular Posts by aak-share --- */

4. Simpan template

Hasilnya :

Populer Post Simple dengan gambar

Populer Post Simple tanpa gambar

Bagai mana sobat, simpel, ringan dan keren bukan. Cukup sekian dulu yan sobat, demikian saya sampaikan Cara Membuat Popular Post Simpel Ringan Keren. Terimakasih dan semoga bermanfaat.

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2591855913-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5OfgWd-8t5ZYVIEiRuDA6u3lcNQQ:1730449926758';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1967239390418511736','//siswasiana.blogspot.com/2016/06/cara-membuat-popular-post-simple-ringan.html','1967239390418511736');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1967239390418511736', 'title': 'Siswasiana', 'url': 'https://siswasiana.blogspot.com/2016/06/cara-membuat-popular-post-simple-ringan.html', 'canonicalUrl': 'https://siswasiana.blogspot.com/2016/06/cara-membuat-popular-post-simple-ringan.html', 'homepageUrl': 'https://siswasiana.blogspot.com/', 'searchUrl': 'https://siswasiana.blogspot.com/search', 'canonicalHomepageUrl': 'https://siswasiana.blogspot.com/', 'blogspotFaviconUrl': 'https://siswasiana.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Siswasiana - Atom\x22 href\x3d\x22https://siswasiana.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Siswasiana - RSS\x22 href\x3d\x22https://siswasiana.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Siswasiana - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1967239390418511736/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Siswasiana - Atom\x22 href\x3d\x22https://siswasiana.blogspot.com/feeds/13529978358896574/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/6eb7ce967db05cf0', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '13529978358896574', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQbhUZdTFqUjwcw7hDlKCaHStk6hyphenhyphenENJc3vhtg46d_tiWriBb9jgHSVYmrZK-3BfxhATiGENaOHmJzBVgAIIvn-wQc_LDk06CzTi8uOeU86pz-aMQ-4108sJzM-I66bELns8eLm7ytAs/s72-c/Popular-post.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQbhUZdTFqUjwcw7hDlKCaHStk6hyphenhyphenENJc3vhtg46d_tiWriBb9jgHSVYmrZK-3BfxhATiGENaOHmJzBVgAIIvn-wQc_LDk06CzTi8uOeU86pz-aMQ-4108sJzM-I66bELns8eLm7ytAs/s1600/Popular-post.png', 'pageName': 'Cara Membuat Popular Post Simple, Ringan dan Keren', 'pageTitle': 'Siswasiana: Cara Membuat Popular Post Simple, Ringan dan Keren', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Cara Membuat Popular Post Simple, Ringan dan Keren', 'description': 'SiswaSiana Informasi Seputar Dunia Pendidikan di Indonesia, Kumpulan Contoh Soal Pelajaran, Silabus, RPP, UNBK, UAN, Makalah \x26 Media Pembelajaran.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQbhUZdTFqUjwcw7hDlKCaHStk6hyphenhyphenENJc3vhtg46d_tiWriBb9jgHSVYmrZK-3BfxhATiGENaOHmJzBVgAIIvn-wQc_LDk06CzTi8uOeU86pz-aMQ-4108sJzM-I66bELns8eLm7ytAs/s1600/Popular-post.png', 'url': 'https://siswasiana.blogspot.com/2016/06/cara-membuat-popular-post-simple-ringan.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 13529978358896574}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3386964323-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML996', 'iklan-atas', document.getElementById('HTML996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML997', 'iklan-tengah1', document.getElementById('HTML997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'iklan-tengah2', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'iklan-bawah', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar-sticky', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
</script>
</body>-->