Pular para o conteúdo principal

Cara Membuat Fitur Posting (Featured Post) Blog Tanpa Slide

Demo: Featured Post pada blog FBI
Sobat. Salah satu nilai tinggi yang tersemat ke dalam sebuah blog adalah adanya "isi konten berkualitas". 

Kualitas isi konten inilah yang akan menjadi daya tarik tersendiri bagi pembaca setia blog kita. Namun ada pertanyaan menarik di sini.

"Bagaimana cara pengunjung yang baru pertama kali membuka blog kita, tahu di mana letak konten artikel terbaik kita saat itu?"

Pertanyaan ini seharusnya bisa Antum jawab dengan mudah, JIKA memang Antum telah menyediakan Fitur Posting (Featured Post) di dalam blog. Jika belum, agak sulit untuk menjawab "perasaan" pembaca pertama blog kita. Benar bukan?

Mungkin masih ada yang betanya-tanya, sebenarnya apa sih "makna" Featured post pada sebuah blog? Fungsinya apa?

Featured post merupakan sebuah "fitur blog" yang berisi KONTEN terbaik dari blog seseorang. Biasanya berisi tampilan gambar thumbnail beserta keterangan teks pendukungnya dari total artikel utuh dan terdapat di bagian atas artikel terbaru. Lebih jelasnya, silakan lihat demonya di bawah ini:


Cara Mudah Membuat Featured Post pada Blog Tanpa Slide
Langkah-langkahnya sebagai berikut:
1. Silakan berdo'a dulu njeh
2. Masuk akun blogger
3. Pilih Template > Edit HTML > cari kode </head> dan copy paste kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1nidSGihqz73qefQrBYh8clfQedj2oFPUJdkLAqkuqiPeg-hGMIcUQB11N4-Y_nY1lUEEXc9A84fIBxcnZWUKtYrjmhqiFixa40TjBRGNH8G_A6aHViDNR1dy8NeaKEt7M2D0nM_cjc/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 300;
summaryTitle = 25;
numposts  = 1;

function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    document.write('<div class="slides">')
 if (numposts <= json.feed.entry.length) {
  maxpost = numposts;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
   for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     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;
        }
     }

  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }

     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
 
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; 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!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="290" height="180" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></div>';
 document.write(trtd);

 j++;
}
    document.write('</div>')
}

//]]>
</script>

Keterangan tambahan:
kode warna merah di atas berfungsi sebagai default image yang akan muncul jika posting artikel Sobat tidak menggunakan gambar sama sekali. Sehingga bisa Anda ganti dengan URL Image Sobat sendiri.

4. Cari kode <div class='main-wrapper'> dan masukkan kode di berikut ini tepat di bawahnya, atau tepat di atas kode <b:section class='main' id='main' showaddelement='no'>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end .container-->
</div></b:if>
</b:if>
Keterangan tambahan:
kode yang berwarna merah merupakan kode untuk memunculkan posting terbaru di Featured Post tanpa Slider. Anda bisa mengubahnya jika ingin memunculkan posting terbaru di label/kategori tertentu. 

Misalnya, yang mau dimunculkan posting terbaru di label "Blogging", maka ganti menjadi /feeds/posts/default/-/Blogging

5. Letakkan kode berikut ini tepat di atas kode ]]</b:skin>


