-->
Iklan

Text Message

Template Neo Johny Wuss - Template SEO Friendly New Johny Wuss (NJW) Versi 4.

Template ini gatis, dengan catatan: Anda TIDAK BOLEH MENGHAPUS / MENGUBAH Credit Link CB Blogger dan Creating Website.

Hapus credit link template gratisan itu pelanggaran. Blog Anda bisa dibanned atau dihapus Google.
thumbnail

10 Tips Menulis Artikel Blog agar Disukai Pembaca

Posted by Riyanto Style on Monday, November 6, 2017

Hasil gambar untuk ArtikelSebenernya sudah banyak yang nanya ke saya seperti pada screenshot di atas.Tapi baru sekarang bisa menulis tips menulis artikel di blog.

Alasannya bukan karena saya meles berbagi, tapi karena secara pribadi saya belum yakin kalo tulisan saya sudah bisa dibilang bagus.
Beberapa dari sobat mungkin sudah tahu kalau saya ngeblog bukan dari hobi menulis. Jadi wajar kalau saya merasa tulisan saya masih jelek meskipun sudah banyak yang bilang bagus.

10 Tips Menulis Artikel Blog

Meskipun saya bukan blogger yang jago nulis tapi nggak ada salahnya jika saya berbagi apa yang sudah saya pelajari. Siapa tahu bisa memberi manfaat. Khususnya bagi yang merasa tulisannya jelek.
Berikut ini adalah tips menulis artikel blog keren banget agar disukai pembaca ala Mas Sugeng:
#1. Menulis seperti ngomong ke teman
Hal paling mudah supaya tulisan kita enak dibaca adalah dengan menulis seperti halnya kita sedang ngomong ke teman.
Bagi sobat yang jarang ngomong khususnya ngomong bahasa Indonesia mungkin agak sedikit sulit. Solusinya cuma ada satu, praktek, praktek, dan praktek.
#2. Tahu dengan topik yang ditulis
Salah satu alasan kenapa tulisan kita nggak enak dibaca adalah karena kita nggak ngerti dengan topik yang kita tulis.
Mungkin ini menjadi salah satu alasan kenapa blog ini jarang diupdate. Saya nggak kepengin nulis sesuatu yang saya sendiri ngga ngerti dan nggak paham.
#3. Jangan kebanyakan basa-basi
Pengguna internet sekarang super sibuk. Jangan habiskan waktu pembaca blog sobat hanya untuk membaca basa-basi nggak penting dari sobat.
Basa-basi boleh, tapi usahakan untuk tidak terlalu panjang lebar dan bertele-tele.
#4. Libatkan pembaca
Jika sobat sudah sering membaca di blog ini pasti sobat tahu jika saya sangat sering menggunakan kata “sobat.” Alasannya karena saya kepengin melibatkan pembaca blog ini.
Jika di setiap tulisan yang sobat tulis hanya membahas tentang “saya, saya, dan saya” atau “dia, dia, dan dia” maka lama-lama pengunjung akan males karena merasa tidak dianggap. hehehe..
#5. Gunakan gaya bahasa yang mudah dipahami
Usahakan untuk menggunakan gaya bahasa yang mudah dipahami karena nggak semua pembaca blog kita mempunyai tingkat kecerdasan yang sama. Ada yang cerdas, ada yang lumayan cerdas, sampai ada yang go**ok banget.
Seperti apa itu gaya bahasa yang mudah dipahami?
  • Menggunakan kosakata yang sederhana
  • Tidak menggunakan istilah-istilah yang nggak jelas
  • DLL.
#6. Jangan menulis paragraf terlalu panjang
Usahakan setiap paragraf yang sobat tulis tidak lebih dari 3 baris atau tiga kalimat. Meskipun ini mungkin terlihat sepele tapi menurut saya sangat penting karena paragraf yang terlalu panjang bikin mata cepet pegel.
#7. Gunakan Subheading
Salah satu hal sepele lain yang mungkin sering diabaikan oleh blogger adalah penggunaan subheading. Fungsinya sama seperti nomor 6, supaya bikin mata nggak cepet pegel.
#8. Gunakan bullet point
Yang saya maksud dengan bullet point adalah seperti ini:
  • Ini contoh bullet point
  • Tulisan jadi enak dibaca
  • Nggak bikin bosen
