Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Fakta Unik Domain Blog Dari Blogspot.Com Atau Blogger.Com

Fakta Unik Domain Blog Dari Blogspot.Com Atau Blogger.Com - Seperti judulnya pembahasan pada topik kali ini yaitu mengenai DOMAIN BLOG DARI BLOGGER. Mungkin saja saya yang telat mengerti akan hal ini namun buat saya pribadi ini hal yang baru saya ketahui semenjak saya mengenal BLOG DARI BLOGGER.

Logo Blogger Indonesia
Fakta Unik Domain Blog Dari Blogspot.Com Atau Blogger.Com
Nah fakta unik itu adalah link/alamat/domain blog yang memang gratis itu bisa di aktifkan kembali, maksud dari kalimat tersebut yaitu seperti ini. Sebagai contoh saya pernah membuat blog dengan alamat contohlink.blogspot.com , nah blog tersebut di hapus oleh pihak blogger sendiri karna melanggar peraturan blogger.

Mungkin blog tersebut bisa saja di aktifkan kembali dengan mengajukan permohonan pada pihak blogger, misal saja permohonan tersebut di terima dan blog itu kembali aktif dan dapat di akses kembali.

Tapi suatu hari blog tersebut kembali di hapus oleh pihak blogger namun setelah mengajukan beberapa kali permohonan tetap saja blog tersebut tidak bisa di aktifkan lagi. Tentu kita sangat kecewa karena trafik blog dan ratingnya yang sudah bagus harus hilang begitu saja. Tapi mau gimana lagi, kita pun harus merelakan hal itu.

Ini sama seperti yang pernah saya alami, dan kagetnya ketika setelah beberapa lama saya dah ga punya akses masuk ke alamat blog saya, saya iseng searching di google dengan memasukan alamat blog saya yang sudah lama tiada itu dan anehnya di halaman utama google nongol di urutan teratas alamat blog itu.

Tentu saya penasaran apakah memang benar alamat itu telah aktif dan dapat di akses kembali, maka sayapun mengklik link tersebut. Dan ternyata benar, alamat tersebut sudah aktif kembali dan sayangnya yang mengaktifkan atau membuat blog dengan alamat blog saya adalah orang lain. Sempat saya kontek dia tapi ngga ada respon darinya.

Nah setelah itu saya pun coba membuat blog dengan domain yang dulu pernah saya buat, dan ternyata berhasil. Semoga ribuan pengunjung yang dulu bisa balik lagi ke blog baru saya. Aminn....

Sekian kiranya yang bisa saya jelaskan mengenai "Fakta Unik Domain Blog Dari Blogspot.Com Atau Blogger.Com". Semoga bisa bermanfaat bagi para sahabat blogger yang belum tau.

Cara Mudah Membuat Tabel Di Postingan Blog

Cara Mudah Membuat Tabel Di Postingan Blog_ Di dalam sebuah blog yang banyak saya kunjungi terutama pada blog yang berisikan penjelasan tentang spesifikasi suatu produk elktronik, sebagai contoh Handphone (HP), Laptop atau Komputer dan masih banyak lagi. Mereka mengambil langkah ini yaitu untuk memudahkan para pengunjung blog membaca artikel di blog mereka, selain itu tabel juga terkesan lebih rapi.

Tabel blog

Untuk pembuatannya sebenarnya ada berbagai cara, baik melalui kode-kodenya atau melalui Microsoft Word, atau mungkin masih banyyak lagi namun tidak saya sebutkan disini. Dan di postingan kali ini saya akan share caranya membuat tabel dalam postingan blog dengan sangat mudah menggunakan Microsoft Word. Kenapa menggunakan Microsoft word ? Karena sangat mudah dan kita tidak perlu repot-repot membuat atau merancang kode-kode yang begitu rumit untuk kita hafalkan. 

Baiklah silahkan ikuti langkahnya;


1. Buka Microsoft Word versi berapa saja (2003/2007/2010/2013) dan masuk ke menu Insert > Table dan seting table yang kamu inginkan.

