Blog Database

Senin, 16 September 2013

Membuat Artikel Rekomendasi Model Slide

Widged Recommended Post Slide-oud bloogger atau bisa dibilang widget rekomendasi artikel yang unik dan keren yang berada disudut bawah halaman blog sangat populer di kalangan blogger luar negeri, walaupun kebanyakan dipakai oleh pengguna wordpress saja. Widget rekomendasi bar (bukan rekomendasi facebook) ini cukup ringan dan tidak begitu berat. Cara membuatnya pun cukup mudah, hanya menambahkan gadget pada blog dan hanya menambahkan sedikit kode ke edit HTML template.

Seperti anda lihat diatas bahhwa tampilan sebuah widget rekomendasi slide out artikel adalah begitu simple dan sagat profesional. So ini akan sangat berguna untuk melengkapi aksesoris blog kamu agar tampak lebi keren.

Selain itu widget rekomendasi slide out memilki fungsi yang sangat bermanfaat menurut saya, karena selain tampilannya menarik, aksesoris blog yag satu ini mampu membuat pembaca bertahan lama pada blog kita. Apalagi jika blog telah memiliki related post / artikel terkait cepat loading.

Cara Membuat Rekomendasi artikel *Slide Out

Sebenarnya untuk membuat widget ini sangat sederhana bakan gampang sekali. Heran aja masih banyak saja yang belum berhasil menampilkan rekomendasi bar yang slide dibawah halaman artikel seperti ini.

Okey guys, Mari mulai mencoba. Ada 2 cara (Pilih salah satu):

A. Cara Pertama untuk meampilkan Rekomendasi Slide

Untuk cara ini kita memerlukan dua langkah untuk bisa menampilkan Rekomendasi Slide - out Blogger. berikut kedua langkah tersebut.

Tambahkan Gadget HTML

Masuk Ke akun Blogger anda
Klik Tata letak (rancangan) > tambah gadget > Pilih HTML/Javascricpt | masukkan kode source dibawah ini:

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Anda Mungkin Perlu Baca ini</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://tipssahabat.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMjYaV5gAh8_vpzeTDyQC6z4zoFqQdOFpk1PZDh869szYyeKSlextdl8RPwJ0jZuyff5yjuxv16JzgSy6aHS-aOPcGaXiKC_114feIM0Jdzp-YnCeS3nFx5YDS-74q_bNT1Ob3Va65iY/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

Simpan

Sisipkan Ke dalam Template

Masuk ke Template > Edit > centang expand template
Jika sudah, langsung cari kode <div class='post-footer-line post-footer-line-1'> , atau jika tidak ada bisa juga kode <p class='post-footer-line post-footer-line-1'>. jika telah ditemukan salah satunya maka sekarang pastekan kode berikut tepat dibawah kode tersebut :

<b:if cond='data:blog.pageType == "item"'>
<div id='bpslidein_place_holder' style='display:none'/>
</div></b:if>

Selesai, coba lihat : apakah Rekomendasi Slide - out Blogger tampil?. untuk mengeceknya harus dalam halaman artikel bukan home.

B. Cara 2 membuat Rekomendasi Slide

Cara yang satu ini adalah Tutorial khusus blogger yang ggak mau repot-repot, cocok buat yang super sibuk dan tidak punya waktu untuk editing template.

Masuk Ke akun Blogger anda
Klik Tata letak (rancangan) > tambah gadget > Pilih HTML/Javascricpt | masukkan kode source dibawah ini:

<b:if cond='data:blog.pageType == "item"'><div id='bpslidein_place_holder' style='display:none'/></div><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Anda Mungkin Perlu Baca ini</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://tipssahabat.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMjYaV5gAh8_vpzeTDyQC6z4zoFqQdOFpk1PZDh869szYyeKSlextdl8RPwJ0jZuyff5yjuxv16JzgSy6aHS-aOPcGaXiKC_114feIM0Jdzp-YnCeS3nFx5YDS-74q_bNT1Ob3Va65iY/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a></b:if>

Simpan dan selesai

Widget recommended post bergaya wordpress ini menampilkan random post atau artikel terkait, tidak ada salahnya kita mencobanya untuk memperindah blog kita, oke sobat blogger, Selamat Mencoba.
Sumber : Blog.Fispol

Jumat, 13 September 2013

Menghilangkan "Showing Post With Label"

