Blog-Via

Home » Posts filed under Posting

Tampilkan postingan dengan label Posting. Tampilkan semua postingan

Membuat Sitemap atau Daftar Isi Accordion pada Blog

Avia || Selasa, 20 Maret 2012 || Animasi,Posting,Tips dan Triks,Widget || Leave a komentar

Kali ini saya berbagi tutorial untuk meningkatkan Page Rank (Ranking Halaman) pada blog anda.. Pertanyaannya bagaimana cara membuatnya? Mudah saja jawabannya yaitu buatlah sitemap atau daftar isi blog anda. Ketika anda adalah pengguna wordpress maka sangat mudah untuk membuatnya, tetapi jika anda pengguna blogger jangan cemas karena saya akan memberikan trik dan tips cara membuat site map. Site Map yang akan kita buat akan menggunakan Javascript Accordion milik Abu farman. Site Map ini dilengkapi dengan efek SHOW HIDE yang sangat keren. Jadi sekarang saya akan kasih tutorial bagaimana membuat SEO Friendly Sitemap (Tabel Contents) with Accordion untuk blog anda.

1. Masuk ke Blogger
2. Pilih Posting - Edit Laman
3. Pilih Laman Baru, Masukan judul Posting misalnya SITEMAP BLOG TRIK DAN TIPS
4. Terakhir Paste kode dibawah ini:

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.blogtrikdantips.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

5. Ubah kode http://blogtrikdantips.blogspot.com dengan url blog anda
6. Terbitkan posting anda lalu lihat hasilnya

Ok itu saja, sangat mudahkan untuk membuatnya! Tentunya dengan sitemap tersebut penunjung anda akan betah di blog sobat dan tentunya blog menjadi lebih SEO Friendly. Terima kasih telah berkunjung ke blog saya, semoga artikel ini bermanfat. Jangan lupa berkomentar ya.....

Cara Memasang Recommended Slide Out di Blog

Avia || || Animasi,Jquery,Posting,Widget || Leave a komentar

Widget Recommended Slide Out dapat membuat pengunjung menyukai situs anda dengan efek animasinya yang keren. Widget semacam ini pernah popular di beberapa situs ternama seperti New York Times, Mashable, Times of India dan lain-lain. Widget ini mengajak pengunjung untuk membaca artikel lainnya di blog anda. Widget jquery ini akan muncul seperti slide ketika pengujung melihat halaman yang paling bawah. Recommended slide out akan menampilkan posting acak pada blog anda. Anda tidak perlu kuatir dengan loading page blog karena widget ini telah dimodifikasi sehingga tidak membuat halaman menjadi berat.

1. Untuk membuatnya silahkan kunjungi situs BloggerPlugins.org atau KLIK DISINI
2. Pada situs tersebut klik icon blogger yang tampak seperti dibawah ini:

3. Akan muncul jendela baru, lalu klik Menambah Widget

Widget anda akan tersimpan pada Elemen Halaman. Jika anda ingin melihatnya, maka buka posting dari halaman anda, lalu scroll ke halaman paling bawah. Anda akan melihat recommended post slideout muncul dari sudut kanan. Selamat mencobanya!

Membuat Recent Post dengan Menggunakan Feed

Avia || Senin, 19 Maret 2012 || Feed,Posting,Widget || Leave a komentar

Ada beragam cara kita bisa membuat Recent Post. Misalnya menggunakan widget yang disediakan oleh blogger, menggunakan script HTML atau Jquery dan bisa juga menggunakan feed. Recent post sendiri memiliki tampilan yang berbeda tergantung script kode yang kita gunakan. Misalnya ada recent post yang menggunakan thumbnail, recent post dengan slider thumbnail, serta ada recent post daftar isi blog. Awalnya saya mencoba memasang recent post dengan menggunakan widget pada blogger namun loading page halaman menjadi lebih lambat serta widget recent post lama ditampilkan. Akhirnya saya mencoba untuk membuat recent post menggunakan feed karena lebih cepat loadingnya. Pengen tau caranya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Elemen Halaman
3. Tambahkan Gadjet anda
4. Pilih Feed

5. Masukan feed blog anda (ganti warna biru dengan url blog anda):
Misalnya feed milik saya http://blogtrikdantips.blogspot.com/atom.xml

6. Klik Lanjutkan
7. Pada Konfigurasi Feed, pilih tampilan yang diinginkan
8. Simpan feed anda.

Dengan mengikuti langkah diatas, anda akan memiliki daftar recent post hanya menggunakan feed. Selamat mencobanya!!!

Cara Membuat Related Post dengan Thumbnails