#9. Gunakan Gambar
Dulu saya paling males menggunakan gambar pada postingan. Alasannnya kerena ribet dan menurut saya nggak penting. Tapi kalo sekarang kebalikannya, menggunakan gambar pada postingan adalah sebuah keharusan.
#10. Edit sebelum dipublikasikan
Setelah sobat selesai menulis artikel blog, pastikan sobat membaca ulang apa yang sudah sobat tulis dan edit beberapa bagian jika diperlukan.
Perbaiki kata-kata yang salah ketik, hapus kalimat-kalimat yang tidak begitu penting, dan lain sebagainya.

Kesimpulan

Menulis artikel blog yang keren sebenernya nggak sulit. Yang membuat sulit karena kita nggak terbiasa. Jadi biasakanlah menulis artikel di blog. Jangan suka Copy paste artikel Blogger Lain.
Mungkin hanya segitu saja apa yang bisa saya bagikan kali ini. Tulisan ini tentu saja akan selalu saya update, menyesuaikan dengan kemampuan menulis yang saya miliki.
Terima kasih
November 06, 2017
thumbnail

Cara Menghilangkan Icon Obeng dan Tang di Blogger

Posted by Riyanto Style on

Banyak pengguna blogger.com yang merasa terganggu dengan adanya icon Tang dan Obeng di blog.
Fungsi icon tersebut sebenernya cukup bermanfaat, yaitu untuk mengedit widget-widget di blog kita tanpa harus masuk ke dasbor blog.
Selain itu icon ini hanya akan terlihat oleh pemilik blog. Pengunjung nggak akan melihat icon Tang dan Obeng ini.
Tapi bagi sobat yang tetap merasa terganggu dengan adanya icon ini dan ingin menghapusnya, maka silakan ikuti caranya di bawah ini:
#1. Masuk ke dasbor blog > klik “Template” > klik “Edit HTML”
#2. Tekan CTRL+F dan cari kode ini di dalam template:
<b:include name='quickedit'/>
Jika ketemu, hapus kode tersebut.
NOTE: Jumlah kode tersebut biasanya lebih dari satu. Jika icon yang muncul ada lima, maka kodenya juga ada lima. Hapus saja semuanya.
#3. Klik “Simpan template”
#4. Selesai…..
Terima kasih.
November 06, 2017
thumbnail

Cara Mudah Membuat Toko Online (Online Store) di Blog Blogspot (Blogger).

Posted by Riyanto Style on Sunday, November 5, 2017

CARA membuat toko online (online store, online shop) di Blog Blogspot sangat mudah dan gratis! (Contoh Template Blog Toko Online).

November 05, 2017
thumbnail

Daftar Isi Blog - Halaman Statis Sitemap Simple Fast Loading.

Posted by Riyanto Style on

Daftar Isi Blog -  Halaman Statis Sitemap Simple Fast Loading. Ringan banget gak pake lama. Cara membuatnya tinggal membuat halaman baru (new page) dan masukkan kode. (Lihat Demo Sitemap Simple).

Kode ini AMAN dari SISIPAN LINK. Kodenya CB tunjukkan secara terbuka, silakan cek, tidak ada link eksternal apa pun. Beda sama kode script daftar isi blog lain yang sering disusupi link blog.

Daftar Isi Blog


1. Page > New Page
2. Isi judul dengan "Daftar Isi" atau "Sitemap"
3. Klik mode "HTML"
4. Copas kode berikut ini:

<script>
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2(); document.write('')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: red;">Baru!!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src=" "/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3 : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
</script>
<script src="http://RSbloggerlab.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Ganti alamat blognya.
6. Klik "Publish" !!!
November 05, 2017
thumbnail

Cara Memasang Recent Posts dengan Satu Gambar Thumbnail

Posted by Riyanto Style on

Cara Memasang Widget Recent Posts (Latest Post, Posting Terbaru, Tulisan Terbaru) dengan Satu Gambar Thumbnail Besar. Lainnya Judul Tulisan Saja. Berikut ini penampakannya:
Cara Memasang Recent Posts dengan Gambar Thumbnail

Cara Memasang Cara Memasang Recent Posts dengan Satu Gambar Thumbnail

1. Layout > Add a Gadget > Pilih HTML/JavaScript
2. Isi judul dengan Latest Post atau semisalnya
3. Copas kode berikut ini:

<style>
.clear { clear:both; } .recent-post-title { background:#fff; margin:0 0 5px; padding:0; position:relative; } .recent-post-title h2 { font:normal bold 14px Arial,sans-serif; height:26px; line-height:26px; margin:0 0; padding:0 10px; background:#0b944b; color:#ffffff; display:inline-block; } .recent-post-title h6 { float:right; font:normal bold 10px Arial,sans-serif; height:26px; line-height:26px; margin:0 0; padding:0 10px; color:#ffffff; display:inline-block; border-bottom:5px solid #906090; } .recent-post-title h2 a { color:#ffffff; } .recent-post-title h2 a:after { content:"\f18e"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-left:6px; } .recent-post-one-thumb { float:left; width:50%; margin:0 0; } .recent-post-one-thumb .widget { padding:0 10px 10px 0; } .recent-post-one-thumb .widget-content { background:#ffffff; border:1px solid #e5e5e5; padding:15px; } .recent-post-one-thumb ul { list-style-type:none; margin:0 0 0 0; padding:0 0 0 0; } ul.rp_thumbs { margin:0 0 0 0; } ul.rp_thumbs li { font-size:12px; height:auto; margin:0 0 5px; padding:0 0 2px; border-bottom:1px solid #e5e5e5; } ul.rp_thumbs .rp_thumb { position:relative; background:#fbfbfb; margin:3px 0 10px 0; width:100%; height:0; padding-bottom:46%; overflow:hidden; } ul.rp_thumbs .rp_thumb img { height:auto; width:100%; } ul.rp_thumbs2 { font-size:13px; } ul.rp_thumbs2 li {    height: auto;
    font-size: 11px;
    margin: 0 0 5px;
    padding: 0 0 2px;
    border-bottom: 1px solid #e5e5e5;} ul.rp_thumbs2 .rp_thumb2 { background:#fbfbfb; float:left; margin:3px 8px 0 0; height:60px; width:60px; } ul.rp_thumbs2 .rp_thumb2 img { height:60px; width:60px; } span.rp_title { font:normal normal 14px Arial,sans-serif; display:block; margin:0 0 5px; line-height:1.4em; } span.rp_title2 { font-size:14px; } span.rp_summary { display:block; margin:6px 0 0; color:#666666; } span.rp_meta { background:transparent; display:block; font-size:11px; color:#666666; } span.rp_meta a { color:#666666 !important; display:inline-block; } span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more { display:inline-block; margin-right:8px; } span.rp_meta_date:before { content:"\f073"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; } span.rp_meta_comment:before { content:"\f086"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; } span.rp_meta_more:before { content:"\f0a9"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; } ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover { color:#0072C6; }
</style>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = false;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = false;
var showpostdate2 = false;
var showpostsummary = false;
var numchars = 100;
var thumb_width = 180;
var thumb_height = 100;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtz1NrkGjQSjwBU88EkC1LHW5hPmEqDOwtYR9LHR0UYUIOUJPWOVH3VxBMgYYqPR0pCVdg6w3C5ZTXfptSJSKH_Kn6BalG2j5mD2TVtN6X8ljxB4JpZ_WTZ9nDcqMDQRIlmtXIDgFNUNT/w300-c-h140/no-image.png'
var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7W35g40_Itmol7134dpSl8vrBpa0coGxKRaamBDDkW89WlGctQHO8Q1KZn843yWUmPoLPWVdGtlG-nI-d1qGHnGFzwnE1VPUtOkqMgfjnu0X5AoWL95l1vLeTeLfB6gxZfqEpBtgD-n6/s60-c/no-image.png'
</script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(e){for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url;l=l.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.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!=""){l=d}else l=no_thumb}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);document.write('<ul class="rp_thumbs">');document.write("<li>");if(showpostthumbnails==true)document.write('<a href="'+i+'"><div class="rp_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+r+'" title="'+r+'" src="'+l+'"/></div></a>');document.write('<span class="rp_title"><a href="'+i+'" title="'+r+'" target ="_top">'+r+"</a></span>");var y="";document.write('<span class="rp_meta">');if(showpostdate==true){y=y+'<span class="rp_meta_date">'+g+"/"+m+"/"+v+"</span>"}if(showcommentnum==true){if(u=="1 Comments")u="1 Comment";if(u=="0 Comments")u="No Comments";u='<span class="rp_meta_comment"><a href="'+f+'" target ="_top">'+u+"</a></span>";y=y+u}if(displaymore==true){y=y+'<span class="rp_meta_more"><a href="'+i+'" class="url" target ="_top">Read More...</a></span>'}document.write(y);document.write("</span>");document.write('<span class="rp_summary">');if("content"in n){var w=n.content.$t}else if("summary"in n){var w=n.summary.$t}else var w="";var E=/<\S[^>]*>/g;w=w.replace(E,"");if(showpostsummary==true){if(w.length<numchars){document.write("");document.write(w);document.write("")}else{document.write("");w=w.substring(0,numchars);var S=w.lastIndexOf(" ");w=w.substring(0,S);document.write(w+"...");document.write("")}}document.write("</span>");document.write("</li>");document.write("</ul>")}document.write('<ul class="rp_thumbs2">');for(var t=1;t<numposts2;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=1;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var x;try{x=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.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!=""){x=d}else x=no_thumb2}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);if(showpostthumbnails2==true)document.write('<a href="'+i+'"><div class="rp_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+r+'" title="'+r+'" src="'+x+'"/></div></a>');document.write("<li>");document.write('<span class="rp_title rp_title2"><a href="'+i+'" title="'+r+'" target ="_top">'+r+"</a></span>");var y="";document.write('<span class="rp_meta rp_meta2">');if(showpostdate2==true){y=y+'<span class="rp_meta_date rp_meta_date2">'+g+"/"+m+"/"+v+"</span>"}if(showcommentnum2==true){if(u=="1 Comments")u="1 Comment";if(u=="0 Comments")u="No Comments";u='<span class="rp_meta_comment rp_meta_comment2"><a href="'+f+'" target ="_top">'+u+"</a></span>";y=y+u}if(displaymore2==true){y=y+'<span class="rp_meta_more rp_meta_more2"><a href="'+i+'" class="url" target ="_top">Read More...</a></span>'}document.write(y);document.write("</span>");document.write("</li>")}document.write("</ul>")};

