Wednesday, June 13, 2018

Cara Membuat Widget Sosial Media di Blog yang Berwarna dan Keren Terbaru 2018

Pada kesempatan kali ini saya akan memposting tentang Cara Membuat Widget Social Media yang Berwarna dan Keren di Blog. Kurang lengkap rasanya jika kita tidak menambahkan daftar sosial media kita di blog kita sendiri. Widget ini terlihat simpel tapi keren karena banyak variasi warna dan tentunya terdapat Font Awesome. Widget ini diletakkan di sidebar blog (seperti blog ini) dengan isi sosial media Fans Page Facebook, Facebook, Twitter, Instagram, Youtube, dan untuk mengikuti blog kita.

Langsung saja ke caranya.
  1. Masuk ke Blogger.
  2. Masuk ke Template.
  3. Lalu pilih Edit HTML.
  4. Silahkan copy kode di bawah ini dan paste di bawah kode <head>
  5. <script src="https://use.fontawesome.com/0b1db492d2.js"></script>
  6. Simpan lalu lanjut ke tutorial selanjutnya.
  1. Pergi ke Blogger.
  2. Pilih menu Tata Letak.
  3. Tambah Widget lalu pilih HMTL/JavaScript.
  4. Masukkan kode dibawah ini.
  5. <div style="background:#3B5998;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
    <a href="https://www.facebook.com/PasuruanCommunityBlog/" target="_blank" title="Like us on Facebook"><span style="color:#fff"><i class="fa fa-facebook-official" aria-hidden="true"></i> Like me on Facebook</span></a></div>
    <div style="background:#483D8B;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
    <a href="http://www.facebook.com/WildanJuwieWiarta" target="_blank" title="Like us on Facebook"><span style="color:#fff"><i class="fa fa-facebook-official" aria-hidden="true"></i> Follow me on Facebook</span></a></div>
    <div style="background:#1da1f2;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
    <a href="http://www.twitter.com/wildanwiarta" target="_blank" title="Like us on Facebook"><span style="color:#fff"><i class="fa fa-twitter-square" aria-hidden="true"></i> Follow me on Twitter</span></a></div>
    <div style="background:#895a4d;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
    <a href="http://www.instagram.com/wildanjw" target="_blank" title="Like us on Facebook"><span style="color:#fff"><i class="fa fa-instagram" aria-hidden="true"></i> Follow me on Instagram</span></a></div>
    <div style="background:#FF8C00;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
    <a href="https://www.youtube.com/channel/UCyUcsrDpezMKN__g-v6hg9Q" target="_blank" title="Like us on Facebook"><span style="color:#fff"><i class="fa fa-youtube" aria-hidden="true"></i> Find me on Youtube</span></a></div>
    <div style="background:#f3ac13;color:#fff;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
    <a href="http://www.blogger.com/follow-blog.g?blogID=8985882049425470152" target="_blank" title="Like us on Facebook"><span style="color:#fff"><i class="fa fa-user-plus" aria-hidden="true"></i> Follow this blog</span></a></div> Ganti warna merah dengan alamat URL Fans Page Facebook kalian.
  6.  Langkah selanjutnya adalah
    • Ganti warna merah dengan alamat Fans Page Facebook kalian.
    • Ganti warna orange dengan alamat Facebook kalian.
    • Ganti warna biru dengan alamat Twitter kalian.
    • Ganti warna ungu dengan alamat Instagram kalian.
    • Ganti warna pink dengan alamat Youtube kalian.
    • Ganti warna kuning dengan ID Blog kalian.
Simpan template.

Itulah cara menambahkan widget sosial media berwarna dan keren di blog. Terima kasih sudah berkunjung ke blog ini.

Cara Membuat Widget Populer Post yang Keren dan Berwarna Terbaru 2018

Populer post merupakan widget yang disediakan oleh blogger kepada pengelo blog dimana untuk menampilkan posting-posting populer atau paling banyak dilihat, baik berdasarkan satu minggu, satu bulan, dan satu tahun. Widget populer post sangatlah penting dan wajib dimiliki oleh sebuah blog karena agar pengunjung mengetahui posting mana yang paling sering dilihat pada blog tersebut. Dan juga widget populer post juga dapat menambah pageview karena kemungkinan pengunjung akan membacanya jika tertarik.


