Panduan Cara Membuat Email Baru, Gratis, Cepat, dan Mudah

Description: Panduan Cara Membuat Email Baru, Gratis, Cepat, dan Mudah Rating: 3.5 Reviewer: Unknown ItemReviewed: Panduan Cara Membuat Email Baru, Gratis, Cepat, dan Mudah

Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik

Description: Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik

Tips Membuat Loading Animasi Blog Menarik Bola Loncat-loncat

Description: Tips Membuat Loading Animasi Blog Menarik Bola Loncat-loncat Rating: 3.5 Reviewer: Unknown ItemReviewed: Tips Membuat Loading Animasi Blog Menarik Bola Loncat-loncat

Tutorial Pasang Loading Animasi Blogspot Mirip Startup Windows 8

Description: Tutorial Pasang Loading Animasi Blogspot Mirip Startup Windows 8 Rating: 3.5 Reviewer: Unknown ItemReviewed: Tutorial Pasang Loading Animasi Blogspot Mirip Startup Windows 8

Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog

Description: Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog

Cara Membuat Loading Page Animasi Unik Bola Bergaya Kontras

Description: Cara Membuat Loading Page Animasi Unik Bola Bergaya Kontras Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Loading Page Animasi Unik Bola Bergaya Kontras

Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’

Description: Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’ Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’

Tutorial Membuat Loading Page Animasi Blog Cepat, Komplit!

Description: Tutorial Membuat Loading Page Animasi Blog Cepat, Komplit! Rating: 3.5 Reviewer: Unknown ItemReviewed: Tutorial Membuat Loading Page Animasi Blog Cepat, Komplit!

Cara Membuat Read More Otomatis di Blog, Blogspot, Blogger, 'Ngumpul' di Sini!

Description: Cara Membuat Read More Otomatis di Blog, Blogspot, Blogger, 'Ngumpul' di Sini! Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Read More Otomatis di Blog, Blogspot, Blogger, 'Ngumpul' di Sini!

Penting, Panas, Perlu dan Seruu Ngeblog, Ayo Gelitik Keyboard

Description: Penting, Panas, Perlu dan Seruu Ngeblog, Ayo Gelitik Keyboard Rating: 3.5 Reviewer: Unknown ItemReviewed: Penting, Panas, Perlu dan Seruu Ngeblog, Ayo Gelitik Keyboard

Cara Membuat Tombol Share Keren Melayang di Blog, cekidot!

Description: Cara Membuat Tombol Share Keren Melayang di Blog, cekidot! Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Tombol Share Keren Melayang di Blog, cekidot!

Nice! Panduan Lengkap Cara Membuat Daftar Isi di Blog

Description: Nice! Panduan Lengkap Cara Membuat Daftar Isi di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Nice! Panduan Lengkap Cara Membuat Daftar Isi di Blog

Cara Membuat Like Facebook Melayang di Blog, Klik!

Description: Cara Membuat Like Facebook Melayang di Blog, Klik! Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Like Facebook Melayang di Blog, Klik!

Cara Membuat Sitemap Blog di Google Webmaster, Mudah!

Sitemap (Foto: Ilustration)

Andalas, Padang – Sitemap berfungsi sebagai rujukan Search Engine melakukan crawling halaman website/blog. Hal itu diterapkan pada layanan raksasa mesin pencari Google Webmaster Tools dan Bing Webmaster Tools (terintegrasi dengan Site Explore Yahoo Webmaster Tools) dan lain sebagainya. Dengan begitu, proses indeks menjadi lebih efisien dan cepat mencatat semua halaman homepage, subpage oleh Spiderbot (robot Google).

Platform Wordpress, Url Feed bisa langsung dimasukkan tanpa harus menambah aturan tertentu. Sedangkan khusus platform Blogger/blogspot, harus menambahkan aturan tertentu agar pemasangan (submit/pendaftaran) Sitemap tidak error. Anda dapat memanfaatkan layanan Sitemap Generator yang memang banyak ditemui, ketikkan keyword pada pencarian Google 'Sitemap Generator'. Namun, agar mudahnya, Anda dapat mengkuti langkah-langkah pada tutorial ini.

