Wanita yang memiliki Kecantikan dari dalam maupun dari luar pasti akan banyak sekali yang menyukainya.
Begitu pula sebuah blog, Blog yang mempunyai tampilan yang sangat cantik/indah pasti akan banyak sekali pengunjungnya, karena dengan berpenampilan cantik/indah pengunjung akan betah lama-lama berselancar diblog yang kita miliki.
Kecantikan/Keindahan yang dimiliki sebuah Blog dapat dinilai dari segi desainnya.
Desain disini maksudnya pemilihan gambar, pemilihan warna ataupun pemilihan widget yang pas sehingga semuanya terlihat sangat cocok dan bisa dikatakan desain yang ada pada blog kita sangat indah.
Pada kesempatan kali ini BlogCepot akan memberitahukan kepada kalian semua mengenai 3 Widget Keren Yang Wajib Ada Di Blog Kamu.
Sebelum memberitahukan widget yang keren kepada kalian semua ada baiknya kalau kita mengetahui terlebih dahulu bagaimana cara mesang widget pada sebuah blog.
1. Masuk ke dasbor blog kemudian pilih blog yang akan kamu tambahkan widgetnya
2. Klik Tata Letak
3. Klik Tambahkan Gadget
4. Akan muncul tab baru dan silahkan pilih widget/gadget yang mau kalian terapkan pada blog kalian.
Okeh sekarang saatnya saya memberitahukan 3 Widget Keren Yang Wajib Ada Di Blog Kamu.
1. Label
Untuk membuat Label seperti yang ada pada gambar, caranya sama seperti yang tadi sudah dijelaskan namun pada saat langkah yang ke 4 pilihlah widget label.
Setelah itu pergilang ke menu Template lalu pilih Edit HTML -> Cari script /* CSS label */
Setelah ketemu hapus script tersebut dari mulai /* CSS label */ sampai /* End CSS label */
Kemudian pastekan script dibawah ini persis ditempat anda menghapus /* CSS label */
/*CSS Label*/
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #4399cd;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background: #54aee3; }
.Label a:after{
content: "";
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}
Jika kalian ingin mengubah warna dari label sesuai keinginan ganti script yang berwana :
Merah untuk warna dasar/tampilan awal label
Biru untuk warna hover/perubahan warna jika label tersentuh mouse.
Terakhir Klik Simpan
2. Popular Post
Untuk membuat Popular Post pelangi seperti yang ada pada template Evo Magz, caranya sama seperti yang tadi sudah dijelaskan namun pada saat langkah yang ke 4 pilihlah widget Popular Post.
Setelah itu pergilang ke menu Template lalu pilih Edit HTML -> Tambahkan script dibawah ini tepat di atas ]]></b:skin> atau </style>
/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none; }
.PopularPosts ul { margin:.5em 0; list-style:none; color:black; 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:bold; 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:0px; right:0px; padding-right:0px !important; }
/* Set color and level */
.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 0 0 0; } .PopularPosts .item-snippet { font-size:11px; }
.profile-img{ display:inline; opaciry:10; margin:0 6px 3px 0; }
Terakhir klik Simpan
3. Random Post
Untuk membuat Random Post seperti yang ada pada gambar, caranya sama seperti yang tadi sudah dijelaskan namun pada saat langkah yang ke 4 pilihlah html/javascript.
Kemudian isi Judulnya sesuai keinginan kamu, misal Random Post
Setelah itu Copykan script dibawah ini pada textarea yang berada dibawah judul
<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:white;width:60px;height:60px;padding:3px}
-->
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=7;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4uF2lpnPKyb2qLNeiXmI2sCAuPvkyvhocGu2AGrbwXmSgNKySHo3-ckIi7fvyorx3YHTH3GL_EQLnGUBQGWp41M1Z2liUnNbr0n3BgsNa0js6zNQ_AFIXQROrns3gxoCUsd8Gax-RKUJ/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Jika kalian ingin mengubah warna dari Popular Post sesuai keinginan ganti script yang berwana :
Merah untuk warna bordernya
Biru untuk mengatur jumlah postingan yang muncul.
Terakhir Klik Simpan.
Catatan : Untuk pemasangan sebaiknya widget/gadget dipasangkan seperlunya karena jika terlalu banyak widget yang dipasangkan pada blog kalian maka akan membuat loading blog menjadi berat dan hal itu sangat tidak disenangi pengunjung :)