Pada kali ini saya akan membagikan widget Populer Post yang keren dan berwarna (seperti populer post blog ini). Tutorial membuat widget populer post sangatlah mudah, berikut tutorial pemasangannya:
  1. Pergi ke Blogger.
  2. Pilih menu Tata Letak.
  3. Tambah Widget lalu pilih Entri Populer.
  4. Atur pengisian seperti ini (untuk jumlah posting yang tampil dan perhitungan posting dalam batasan waktu bisa disesuaikan sesuai kebutuhan).
     
  5. Klik Simpan.
Langkah selanjutnya adalah menambahkan CSS agar tampilan entri populer tersebut menjadi berwarna. Caranya sangat mudah, berikut adalah tutorial pemasangannya:
  1. Pergi ke Blogger.
  2. Masuk ke menu Template.
  3. Lalu pilih Edit HTML.
  4. Silahkan copy kode di bawah ini dan paste di atas kode ]]></b:skin>
  5. /* 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 0 0 0 !important;
    padding:10px 20px 10px 10px !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;
    font-family:arial, sans-serif !important;
    font-size:12px;
    font-weight:bold !important;
    display:block;
    position:absolute;
    top:-5px;
    right:-5px;
    border-radius:16px;
    background-color:#333;
    color:#fff !important;
    width:28px;
    height:28px;
    line-height:28px;
    text-align:center;
    padding-right:0px !important;
    border:2px solid #fff;
    }
    /* Set color and level */
    .PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
    }
    .PopularPosts ul li:nth-child(2) {background-color:#F53477;
    }
    .PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
    }
    .PopularPosts ul li:nth-child(4) {background-color:#FF9201;
    }
    .PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
    }
    .PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
    }
    .PopularPosts ul li:nth-child(7) {background-color:#89C237;
    }
    .PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
    }
    .PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
    }
    .PopularPosts ul li:nth-child(10) {background-color:#94368E;
    }
    .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;
    }
  6. Simpan Tema dan lihat blog kalian.
Cukup mudah bukan Tutorial Membuat Widget Populer Post yang Keren dan Berwarna. Baik cukup sekian dan terima kasih sudah berkunjung ke blog ini.

Cara Membuat Widget Recent Post Keren pada Blog Terbaru 2018

Widget Recent Post Keren - Recent post merupakan widget yang menampilkan artikel terbaru dan biasanya ditempatkan pada sidebar blog. Widget ini sangatlah penting karena akan menampilkan postingan terbaru sehingga pengujung mengetahuinya dan akan menambah pageview blog.