//]]>
</script>
<script>
document.write("<script src=\"/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
document.write('<div class="recent-post-title"></div>');
</script>

Untuk menampilkan posting terbaru berdasarkan Label/Kategori tertentu, hapus kode warna merah di atas dan ganti dengan kode berikut ini:

<script>
document.write("<script src=\"/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
document.write('<div class="recent-post-title"></div>');
</script>

Ubah Label dengan label posting Anda!

Demikian Cara Memasang Recent Posts dengan Satu Gambar Thumbnail. (RSBlogger).*
November 05, 2017
thumbnail

Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

Posted by Riyanto Style on

Widget Featured Post Default Blogger Hasil Modifikasi - Responsive
Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

DEMO widget featured post ada di halaman depan. Featured Post ini termasuk fitur baru blogger. Dirilis 10 Desember 2015 secara resmi oleh Google Blogger dengan judul posting Highlight the posts that matter the most.

"As bloggers, we all know how important it is to post frequently in order to encourage readers to come back. Of course, the more you post, the more quickly your posts slip down into the archives, making it harder for your readers to discover everything you’ve posted that they might be interested in."

"To help make it easier to showcase the posts you want your readers to see, we’ve created a new gadget called Featured Post. With Featured Post, you can choose posts you’ve shared on your blog and highlight them wherever you’d like."

Demikian kata Google. Intinya, widget featured post ini untuk menampilkan posting unggulan di blog kita. Cara memasangnya seperti pasang widget biasa, yaitu Add a Gadget > Pilih Featured Post.

Step 1Log in to the Blogger dashboard. Click the drop-down arrow next to the "Post lists" icon. Click "Layout" on the list.
Step 2Click "Add a Gadget" on the sidebar where you want to insert featured posts. In the "Basics" section, scroll down and click "HTML/Javascript." This adds a gadget where you can insert HTML tags or Javascript.

Step 3Type "Featured Posts" or any heading you like in the "Title" field.

Widget Featured Post Default Blogger


Widget Featured Post Default Blogger

Jika sudah dipasang, pindahkan widget baru itu ke atas elemen "Blog Post". Save!

Kini masuk ke template: Template > Edit HTML

CSS Code 
Simpan di atas </head>

<style>
.post-summary .image {width: 50%;
    height: 160px;
    margin: 0 15px 0 0;
    position: relative;
    float: left;}
    .post-summary {
width: 92%;
    background: #fafafc;
    padding: 15px 15px 2px 15px;
    margin: 12px 0 0;}
.post-summary h3{margin:0;font-size:18px;padding:10px;font-weight:700;line-height:normal}
.post-summary strong {color:#F55B77;font-weight:700;}
.post-summary p{font-size:13.5px;line-height:19px;margin-bottom:20px}
 @media screen and (max-width:600px){
.post-summary {
    width: 98%;
    background: #fafafc;
        padding: 15px 15px 2px 15px;
    margin: 15px 0 0px;}
.post-summary .image {
    width: 100%;
    height: 185px;
    margin: 0 15px 15px 0;
    position: relative;
    float: left;}
.post-summary h3 {
margin: 0;
    font-size: 18px;
    padding: 10px 0;
    font-weight: 700;
    line-height: normal;}
}
</style>

Ganti Kode Widget Featured Posts
Temukan kode <b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'> ... </widget> 

GANTI dengan ini:

   <b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'>
     <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 style='display:none'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
</b:if>
</b:includable>
     <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img alt='featured post' class='image' expr:src='data:postFirstImage'/>
    </b:if>
    <strong>Featured Post</strong>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <p><data:postSummary/></p>
  </div>
</b:includable>
   </b:widget>

SAVE!

Kini Widget Featured Post Default Blogger Hasil Modifikasi - Responsive sudah terpasang. Lakukan modifikasi sesuai de
November 05, 2017
thumbnail

Cara Mudah Pasang Widget Carousel Responsive untuk Blogger

Posted by Riyanto Style on

Add Responsive Blogger Carousel to Blogspot. Cara Pasang Widget Carousel Responsive untuk Blogger. Untuk menampilkan galeri gambar, foto, atau produk di halaman depan blog. Cocok buat blog Toko Online.

Cara Pasang Widget Carousel Responsive untuk Blogger



LANGKAH
Template > Edit HTML

1. Pasang Script & CSS
Simpan di bawah kode <head> tag paste the following JS and CSS source links:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> 
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 

<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

Note: Do not add JQuery, FontAwesome or Oswald links in the code above to your template if you are already using them in your site.

2. Pasang CSS Lainnya
Next search ]]></b:skin> and just above it paste the following code:

.mbtslides-title2{font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729;width:90%; }#mbt-c{ margin:0px 5px; border:0;width:90%;} 
.flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} #mbt-c li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;}#mbt-c .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px} 
.flexslider .flex-control-nav li{display:inline-block;margin:0 2px} 
.flexslider .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important} 
.flexslider .flex-control-nav a.flex-active{background-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40)} #mbt-c .flex-div{margin:0px auto 20px auto; display:block; border-bottom:0px solid #eee; padding-bottom:20px!important; position:relative;} #mbt-c li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:2em; margin-top:3px;} .flexslider .icontent{line-height:1.5em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } #mbt-c .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} #mbt-c  .mbttitle:hover, .flexslider .itotal a:hover  {color:#333; text-decoration:none;} 
.flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer}
.flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;} 
#mbt-c .iFeatured{overflow:hidden;position:relative;margin:0 0px 10px 0;padding:0;width:120px;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} #mbt-c .iFeatured img{width:100%!important; height:75px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1;   -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solidrgb(144, 241, 40);} .flexslider .idate div{width:18px; line-height:1.6em; text-align:center;} 
.flexslider .idate:after {content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparentrgb(125, 208, 4)  rgb(125, 208, 4);}