Sebelum mendaftarkan atau memasang Sitemap pada Google Webmaster Tools, lakukan terlebih dahulu mendaftar dan submit blog ke Google Webmaster Tools. Jika sudah, lanjutkan sesi pemasangan Sitemap dengan langkah-langkah di bawah ini :
1. Login atau masuk ke Google Webmaster Tools http://google.com/webmasters/tools/,

Sign In Google Webmaster Tools (Foto: Google)

2. Klik link website/blog Anda,
3.Klik tombol “Sitemaps”, pilih “Add/Test Sitemap”,

Add Sitemap (Foto: Webmaster)

Pada kolom yang telah mucul, isikan kode berikut, contoh Url Feed blogger :

http://www.walman.org/feeds/posts/default

Tambahan aturan sebagai url SEO Sitemap, Anda juga dapat menerapkan bentuk opsi di bawah ini :

http://www.walman.org/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc

atau bisa juga jenis feed atom.xml-nya,

http://www.walman.org/atom.xml?redirect=false&start-index=1&max-results=500

Kalau artikel/posting blog Anda lebih dari 1000, fungsikan sitemap berikut ini:

atom.xml?redirect=false&start-index=1001&max-results=1500

4. Selesai mengcopy kode tersebut, untuk mengakhiri, tekan tombol "Submit Sitemap",
5. Loading selesai, jika Anda melakukan semua langkah ini dengan benar, selamat Anda telah berhasil
    submit/daftar Sitemap ke Google Webmaster Tools.

Ingat, copy url yang berwarna biru dan itulah url sitemapnya.

Oke, demikian tutorial bagaimana cara memasang Sitemap pada Blogger/blogspot. Metode ini sangat efektif dalam optimasi SEO, penerapan utama sebelum tampil di mesin pencari dan persiapan guna bersaing di dunia serp. Lakukan hal yang sama pada Bing Webmaster Tools. Fungsi dan tujuannya tak jauh beda antara Google Webmaster Tools dan Bing Webmaster Tools, namun keunggulan dan kerumitan crawling memiliki cara trik tersendiri, dan itu perlu disiasati pada tutorial berikutnya. Semoga bermanfaat.

Description: Cara Membuat Sitemap Blog di Google Webmaster, Mudah! Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Sitemap Blog di Google Webmaster, Mudah!

Cara Mudah Membuat Headline Breaking News 'Keren' di Blog

Headline Breaking News

Cara Mudah Membuat Headline News di Blog - Blog sobat ingin lebih menarik pengunjung lagi, jangan biarkan hanya singgah pada satu postingan saja, sebaiknya menampilkan tautan konten unik dan menarik lainnya pada halaman utama atau sidebar yang aktif dan dinamis disetiap blog sobat. Salah satunya membuat newsticker atau menampilkan berita headline. Breaking news ini akan mereview judul dari update artikel secara sistematis pada blog dengan meninjau RSS. Hal ini biasa ditemui pada web berita nasional, beberapa ‘blog tetangga’ yang ‘headline news’nya berada di bawah menu navigasi.

Menampilkan headline news ada daya tarik tersendiri dan memudahkan pengunjung untuk menelusuri blog sobat sekaligus memacu pageviews. Untuk demo, breaking news yang penulis buat dengan label ‘berita terbaru’ tepat di bagian bawah menu navigasi blog ini. Sobat tertarik, mari kita memasang breaking news menarik, silahkan ikuti langkah-langkah berikut ini:
1. Setelah login di akun Blogger,
2. Di halaman Dasbor, kita beralih ke Template,
3. Klik tombol Edit HTML, tunggu sampai muncul kotak editor,
4. Nah, kali ini tekan Ctrl + F, cari kode ]]></b:skin>, dan letakkan CSS di bawah ini diatasnya,