2. Jika Sudah selesei membuat table, maka save halaman kamu dan pilih save as type > Web Page, Filtered
3. Kemudian masuk ke folder tempat kamu menyimpan table tadi, klik kanan pada file dan "open with Notepad", disini akan muncul kode HTML yang bisa kamu masukkan di dalam postingan blog kamu.

4. Setelah kode HTML tersebut di copy, masuk ke dalam blog, pilih HTML dan masukkan kode tadi di dalam mode html tersebut.

5. Jika selesei Publish artikel kamu.

NB: Jika kita membuat dan sudah mepastekannya di halaman pembuatan postingan, maka tidak akan muncul jika sobat menggunakan versi compose. Jadi tabel akan muncul setelah di publish, dan sobat bisa lihat dengan cara membuka postingan yang sobat buat tadi.

Selain desainnya yang rapih, ternyata ada kelebihan lainnya dari pembuatan tabel melalui Microsoft Word ini yaitu tampilan tabel akan terlihat dengan baik meski pengunjung blog menggunakan perangkat mobile dalam membukannya. Dan semoga artikel ini bermanfaat buat sahabat G-aNkar BloG, karena tujuan utama saya menulis yaitu untuk penyimpanan saya saja bila suatu saat saya membutuhkannya. Dan selebihnya ya buat di share, toh membagikan ilmu yang telah di dapat dan dapat bermanfaat pastinya akan mendapatkan balasannya kelak di alam sana, amin.

Cara Membuat Tombol Download & Demo Di Blog

G-aNkar BloG. Berawal dari rasa penasaran pada suatu blog yang memiliki tombol download dan demo yang simpel lalu saya berusaha mencari triknya,, ternyata itu sangat mudah untuk di lakukannya. Sedikit kode CSS dan Kode pemanggilnya dalam sebuah postingan.

Download & Demo

Sebenarnya cara ini di tujukan untuk mempermudah kita dalam pembuatan tombol download dan demo di suatu postingan blog, sehingga kita tidak perlu repot-repot membuat kode CSS di setiap membuat suatu postingan atau artikel. Langsung saja pada langkah pembuatannya,


1. Taruh kode dibawah ini diatas kode ]]></b:skin>

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

2. Save template.
3. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http:/azhallea.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http:/azhallea.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Cara diatas adalah tombol halaman demo yang biasa saja tapi bagi anda yang ingin membuat halaman demo menggunakan halaman statis atau menggunakan toolbar seperti di BTemplates, ZoomTemplates, ThemeForest, adalah seperti berikut ini :

1. Dibuat di halaman statis
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahan link Download otomatis.
tombol DOWNLOAD dan DEMO di Blog 2

Berikut ini adalah cara membuatnya :

1. Buat Halaman Statis dengan judul Demo atau Demo Template dll.
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.
2. Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas ]]></b:skin> atau </style>