Make these changes
To change the green color theme of the slider simply replace the green highlighted color codes with color of your choice. 

Save your template!

Now go to Blogger > Layout
Select "Add a Gadget" > Choose "HTML/JavaScript" gadget

Keep the title field empty and then paste the following code inside it:

<script type="text/javascript"> 
  $(window).load(function() { 
    $('#mbt-c').flexslider({ 
        animation: "slide", 
        directionNav: false, 
         itemWidth: 120, 
        itemMargin: 25, 
       touch: true,  
       slideshowSpeed: 2500, 
      pauseOnHover: true, 
     animationSpeed: 700, 
    }); 
  }); 
</script>
<h2 class="mbtslides-title2">Blogger Carousel!</h2> 
<div class="flexslider" id="mbt-c"> 
<ul class="slides"> 
<script type="text/javascript"> 
//################### Defaults 
var ListBlogLink = "http://mybloggertricks.com"; 
var ListCount = 9; 
var ListLabel = "Make Money Online"; 
var TitleCount = 66; 
var ImageSize = 150; 
//################### Function Start 
function mbtcarousel(json) { 
for (var i = 0; i < ListCount; i++) 
{  
//################### Variables Declared 
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  ""; 
//################### Category 
if (json.feed.entry[i].category != null) 
{ 
for (var k = 0; k < json.feed.entry[i].category.length; k++) { 
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>"; 
if(k < json.feed.entry[i].category.length-1) 
{ ListTag += " ";} 
} 
} 
//################### URL 
for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
      if (json.feed.entry[i].link[j].rel == 'alternate') { 
        break; 
      } 
    } 
ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; 
//################### Info 
TotalPosts = json.feed.openSearch$totalResults.$t; 
if (json.feed.entry[i].title!= null) 
{ 
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount); 
} 
if (json.feed.entry[i].thr$total) 
{ 
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>"; 
} 
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" "); 
ListAuthor=ListAuthor.slice(0, 1).join(" "); 
AuthorPic = json.feed.entry[i].author[0].gd$image.src; 
//################### Date Format 
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
ListDate= json.feed.entry[i].published.$t.substring(0,10); 
                         Y = ListDate.substring(0, 4); 
                        m = ListDate.substring(5, 7); 
                         D = ListDate.substring(8, 10); 
                         M = ListMonth[parseInt(m - 1)];                       
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16); 
                         YY = ListUpdate.substring(0, 4); 
                        mm = ListUpdate.substring(5, 7); 
                         DD = ListUpdate.substring(8, 10); 
                         TT = ListUpdate.substring(11, 16); 
                         MM = ListMonth[parseInt(mm - 1)];   
