Tampilkan postingan dengan label panduan blog. Tampilkan semua postingan
Membuat Kolom Widget Recent Post adalah artikel lanjutan dari memasang recent post di Blogger yang sudah tidak berfungsi lagi. Jadi, kita akan membuat kolom widget recent post sendiri dan tentunya menggunakan kode script dan memasang di didalam template blog kita. Kolom widget recent post ini merupakan buatan mas Kolis karena saya sendiri sampai saat ini belum bisa membuat kode recent post yang bisa tampil diseluruh bagian blog dan tidak melulu tampil di sidebar. Sampai saat ini saya mencoba membuat sendiri, bagaimana recent post bisa tampil didalam artikel blog!

Untuk membuat kolom widget recent post agar ada dibagian sidebar, silahkan anda ikuti langkah-langkah berikut ini
var numfeed = 5; adalah jumlah artikel yang tampil
var urlblog = "http://panduantemplateblog.blogspot.com/"; silahkan ganti url ini dengan url blog anda, JANGAN SAMPAI LUPA!
var charac = 100; adalah jumlah ringkasan dari setiap artikel yang tampil
Okey, itulah cara membuat kolom widget recent post yang bisa anda pasang didalam blog anda dan anda tidak perlu kwatir untuk loading blog setelah terpasang script ini, karena tidak akan mempengaruhi loading blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini Membuat Kolom Widget Recent Post

Untuk membuat kolom widget recent post agar ada dibagian sidebar, silahkan anda ikuti langkah-langkah berikut ini
- Silahkan masuk dulu ke akun Blogger anda
- Masuk ke Template >> Edit HTML >> centang Expand Widget Templates >> tekan tombol Ctrl+F di keyboard
- Cari kode ]]></b:skin>
Dan tambahkan kode berikut diatas kode ]]></b:skin>#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h5 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important} - Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas </head>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://panduantemplateblog.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OiJpJTxK_GDoD-qz3PwlwgKZlqMmHdvBC34CzlPWWJ7fSjUb4EhxmCM0CInkfOwVP4_qEY0BJ45ObOjktg5EUtfvXErTXapwWG5n3qvjKe-5kWfJCK_mK2VGZavDZzLwJ7Qvsyb67U8/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h5><a href='" + posturl + "'>" + posttitle + "</a></h5>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script> - Silahkan simpan Template blog anda terlebih dahulu
- Sekarang tutup menu Template dan buka menu Tata Letak
- Setelah berada di menu Tata Letak, silahkan anda klik Tambahkan Gadget yang ada dibagian sidebar kanan blog seperti yang terlihat pada gambar berikut ini

- Selanjutnya scroll/gulir kebawah dan cari widget HTML/Javascript dan salin kode berikut kedalam kolom HTML/Javascript
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div> - Simpan widget anda dan lihat hasilnya di homepage blog anda
var numfeed = 5; adalah jumlah artikel yang tampil
var urlblog = "http://panduantemplateblog.blogspot.com/"; silahkan ganti url ini dengan url blog anda, JANGAN SAMPAI LUPA!
var charac = 100; adalah jumlah ringkasan dari setiap artikel yang tampil
Okey, itulah cara membuat kolom widget recent post yang bisa anda pasang didalam blog anda dan anda tidak perlu kwatir untuk loading blog setelah terpasang script ini, karena tidak akan mempengaruhi loading blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini Membuat Kolom Widget Recent Post
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat Kolom Widget Recent Post
Cara Memasang Kolom Widget Recent Post ini adalah cara sederhana yang sangat mudah dilakukan karena kita hanya akan menggunakan kolom widget Recent Post yang telah disediakan oleh Blogspot yang ada didalam meny Tata Letak. Untuk memasang kolom widget recent post ini, anda cukup mengikuti panduan yang telah saya buat khusus untuk anda semua. Dan sebelum melanjutkan pembahasan ini, saya jelaskan sedikit mengenai apa itu recent post. Recent post merupakan daftar artikel terbaru yang dibuat dengan kode tertentu agar menyesuaikan dengan tampilan atau isi yang ada didalam blog itu sendiri. Untuk memasang kolom widget recent post ini kita bisa menggunakan widget yang telah disediakan oleh Blogspot atau membuatnya sendiri.
Dan pada artikel ini, kita mencoba untuk memasang kolom widget recent post yang ada didalam menu Tata Letak Blogger. Yuk apakah berhasil...
Karena kolom widget recent post di Blogger sudah tidak bekerja lagi, maka anda harus membuatnya sendiri seperti yang telah saya jelaskan di Membuat Kolom Widget Recent Post
Okey, demikian cara memasang kolom widget recent post di blog tapi sudah tidak berfungsi lagi. Untuk selanjutnya, mari kita diskusikan mengenai permasalahan ini, kenapa recent post tidak muncul? dengan meninggalkan komentar untuk artikel ini Cara Memasang Kolom Widget Recent Post
Dan pada artikel ini, kita mencoba untuk memasang kolom widget recent post yang ada didalam menu Tata Letak Blogger. Yuk apakah berhasil...
- Silahkan masuk dulu ke akun Blogger anda
- Pilih menu Tata Letak (no.1)