Menghilangkan "Showing Post With Label Your Label" atau "Tampilkan posting dengan label Label Anda" Papan pesan ini muncul saat kita klik sebuah label. Contoh seperti gambar dibawah

Bagi yang merasa risih dengan tampilan papan pesan label ini bisa saja kita hapus, Nah untuk menghapusnya ikuti langkah-langkah berikut :

1--> Login blogger
2--> Masuk ke Blogger Admin Page > Template > klick Edit HTML.
3--> Cari kode seperti dibawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

5--> dan, ganti dengan kode dibawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Selamat mencoba, semoga sukses

Menampilkan Judul Saja di Halaman Beranda dan Label

Halaman Utama (Homepage) dan Halaman Label (Label Page) merupakan halaman yang menampilkan beberapa posting dengan ringkasan dan juga menampilkan gambar posting tersebut. Terkadang untuk membuka sebuah halaman utama atau halaman label waktu yang dibutuhkan cukup lama karena harus menampilkan gambar posting dengan ukuran tertentu (bila ada gambarnya). Tentu bagi kamu yang memiliki koneksi internet yang (maaf) agak lambat untuk membuka halaman label waktunya cukup lama apalagi kalau menampilkan lebih dari 10 posting yang mengandung gambar, sampai sedikit membuat kesal.. seperti saya tidak sabaran.. :d. Untuk mengatasai masalah tersebut 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.

tampilan halaman Beranda / Home

Tampilan Halaman Label

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

Langkah langkah penerapanya:
> Login akun Blogger anda.
> Di halaman Dasbor, anda pilih Template.
> Kemudian pilih Edit HTML
> Cari kode <b:include data='post' name='post'/> lalu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<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>

Itulah sedikit tips untuk merubah Halaman Utama dan Halaman Label Hanya Tampil Judul Posting.
Semoga bermanfaat.

Selasa, 10 September 2013

Memasang Permalink di Blog

Cara Membuat Permalink SEO Di Blogger - Permalink atau Permanen link tag sangat baik dalam SEO OnPage pada sebuah halaman posting blog. Permalink ini akan mengindikasikan mengenai judul dan link artikel yang sedang dibaca oleh pengunjung. Permalink juga digunakan sebagai media untuk mempublikasikan kepada pengunjung mengenai halaman artikel posting narasumber yang kita buat. Lalu, Apa pengertian dari permalink ?

Permalink adalah link permanen yang menuju halaman tertentu dari sumber artikel itu berada. Permalink sangat optimal dalam membuat sebuah artikel yang berisi link murni dari halaman blog kita sendiri. Sehingga akan membuat nilai SEO On Page di halaman blog kita semakin bertambah. Selain itu, permalink ini juga sebagai internal link yang akan membantu indexing di search engine berdasarkan keyword yang tepat.

Cara Membuat Permalink sebenarnya hampir sama dengan Cara Membuat Kotak Admin di bawah Posting, Cara Membuat artikel Terkait ( Related Posts ), dan lainnya.

Cara Membuat Permalink Tag di Blog :

1.Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.
2.Cari kode ]]></b:skin> pada template anda.
3.Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>

.permalink-seofriendly
{border: 2px dashed #424242;
padding: 5px;
background: #fbfbef;-moz-border-radius:5px;}
.permalink-seofriendly a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

4.Kemudian cari kode <data:post.body/> pada template anda. Letakkan kode permalink dibawah ini dibawah kode <data:post.body/>. Jika template anda telah menggunakan fungsi Read More, maka letakkan kode permalink dibawah kode <data:post.body/> yang ke-2.

<div class='permalink-seofriendly' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: justify;'>
<small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>. Anda boleh menyebarluaskan atau mengcopy artikel <strong><data:blog.pageName/></strong> ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.</small></div>

5. Jika anda ingin membuat url postingan pada permalink menjadi link aktif, sobat dapat mengganti kode <data:post.url/> dengan kode <a expr:href='data:post.url'><data:post.url/></a>.
6. Silahkan melakukan modifikasi pada jenis style border atau background warna sesuai keinginan anda. Mencoba membuat dengan kreasi sendiri tentunya akan lebih memuaskan hasilnya.
7. Save/Simpan template anda.

Lihat hasilnya, maka pada bagian bawah postingan Anda telah berisi Permalink SEO Friendly ini. Semoga Panduan tutorial mengenai Cara Membuat Permalink SEO di Blog dapat bermanfaat, terimakasih.

Sumber : http://impoint.blogspot.com