#view { padding: 0; margin: 0; border: 0; position: fixed; top: 50px; left: 0; right: 0; bottom: 0; width: 100%; height: 93%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFO2nLpVMDzO3xLwkUNrGMi9G3WMRfGtDjL_2_Jm5CHyC8R1NX0VVMPUz8EhFRY37fgJ6LdLSXIOXVXQN2-PoowxP03SfRd-Q_wtQiY9FImxULXWkd-7kQsbQud02xe7LCemDKmCfOBA/s1600/loader.gif)no-repeat center center; transition:all .4s ease-out; } #tab-demo { width:100%; height:50px; top:0; left: 0; background:#222; color:white; font:normal 13px Arial, sans-serif; z-index:99999; position:fixed; } .closebutton { background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgeE1m4kQOmVOrUFChPeq4foGJne1QSylJSxIT4IGfmImNneZBgtd39EM9uV6TqC6ZzxQM0K0pq8Xfh6tg5-tf9auxONxLIybl53bNQWosxEgBFtVg1AwUaiA-jss3aRyKNawBsCVEGo/s1600/close.png)no-repeat 15px 50%; text-align:center; height:50px; padding:0px 20px 0px 50px; position:fixed; top:0; right:0; line-height:50px; cursor:pointer; color:white; } a.closebutton {color:white;text-decoration:none;} .closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgeE1m4kQOmVOrUFChPeq4foGJne1QSylJSxIT4IGfmImNneZBgtd39EM9uV6TqC6ZzxQM0K0pq8Xfh6tg5-tf9auxONxLIybl53bNQWosxEgBFtVg1AwUaiA-jss3aRyKNawBsCVEGo/s1600/close.png)no-repeat 15px 50%} .dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuV5D7y_-cLkZd5biyupuMsZEErjMZWhbjPqGFOUK8nAv6ZkbQfiSnD-WE-kjMqVFDKcYWJOv9TXznuMIlgAmB2CVQd7sfOTDEMrmzzLTG6myyjKfxJ8ZA7iDcDBJJ6ZJdrGn_nOWDXs/s1600/download.png)no-repeat 15px 50%} .dlbutton, a.dlbutton { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuV5D7y_-cLkZd5biyupuMsZEErjMZWhbjPqGFOUK8nAv6ZkbQfiSnD-WE-kjMqVFDKcYWJOv9TXznuMIlgAmB2CVQd7sfOTDEMrmzzLTG6myyjKfxJ8ZA7iDcDBJJ6ZJdrGn_nOWDXs/s1600/download.png)no-repeat 15px 50%; text-align:center; height:50px; padding:0px 20px 0px 55px; position:fixed; top:0; right:158px; line-height:50px; cursor:pointer; color:white; text-decoration:none; } .demologo, a.demologo { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOC9BMWYuZk7BnlPt1uloU5Y3wz8pwi2gue_-1-EvhyphenhyphenLdom3YP_JG5ac70jVd2IkVROous58rWVapEmglbF5KAR1nEn_3nMriodOcvg2DaRdSil2r8Ge8OFLjlv-wCIPOlXkPBlXKa1Kk/s1600/ki-logo.png)no-repeat left center; padding-left:55px; font-size:17px; font-weight:normal; font-family:Oswald, Arial, Sans-serif; text-transform:uppercase; line-height:50px; left:15px; position:fixed; color:white; text-decoration:none; }

3.Simpan kode ini tepat di bawah <body>

<b:if cond='data:blog.url != &quot;http:/azhallea.blogspot.com/p/template-demo.html&quot;'>

Ganti kode yang ditandai dengan URL halaman blog demo sobat, seperti :

http:/azhallea.blogspot.com/p/demo.html

4.Simpan kode ini tepat di atas </body>

</b:if> <b:if cond='data:blog.url == &quot;http:/azhallea.blogspot.com/p/template-demo.html&quot;'> <script type='text/javascript'> //<![CDATA[ function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } window.onload = function() { var url = getQueryVariable("url"); var download = getQueryVariable("download") document.getElementById('view').src = url; document.getElementById('dl').href = download; }; //]]> </script> <div id='tab-demo'> <a class='demologo' href='http:/azhallea.blogspot.com/'>KI Template Demo</a> <a class='dlbutton' href='' id='dl'>Download</a> <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a> </div> <iframe id='view'/> <style> body { background:white; } </style> </b:if>

Ganti lagi kode yang ditandai dengan URL halaman blog demo sobat.

Cara Penulisan


Untuk pemanggilan URL template dan link download, gunakan format seperti ini :

http:/azhallea.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini


Semoga artikel dari blog Seocips ini bermanfaat bagi sobat semua, silahkan di praktekan. Follow blog ini yah sob,, 

Download Template Keren 3x P124y

G-aNkar BloG. Sekarang saya akan bagikan salah satu template keren yang saya namai 3X P124Y, itu adalah nama pangilan saya. Tapi nama tidak begitu penting, yang terpentingkan kode-kodenya, hhahaa......... Temlpate ini memiliki 2 column dan 3 column pada bagian footernya.

3X P124Y

 DEMO         DOWNLOAD 