Avia || || Gambar,Posting,Tips dan Triks,Widget || Leave a komentar

Trik dan tips kali ini akan membahas cara membuat related post dengan thumbnails. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini akan kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi dari related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca. Saya kebetulan memperoleh widget ini dari situs Indahnya Berbagi. Jika ingin membuatnya langsung saja menuju TKP:

1. Masuk ke Rancangan ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<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.2em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Cari salah satu kode berikut ini:
<div class='post-footer-line post-footer-line-3'>
atau <p class='post-footer-line post-footer-line-3'>
5. Setelah itu letakan kode dibawah ini, dibawah salah satu kode langkah ke.4

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

6. Terakhir simpan template anda.

Semoga artikel ini bermanfaat!

Cara Memasang HTML Encoder di Langsung di Blogspot

Avia || Selasa, 22 September 2009 || Posting,Widget || Leave a komentar

Jika sobat menulis artikel mengenai tutorial bloging, maka sobat akan sering menggunakan fasilitas HTML encoder. Selama ini Blog Trik dan Tips menggunakan HTML Encoder yang dibuat sendiri, kalau sobat ingin tau caranya bisa dilihat DISINI.

Tapi kini ada cara lain untuk memudahkan kita menggunakan fasilitas HTML encoder langsung dari situs Blogger-Blogspot. Tentunya hal ini akan memudahkan sobat lebih cepat dan mudah untuk membuat posting jika berurusan dengan kode-kode HTML. Cara memasangnya pada blogspot cukup mudah saja, silahkan dicoba jika tertarik untuk memasangnya. Berikut langkah memasangnya:

1. Download Greasemonkey 0.8.20090123.1 pada situs https://addons.mozilla.org/en-US/firefox/addon/748
2. Instal dan restart browser anda kembali
3. Kemudian install JavaScript http://userscripts.org/scripts/source/42696.user.js
4. Coba lihat di menu posting, pasti akan muncul tombol "HTML Encode Selection".

5. Untuk memparse kode HTML, sobat login ke blogger kemudian buatlah posting baru.
6. Pilihlah tab Edit HTML di samping tab Tulis
7. Untuk memparse kode HTML, maka anda hanya menghighlight kode HTML yang ingin diparse dan klik tombol HTML ENCODE SELECTION

Kode-kode tersebut kemudian akan diparse tanpa sobat menunggu proses loading. Selamat mencoba dan good luck!!!

Cara Membuat Emoticon pada Posting

Avia || Senin, 06 Juli 2009 || Gambar,Posting || Leave a komentar

Akhirnya posting menjadi lebih menjadi lebih menyenangkan.....Ini dia yang saya tunggu yaitu membuat emoticon pada posting....dan yang lebih kerennya sambil menulis saya bisa langsung menaruh emoticon hanya dengan sekali klik....

Yang pasti sobat juga penasaran bagaimana cara buatnya......sebelumnya sih saya pikir untuk membuat emoticon harus repot utak taik kode HTML template.....tapi kenyataannya tidak ....dengan menginstal adds-on firefox dibawah ini langsung harapan saya tercapai.

Mau tau nich bagaimana cara membuatnya, ikuti aja langkah dibawah ini.

1. Download Firefox Versi Terbaru..
2. Kemudian yang sobat lakukan adalah menginstal GreaseMonkey Extension untuk Firefox, atau KLIK DISINI
3. Jangan lupa untuk direstart browsernya
4. Selanjutnya install script emoticon untuk blogger atau KLIK DISINI

Coba cek blog anda. Untuk melihat emoticonnya masuk ke Posting lalu pilih tab "Tulis" bukan "Edit HTML"

Untuk menginstal emoticon lainnya dapat diinstal juga:
1. Naruto, download scriptnya disini
2. Kitty, download scriptnya disini
3. Pika, download scriptnya disini
4. Pucca, download scriptnya disini

Sobat nanti akan melihat icon kecil pada bagian kanan bawah layar browser. Untuk menonaktifkan salah satu emoticon pada posting blogger, klik kanan icon tadi dan pilih emoticon yang mau dinonaktifkan.

Langkah terakhir ialah memodifikasi tampilan emoticon agar tidak memiliki garis tepi dengan menaruh kode berikut di atas kode ]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Terakhir jangan lupa untuk menyimpan template sobat...Selamat mencoba!

Cara Mencari Orang Yang Menciplak Posting Anda?

Avia || Rabu, 01 Juli 2009 || Posting || Leave a komentar