Kurang enak rasanya jika sebuah blog tidak terdapat Recent Post, karena recent post sendiri membuat blog lebih berwarna dan tentunya lebih menarik perhatian pengunjung untuk mengkliknya. Widget Recent Postnya seperti pada gambar di atas atau juga sama seperti pada blog ini.
Cara untuk membuat Recent Post sangatlah mudah, berikut adalah tuorial pemasangannya:
  1. Pergi ke Blogger.
  2. Pilih menu Tata Letak.
  3. Tambah Widget lalu pilih HMTL/JavaScript.
  4. Masukkan kode dibawah ini.
  5. <div class="recentpoststyle">
    <script type="text/javascript">
    function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
    </script>
    <script type="text/javascript">
    var posts_no = 10;var posts_date = false;var post_summary = true;var summary_chars = 0;</script>
    <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
    </script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href=" " rel="nofollow"></a>
    <noscript>Your browser does not support JavaScript!</noscript>
    <style type="text/css">
    .recentpoststyle {counter-reset: countposts;list-style-type: none;}
    .recentpoststyle a {text-decoration: none;color: #49A8D1;}
    .recentpoststyle a:hover {color: #000;}
    .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
    .recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
    .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
    .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
    </style></div>
  6. Ganti bagian var posts_no = 10 untuk mengatur jumlah posting yang akan tampil.
  7. Klik Simpan dan lihat blog kalian.
Cukup mudah bukan Cara Membuat Widget Recent Post Keren pada Blog. Cukup sekian posting yang saya buat dan terima kasih sudah berkunjung ke blog ini.

Cara Membuat Artikel Terkait Otomatis di TengahPostingan yang Keren Terbaru 2018

Cara Membuat Related Post di Dalam Postingan - Widget artikel terkait merupakan widget pada blog yang berfungsi menampilkan beberapa artikel yang terkait sesuai label yang memungkinkan pengunjung untuk melihat dan mengklik artikel tersbut. Widget ini bisa berupa thumbnail dan link ataupun link saja.


Widget ini tergolong sangat penting karena bisa meningkatkan pageview blog kita sendiri, dan tak heran bahwa banyak blog yang sudah terpasang widget Related Post. Pada kali ini saya akan memposting Cara Membuat Artikel Terkait di Tengah Postingan Blog. Lebih jelasnya seperti gambar di atas, atau bisa dilihat pada posting blog ini.
Caranya cukup mudah sekali asalkan sobat teliti. Cara ini saya dapat dari websitenya Mbak Arlina. Berikut tutorial pemasangannya:
  1. Pergi ke Blogger.
  2. Masuk ke Template.
  3. Lalu pilih Edit HTML.
  4. Silahkan copy kode di bawah ini dan paste di bawah kode <head>
  5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>
  6. Kemudian tambahkan code CSS di bawah ini sebelum ]]></b:skin> atau </style>
    • Catatan: Pastikan blog sobat sudah terpasang Font Awesome agar ikon muncul. Biasanya kebanyakan template yang di download dari google sudah ada.
    /* Related Post Style 1 */
    .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
    .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
    .related-simplify ul li:nth-child(odd){background:#fefefe}
    .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
    .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
    .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;text-decoration:underline}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
    @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
  7. Selanjutnya adalah cari gan ganti kode <data:post.body/> dengan kode di bawah ini.
    • Catatan: di dalam template sobat ada banyak kode <data:post.body/> dan tergantung templatenya. Sobat bisa coba sampai widget Artikel Terkait muncul.
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Baca Juga</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
  8. Simpan template dan lihat posting  log sobat.
Cukup mudah bukan Cara Membuat Artikel Terkait di Dalam Postingan yang Keren. Cukup sekian dan terima kasih sudah berkunjung ke blog ini. Semoga artikel yang saya buat ini bermanfaat bagi sobat semua.

Cara Mengatasi Numbered List & Bullet List Tidak Muncul di Posting Blog

Cara Mengembalikan Numbered List dan Bulleted List yang Tidak Muncul di Posting Blog - Pada kesempatan kali ini saya akan memposting tentang numbered dan bullet yang tidak muncul pada posting blog meskipun sudah di atur numbered list atau bullet listnya.


Untuk penyebabnya sendiri, saya juga kurang mengetahui, tetapi setelah mencari info tentang ini, bisa dikatakan hal ini disebabkan oleh template yang over edit. 
Jika blog kalian juga mengalami masalah ini, dimana bullet list atau numbered list sudah di atur tetapi ketika di publikasikan bullet / numbered nya kosong, kalian jangan khawatir, disini saya akan memeberikan caranya, karena dulu blog saya ini juga tidak muncul itunya.

Caranya cukup mudah, berikut adalah tutorial untuk mengatasinya:
  1. Pergi ke Blogger.
  2. Masuk ke menu Template.
  3. Pilih Edit HTML.
  4. Copy code di bawah ini dan paste di atas kode ]]><</b:skin>
  5. .post ul,.post ol{margin:20px;margin-top:5px}
    .post ol li{list-style-type:Decimal;padding-left:1px;margin:5px 0 0 20px}
    .post ul li{list-style-type:Disc;padding-left:1px;margin:5px 0 0 20px}
    .widget .post-body ul {padding: 0 1em;margin: 0.5em;line-height: 1.3;}
  6. Simpan template dan lihat blog sobat.
Saya kira sekian posting yang saya buat mengenai Cara Mengatasi Numbered List & Bulleted List Tidak Muncul di Posting Blog. Jika masih tidak muncul mungkin permasalahannya berbeda-beda. Terima kasih sudah berkunjung.