Di dalam menu Tata Letak ini, anda akan melihat tampilan menu kotak-kotak (kolom) yang merupakan gambaran skema dari blog anda dan untuk memasang kolom widget recent post, anda cukup mengklik tulisan Tambahkan Gadget (no.2) yang biasanya ada disebelah kanan pada menu Tata Letak - Setelah mengklik Tambahkan Gadget, maka akan muncul halaman pop up (melayang) dari beberapa widget yang bisa anda temukan seperti tampilan berikut ini (no.3)

- Silahkan ada scroll/gulir kebawah, maka anda akan menemukan widget yang bernama Recent post (no.4) seperti gambar berikut ini.

Namun perlu anda ingat, jika Recent post tidak ada maka kemungkinan besar widget ini telah dihapus - Silahkan anda klik dibagian Recent post atau tanda + yang ada disamping kanan
- Lho? Kenapa tampilannya seperti ini? (no.5)

Jika anda mengalami hal seperti itu, maka itu menandakan kalau kolom widget recent post yang disediakan oleh Blogger sudah tidak bekerja lagi - Karena widget recent postnya tidak ada, silahkan anda klik Batal
Karena kolom widget recent post di Blogger sudah tidak bekerja lagi, maka anda harus membuatnya sendiri seperti yang telah saya jelaskan di Membuat Kolom Widget Recent Post
Okey, demikian cara memasang kolom widget recent post di blog tapi sudah tidak berfungsi lagi. Untuk selanjutnya, mari kita diskusikan mengenai permasalahan ini, kenapa recent post tidak muncul? dengan meninggalkan komentar untuk artikel ini Cara Memasang Kolom Widget Recent Post
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Memasang Kolom Widget Recent Post
Cara Membuat Kolom Komentar Facebook di Blog yang saya tulis ini adalah sekian cara yang telah ada dan dibahas oleh teman-teman blogger tanah air dan mungkin cara yang saya buat ini adalah cara termudah dalam membuat kolom komentar facebook di blog. Kenapa saya bilang mudah? Karena hanya sedikit kode-kode yang perlu ditambahkan kedalam halaman pengeditan template blog anda. Cara membuat kolom komentar Facebook di blog ini telah saya terapkan kedalam blog saya sendiri tapi bukan di blog ini karena sudah banyak kode-kode yang telah saya pasang untuk blog ini.

Sebelum melanjutkan pembahasan mengenai cara membuat kolom komentar Facebook di blog ini, sedikit perlu saya jelaskan manfaat adanya kolom komentar Facebook di blog yaitu akan meningkatkan jumlah pengunjung blog anda melalui Facebook. Kok bisa? Karena setiap anda berkomentar maka komentar anda akan tampil di halaman beranda (biasanya ada di sidebar sebelah kanan Facebook) facebookers yang lain dan jika facebookers tersebut membaca update-an komentar anda dan mengkilk tautan komentar tersebut maka secara langsung facebookers tersebut akan diarahkan ke blog anda. Tapi ingat! kolom komentar Facebook di blog ini akan berfungsi maksimal jika yang berkomentar sedang dalam keadaan aktif dengan akun facebooknya atau tidak mencentang Post to Facebook yang ada didalam kolom komentar.
Okey, dan berikut cara membuat kolom komentar Facebook di blog

Sebelum melanjutkan pembahasan mengenai cara membuat kolom komentar Facebook di blog ini, sedikit perlu saya jelaskan manfaat adanya kolom komentar Facebook di blog yaitu akan meningkatkan jumlah pengunjung blog anda melalui Facebook. Kok bisa? Karena setiap anda berkomentar maka komentar anda akan tampil di halaman beranda (biasanya ada di sidebar sebelah kanan Facebook) facebookers yang lain dan jika facebookers tersebut membaca update-an komentar anda dan mengkilk tautan komentar tersebut maka secara langsung facebookers tersebut akan diarahkan ke blog anda. Tapi ingat! kolom komentar Facebook di blog ini akan berfungsi maksimal jika yang berkomentar sedang dalam keadaan aktif dengan akun facebooknya atau tidak mencentang Post to Facebook yang ada didalam kolom komentar.
Okey, dan berikut cara membuat kolom komentar Facebook di blog
- Buatlah sebuah aplikasi yang akan mengintegrasikan blog anda dengan Facebook. Untuk membuatnya, silahkan baca Cara membuat aplikasi Facebook
- Jika sudah selesai membuat aplikasi facebooknya, buka akun blogger anda
- Pilih menu Template >> Edit Html >> centang Expand Template Widget >> tekan tombol Ctrl+F di keyboard
- Cari kode <b:skin><
- Keterangan
- Ganti profil.sriwahyuni dengan nama akun Facebook anda
- Ganti 259054834227698 dengan ID Aplikasi Facebook anda yang telah anda buat
- Cari kode <div class='post-footer-line post-footer-line-3'/> dan tambahkan kode berikut tepat dibawah <div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='10' data-width='550' expr:data-href='data:post.url'/>
</b:if>
- Keterangan
- data-num-posts='10' merupakan jumlah komentar yang tampil. Silahkan anda ganti jika ingin menampilkannya lebih banyak
- data-width='550' merupakan lebar kolom komentar. Silahkan diganti dengan menyesuaikan lebar area postingan blog. Bukan lebar blog
- Selesai dan simpan Template blog anda. Lihat hasilnya di bagian bawah artikel atau diatas kolom komentar Blogspot
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Kolom Komentar Facebook di Blog