Anda pernah membuat artikel dan akhirnya hanya dikopi atau diciplak orang yang tidak bertanggung jawab....Anda pasti ingin mengetahui siapa yang melakukannya. Tentunya ada cara yang mudah untuk mengetahui mereka....Copyspace adalah sebuah layanan online yang melayani deteksi plagiarisme dimana terdapat artikel yang sama pada blog lainnya. Situs ini dirilis pada tahun 2004 oleh Indigo Stream Technologies, Ltd.

1. Kunjungi situs Copyscape atau klik link DISINI.
2. Nantinya anda akan berjumpa dengan sebuah kotak dimana anda perlu menulis alamat website atau blog anda. Kemudian klik Tombol Go
3. Secara langsung web tersebut akan mendeteksi apabila terdapat artikel yang sama dengan blog anda. Anda akan diberi informasi siapa saja yang menjiplak artikel anda.....

Situs ini juga menyediakan banner untuk melindungi hak cipta atas karya anda,.....

Cara Membuat Read More Versi Lama

Avia || || Posting || Leave a komentar

Read more memiliki arti bahwa jika anda memiliki posting yang penuh dan menghabiskan banyak ruang maka anda dapat menghemat ruang tersebut dengan memperpendek sebagian posting pada home page. Readmore memiliki dua versi yang berbeda yaitu versi lama dan versi baru. Versi terbaru yaitu sobat tidak perlu membuat script pada posting untuk memunculkan sebagian artikel melainkan script readmore tersebut sudah terpasang pada template dan akan melakukan pemotongan artikel secara otomatis. Pada versi yang lama kita perlu menambah script pada posting untuk memunculkan sebagian artikel pada home page. Berikut ini saya akan memberikan trik bagaimana membuat readmore versi lama.

1. Masuk ke Rancangan, klik pada Edit HTML.
2. Kemudian klik pada Expand Template Widget
3. Cari kode dibawah ini:

< div class='post-body entry-content'>
< data:post.body/>

4. Hapus kedua kode tersebut dan gantikan dengan kode ini:

<div class="'post-body"><b:if cond="'data:blog.pageType"><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style><data:post.body/><a href="'data:post.url'">Read More</a></b:if>

5. Simpan template sobat

Untuk menerapkan readmore pada posting sobat maka ketika sobat menulis artikel, masuk ke bagian Posting -- Edit HTML. Sisipkan kode berwarna merah dibawah ini untuk membuat pemenggalan artikel yang ingin ditampilkan pada home page:

< span class="fullpost">
-- Tulisan sobat yang ingin ditampilkan pada home page (readmore) --
</span>
-- Tulisan sobat yang ditampilkan pada full post --

Selamat mencoba!!!

Membuat Daftar Isi Posting di Blog

Avia || || Posting || Leave a komentar

Bila blog teman-teman belum punya daftar isi, saya akan berbagi tips ke sobat bloggers semua bagaimana membuat daftar isi sederhana yang dapat memuat posting blog. Dari pada basa basi langsung aja kita membuat daftar isi blog. Caranya mudah saja, saya akan membantu gimana cara membuatnya.

1. Login ke blog sobat di blogger.
2. Klik Rancangan -- Edit HTML
3. Selanjutnya beri centang pada tulisan Expand Widget Templates
4. Carilah kode dibawah ini:

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

5. Jika sobat telah menemukan kodenya hapus dan gantikan dengan:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom:2px;
background:#EAE9E9;
color:#406A0E;">
<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>

6. Simpan template tersebut.
7. Masuk ke Rancangan -- Elemen Laman. Tambah gadjet kemudian pilih HTML/Javascript dan masukan kode berikut:

<a href="http://blogtrikdantips.blogspot.com/search?max-results=10" target="_blank">
<span style="font-weight:bold;">Daftar Isi</span>»</a>

8. Gantikan http://blogtrikdantips.blogspot.com dengan URL blog sobat. Angka 10 diatas menunjukan jumlah posting yang ingin ditampilkan sobat tinggal atur aja.
Selamat mencoba!!! Bravo

Mengganti Judul Blog Menjadi Judul Posting

Avia || || Posting || Leave a komentar

Judul blog sobat dapat dirubah menjadi judul posting. Hal ini tentunya akan mempengaruhi daftar pencarian artikel pada search engine, dimana dengan mengubah judul blog menjadi judul posting, maka blog sobat menjadi lebih Search Engine Friendly. Search Engine seperti Google akan menaruh posting sobat pada peringkat yang lebih tinggi.

Tentunya sobat pasti akan bertanya, bagaimana cara membuatnya. Nah kali ini saya akan memberikan tips bagaimana sobat dapat mengganti judul blog dengan judul posting.

