Catatan Blogger: 2013

Minggu, 26 Mei 2013

Memasang Artikel Terkait di Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sebagian blogger suka meletakkan artikel terkait di bawah posting,namun sebagian juga ada yang ingin meletakkannya di samping atau di sidebar blog. Ini kan namanya juga orang punya selera yang tak sama,tapi yah terserah masing-masing yang punya blog.

Bagi anda yang ingin menu artikel terkait di sidebar,cara pasangnya ada beberapa langkah yang harus di buat dan biar cepat mulai saja langkah awal:

1. Masuk/login dulu,dan pilih blog anda (bila lebih dari satu). Pilih template > Pilih edit html dan carilah kode </head> kemudian anda kopi kode di bawah dan letakkan sebelum/di atas 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>

2. Berikutnya,perhatikan-anda cari lagi kode seperti di bawah;

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

3. Kemudian kopi kode dibawah dan anda sisipkan di atas </b:loop> ;

<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=10"' type='text/javascript'/>

</b:if>

Nanti jadinya akan seperti ini;

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&max-results=10"' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

4. Sampai di sini,silahkan anda save dulu template.

5. Pada langkah 5 anda tidak lagi di edit html,tapi silahkan anda pindah ke tata letak/element. Klik Add gadget/tambah element,klik javascript > Anda beri judul pada kolom judul (ingat ini penting) lalu letakkan kode di bawah dalamkolom javscipt dan simpan;

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

6. Langkah berikutnya agar menu artikel terkait hanya muncul bila halaman artikel dibuka tidak pada semua halaman (maksudnya menu artikel terkait itu akan tetap muncul walau di homepage/halaman utama). Lanjut lagi langkahnya.

Sekarang balik lagi masuk ke edit html blog anda,dan carilah kode seperti di bawah;

<b:widget id='HTML4' locked='false' title='Artikel Terkait Lainnya' type='HTML'>

<b:includable id='main'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Pada langkah ini perhatikan benar-benar yang saya beri warna biru. Untuk kode itu kemungkinan tidak sama dengan blog anda (itu hanya contoh),jadi sesuaikan dengan blog anda. Yang anda harus lakukan adalah mengambil kode seperti/yang letaknya ada pada posisi kode yang saya beri warna biru untuk di letakkan pada kode langkah berikutnya.

Yang merah itu adalah judul gadget/element anda. Jadi itu juga sesuaikan dengan judl yang telah anda beri tadi waktu menambah element javascript.

7. Lalu cari lagi kode ]]></b:skin> letakkan kode di bawah tepat di bawah kode]]></b:skin> .,setelah kode yang BIRU sudah anda sesuaikan dengan yang ada pada blog anda.

<b:if cond='data:blog.pageType != "item"'>

<style>

#HTML4{display:none;}

</style>

</b:if>

8. Sekarang masuk pada langkah terakhir yaitu klik simpan template dan selesai. Dan cek ricek.....!

06.27 | 0 komentar

Sabtu, 25 Mei 2013

Dropdown Label Blog

Nah,langsung ke topik!Jika sebelumnya anda masih bingung seperti apa si Dropdown Labeltersebut?
Perhatikan gambar label dropdown dibawah ini,dari blog saya yang lain.

Cara Membuat Label Blog Berupa Dropdown.

Gimana?udah maksud khan label yang berupa/berbentuk dropdown? Ok!untuk membuatnya ikuti langkah-langkah berikut :

Pertama,pergi ke Dashboard,lalu pilih Tata Letak,kemudian kllik tab Edit HTML.
Jangan lupa contreng tulisan Expand Widget Templates,selanjutnya cari kode berikut:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Gunakan Ctrl+F untuk mempermudah pencarian,kode yang bercetak tebal diatas,hanya sebagai "patokan" aja agar mudah dalam pencarian.

Setelah ketemu,hapus kode tersebut,dan gantilah dengan kode di bawah ini:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>

Pilih Kategori

</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Tulisan "Pilih Kategori" bisa anda ganti sesuai keinginan,setelah itu,Simpan Template,Selesai,dan lihat hasilnya! :D

10.41 | 0 komentar

Membuat Widget Menu Per Label Dengan Efect TabView

Cara membuat widget menu berdasarkan label yang di poles dengan gaya tab view, Plus di dalam sub menu label sudah terpasang scroll. Di sini DCC (Dunia Corat-Coret) hanya memakai 5 tab view, sobat bisa mengurangi atau menambahkan tab view sesuai selera sobat.

Contohnya seperti gambar di bawah ini :

Kegunaannya :

tampilaanya menarik.
memangkas artikel yang udah terlalu banyak.

