Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Wednesday, August 17, 2016

Cara Membuat Postingan Terbaru Dengan Gambar Di Halaman Depan Blog



Nuran-info - Hy guys kali ini saya akan membagikan Cara Membuat Postingan Terbaru Dengan Gambar Di Halaman Depan Blog. Widget ini berfungsi untuk memperindah tampilan beranda dan memudahkan pengunjung menemukan postingan terbaru kalian.

Widget Menulis Terkini plus Gambar Thumbnail ini serasi untuk blog info atau majalah. Utk blog pribadi dgn jenis relatif sedikit, sebaiknya memanfaatkan Template Simple saja supaya kesan personalnya kental.

Cara Membuat Postingan Terbaru Dengan Gambar Di Halaman Depan Blog

 Berikus Ini cara Membuatnya :

1. KODE CSSSimpan di atas kode ]]></b:skin> atau <style>


img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}
#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}
#label_with_thumbs li{list-style: none ;padding-left:1px !important;}
#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }
 
 2. KODE JAVASCRIPT
Simpan di atas kode </head>

<script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-UyoYaOJgiCJg6riEdxF4X4C70LRsAzYZ8nNknwNAV9rFM-8oMCZ1NbAJXQzf8cORMz_xya4EKjsKRclDSylunjsP_Vc0oNDAaRKp6pTsm_zNa_yLEzzg6yQ7svn2geX0iR8GY5WAA8o/s1600/picture_not_available.png';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>

3. Save Template!

KODE HTML
Kini saatnya memasang widget posting terbaru plus image thumbnail.

4. Layout > Add a Gadget > pilih HTML/Javascript
5. Simpan kode berikut ini dan ganti nama labelnya:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>

Tuesday, February 16, 2016

Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci

Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci
Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci - Kali ini Script Sampah Akan Membahas Cara Menghapus Widget Yang Tidak Bisa Di Hapus Atau Terkunci.

Biasanya widget yang tidak bisa terhapus ini akan muncul jika berganti-ganti template, dimana widget maupun fitur yang ada ditemplate tersebut jika diganti maka akan meninggalkan widget tersebut pada bagian tata letak.


Mengapa widget tersebut tertinggal? Karena widget akan menjadi terkunci bila kita mengganti template. Widget yang tertinggal ini tidak bakal kita ubah posisinya sehingga dapat mengganggu tampilan blog anda.

Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci

1. Masuk Ke Blogger Anda 
2. Setelah Masuk Ke Blogger > Klik Tata letak Dan lihat nama widget yang terkunci


Gimana Si cara ngebedain widget yang terkunci dengan yang tidak terkunci?

widget yang terkunci dan tidak terkunci pada bagian tata letak dapat dilihat dari sisi bagian kiri widget yang dimana widget yang tidak terkunci terdapat garis berwarna abu-abu.

Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci
Gambar Diambil Dari bagiilmubermanfaat
3.Lanjut, Abis Itu masuk ke bagian Template,klik edit HTML
Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci
Gambar Diambil Dari bagiilmubermanfaat
4.CTRL+F, Kemudian cari nama widget yang terkunci atau tidak bisa dihapus.
Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci
Gambar Diambil Dari bagiilmubermanfaat

5. Setelah ketemu,lihat pada bagian kode widget ini pada bagian locked ganti true menjadi false. Hal ini untuk membuka widget yang terkunci tersebut, jika sudah klik Simpan template.
Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci
Gambar Diambil Dari bagiilmubermanfaat
 6. Setelah selesai, kembali lagi ke tataletak. cari widget tadi lalu hapus
Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci
Gambar Diambil Dari bagiilmubermanfaat
Sekian Info Yang Mengulas Cara Menghapus Widget Yang Tidak Bisa Dihapus Atau Terkunci Semoga Bermanfaat Bagi Kalian Semua.. Salam Dari Admin Script Sampah

Saturday, February 13, 2016

Cara Membuat Efek Rating Bintang Di Popular Post

