Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail

Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail - Halo, kali ini saya memberikan tutorial yang hampir sama dengan postingan yang lalu, yaitu membuat artikel terbaru atau recent post, bedanya yang artikel sebelumnya artikel terbarunya tidak terdapat thumbnail alias gambar namun kali ini sudah terdapat gambarnya. Perbedaannya memang tidak terlalu mencolok namun recent post kali ini sudah pasti lebih dapat menarik pengunjung karena gambar merupakan faktor besar untuk dapat memikat pengunjung agar membaca artikel tersebut.

Widget seperti ini biasanya digunakan pada template magazine untuk menampilkan artikel-artikel terbarunya pada post homepage berdasarkan label yang digunakan, atau bisa juga digunakan pada sidebar untuk menampilkan recent post dengan label tertentu. Bahkan bisa juga untuk digunakan untuk menampilkan daftar posting terrakhir yang di publikasikan seperti recent post biasa. Semua tergantung pada pengaturannya dan kebutuhan pada blog itu sendiri. Mungkin sudah cukup untuk penjelasan tersebut, sekarang  langsung saja ke tutorialnya :

Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail

1. Copy kode dibawah ini lalu pastekan diatas kode </head>

<script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function labelthumbs(json){document.write('<ul class="taglabel">');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/AVvXsEgUHEnSBrHKiKFQn5Br1XstKfxquOOXgr3bhFdWAXz2IKPdWhDzwCNUDmW48uW88H30n1RDAXxa-YOWAtGylthqpDntSoDJ10FTkQqOxBcqYaYysZlyijggfKZsy3bQhDlh-6CpE8bhUktJ/'}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]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("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+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+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=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}//]]></script>

2. Lalu copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}.taglabel{float:left;width:100%;padding:0;margin:0}ul.taglabel li{padding:5px 0;min-height:73px}

3. Masuk ke menu Tata Letak → Tambahkan Gadget
4. Pilih HTML/JavaScript
5. Copy kode dibawah ini dan pastekan di dalam widget tersebut.

<script type='text/javascript'>    var numposts = 5; // Jumlah Post yang di tampilkan    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]    var displaymore = false; // Ganti "true" untuk menampilkan link [More]    var displayseparator = false;    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]    var numchars = 60; // Character Deskripsi yang di tampilkan</script><script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Perhatikan kode dibawah ini :

<script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Silahkan ganti kode "NAMA_LABEL" sesuai dengan nama label kalian.

Jika ingin membuat recent post biasa (tanpa berdasarkan label), ganti baris kode diatas dengan kode dibawah ini :

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

 6. Selesai

Mungkin itu saja untuk Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga artikel ini bermanfaat dan terima kasih.

Simak Video Cara Memasang Artikel Terbaru Berdasarkan Label dengan Thumbnail

 

Cara Memasang Artikel Terbaru Berdasarkan Label

Cara Memasang Artikel Terbaru Berdasarkan Label - Halo selamat pagi, kali ini kita akan membahas tentang artikel terbaru yang berdasarkan label untuk Blogger. Fungsi ini hampir sama dengan widget artikel terbaru yang biasa, akan tetapi didalam widget ini, kita bisa menentukan artikel dengan label tertentu yang dapat tampil.

Silahkan lihat contoh dibawah ini untuk lebih jelasnya. Gambar dibawah ini merupakan artikel terbaru yang hanya menampilkan artikel yang berlabel MOBILE saja :

Nah, jika kalian ingin artikel terbaru berdasarkan label pada blog kalian, silahkan ikuti tutorial berikut :

1. Masuk ke dashboard kalian
2. Pilih menu Tata Letak → Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini dan pastekan di dalam widget tersebut.

<script style="text/javascript">var numposts = 9;var standardstyling = true;</script><script type='text/javascript'>function showrecentposts(json) {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 == 'alternate') {posturl = entry.link[k].href;break;}}posttitle = posttitle.link(posturl);if (standardstyling) document.write('<li>');document.write(posttitle);}if (standardstyling) document.write('</li>');}</script><script src="http://www.mastahbloging.com/feeds/posts/default/-/Blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>

