Paravan Techno

Home All posts

Tuesday, February 13, 2018

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

✔ Loker Kesehatan February 13, 2018 Comment

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:

Pergi ke Blogger.
Masuk ke menu Template.
Pilih Edit HTML.
Copy code di bawah ini dan paste di atas kode ]]><</b:skin>

.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;}

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.

Tutorial Blog Widget

Cara Membuat Widget Recent Post Keren pada Blog

✔ Loker Kesehatan February 13, 2018 Comment

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:

Pergi ke Blogger.
Pilih menu Tata Letak.
Tambah Widget lalu pilih HMTL/JavaScript.
Masukkan kode dibawah ini.

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

Ganti bagian var posts_no = 10 untuk mengatur jumlah posting yang akan tampil.
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.

Tutorial Blog Widget

Cara Membuat Widget Populer Post yang Keren dan Berwarna

✔ Loker Kesehatan February 13, 2018 Comment

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:

Pergi ke Blogger.
Pilih menu Tata Letak.
Tambah Widget lalu pilih Entri Populer.
Atur pengisian seperti ini (untuk jumlah posting yang tampil dan perhitungan posting dalam batasan waktu bisa disesuaikan sesuai kebutuhan).
Klik Simpan.

Langkah selanjutnya adalah menambahkan CSS agar tampilan entri populer tersebut menjadi berwarna. Caranya sangat mudah, berikut adalah tutorial pemasangannya:

Pergi ke Blogger.
Masuk ke menu Template.
Lalu pilih Edit HTML.
Silahkan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

/* 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;
}

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.

Tutorial Blog Widget

Cara Membuat Widget Sosial Media di Blog yang Berwarna dan Keren

✔ Loker Kesehatan February 13, 2018 Comment

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.

Masuk ke Blogger.
Masuk ke Template.
Lalu pilih Edit HTML.
Jika tidak ada code ini, silahkan copy kode di bawah ini dan paste di bawah kode <head>

<script src="https://use.fontawesome.com/0b1db492d2.js"></script>

Simpan lalu lanjut ke tutorial selanjutnya.

Pergi ke Blogger.
Pilih menu Tata Letak.
Tambah Widget lalu pilih HMTL/JavaScript.
Masukkan kode dibawah ini.

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

Langkah selanjutnya adalah

Ganti https://www.facebook.com/PasuruanCommunityBlog/ dengan alamat Fans Page Facebook kalian.
Ganti http://www.facebook.com/WildanJuwieWiarta dengan alamat Facebook kalian.
Ganti http://www.twitter.com/wildanwiarta dengan alamat Twitter kalian.
Ganti http://www.instagram.com/wildanjw dengan alamat Instagram kalian.
Ganti https://www.youtube.com/channel/UCyUcsrDpezMKN__g-v6hg9Q dengan alamat Youtube kalian.
Ganti 8985882049425470152 dengan ID Blog kalian.

Simpan template.

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

Tutorial Blog Widget

Cara Memasang Widget Like Box Fans Page Facebook di Blog Terbaru 2018

✔ Loker Kesehatan February 13, 2018 Comment

Hai, pada kesempatan kali ini saya akan share Cara Membuat Fanspage Facebook di Blog terbaru 2016. Mungkin agan-agan bingung cara membuat widget Like Box Fanspage Facebook pas lihat cara-cara yang di google, dan pas agan buka Facebook Developers kok gak bisa, ada sejenis tulisan “With the release of Graph API v2.3 the Like Box plugin is deprecated...Like Box Plugin implementation will automatically fall back to the plugin by June 23rd 2015. Saya juga sempat bingung pas mau buat Like Box FP di blog lagi, dan muncul kata-kata tersebut. Dan ternyata saya menemukan caranya.

Ternyata hasilnya beda dengan Like Box yang dulu, dan lebih menarik yang ini. Oke langsung aja ke caranya ya.

Cara Membuat
Fanspage Facebook di Blog terbaru 2015:

Agan harus login Facebook dahulu, lalu masuk SINI.
Lalu isikan Link Fanspage Facebook agan di kolom Facebook Page URL, dan yang lain bisa agan atur sendiri sesuai keinginan agan, untuk Width adalah pengaturan Lebar, sedangkan Height adalah penaturan Tinggi, dikosongi juga bisa.

Kemudian klik Get Code, dan akan muncul 2 jenis script.

Nah, sekarang waktunya memasang di Blognya:

Kuka blogger.com lalu pergi ke Dashboard, dan pilih Tata Letak – Tambah Gadget –
HTML/JavaScript.
Lalu Copy Script Like Box Fans page FB yang pertama dan Paste di HTML/JavaScript itu, dan Copy Script Like Box Fans page FB yang kedua dan pastekan dibawah Script yang pertama tadi yang ada di HTML/JavaScript itu juga.
Sudah deh.

Berhasil kan? Oke sekian artikel yang Saya tulis tentang Cara Membuat Fanspage Facebook di Blog terbaru 2015. Semoga artikel ini bermanfaat bagi agan semua, dan terima kasih sudah berkunjung ke blog ini.