Template 3X P124Y ini sudah responsive untuk semua perangkat;

  • 3X P124Y dibuat menggunakan HTML5 dan CSS3 teknik dengan kode Validitas, sobat dapat memeriksanya di situs Validator untuk melihat apakah itu sah atau terjadi kesalahan
  • 3X P124Y  coding yang super bersih, Sobat dapat Mengedit Template ini dengan mudah.
  • Template ini dirancang dengan kode yang bersih dan loading cepat,
  • Template 3X P124Y  tidak sulit untuk membuat menu, karena anda dapat menggunakan Menu Dropdown yang sudah di terapkan di dalamnya, tugas sobat cuma mengganti sesuai keinginan sobat saja.
  • Template ini telah di usahakan Tetap Seo sebaik mungkin, saya tidak tahu apakah template ini adalah sudah atau Tidak. Itu tergantung sobat yang menilai.

Template kode bersih untuk blogger dengan HTML5 yang valid dan desain CSS3 adalah Template 3X P124Y .Template 3X P124Y  ini adalah responsif blogger template yang telah dirancang sebagai Eeo friendly.
Labels:
Magazine, Green, Adsense ready, SEO, 2 columns, Wordpress Look, White, news, Business, Personal, Elegant, Blogger Template 2014, Free Premium, Wordpress Look, White, Featured Content Slider, Red, SEO, Adsense ready, Personal, Photography, .
Tags search:
3X P124Y Blogger Template
3X P124Y Blogspot Template
3X P124Y B Template
3X P124Y Blogger Theme
3X P124Y Blogspot Theme
3X P124Y B Theme

source: ahoivera

Modifikasi Homepage Jadi Valid Html5

Modifikasi Homepage Jadi Valid Html5 adalah langkah menuju kemajuan suatu blog seiring berkembangnya suatu blog di mata dunia. Meski berlebelkan blog gratisan, namun di mata dunia dunia blog di jadikan solusi utama dari beragam jenis usaha. Ada yang memanfaatkan untuk promosi usaha namun juga ada yang cuma sekedar hobi saja.

tampilan post hanya judulnya saja
Gambar saya samarkan

Blog yang ringan dan menarik serta tidak meninggalkan keSEOannya maka akan di sukai para pengunjungnya, pengunjung akan bosan jika blog memiliki desain yang tidak menarik sama sekali. Terlebih jika blog tersebut memiliki loading yang sangat lama untuk dapat menampilkan semua isi blognya secara sempurna, maka saya kasih solusi untuk sobat blogger agar dapat mengurangi beban loading dari blognya.

Cara yang saya kasih sebenarnya sudah banyak di lakukan  oleh para blogger, yaitu hanya membuat postingan hanya terlihat judulnya saja baik di Halaman Utama (Home page) atau Halaman Labelnya. Langkah pembuatannya pun sangat mudah, dan sesuai judulnya saya sudah validkan tutorial saya. Saya membuat postingan seperti ini berdasarkan postingan yang saya jumpai dari blog DINAMIKA, namun setelah saya praktekan di salah satu blog saya ternyata masih belum sesuai keinginan. 

Lalu saya coba otak-atik ternyata masih kurang title saja, maka saya tambahkan kode expr:title='data:post.tiitle' untuk membuat judul postingannya menjadi lebih SEO. Namun saya masih ragu apakan blog saya sudah memenuhi syarat atau belum, tetapi blog yang saya buat setelah satu hari bahkan belum sehari saja sudah terindex di google search engine dan dalam waktu dua hari sudah memiliki peringkat 14.264.847 di mata tante alexa.

Baiklah ini dia caranya membuat postingan blog hanya terlihat judulnya di halaman utama (hom page) dan halaman label.



Cara jitu mengatasi masalah itu kita hanya sedikit memasukan beberapa Tag Conditional dan kode CSS sehingga pada waktu membuka halaman utama (homepage) dan halaman label hanya menampilkan judul posting yang akan mengurangi waktu loading ketika membuka halaman tersebut.

Sebenarnya bukan hanya pada 2 halaman tersebut tetapi juga pada halaman arsip (archive page) dan halaman pencarian (search page).

Langkah langkah penerapannya:

1. Login akun Blogger anda.