*Ganti kode 9 sesuai dengan keinginan kalian.(jumlah artikel yang akan ditampilkan).
*Ganti kode http://www.mastahbloging.com/ dengan URL blog kalian.
*Ganti kode Blogging dengan nama label kalian.
5. Simpan

Mungkin itu saja untuk Cara Memasang Artikel Terbaru Berdasarkan Label. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga artikel ini bermanfaat dant terima kasih.

Simak Video Cara Memasang Artikel Terbaru Berdasarkan Label

 

Cara Membuat Kotak Pencarian di Blog dengan Mudah

Cara Membuat Kotak Pencarian di Blog dengan Mudah - Halo selamat pagi, rasanya sudah lama saya tidak membuat artikel baru lagi di blog ini. Kali ini saya akan membuat artikel yang akan membahas tentang Cara Membuat Kotak Pencarian di Blog dengan Mudah. Kotak Pencarian atau bisa disebut juga Search Box merupakan Gatget yang wajib dipasang oleh para blogger, pasalnya fungsi dari kotak pencarian ini sangatlah bagus yaitu untuk memudahkan pengunjung mencari informasi yang mereka butuhkan di blog kita. Fungsi lain dari kotak pencarian adalah untuk membuat blog kita lebih User Friendly.

Disini saya akan menunjukan tiga pilhan kotak pencarian dengan desain yang berbeda-beda, namun tetap keren pastinya. Pertama saya jelaskan terlebih dahulu cara memasangnya.

Cara Membuat Kotak Pencarian di Blog dengan Mudah

1. Masuk ke Dashboard kalian
2. Pilih menu Tata Letak → Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy dan Pastekan kode kotak pencarian
5. Simpan

1. Kode Kotak Pencarian Desain Pertama

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search Here' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

2. Kode Kotak Pencarian Desain Kedua

<style>.serching{margin:0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}</style><div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

3. Kode Kotak Pencarian Desain Ketiga

<style type="text/css">
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;
    border: 1px solid #dddddd;
    padding: 5px;
    font-size: 12px;
 background-color: #ffffff;
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
    padding: 0 0 0 4px;
    line-height: 2em;
    height: 2em;
    outline: none;
    background: transparent;
    color: #000000;
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
 padding: 0 5px;
    margin: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
 border: none;
 min-width: 2em;
 color: #000000;
    background: #ffffff;
}
html[dir="rtl"] button#_bcd_141013_search_submit {
 right: auto;
 left: 5px;
}
</style>
<form action='/search' id='_bcd_141013_search_form' method='get'>
 <input id='_bcd_141013_search_text' name='q' value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" type='text'/>
 <button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button>
</form>

Mungkin itu saja untuk Cara Membuat Kotak Pencarian di Blog dengan Mudah. Jika ada yang kurang jelas silahkan ditanyakan melalui komentar. Semoga artikel ini bermanfaat dan terima kasih.

 Simak Video Cara Membuat Kotak Pencarian di Blog

  

Cara Memasang Fanspage pada Blog dengan Mudah

Cara Memasang Fanspage pada Blog dengan Mudah - Halo selamat pagi, sudah sangat lama rasanya saya tidak membuat artikel baru. Kali ini saya akan memberikan tutorial Cara Memasang Fanspage pada Blog dengan Mudah. Dengan memasang fanspage pada blog, kita akan lebih mudah mempromosikan fanspage kita, selain itu juga berguna agar pengunjung blog dapat membaca artikel blog kita melalui fanspage kita.

Dijaman yang sudah maju ini. Media sosial sudah sangat banyak digunakan oleh masyarakat karena media sosial itu mudah digunakan oleh siapapun dan yang pasti tidak mengenal umur. Oke, kembali ke topik pembahasan. Fanspage yang kita gunakan kali ini adalah fanspage facebook. Jika kalian belum memiliki fanspage, silahkan buat terlebih dahulu.

Cara Memang Fanspage pada Blog dengan Mudah

• Mendapatkan Kode Fanspage

1.  Silahkan kalian buka https://developers.facebook.com/docs/plugins. Tampilannya nanti akan seperti gambar dibawah ini, lalu klik Plugin Halaman.