//################### Thumbnail Check 
if (json.feed.entry[i].media$thumbnail!=null) 
{ 
thumbUrl = json.feed.entry[i].media$thumbnail.url; 
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); 
ListImage= "'" + sk.replace("?imgmax=800","") + "'"; 
}
// YouTube scan 
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null) 
{ 
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop(); 
    
    if (youtube_id.length == 11) { 
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'"; 
        } 
} 
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null) 
{ 
// Support For 3rd Party Images 
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]; 
} 
else 
{ 
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjutd7vzsgr6Gp3ba0FWYzHllbXvDHLuaH-_mqWtFQTKXZWzqsgVU7ZPL6Qc6NOZGLzPE-DAyrGp1YcBnmCb6DpGuiEupKt-waixDNB7XRjukLmzNEEd2WMIYO6jnfTFlwtQnoppgit7Ro/s200/Icon.png'"; 
} 
//###################  Printing List 
var listing = "<li><div class='flex-div'><div class='iFeatured'><a  href=" 
+ ListUrl+ 
  "><img src=" 
+ListImage+ 
"/></a></div><a class='mbttitle' href=" 
+ListUrl+ 
"target='_blank'>" 
+ListTitle+ 
"</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>" 
+ListAuthor+ 
"</span><span class='icomments'>" 
+ListComments + 
"</span> <span class='idate'><div>" 
+ D + 
"</div><div> " 
+ M + 
"</div></span></div></div></li>";
document.write(listing);
} } 
<!-- #### Invoking the Callback Function #### --> 
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtcarousel'></"+"script>"); 
</script> 
</ul></div>


Control Options
:

  1. slideshowSpeed: You can set the speed of the slideshow cycling, in milliseconds
  2. animationSpeed: You can also set the speed of animations, in milliseconds
  3. pauseOnHover: Pause the slideshow when hovering over slider, then resume when no longer hovering
  4. You can edit the widget title by editing: Blogger Carousel!
  5. If you don't want to use the title then delete the yellow highlighted code.
  6. ListBlogLink : Insert your Blog link here
  7. ListCount : Decide how many posts do you wish to display.
  8. ListLabel : Insert your blog label/category here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. If your label is "blogging" and if you type it as "Blogging" then it wont work. You must make sure that all letters are written in correct cases.
  9. TitleCount : Choose how many characters to display in post title.
  10. ImageSize : You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size.
Save!

Source
November 05, 2017