Popular Post ala Arlina Design - Seteah berpikir dan dipikir pikir lagi akhirnya saya memutuskan untuk membuat artikel tentang blogger, dengan sedikit modal pengetahuan tentang dunia blogger blogspot saya akan menulis apa saja yang saya ketahui tentang blogger blogspot dengan banyak menyontek blogger yang sudah terkenal semacam KompiAjaib.com dan arlinadzgn.com, dan pada artikel pertama saya tentang blogger blogspot saya akan memberikan tips cara modifikasi widget popular post yang ada pada blogspot Popular Post ala Arlina Design

Untuk memodifikasi Popular Post ala Arlina Design lakukan langkah langkah dasar terlebih dahulu

Masuk ke blogger.com, log in dengan akun google anda, setelah berhasil masuk keberanda blogger silahkan pilih blog yang akan anda modifikasi Popular Post

Kemudin pilih Thema, pilih edit HTML, dijendela ini akan ditampakan banyak sekali kode kode, ada CSS, XML/HTML, dan SCRIPT

Untuk mempermudah melakukan pencarian kode yang diinginkan gunakan kolom pencarian dengan menekan tombol CTRL+F


Biasanya untuk modifikasi themplate blog, kode yang sering diutak atik adalah kode CSS, nah kalau ada efek slide glow dan animasi , biasanya kode yang ditambahkan adalah Java Script, sedangkan untuk HTML merupakan objek yang dimodifikasi alias modifikasi CSS dan JAVA SCRIPT semata mmata untuk menampilkan HTML yang keren

Popular post biasanya dapat dipilih masanya, maksudnya masa kepopuleran suatu artikel, bisa dipilih postingan terpopuler selama seminggu terakhir, postingan terpopuler selama satu bulan terakhir, postingan terpopuler selama satu tahun terakhir dan postingan terpopuler selama lamanya


Popular Post ala Arlina Design Model pertama


Untuk memsang widget popular post model pertama kita hanya perlu copas kode CSS ini

#PopularPosts1 h2{background: linear-gradient(60deg, #263238, #263238, #263238, #37474f, #37474f, #78909c); margin-bottom:15px;color:#fff}
#PopularPosts1 {list-style-type: none;}
#PopularPosts1 a:link {
font-size: 14px;
font-weight: 400;
text-decoration: none;
text-transform: capitalize;}
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0; background: #f5f5f5 ;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#c2185b;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:300;color:#c2185b}
#PopularPosts1 ul li img {
width: 318px;
height: auto;
}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {
margin: 0px;
width: 103%;
height: 180px;
overflow: hidden;
display: block;
}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:#fde0dc;z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#ff6f00}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#222;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:#f69988;font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#c2185b}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Letakkan kode CSS Popular Post moddel pertama dibagian <style> Tempatkan kodenya disini </style>

Jangan lupa disave terlebih dahulu, untuk UNDO tekan saja CTRL-Z, lihat hasilnya, Popular Post ala Arlina Design model pertama ini juga model yang saya pilih dalam blog Asis10.com

Popular Post ala Arlina Design Model kedua


Popular Post ala Arlina Design Model kedua Kode CSS-nya adalah
/* Popular Post Style 1 */
#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}


Popular Post ala Arlina Design Model ketiga


Popular Post ala Arlina Design Model ketiga Kode CSS-nya adalah

/* Popular Post Style 2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}
Popular Post ala Arlina Design Model keempat


Popular Post ala Arlina Design Model keempat Kode CSS-nya adalah
/* Popular Post Style 3 */
#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:700;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 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{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 .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 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}



Untuk Popular Post ala Arlina Design ke dua, ke tiga dan ke empat kita masih harus memasukn kode Java Script pada setiap model popular post yang kita pilih

Untuk penempatan kode Java Scrip silahkan letakan kodenya diatas kode </body> atau sebelumnya

Kode text/javascript untuk popular post model kedua


<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>

Kode text/javascript untuk popular post model ketiga


<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

Kode text/javascript untuk popular post model keempat

<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>

Simpan pilihanmu lalu keluar dari Edit HTML menuju ke menu blogger TATA LETAK, silahkan sesuaikan pengaturan popular postnya sebagaimana gambar dibawah ini


Menerapkan dua model Popular post
Bagi yang ingin mempunyai tampilan blog berbeda, coba tips kali ini, yaitu menerapkan dua model popular post dalam satu blog, maksudnya ketika ada warge net mengakses blogmu dan sedang ditampilan homepage maka Popular Post akan tampil dengan model pertama, sedangkan saat warga net membaca area artikel maka Popular Post akan tampil dengan gaya atau model kedua

Cara menerapkanya cukup mudah, silahkan dipilih dua model dari ke empat model popular podt diatas, untuk mode pertama sulahkan tempatkan diarea CSS ]]></b:skin> atau sebelum kode ini </style>

Sedangkan untuk model kedua tempatkan diarea atau tepat diatas kode ini  <b:if cond='data:blog.pageType != &quot;item&quot;'>. Jadi logikanya adalah popular post model pertama kita tempatkan pada pengaturan umum, dan popular post kedua kita tempatkan kusus diarea artikel, jadi kode yang ditempatkan pada area artikel hanya bekerja pada isi artikel

Simpan dan lihat hasilnya ( Saya kurang yakin apakah ini berhasil atau tidak :D )


Demikianlah Popular Post ala Arlina Design, ini merupakan artikel pertama saya tentang dunia BLOGGER, dan artikel ini mempunyai rujukan yang valid, sumber artkel Popular Post ala Arlina Design silahkan klik disini dengan sedikit modifikasi kalimat kalimat agar mudah dipahami oleh blogger pemula seperti saya, semoga bermanfaat
No comments