2. Tampilan selanjutnya akan seperti dibawah ini. Silahkan atur sesuai keinginan kalian

3. Setelah selesai mengatur, silahkan scroll ke bawah sampai pada tombol Dapatkan Kode lalu klik tombol tersebut nanti akan muncul 2 pilihan menu

4. Silahkan pilih menu IFrame lalu copy kode tersebut

• Memasang Kode Fanspage

Untuk memasang kodenya, silahkan pilih tempat memang kode tersebut, bisa di Header(atas) , Sidebar(samping) , ataupun Footer(bawah).

1. Silahkan masuk ke blog kalian
2. Pilih menu Tata Letak → HTML/JavaScript
3. Pastekan kode tersebut, jika mau silahkan beri judul untuk widget tersebut setelah itu klik Simpan

Mungkin itu saja untuk Cara Memasang Fanspage pada Blog dengan Mudah. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga artikel ini bermanfaat dan terima kasih.

Simak Video Cara Memasang Fanspage pada Blog

 

Cara Mengatasi Error 404 Not Found pada Webmaster

Cara Mengatasi Error 404 Not Found pada Webmaster - Halo selamat siang. Sudah lama saya tidak membuat artikel karena saya sedang melaksanakan UAS dan hari ini baru selesai. Oke, kali ini saya akan membahas tentang Cara Mengatasi Error 404 Not Found pada Webmaster. Pesan error ini dikirimkan oleh webmaster setiap hari dan cara memperbaikinya cukup mudah, namun membutuhkan kesabaran jika terdapat banyak page 404 not found karena kita harus mengatasinya secara manual dan satu per satu.

Penyebab Error 404 Not Found pada Webmaster
Biasanya penyebab terjadinya Error 404 Not Found adalah karena tedapat link yang mengarah ke halaman yang telah dihapus atau rusak. Hal ini terjadi bisa karena salah pengetikan URL blog, dan bisa juga karena halaman tersebut telah dihapus, atau karena link tersebut memang sudah mati.

Cara Mengatasi Error 404 Not Found pada Webmaster
1. Masuk ke webmaster tools kalian
2. Pilih menu Crawl → Crawl Error
3. Centang kotak yang ada disamping Priority lalu klik download, pilih format Google Docs

4. Setelah itu akan terbuka tab baru dan terlihat seperti gambar dibawah ini

5. Silahkan copy semua link tersebut dan taruh pada Notepad
6. Setelah itu, buka menu Google Index → Remove URL

7. Klik Temporarily lalu masukan link yang ingin error didalam kotak yang telah disediakan lalu klik Continue.

8. Lalu akan akan muncul beberapa pilihan, silahkan pilih yang kalian inginkan lalu klik Submit Request.
Keterangan :

• The site owner has removed the page or blocked it from search engines : Dihapus dari halaman dan search engine
• Remove page from cache only : Hanya dihapus dari Cache
• Temporarily hide directory : Disembunyikan sementara di direktori

9. Jika sukses akan muncul pesan seperti ini, statusnya masih Pending karena masih baru mengirim permintaan menghapusan link, tunggu saja nanti statusnya akan otomatis ganti Removed.

Mungkin itu saja untuk Cara Mengatasi Error 404 Not Found pada Webmaster. Jika ada yang kurang jelas silahkan tanyakan melalui komentar. Semoga artikel ini bermanfaat dan terima kasih.

5 Cara Membangkitkan Semangat Ngeblog

5 Cara Membangkitkan Semangat Ngeblog - Halo selamat siang, sesuai janji saya di artikel sebelumnya, saya akan membuat artikel cara mengatasi malas ngeblog. Sebelumnya cari tahu terlebih dahulu apa penyebab kalian malas ngeblog. Setelah kita menemukan menyebabnya, kita akan bisa mengatasinya agar semangat ngeblog kita meningkat. Jika semangat ngeblog kita sudah meningkat, maka akan mudah untuk kita dalam menulis artikel dan peluang menjadi blogger sukses juga akan semakin meningkat.

Nah disini saya akan membahas Cara Membangkitkan Semangat Ngeblog. Ayo dibaca sampai selesai ya.

