-->
Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Cara Membuat Related Post  / Artikel Terkait SEO untuk memperbagus blog dan supaya pengunjung bisa melihat artikel-artikel yang terkait atau label yang sesuai tema. Menambahkan Artikel terkait atau related post ini sangat penting karena bisa menambahkan nilai seo di Serp engine.

Penting sekali memasang Related Post / Artikel Terkait yang menambahkan nilai SEO untuk mempermudah pengunjung dengan artikel-artikel yang terkait. Memasang Related Post ( Artikel terkait ) akan mempercepat index ke google.

Jika anda yang masih pemula bisa langsung membaca artikel khusus buat pemula yaitu artikel Persiapan SEO untuk pemula, Anda disana bisa melihat dasar-dasar SEO sebelum membuat blog.

kotak komentar facebook di blogSebelumnya, kita ulas dikit, Kotak Komentar Facebook di Blog bisa bagus buat SEO, jika banyak --bahkan kebanyakan-- pengunjung Anda komentar di sana dan di-share ke akun Facebooknya.

Tapi, jika hanya sedikit, bahkan tidak ada sama sekali yang komentar di kotak komentar Facebook itu, maka sebaiknya LEPAS saja, karena hanya memperlambat loading blog Anda dan ini artinya justru mengurangi SEO Blog --Google suka banget blog yang Fast Loading!

CB sendiri "terpaksa" memasangnya sekadar untuk contoh, namun hanya di halaman posting ini dimunculkannya. Di posting lain tidak ada karena menggunakan Tag Kondisional.

Artikel Terkait (Related Post) Valid HTML5 2014- Artikel terkait atau juga related post berfungsi sebagai penunjuk kepada para pembaca blog atau visitor untuk membaca artikel lainnya yang saling berkaitan dengan artikel yang sedang dibacanya. Banyak sekali artikel terkait atau related post ini yang sudah dibuat, namun banyak Blogger yang menggunakan artikel terkait atau related post dibawah postingan ini tidak valid html5, dan sekarang pada blog Ficri Pebriyana akan membagikan artikel mengenai cara memasang atau membuat related post atau artikel terkait dibawah postingan blog. 

Menjadikan Halaman Postingan Valid HTML5itu sangat berguna dan bermanfaat sekali, ditambah dengan HomePage Valid HTML5 ini akan membantu Artikel Cepat Teridex Google. Pada tahun 2014 ini banyak sekali Blogger yang mengiginkan blognya Valid HTML5 namun ketika mereka menggunakan Template Blog yang sudah dipasangnya sejak lama, mereka kesusahan dalam menjadikan blognya Valid HTML5. Jadi untuk memudahkan blog valid html5 silahkan download saja template yang seo friendly tahun 2014.

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Tag Pre - Membuat seleksi otomatis pada tag blockquote atau tag pre ini memang akan mempermudah dalam melakukan seleksi pada kode-kode atau sebuah catatan yang dibuat dalam kode blockquote atau pre, sehingga akan mempermudah pengunjung yang melakukan seleksi pada kode-kode script yang kita bagikan.

Cara Modifikasi Tampilan Widget Followers GFC | Google Friend Connect - Memodifikasi atau mengubah tampilan widget followers blog Google Friend Connect (GFC) atau tombol Join Us tujuannya agar blog menjadi valid html5, dengan mengubah tampilan gfc atau followers blog maka blog akan menjadi valid html5 saat melakukan validasi untuk itu bagi Anda yang blognya memasang widget followers blog alangkah baiknya melakukan modifikasi pada tampilan jumlah followers blog atau google friend connect tersebut.

Cara Membuat Efek Teks Pelangi Dengan JavaScript - Teks dengan efek rainbow atau warna-warni seperti pelangi ini memang sangat menarik untuk di coba di terapkan di blog kita, apalagi dengan efek warna yang berganti-ganti membuat mata pembaca tertuju pada warna tersebut sehingga kemungkinan besar visitor melihatnya. Biasanya para blogger yang baru mengenal blog suka dengan menghiasi blognya dengan beberapa widget atau efek-efek seperti hujan salju dan efek animasi lainnya termasuk efek teks pelangi ini. 