/* Headline */
.newspic {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CbyrNp-Jah7Yd-8yhBP5nwp8Rl6lyxB81AEA5bku23MUBXjWPff-094BlStedzgtL9c61EdqgfOe03b6zGplr-jMN-DEaqAWE8bcMO7pPD9beEwhqJSSIOYFwqAVBZ3o5jW1VW4rNz8/s1600/headline_news.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 850px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}

    Keterangan:
    Tulisan berwarna biru merupakan url gambar yang dapat sobat ganti dengan desain sendiri.
    Tulisan cetak merah merupakan ukuran lebar headline news, edit dan sesuaikan dengan blog sobat.
5. Jika sudah, kita cari kode </head> dan posisikan JavaScript dan CSS berikut di atas kode tersebut,

<!-- Headline -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

6. Letakkan kode HTML berikut di posisi headline news sesuai dengan selera sobat atau memilih
    berada di bawah menu navigasi, mungkin untuk cara ini sedikit ‘ribet’ karena setiap nama ‘Id’ dan
   ‘Class’ navigasi yang berbeda-beda. Mudahnya, kali ini kita menata letak breaking news di atas
    judul postingan, salin kode di bawah ini dan letakkan di atas kode <div id='outer-wrapper'>,

<div style='clear:both;'/>
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.walman.org/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

    Perhatikan tulisan yang berwarna, silahkan modifikasi. 
    Keterangan:
    125px: Jarak judul konten dari sebelah kiri gambar.
    http://www.walman.org: Ubah menjadi url blog sobat.
    10: Jumlah entri yang ditampilkan.
7. Finish, klik Simpan Template.

Jika ketentuan dan langkah di atas sudah benar, maka sobat sudah bisa menampilkan headline news muncul tanpa masalah. Sekian cara membuat breaking news menarik pada blog, selamat mencoba. Happy blogging

Description: Cara Mudah Membuat Headline Breaking News 'Keren' di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Mudah Membuat Headline Breaking News 'Keren' di Blog

Cara Membuat Efek Salju, Bintang dan Daun Berguguran di Blog

Efek Salju Pada Blog (Foto: ilustration)

Cara Membuat Bintang Berjatuhan, Efek Hujan Salju dan Daun Melayang Berguguran Pada Blog - Blog disertai aksesoris tampak manis dan elegan. Tulisan-tulisan blog kritis dengan efek unik dan menarik tentu membuat pembaca enjoy dan fresh. Blog terlihat hidup, sesuatu yang bergerak-gerak melayang berupa salju, bintang berjatuhan, dan daun berguguran, nice! Sangat indah jika itu ada pada blog sobat.

Kali ini kita membuat efek salju, daun, dan bintang melayang berjatuhan. Caranya sangat mudah dan tidak ‘ribet’, kita hanya memerlukan satu script saja yang cukup diletakkan pada template. Terlebih dahulu, berikut cara memasang bintang berjatuhan di blogspot:


1. Login di akun Blogger sobat,
2. ‘Stand by’ di halaman Dasbor, pergi ke Template,
3. Klik tombol Edit HTML,
4. Muncul box editor template, sembarang klik pada kotak tersebut, tekan Ctrl + F,
    cari kode </head> dan copy script di bawah ini dan letakkan di atas kode tersebut:

<script src="http://script-seo.googlecode.com/files/bintang-green.js" type="text/javascript"></script>

    Kode di atas memunculkan bintang yang bertaburan ketika mouse digerakkan.

    atau

<script type="text/javascript" src="http://script-seo.googlecode.com/files/bintang.js"></script>

    Kode di atas memunculkan bintang berjatuhan secara otomatis.
5. Simpan Template, dan lihat hasilnya.

Tutorial di atas masih dalam mempercantik blog dengan bintang berjatuhan. Lain halnya dengan memberi hujan salju bertaburan pada blog.

Efek salju melayang di blog:
Caranya sama dengan yang di atas, berikut scriptnya untuk menambahkan efek salju turun di blog:

<script src='http://script-seo.googlecode.com/files/salju.js' type="text/javascript"></script>

Daun berjatuhan atau berguguran di blogspot:

<script src='http://script-seo.googlecode.com/files/daun.js' type="text/javascript"></script>

Demikian tutorialnya, selamat mencoba. Happy blogging

Description: Cara Membuat Efek Salju, Bintang dan Daun Berguguran di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Efek Salju, Bintang dan Daun Berguguran di Blog

Alert Disable Klik Kanan: Cara Anti Copas di Blog, Gampang!

Proteksi Klik Kanan

Cara Menonaktifkan Klik Kanan Pada Blogspot - Fungsi non-aktifkan klik kanan atau disable click right agar artikel dan gambar tidak bisa di copy paste. Ketika akses 'click right' itu juga memberi pesan peringatan agar tidak di copas ketika blog di klik kanan. Penerapan ini dilakukan seorang Blogger guna menjaga orisinalitas dan privasi konten agar tidak diplagiat dari pihak yang tidak bertanggung jawab.

Untuk proteksi klik kanan, script ini menjawab keluhan sobat, jika ingin memasangnya cukup posisikan pada sidebar dengan memasukkan kode ke Gadget atau Template. Berikut tutorialnya cara membuat disable klik kanan pada sidebar Blog:
1. Di halaman Dasbor, pergi ke Tata Letak,
2. Klik Tambahkan Gadget, pilih HTML/JavaScript, masukkan kode berikut:

 <script>
var message="Pesan";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")</script>

    Ubah kata berwarna biru dengan pesan peringatan,
3. Simpan konfigurasi script sobat.

Demikian cara membuat anti klik kanan, dengan begitu postingan sobat tidak bisa di 'copas', di 'blok' sekaligus di 'klik kanan'. Selamat mencoba. Happy blogging

Description: Alert Disable Klik Kanan: Cara Anti Copas di Blog, Gampang! Rating: 3.5 Reviewer: Unknown ItemReviewed: Alert Disable Klik Kanan: Cara Anti Copas di Blog, Gampang!

Panduan Mudah Membuat Artikel Terkait Gambar Thumbnail

Artikel Terkait Thumbnails

Cara Membuat Artikel Terkait Berbentuk Gambar Thumbnails - Testimoni, baca dulu: Klik! 3 Cara Membuat Artikel Terkait atau Related Post di Blog. Bentuk artikel terkait dengan gambar thumbnail seperti sobat temui pada Blog sederhana ini. Di samping bentuk ‘style’ yang menarik, juga dilengkap screenshoot gambar yang menambah nilai plus ketertarikan pengunjung. Di sisi lain, jumlah tampilan perlabel relatif sedikit, tidak seperti artikel terkait dengan menggunakan scroll. Namun menurut penulis, artikel terkait ini cukup modis dan perlu diterapkan pada Blog. Untuk pemasangannya, silahkan ikuti langkah-langkah berikut ini:
1. Login diakun Blogger sobat,
2. Pada halaman Dasbor, pergi ke Template dan pilih Edit HTML,
3. Pada kotak editor template, sembarang klik disalah satu ‘box’ tersebut, dan
    tekan Ctrl + F, silahkan cari kode </head>,
4. Letakkan CSS dan JavaScript berikut ini sebelum kode </head>,

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Setelah script di atas, cari kode <div class='post-footer'> atau
   <div class='post-footer-line post-footer-line-1'/>, letakkan script berikut di atas kode
    tersebut.

 <!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

    Angka berwarna biru adalah jumlah posting tampilan related post,
    sesuaikan dengan lebar Blog sobat.
6. Terakhir, klik Simpan Template.

Sekian dulu, tips trik berikutnya:
1. Cara Membuat Artikel Terkait Sederhana Pada Blog (Tampilan Biasa),
2. Cara Membuat Artikel Terkait Scroll di Blog (Related Post dengan Scroll).

Semoga bermanfaat, happy blogging.