Cara membuatnya :

Login ke blog (bila anda belum login)
Klik "layout" atau "tata letak"
Klik "add a gadget" atau "tambahkan gadget"
Pilih "HTML/javascript"
Lalu masukan kode di bawah ini :

</div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>



<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 4a</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 4a?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 4b</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 4b?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

</div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>



<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 5a</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 5a?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 5b</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 5b?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

</div></td></tr></tbody></table>

selesai....Klik "simpan"

Keterangan :

kode yang berwarna orange adalah untuk merubah warna background tab dan warna list.
kode yang berwarna merah adalah untuk merubah judul label dan link label web anda.
kode yang berwarna kuning adalah untuk merubah judul tab.
bila ada yang kurang dimengerti silahkan bertanya sob....

10.23 | 1 komentar

Cara Membuat Artikel Tidak Bisa di Copy Paste 2

Apalah yang paling menjengkalkan hati seorang blogger selain ketika artikelnya di Copas ( salin ) tanpa seizinnya. Bayangkan saja sob, artikel yang dengan susah payah di ketik dengan bercucuran keringat dan menguras otak ( hehe.. berlebihan ya?? ) akhirnya harus ada duplikatnya tanpa se izin dari yang empunya artikel.
Meskipun tak sedikit yang tidak mempermasalahkan tindakan Copy paste artikel ini, namun yang namanya mencuri hasil karya tanpa ada ijinnya tetap saja dianggap sebagai tindakan kurang sportif.. sebetulnya saya sendiri tidak mempermasalahkn tindakan copy paste terutama yang lakukan di blog ini, asalkan sobat menyertakan link aktif artikel yang di copas sebagai sumbernya, kira - kira dengan cara seperti itulah kita bisa saling menghargai hasil ketikan jari sesama blogger. Berikut beberapa teknik anti Copas yang bisa saya share untuk sobat blogger.

Gunakan script berikut untuk meletakkan link sumber ( link source ) otomatis ketika di copas
Letakkan script berikut di atas kode <body> kemudian di save.

Catatan :
Ubah tulisan berwarna biru sesuai keinginan. misalnya "artikel bersumber dari"

Namun jika sobat blogger memang sama skali tak mentolerir tindakan ini atau memang tidak mau artikelnya sampai di duplikat orang lain, maka bisa sobat siasati dengan memasang 2 trik anti copas ( disable klik kanan ) berikut.

Membuat Artikel Tidak Bisa di Copas

1. Trik Pertama :

1. Klik rancangan -->Edit HTML
2. Cari dan ganti kode <body> dengan kode berikut

3. klik save

2. Trik Ke Dua :
Menonaktifkan klik kanan sekaligus mengeluarkan pesan peringatan seperti gambar berikut.

Caranya :
1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. masukkan kode dalam kotak yang di sediakan

catatan:
Ubah tulisan yang berwarna merah dengan pesan peringatan yang di inginkan.

3. klik save

Silahkan pilih yang mana yang di rasa lebih baik, apakah sobat memperbolehkan Copas tapi harus ada link sumbernya, atau sama sekali tidak ingin ada yang meng-copas artikelnya.

08.16 | 0 komentar

Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste

Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste. Copy paste, banyak para blogger yang benci dengan tindakan yang satu ini. banyak yang beranggapan bahwa kalau artikel kita di copy oleh blogger lain maka akan menimbulkan kerugian bagi si penulis artikel.

Nah untuk mengatasi hal tersebut banyak blogger yang menerapkan beberapa trik mulai dari memasang script anti klik kanan pada blog-nya dan dengan mengunci fungsi block pada artikel yang ada di blognya. Nah kali ini B-digg akan memberikan Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste yang mungkin sedang anda perlukan untuk memproteksi artikel anda yang sering di copas.

Untuk langkah-langkah pembuatannya sangatlah mudah. Anda hanya perlu memasukkan kode java script berikut ini pada struktur template anda. dan berikut ini langkah-langkah-nya:

1.Log in ke Blogger.
2.Masuk ke template dan menuju ke edit HTML.
3.Centang kotak Expand Template Widget dan cari kode <head>.
4.Letakkan kode di bawah ini tepat di atas kode <head> :

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

5.Klik save template.

Nah sekarang cobalah pada blog anda dengan perubahan yang telah terjadi

08.14 | 1 komentar

Jumat, 24 Mei 2013

Template SEO Responsive 2013