Memasang Script Anti AdBlock di Blog - AdBlock merupakan plugin yang berfungsi sebagai penghapus atau menyembunyikan iklan pada setiap laman yang sedang kita buka, dengan plugin yang kita pasang pada browser kita memungkinkan kita untuk melakukan browsing lebih cepat karena tanpa adanya iklan yang mengganggu. Namun, di beberapa pihak penggunaan adblock pada browser ternyata menyebabkan kerugian, dianataranya bagi Advertiser atau orang yang beriklan dan Publisher atau orang yang menyebarkan iklan. Kedua pihak ini akan merasakan efeknya, jika setiap orang memasang script pemblokir iklan ini.

Cara Mengganti Halaman Navigasi Blog Dengan Angka

Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan artikel per halaman mulai dari halaman utama sampai postingan terakhir. Dengan adanya elemen tersebut, pengunjung bisa melihat setiap artikel di blog kita yang menarik untuk mereka baca.

Selamat Malam buat sobat blogger semua. pada kesempatan kali ini aku akan bagikan bagaimana membuat slider post di bawah header tutorial ini merupakan kelanjutan dari cara membuat recent post slide disidebar yang sudah aku share beberapa waktu yang lalu, dan juga permintaan salah satu sobat saya yang kemarin request tentang tutorial ini. untuk melihat DEMOnya silahkan buka halaman Gemsmeet.

Cara Memasang Realated Post Keren dengan Gambar

Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan memberikan gambar pada artikel terkait pada blog kita maka blog akan terlihat lebih menarik,,, naah dengan itu mazinu akan memberikan tutorial blogger ini kepada kalian yang sebelumnya tutorial ini sudah saya pakai dan hasilnya lumayan bagus,, tapi mazinu lebih suka yang simpel2 saja seperti yang mazinu gunakan saat ini! yaitu dengan memasang Artikel Terkait dengan icon sendiri. Tapi semua itu selera sendiri-sendiri. benar kan?

yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)

Cara Membuat Widget Featured Post Sidebar Berdasarkan Label Keren  - Widget Memang Sekarang ada banyak ragamnya. Akan tetapi banyak pula yang hanyamemiliki Simple design ataupun tidak responsive. Tapi kali ini saya akan memberikan tutorial yang menyangkup keduanyaYaitu Keren Dan Responsive.
 
Oke Guys. Setelah Saya Memberikan Tutorial Cara Membuat Subscribe Form Responsive Dan Keren Kali Saya akan Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive .Cara Memasang nya sangat gampang, bisa dilakukan dengan cara :

Kopy Script Dibawah Ini > Pilih Tata Letak ( LayOut ) > Add a gadget > HTML/Javascript
  Langsung aja Nih Script nya :v
Note : Tulisan warna merah diganti dengan blog kalian dan label kalian :) 
<style> 
.tabs-md {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    z-index: 2;
}
.tabs-md .tab {
clear:inherit !important;
}
.collection .collection-item.avatar {
    height: inherit !important;
    min-height: 64px;
    max-height: 83px; 
}
.collection-md {
   border:0;
   border-bottom: 1px solid #E0E0E0;
}
</style>
<script>
function showrecentpostswiththumbs(json) {
    document.write('<ul class="collection collection-md">');
    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 = 'http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';

        }


        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="collection-item avatar">');


        if (showpostthumbnails == true)
            document.write('<img class="circle" src="' + thumburl + '"/>');
        document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><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('<i>');
                document.write(postcontent);
                document.write('</i>');
            } else {
                document.write('<i>');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('</i>');
            }
        }

        var towrite = '';
        var flag = 0;
        document.write('<div>');

        if (showpostdate == true) {
            towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + 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 = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
            towrite = towrite + commenttext;
            flag = 1;;
        }

        if (displaymore == true) {
            if (flag == 1) towrite = towrite + ' | ';
            towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top"><small>READ MORE</small></a>';
            flag = 1;;
        }




        document.write(towrite);

        document.write('</div></li>');
        if (displayseparator == true)
            if (i != (numposts - 1));
    }
    document.write('</ul>');

}
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 150;
</script> 
<div class="row">
    <div class="col s12">

      <ul class="tabs tabs-md">
        <li class="tab col s3"><a class="active" href="#test1">LABEL 1</a></li>
        <li class="tab col s3"><a href="#test2">LABEL 2</a></li> 
        <li class="tab col s3"><a href="#test3">LABEL 3</a></li> 
      </ul> 
    </div>
    <div id="test1" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test2" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test3" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div> 