#featuredpost {background:#000;float:left;margin:10px 10px 20px 10px; padding:0 0 10px;width:97%; position:relative;color:#eee;}
#featuredpost .featured-thumb {float:left; margin:15px; padding:0px;}
#featuredpost .container {height:205px; margin:0 10px 0 0;overflow:hidden; position:relative;font-family: Arial;font-size: 13px;font-style: normal;font-variant: normal;font-weight: normal;line-height: 1.3em;}
.featuredTitle{padding-top:15px;font:17px Oswald;}
.featuredTitle a{color:#f5ff88}
.featuredTitle a:hover{color:#c00}
Keterangan tambahan:
- Kode warna merah di atas merupakan kode warna kotak featured post. Jika ingin memodivikasi warnanya, silakan ganti dengan kode warna HTML ini.
- Kode warna biru di atas merupakan lebar kotak featured post blog. Sesuaikan dengan lebar blog Anda. Jika masih kesulitan mencari lebar blog Anda, silakan pelajari cara mengetahui lebar sebuah blog.

6. Save template
Demikian tips trik SEO blogging kali ini. Jika ingin menambah modivikasi blog Anda, silakan baca artikel di bawah ini:
Semoga bermanfaat.
Sumber:
http://contohblognih.blogspot.com/2014/05/cara-membuat-featured-post-tanpa-slider.html

Comentários

Postar um comentário

Postagens mais visitadas deste blog

9 Blog Berpenghasilan Tertinggi di Indonesia dari Google Adsense

techzend.com Sobat blogger. Kemarin telah kita ketahui bahwa pendapatan para blogger di Indonesia tahun 2015 ini memang tidak bisa dianggap remeh. Karenanya mereka menjadikan blog sebagai rutinitas pekerjaan sehari-hari.  Bisa dibayangkan, hanya cukup duduk manis, ambil poisi paling enak, serta berhadapan dengan sebuah laptop/ PC disandingkan dengan segelas kopi hangat, kita bisa mendapatkan penghasilan yang insyallloh halal thoyyiban.  Kali ini akan kita lanjutkan bahasan tentang info 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsen s e . Kenapa saya ulas hanya pada fokus yang berpenghasilan dari Google Adsence? Ya karena memang rata-rata para blogger menggunakan GA sebagai pemasukankan utama mereka. Seperti halnya kita tahu, ada juga yang mendapatkan penghasilan blog dari pemasangan iklan dan affiliasi . Blog Berpenghasilan Terbesar di Indonesia Data yang saya sampaikan kali ini, hanya berdasarkan hasil survei serta ulasan dari beberapa sumber lain. Setelah mel...

28 Senjata Ngeblog Wajib para Blogger

Sobat. Pada kesempatan ini akan Ane berikan "senjata pamungkas" ketika bergelut dalam dunia blog, baik blogspot maupun wordpress . Senjata ngeblog ini berupa "tools" maupun "software" yang pasti bermanfaat dan bisa membantu Sobat dalam mengembangkan dan membangun sebuah blog yang berkualitas .  Tidak hanya berkualitas dari sisi desain, namun juga berkualitas dari sisi isi konten. 28 senjata ngeblog terbaik ini sangat muda digunakan. Tidak terlalu bertele-tele dan membingungkan, namun di dalamnye termuat cara yang simpel dan sangat memerikan manfa'at yang luar biasa. Tools ini tidak sekedar saya saja yang menggunakan, namun juga para blogger terkenal lokal maupun manca negara. Senjata Ngeblog Terbaik dan Terpopuler para Blogger Sesuai dengan judul topik bahasan kali ini, maka manfaat dari penggunakan tools di bawah ini untuk membuat sebuah situs, website atau blog yang memang berkualitas. Tidak sekedar blog "asal-asalan". Masih teringat buk...

Bahaya Copy Paste Artikel pada Blog serta Solusinya

Etika Komunikasi Publik Sobat. Pagi ini iseng-iseng Saya mencoba melakukan risearch salah satu artikel bulan kemaren diterbitkan. Judul artikel tersebut yakni 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense.  Ketika muncul di halaman pertama Google, saya coba untuk menelusuri salah satu artikel dari salah satu situs.  Keingintahuan saya itu muncul manakala judul dari artikel yang dipublish di situs tersebut "sama persis" dengan artikel yang saya terbitkan. Saking penasarannya, kemudian saya buka hyperlink dari url situs tersebut. Anehnya, ketika terbuka secara utuh, saya heran, kaget dan tersenyum sipu. Alasanya kenapa? Karena artikel  9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense  ini telah di copas alias copy paste di situs yang saya buka tersebut. Postingan tersebut tidak tergolong dalam istilah rewrite atau tulis ulang, melainkan copy paste secara utuh terhadap seuruh isi artikel yang saya tulis. Tidak nyaris 90 %, namun 100% c...