Kumpulan Template SEO, Responsive, Terbaru dan Pilihan - Mengapa Desain Responsif menjadi hal yang sangat penting di tahun 2013? Orang-orang semakin memanfaatkan ponsel, tablet (perangkat layar kecil portable) mereka. Setiap gadget-gadget mereka berbeda sehingga kita sebagai pemilik situs haruslah membuat tampilan desain thema menjadi responsive. Desain responsif dari situs akan mengurangi 80% dari masalah yang sering di hadapi pada website di tahun 2013 ini. Jadi untuk itulah saya memberikan dan menulis mengenai Kumpulan Template SEO, Responsive, Terbaru dan Pilihan yang saya berikan untuk Anda.

Kumpulan Template SEO, Responsive, Terbaru dan Pilihan:

#1. Media Tech Blogger Template

DEMO | Download

#2. Responsive Blogger Template

DEMO | Download

#3. Sensational Blogger Template

DEMO | Download

#4. EasyNews Blogger Template

DEMO | Download

#5. DailyPost Blogger Template

DEMO | Download

#6. New Magazine Blogger Template

DEMO | Download

Maka, demikianlah artikel Kumpulan Template SEO, Responsive, Terbaru dan Pilihan semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.

23.09 | 0 komentar

Super SEO

Template yang ketiga adalah Super SEO buatan Kang Ismet, berbeda dengan template yang pertama dan kedua, template ini memiliki tampilan yang lebih elegant. Tampilannya juga sudah cukup lumayan bagus karena memiliki dua menu horizontal untuk list page dan satunya bisa kita edit semaunya. Untuk fitur dari template ini adalah :
- 2 Navigasi (di atas dan di bawah header)
- Social Networking
- Auto readmore with default thumbnail
- Breadcrumbs yang SEO friendly
- Related Posts / Artikel terkait
- Bookmark ready (facebook, twitter, google +, pinterest)
- 468x60 banner header
- Kategori 2 kolom
- Threaded Comments

Statistik blog demo:

Pagerank : 0

Alexa Rank : 266.706

Super SEO

DEMO - DOWNLOAD

21.39 | 0 komentar

Thesis SEO Blogger Template

Template ini dibuat oleh Reza Ilmi, dalam blognya yang beralamatkan blogjuragan[dot]blogspot[dot]com mengatakan bahwa template ini merupakan inspirasi dan hasil convert langsung dari Thesis SEO template. Aslinya template ini merupakan khusus template yang dibuat untuk engine Wordpress dan dibandrol dengan harga $87, Woow lumayan mahal yaa :D Untungnya saja udah ada versi blogspotnya dan gratis pula.
Beberapa fitur dari Thesis SEO Blogger Template adalah :
- SEO Friendly
- Visitor Friendly
- Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
- Dinamic metatag deskripsi dan keyword otomatis (metatag wajib untuk menghindari duplikat meta deskripsi & keyword)
- Quicklink ke kotak komentar
- Autoreadmore
- Tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog
- Loading yang cepat
- Konsep minimalis & simple

Statistik blog demo:

Pagerank : 1

Alexa Rank : 383.104

Thesis SEO Blogger Template

DEMO - DOWNLOAD

21.38 | 0 komentar

Johny Wusss

Template ini bisa dibilang salah satu free template seo friendly yang paling populer di awal sampai pertengahan tahun 2013 ini. Template buatan maskolis ini sekarang sudah memiliki alexa rank dan pagerank yang tinggi untuk ukuran sebuah blog demo. Memang tampilannya masih sederhana, tapi kecepatan loadingnya sudah diatas rata-rata meskipun dalam koneksi internet yang lambat. Fitur dari template Johny Wusss ini adalah :
- Simple template blogger with elegant look
- Auto readmore without javascript
- Fast loading
- Stylish threaded comment
- SEO friendly and visitor friendly
- Sidebar toggle hide and show
- Navigation menu dropdown
- Ads ready and many more

Statistik blog demo:

Pagerank : 4

Alexa Rank : 115.604

Johny Wusss

DEMO - DOWNLOAD

21.37 | 0 komentar

Catatan Blogger

Recent Posts

Recent Comments

Menu Blog

Favorit Saya

Trending Topic

Sponsored

Popular Posts

Arsip Blog

Minggu, 26 Mei 2013

Memasang Artikel Terkait di Sidebar

Sabtu, 25 Mei 2013

Dropdown Label Blog

Membuat Widget Menu Per Label Dengan Efect TabView

Cara Membuat Artikel Tidak Bisa di Copy Paste 2

Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste

Jumat, 24 Mei 2013

Template SEO Responsive 2013

Super SEO

Thesis SEO Blogger Template

Johny Wusss

Trending Topic

Test Footer

Misteri

Mengenai Saya

Total Tayangan Halaman