</div>


Cara Membuat Artikel Terkait Sesuai Label Keren Dengan Menggunakan Satu Gambar - Mempunyai tampilan blog yang lebih profesional adalah sesuatu yang di idam-idamkan oleh banyak blogger. Di samping karena tampilan yang lebih bagus, ternyata tampilan blog yang profesional akan dapat memberikan kepuasan tersendiri bagi para pengunjung maupun yang mempunyai blog tersebut.
Bahkan banyak yang berpendapat bahwa tampilan blog sangat mempengaruhi gaya hidup blogger tersebut.

Tampilan blog yang profesional tidak harus memasang banyak widgets di sidebarnya, atau memasang iklan yang melayang kesana kemari, mengganti font artikel yang dapat merusak mata pengunjung, dan lain-lain. Yang di katakan blog profesional adalah blog yang mempunyai tampilan yang enak di pandang dan tidak berkesan berantakan, terlebih dapat membuat penglihatan tidak nyaman. Tampilan profesional adalah tampilan yang lebih di tujukan untuk pengunjung.

Jadi, Anda dapat menilai apakah blog Anda mempunyai tampilan yang profesional dengan cara bersikap seperti pengunjung blog biasa. Hal ini dapat Anda lakukan dengan bersikap seperti halnya Anda berkunjung pada blog lain, Anda dapat menilai apakah blog tersebut mempunyai tampilan yang profesional atau malah berantakan.

Berikut Saya akan sedikit berbagi tentang bagaimana Cara Membuat Artikel Terkait Sesuai Label Keren. Widgets berikut adalah widgets yang dapat memberikan suasana profesional pada blog Anda. Tampilan widgets berikut adalah menampilkan artikel populer berdasarkan label dan terdapat satu thumbnail pada posisi paling atas. Untuk lebih jelasnya dapat Anda perhatikan gambar berikut :

Cara Membuat Artikel Terkait Sesuai Label Keren
  • Masuk Akun Blogger Anda
  • Menuju ke Template, Edit Template
  • Temukan kode ]]></b:skin> dan letakan kode berikut tepat di atas kode ]]></b:skin>
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

  • Temukan kode </head> dan letakan kode berikut tepat di atas kode </head>

</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 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];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
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] = relatedTitles[i];}}
relatedTitles = 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((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>
');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}i++;}
document.write('</ul>');}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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/AVvXsEiVNLu14IkIKpHYFM2vjF1NqzesdmBvEX1P4by5CLtEFYUQ7neB1tNqD-nyrqJ_91xJFTpTMmc_vuYj6SgbRBJKtqmlMXTdwbbxG_ZRAVbdZLklAoSDQzuaziy6CKvSs0-HCe2oyMfAzaBV/';}

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+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+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='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>
');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>
');}
//]]>
</script>
  • Simpan Template / Save Template
  • Menuju ke Tata Letak, kemudian Add Gadgets
  • Pilih HTML/JavaScript
  • Masukan kode berikut
 
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

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

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>
";
 document.write(item);
 }
 document.write('</ul>
');
 }
</script>
<script src="http://ladaskipzen.blogspot.com/feeds/posts/summary/-/Komputer?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://ladaskipzen.blogspot.com/search/label/Komputer" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

  • Simpan, Simpan Setelan
Mungkin hanya sampai di sini saja tentang Cara Membuat Artikel Terkait Sesuai Label Keren. Semoga dengan adanya artikel di atas dapat merubah blog Anda lebih terlihat profesional. Dan jangan lupa untuk memberikan komentar, kritik, saran Anda di Kotak Komentar di bawah ini. Terima Kasih!