1. Ingat Kembali Tujuan Awal Ngeblog
Ingat-ingat kembali apa tujuan kalian dulu ngeblog, apa kita ingin berbagi pengetahuan ? atau menyalurkan hobi ? atau untuk mendapatkan uang ? tapi kebanyakan blogger menjadi malas karena ia bertujuan untuk mendapatkan uang. Saat ia tidak mendapatkan apa yang mereka inginkan, ia akan mudah down. Saya dulu ngeblog juga karena uang dan setelah beberapa bulan tidak dapat penghasilan, saya jadi malas ngeblog lagi dan saya vacum beberapa bulan. Setelah saya coba kembali dengan tujuan awal yang berbeda yaitu ingin berbagi pengetahuan, dan hasilnya bagus, saya jadi tidak mudah malas, malah saya tambah semangat lagi.

2. Junjung Tinggi Sikap Optimis
Banyak blogger yang pesimis, mereka tidak percaya akan kemampuan mereka sendiri yang membuat mereka semakin jauh dari kata "Blogger Sukses". Mereka tidak tau bahwa dibalik kesuksesan blogger, mereka dulunya juga seperti mereka, menjadi blogger pemula dan telah banyak berkorban untuk melewati semua masalah-masalah yang dihadapi dalam ngeblog. Jadi percayalah pada dirimu sendiri, orang lain tidak bisa membuat kalian sukses kecuali dirimu sendiri.

3. Buat Jadwal Ngeblog
Membuat jadwal ngeblog tidak hanya berguna bagi kita untuk membangkitkan semangat ngeblog saja, namun juga dapat menambah kepercayaan orang lain karena kita akan dianggap serius dalam ngeblog dan nantinya kepercayaan tersebut dapat berdampak positif juga terhadap blog kita. Kembali ke topik, tidak ada sesuatu yang besar dilakukan tanpa rencana, begitu juga dengan ngeblog, dengan rencana tersebut kita dapat lebih bersiap-siap. Jadwal dapat menjadi pegangan kita agar tidak melakukan sesuatu kesalahan. Buat jadwal sesuai kemampuan kalian sendiri, dan jika sudah membuat jadwalnya jangan coba-coba untuk melanggarnya karena nanti akan sia-sia saja.

4. Buat Target dan Batasan Waktu
Bayangkan ngeblog itu seperti kita bekerja dikantor. Jika kita diberi tugas, pasti bos kita menginginkan tugas tersebut selesai dengan cepat dan bagus, jika tidak selesai pasti kita akan bela-belain lembur. Begitu juga dengan blog, bayangkan blog itu adalah bos kita, yang menuntut kita sehari harus membuat berapa artikel. Coba beri target dan batasan waktu dalam ngeblog misalnya "Pada jam 3 sore, saya harus dapat menyelesaikan 3 artikel" ini hanya misalnya saja. Dengan membuat batasan tersebut, hal itu akan memicu jiwa kita untuk menyelesaikan target sebelum batasan waktu berakhir.

5. Membaca Kisah Blogger-Blogger Sukses
Ini merupakan hal yang menurut saya bagus untuk membangkitkan semangat ngeblog. Kebanyakan orang hanya membaca kisah blogger setelah sukses saja, padahal hal ini bisa mengakibatkan rasa pesimis muncul dan akhirnya malas ngeblog. Baca kisah blogger saat masih menjadi blogger pemula sampai akhirnya bisa sukses. Dengan membaca kisah blogger-blogger sukses, kita bisa belajar bahwa mereka itu saat menuju sukses itu juga harus menempuh ujian dan masalah, namun berkat perjuangan, ketekunan dan kesabaran dirinya, mereka bisa menjadi seseorang yang sukses.

Demikian artikel 5 Cara Membangkitkan Semangat Ngeblog. Semoga artikel ini juga dapat membantu kalian dalam membangkitkan semangan ngeblog kalian. Bagi kalian yang memiliki tambahan atau pengalaman pribadi dalam membangkitkan semangat ngeblog, silahkan berbagi di komentar. Semoga artikel ini bermanfaat dan terima kasih.