1. Login ke blogger.
2. Pilih Rancangan, dan klik pada Edit HTML.
3. Cari kode ini:

< title>< data:blog.title/> </title>

4. Ganti kode tersebut dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

5. Jangan lupa untuk Simpan template.

Nah jika semuanya udah selesai maka apabila sobat melihat blognya sobat, pada halaman utama akan menampilkan judul blog sobat. Tapi apabila sobat membuka judul posting maka judul blog akan berubah sesuai judul posting. Selamat mencoba ya!!!

Membuat Artikel yang Berhubungan

Avia || || Posting || Leave a komentar

Mungkin sobat pernah mendengar tentang istilah related article atau related post dalam dunia blogging. Related article adalah artikel yang saling berhubungan yaitu berupa link yang menghubungkan sejumlah artikel yang sama seusai dengan label artikel yang sobat baca. Sobat dapat menggunakan related post untuk mengisi kekosongan atau ruangan pada posting sehingga terlihat menarik. Related artikel ini juga berfungsi untuk menjaga trafik penggujung pada blog sobat. Tertarik untuk membuatnya, untuk itu ikuti langkah berikut:

1. Login pada blogger.
2. Pilih Rancangan dan pilih Edit HTML
3. Beri tanda centang pada Expand Widget Template
4. Kopi scipt berikut ini lalu paste diatas kode </head>

<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>

5. Selanjutnya letakkan kode dibawah ini setelah kode <data:post.body/>

b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/linkblog.js' type='text/javascript'/>
</b:if>

6. Yang terakhir yaitu simpan template sobat dan lihat hasilnya.

Sebagai tambahan jika sobat ingin mengganti judul related post sobat tinggal mengedit kode yang berwarna merah, sedangkan untuk mengatur jumlah posting gantilah kode yang berwarna biru. Selamat mencoba!!!

Membuat Daftar Populer Post dengan JavaScript

Avia || || Posting || Leave a komentar

Anda pasti pernah memposting artikel-artikel yang menarik. Tapi apa sobat tau bahwa artikel yang mana yang paling digemari oleh pengujung. Popular post yang akan kita buat ini ditentukan oleh berapa banyak komentar yang masuk pada tiap artikel. Semakin banyak komentar maka posting tersebut semakin populer dan menempati daftar list teratas. Widget populer post ini juga dilengkapi dengan jumlah komentar dan judul posting sobat seperti gambar disamping. Jika sobat ingin membuatnya ikuti langkah berikut ini:

1. Login ke blogger.
2. Pilih Rancangan -- Elemen Laman
3. Tambah Gadjet, dan klik pada HTML/JavaScipt
4. Masukan kode di bawah ini:

<script language='javascript'>
aBold = true;
numposts=3;
maxshowresult=10;
home_page = "http://blogtrikdantips.blogspot.com";
</script>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/popular_post_list.js' type='text/javascript'></script>

5. Ganti blogtrikdantips.blogspot.com dengan nama blog sobat,
Keterangan:
- Kode berwarna merah andalah jumlah post

6. Simpan gadjet dan lihat hasilnya...

Memasang Jumlah Posting dan Komentar

Avia || || Komentar,Posting || Leave a komentar

Sobat ingin menampilkan jumlah postingan dan jumlah komentar pada blog sobat. Mudah kok caranya .....Ikuti langkah2 berikut ini:

1. Login ke blogger.
2. Masuk ke Rancangan -- Elemen Laman
3. Tambah Gadjet dan pilih HTML JavaScript
4a. Masukan kode berikut jika sobat ingin menampilkan jumlah postingan.

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://blogtikdantips.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

4b. Masukan kode berikut jika sobat ingin menampilkan jumlah komentar.

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

5. Ganti kode berwarna merah dengan nama blog sobat.
6. Simpan gadjet sobat

Selamat mencoba ...semoga bermanfat.

Blog-Via

Membuat Sitemap atau Daftar Isi Accordion pada Blog

Cara Memasang Recommended Slide Out di Blog

Membuat Recent Post dengan Menggunakan Feed

Cara Membuat Related Post dengan Thumbnails

Cara Memasang HTML Encoder di Langsung di Blogspot

Cara Membuat Emoticon pada Posting

Cara Mencari Orang Yang Menciplak Posting Anda?

Cara Membuat Read More Versi Lama

Membuat Daftar Isi Posting di Blog

Mengganti Judul Blog Menjadi Judul Posting

Membuat Artikel yang Berhubungan

Membuat Daftar Populer Post dengan JavaScript

Memasang Jumlah Posting dan Komentar

Popular Posts

Blog Archive