2. Template - Edit HTML

3. Cari kode <b:include data='post' name='post'/>, lalu ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>


<a expr:href='data:post.url' expr:title='data:post.title'>

<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#333;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>

<data:post.title/></div></a>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>
kode ini merupakan untuk menampilkan hanya judul posting pada semua halaman kecuali halaman posting dan halaman statis.
Kode yang warna hijau merupakan kode CSS silahkan kamu sesuaikan sendiri.
Kalau kamu hanya ingin merubah halaman utama atau halaman label saja ganti kode Tag Conditionalnya saja.


Untuk Halaman Utama, ganti kode :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>
 
dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'>

Untuk Halaman Label saja, ganti dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'>

Saya rasa segitu saja cara yang bisa saya bagikan, kurang lebihnya mohon maaf jika tutorial saya tidak benar atau salah pemahamannya. Jika mau mempraktekan silahkan,, atau jika mau lihat demonya silahkan klik tulisan demo ini.

 DEMO 

Sumber: Dinamika 

Membuat Recent Post Seo Valid HTML5

Recent Post atau Artikel Terbaru ini memang lebih bagus di bandingkan dengan pupuler post, tapi kebanyakan para sahabat blogger tidak menyadarinya. Namun jika sobat mau menggunakan populer post, saya sarankan menngunakan opsi mingguan. Biar semua post bisa naik dalam indexnya di google, baiklah mari kita pelajari triknya.

recent post
Maaf jika gambarnya tidak sopan, karena saya ambilkan dari blog sebelah.

Membuat Recent Post With Thumbnail Seo Valid HTML5


Langkah 1
Login ke akun blogger sobat.

Langkah 2
Masuk ke Tata Letak atau Layout.

Langkah 3
Add Gadget lalu pilih Html/javascript.

Langkah 4
Copy kode berikut lalu pastekan di gadget tersebut,

<div class="widget-content">
<style scoped="">
img.recent_thumb {width:72px;height:72px;float:left;padding:3px;margin:0 2px 2px 0;}
.recent_posts_with_thumbs {font-weight:bold;font-size:24px;}
ul.recent_posts_with_thumbs li {font-size:18px;color:#888;overflow:hidden;}
.recent_posts_with_thumbs a {text-decoration:none;font-weight:normal;}
.recent_posts_with_thumbs normal {font-size:20px;}
</style>
<script type="text/javascript">
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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/AVvXsEg8MEdeRtrAvt6I6bvdoaGrqSNltW8OEOhbY1yhztpGM9VSKAkeVIuHYmv2MscMgQHRA1G6dY4fvTPpMfITlSwfl15jjcRta2hdSnpMiTiZxjWshdEGDKIAVM08s_I62e8wGkgh92FT9XAX/s320/noimage.png';
}

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('<img class="recent_thumb" src="'+thumburl+'" title="'+posttitle+'" alt="'+posttitle+'"/>');
document.write('<b><a class="alink" href="'+posturl+'" title="'+posttitle+'" target ="_blank">'+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('<br><strong>');
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='Add Comment';
commenttext = '<a class="alink" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a class="alink" href="'+posturl+'" title="'+posttitle+'" class="url" target ="_top">More -></a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}
//]]>
</script>
<script>
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://azhallea.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs" type="text/javascript"></script>
</div>

Keterangan:
*Ganti link "http://azhallea.blogspot.com" dengan link blog sobat.
*Untuk ukuran teks silahkan ganti angka 18 dengan kesukaan sobat dan sesuai template blog sobat tentunya.

Langkah 5
Save html/javascript tersebut lalu lihat hasilnya di blog sobat.

Langkah 6
Jika memang sudah muncul widgetnya di blog sobat maka sobat buka template sobat lalu hapus kode berikut "<b:include name='quickedit'/>" agar benar-benar valid html5.

Langkah 7
Save template sobat

Selesai sudah postingan saya mengenai Recent Post With Tumbnail Seo Friendly Valid Html5, jika ada yang bingung silahkan berkomentar dan atau jika mau merepost mohon sertakan link sumber yah.