Cara Membuat Efek Rating Bintang Di Popular Post - hallo sob,, kali ini Script Sampah Akan memberikan Cara Membuat Efek Rating Bintang Di Popular Post.
Cara Membuat Efek Ranting Bintang Di Popular Post
Pastinya kalian sudah tau Fungsi Dari Widget ini bukan ? Widget ini berfungsi untuk para visitor atau pengunjung blog kita memberikan ranting pada blog kita. Baiklah, bagi yang ingin mencoba trik ini agar widget Ranting Bintang lebih menarik silakan ikuti langkah sederhana tersebut : Cara Membuat Efek Rating Bintang Di Popular Post Widget ini Menggunakan Font Awsome,Silakan Pastekan Link CSS Berikut Di Atas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Catatan : Jika Link Diatas sudah Terpasang,Silakan Dilewati Langkah Ini
1. Login Ke Blogger>Buka Template Editor>Tambahkan Kode Dibawah Ini Sebelum ]]></b:skin> Atau </style> Style
 /* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.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:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px} 
Style 2 
 /* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.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:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px
Style 3
 /* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.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:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px} 


2. Selanjutnya Simpan Template Dan Lihat Hasilnya :D


Demikian dari trik tentang Cara Membuat Efek Rating Bintang Di Popular Post Semoga
Bermanfaat

Thursday, January 7, 2016

Cara Membuat Responsive Simple Sitemap di Blogger

Cara Membuat Responsive Simple Sitemap di Blogger - Sekarang saya akan share bagaimana cara membuat sitemap di blogger, dengan simple sitemap ini sobat tidak menampilkan semua link postingan blog dalam satu halaman, sehingga akses untuk membuka laman sitemap cukup ringan, jadi hanya akan muncul judul artikel dari tiap label yang di klik. Jumlah postingan yang muncul pada saat label di klik jumlahnya dapat di atur sehingga link postingan dari label tidak akan langsung di tampilkan semua, untuk lebih jelasnya silahkan lihat Disini.

Sitemap yang akan kita buat ini sudah responsive karena jika lebar device kecil maka link postingan yang ditampilkan akan ada di bawah labelnya, sehingga tampilannya lebih rapi.

Cara Membuat Responsive Simple Sitemap di Blogger

Cara Membuat Responsive Simple Sitemap di Blogger

Pertama silahkan buka blogger > Buat Laman baru > Copy-Paste kode di bawah.

<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://www.script-sampah.com';cat_numb=12;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(''+cat_name+'',''+(cat_start-cat_numb)+'',''+cat_class+'');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(''+cat_name+'',''+(cat_start+cat_numb)+'',''+cat_class+'');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}</style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(''+cat[i].term+'','1',''+i+'');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"></script>');
</script>
</div>
<div style='clear:both'></div>

Ganti http://www.script-sampah.com/ dengan http://www.namablogsobat.com/

Sekarang buka Editor Template, Copy-Paste kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>


#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#fff;color:#4d90f0;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post ul li{list-style-type:none;margin-left:-40px}
#navi-cat{padding:20px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px}
#navi-cat span{float:right}

@media screen and (max-width:768px){
    #show-cat{width:35%;}
    #show-post{width:59%;}
}
@media screen and (max-width:480px){
    #show-cat{width:100%;margin:20px 0}
    #show-post{width:100%;}
}

Silahkan simpan dan lihat hasilnya pada laman Sitemap.



Kalau link postingannya terlalu ke kiri ketika di tampilkan (label di klik) silahkan kurangi margin kirinya pada kode margin-left:-40 pada kode CSS #show-post ul li misalnya menjadi margin-left:-20px intinya untuk ukuran lebih bagus harus disesuaikan dengan template blog sobat.

Demikian tutorial Cara Membuat Responsive Simple Sitemap di Blogger, selamat mencoba.

Wednesday, January 6, 2016

Cara Membuat Widget Recent Post dengan Tanggal dan Komentar

Cara Membuat Widget Recent Post dengan Tanggal dan Komentar - Widget Recent Post ini merupakan widget yang memiliki fungsi untuk menampilkan daftar postingan atau artikel yang terbaru pada blog sobat dengan thumbnail gambar serta dengan tambahan keterangan jumlah komentar dan gambar, contohnya seperti gambar di bawah ini, bisa di lihat kalau widget Recent Post terletak di bagian sidebar.

Cara Membuat Widget Recent Post dengan Tanggal dan Komentar
Silahkan sobat terapkan cara di bawah ini untuk membuat widget Recent Post dengan tanggal dan komentar.

Membuat Widget Recent Post dengan Keterangan Tanggal dan Komentar

Silahkan buka Blogger > Tata Letak > Buat Widget baru HTML/Javascript, kemudian Copy-Paste kode di bawah ini.


<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjgS4AgY61RwXHMO-J1R59uZAgyZBs6XPQYPRgN489168iqxIn9Z_1pbTQIDlqpYaJozRwRgyouAWl0KDhvti3DzC7smTAuzYwplhBX5gKu4YS2hwGhRSHzM_wx9tr_Y7HQWRESPd6FbYn/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>');
</script>
</div>

rcp_numposts=5; = Ganti angka 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah karakter isi artikel yang akan ditampilkan saat hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul tulisan dari jumlah komentar.

Sekarang silahkan Simpan dan lihat hasilnya pada blog sobat.

Sesuaikan kembali CSS atau tampilan widget agar sesuai dengan tema blog sobat.

Demikian Tutorial Cara Membuat Widget Recent Post dengan Tanggal dan Komentar, Selamat Mencoba.

Monday, January 4, 2016

Cara Membuat Widget Email Subscribe Di Blogger

Cara Membuat Widget Email Subscribe Flat UI Di Blogger - Dengan membuat variasi untuk menata tampilan blog, salah satunya adalah membuat kotak email subscribe di bawah artikel atau postingan maupun dengan Flat UI, Banyaknya tersedia CSS di blog lain untuk membuat widget email subscribe ini.

Sekarang saya akan share cara membuat email subscribe yang keren dan responsive, contohnya silahkan lihat pada gambar di bawah ini, cukup menarik kan, memasang Subscribe ini atau lebih sering kita kenal dengan layanan email yang bisa digunakan oleh pengunjung blog setia yang mengikuti blog yang telah mengupdate artikel terbaru dapat di cek dengan melihat emailnya, sebelum memasang widget ini silahkan daftarkan terlebih dahulu blog anda ke feedburner.

Cara Membuat Widget Email Subscribe Di Blogger

Cara Membuat Widget Email Subscribe Dengan Flat UI Di Blogger

Silahkan buka blogger > Tata Letak > Tambahkan Gadget > Html/Javascript > Copy kode di bawah ini.

Subscribe Here
Sign up here with your email address to receive updates from this blog in your inbox.

Silahkan Simpan, dan lihat hasilnya pada blog anda.

Seperti itulah tutorial Cara Membuat Widget Email Subscribe Flat UI Di Blogger, selamat mencoba.

Saturday, January 2, 2016

Cara Membuat Komentar Disqus Menjadi Show Hide

Cara Membuat Komentar Disqus Menjadi Show Hide - Membuat komentar Disqus menjadi Show and Hide pastinya akan membuat kecepatan blog anda menjadi lebih cepat, sebelum menerapkan komentar Disqus menjadi Show Hide, loading blog pasti akan menjadi lambat hal itu terjadi karena script load komentar Disqus yang berat, alternatif lainnya untuk mengatasi loading blog yang lambat karena komentar Disqus silahkan baca Cara Men-Defer Komentar Disqus Di Blogger.

Cara Membuat Komentar Disqus Menjadi Show Hide

Cara membuat komentar Disqus menjadi Show Hide maksudnya adalah memuat komentar Disqus dengan Onclick Event, jelasnya kita akan membuat sebuah tombol yang apabila di klik akan memuat kolom komentar Disqus, contoh nya ada pada blog ini silahkan cek di bawah artikel ini terdapat tombol Load Comment.

Cara Membuat Komentar Disqus Menjadi Show Hide

Jika blog sudah terpasang Widget Disqus dan script yang berkaitan dengan Disqus (CSS juga termasuk) silahkan di hapus dulu, agar tidak ada kesalahan setelah menerapkan tutorial ini, kemudian pastikan di dalam template blog sudah ada link fontawesome.

Pertama login ke blogger > Template Editor > Cari kode di bawah ini.

<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>

Tambahkan kode di bawah ini tepat di bawah kode di atas.

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>

Selanjutnya tambahkan kode di bawah ini tepat sebelum tag </body>.





Ganti SCRIPTSAMPAH dengan username Disqus anda

Sekarang tambahkan CSS di bawah ini sebelum tag </style> atau ]]></b:skin>.

/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}

Selanjutnya cari kode di bawah.

<div class='comments' id='comments'>

Tambahkan kode di bawah ini tepat di atas kode yang di cari.

<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

Dan yang terakhir adalah untuk menampilkan jumlah komentar Disqus di halaman Home dan Postingan, caranya adalah dengan menambah kode di bawah ini pada post meta atau post info sesuai dengan yang digunakan pada template.

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

Simpan Template, silahkan cek hasilnya, Demo membuat komentar Disqus Show Hide bisa langsung dilihat di bawah artikel ini.

Cara Membuat Komentar Disqus Menjadi Show Hide
Demikian Tutorial Cara Membuat Komentar Disqus Menjadi Show Hide, Selamat mencoba