Description: Panduan Mudah Membuat Artikel Terkait Gambar Thumbnail Rating: 3.5 Reviewer: Unknown ItemReviewed: Panduan Mudah Membuat Artikel Terkait Gambar Thumbnail

Cara Memasang Artikel Terkait Sederhana Membahana di Blog

Artikel Terkait Serderhana (Foto: Beni Muhaemin)

Cara Membuat Artikel Terkait di Blogspot - Testimoni, baca dulu: Klik! 3 Cara Membuat Artikel Terkait atau Related Post di Blog. Model sederhana dari bentuk artikel terkait lebih ringan dalam me’load’ label ketika akses halaman posting. Bentuk yang friendly dan simpel dapat sobat terapkan langkah-langkah pembuatannya pada Blogspot di bawah ini, cekidot:
1. Login pada akun Blogger sobat,
2. Setelah berada di Dasbor, beralih ke Template dan klik Edit HTML,
3. Muncul kotak editor template, sembarang klik di salah satu kotak tersebut, kemudian tekan Ctrl + F,
    cari kode </head>,
4. Letakkan kode css dan script di bawah ini sebelum kode </head>,

<style>
#related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4dD0q8SElS7-6o6sdJ7bmzrU68KA5alhJs_Z0w4ZMHuEEIq8_oxzLfNjjdY7tSzEDV4gxol6s7JuKGt__mNwuV0VutWf6d_En0ZwjWrLd7_eBvYKgcxjC1kqYL0ytqIxubkCGoxS8ZycA/s1600/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }
</style>
<script src='http://yourjavascript.com/0542826181/ttm.txt.js' type='text/javascript'/>

5. Setelah itu cari kode <data:post.body/> atau <div class='post-body> dan letakkan script berikut
    di bawahnya,

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b>
</font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div></b:if>     

     Intinya, meletakkan kode tersebut berdekatan dengan post-entri.

6. Klik Simpan Template, dan sobat lihat hasilnya.

Sekian dulu, tips trik berikutnya:
1. Cara Membuat Artikel Terkait Scroll di Blog (Related Post dengan Scroll),
2. Cara Memasang Related Post Thumbnail di Blogspot (Gambar kotak-kotak kecil menarik).

Semoga bermanfaat. Happy blogging

Description: Cara Memasang Artikel Terkait Sederhana Membahana di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Memasang Artikel Terkait Sederhana Membahana di Blog

Klik! 3 Cara Membuat Artikel Terkait atau Related Post di Blog

Artikel Terkait Blogspot (Foto: ilustration)

Cara Membuat dan Memasang Artikel Terkait di Blogspot – Pageview Blog merupakan jumlah tampilan halaman per’klik’, yakni jumlah akses halaman oleh pengunjung di dalam suatu Blog. Hal ini dilakukan visitor biasanya adanya tautan link pada posting berisi tema artikel yang unik dan menarik. Di samping kunjungan visitor, pageview dari pengunjung ini sangat berpengaruh terhadap ranking Alexa. Pageview juga mensiratkan betapa penting dan berkualitasnya postingan sobat.

Nah, kali ini salah satu untuk meningkatkan pageview Blog dengan cara memasang artikel terkait pada Blog. Di bawah posting sobat akan terdapat list atau daftar artikel yang berhubungan dengan tema posting. Cara kerjanya merujuk pada label yang sobat buat pada postingan. Tanpa berlama-lama, berikut cara memasang artikel terkait (Related post) pada Blogspot. Silahkan pilih tiga kategori desain artikel terkait yang sobat suka di bawah ini:

1. Cara Membuat Artikel Terkait Sederhana Pada Blog (Tampilan Biasa),
2. Cara Membuat Artikel Terkait Scroll di Blog (Related Post dengan Scroll),
3. Cara Memasang Related Post Thumbnail di Blogspot (Gambar kotak-kotak kecil menarik).

Description: Klik! 3 Cara Membuat Artikel Terkait atau Related Post di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Klik! 3 Cara Membuat Artikel Terkait atau Related Post di Blog