Loading

11 Februari 2012

Kelengkapan Teknis Suatu Blog

Belajar SEO, Teknik SEO, Cara Jadi Nomor 1 Di Google, Tutorial Blog, Blogspot, Blogger, Wordpress, Joomla
Awalnya bingung juga, karena ingin melengkapi bengkel blog dengan postingan yang bersifat teknis untuk kelengkapan suatu blog, seperti :
  1. artikel terkait (related posts)
  2. artikel terakhir (recent posts)
  3. artikel acak (random posts)
  4. komentar terakhir (recent comments)
  5. top komentator
  6. baca selanjutnya (read more)
  7. dan lain sebagainya.
Semua ini tentu saja saya dapatkan dari beberapa blog sobat yang tentunya saya akan cantumkan sebagai narasumbernya. Walaupun demikian halnya, saya sendiri juga tidak tahu mana yang lebih dahulu mengetahuinya dan memberikannya untuk kali pertama, karena banyak sekali artikel semacam ini di internet.

Disamping itu, ada juga beberapa kelengkapan teknis untuk suatu blog yang secara intensif digarap oleh para programmer untuk pengembangan suatu blog yang pada akhirnya diperuntukkan untuk kenyamanan para pembaca sekalian.

Memang ada sebuah atau beberapa buah blog yang MENGHARAMKAN untuk di "COPY - PASTE" hasil karyanya dengan memberikan PERINGATAN TEGAS seperti "Don’t Copy This Post because this Original from my Blog (www.gamaudicopy.com). Please read Copyright of All post at the Footer." Atau dengan menggunakan pihak ketiga sebagai lisensi bahwa karyanya dilindungi oleh hukum. Untuk itu kita juga harus menghormatinya untuk tidak berbuat seenaknya dan perlihatkan kedewasaan kita untuk tidak melakukan tindakan yang dengan tegas tidak diperbolehkan oleh si pemiliknya untuk dibagi-bagikan.

Akhirnya, diawali dari postingan ini saya akan mencoba dan berupaya semaksimal mungkin untuk tidak dengan mudah melakukan "FLAGIAT" atas hasil karya orang lain. Jadi, intinya saya harus mengenal rambu-rambu yang telah diberikan oleh si pemilik blog itu. Kalau memang diperbolehkan "WHY NOT" tapi jika sudah ada rambu seperti di atas, sebaiknya urungkan niat kita.

Satu hal lagi yang saya ingin sampaikan, bahwa pada intinya juga ilmu atau pengetahuan itu menjadi popular dalam arti menyebar dan meluas hingga semua orang itu tahu. Itu karena, "KATANYA ..." dan sobat pasti tahu maksudnya, Terima kasih.

Cara Membuat Blockquote

Cara Membuat Blockquote. Blockquate, sobat pasti sudah tahu dong maksudnya, ya betul. Kalau kita ingin membuat suatu catatan/keterangan penting, berupa script kode atau mungkin yang lainnya. Maka kita akan menggunakan tanda petik seperti "Dalam tanda Petik".

Kenapa saya memposting ini, mungkin sobat kurang puas dengan "Blockquote" bawaan dari template dan ingin menggantinya.

Berikut ini script kodenya :
.post-body blockquote {
display:block;
overflow:auto;
background: #3207d4 url(http://sites.google.com/site/wandinews/javascript/kod1.jpg?imgmax=800) no-repeat top left;
border:3px solid #3207d4;
max-height:170px;
line-height:1.3em;
margin:5px 10px;
padding:10px 5px 10px 20px;
}

Kode CSS untuk blockquote di atas ditempatkan sebelum ]]></b:skin> dan pemakaiannya pada saat membuat postingan dengan menggunakan tanda (") sebelum dan sesudah kalimat yang akan dimasukkan dalam tanda kutip (blockquote).

Cara Membuat Menu Breadcrumb

Cara Membuat Menu Breadcrumb. Menu Breadcrumb merupakan menu navigasi atau petunjuk keberadaan suatu postingan di bawah satu atau beberapa kategori/tags. Sebenarnya menu ini tidak begitu penting, namun untuk mempercantik serta mempermudah pembaca untuk mengetahui artikel tersebut berada pada kategori/tags apa. Ok, langsung saja berikut ini langkah-langkahnya.

Cara Membuat Menu Breadcrumb :

  1. Login Blog anda > Design > Edit HTML dan centang Expand Widget templates
  2. Cari kode ]]></b:skin> ( gunakan CTRL + F agar lebih mudah)
  3. Paste kode berikut tepat diatas kode ]]></b:skin>
    .breadcrumbs{
    padding-left:10px;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef;
    }
  4. Kemudian cari kode <b:includable id='post' var='post'>
    Setelah ketemu, silahkan paste kode berikut tepat dibawah kode <b:includable id='post' var='post'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    Anda disini &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
    <b:if cond='data:post.labels'><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 != &quot;true&quot;'> , </b:if>
    </b:loop>
    </b:if> &#187; <data:post.title/>
    </div>
    </b:if>
    </b:if>
  5. Save template (selesai).

13 Februari 2011

Cara Membuat Related Post by Kategori

Cara Membuat Related Post by Kategori. Sobat pasti tahu dong maksudnya, ya betul. Jadi script ini digunakan untuk menyusun artikel terkait berdasarkan kategori atau tags (untuk di WordPress). Ok berikut ini langkah-langkahnya.

Cara Membuat Related Post by Kategori :
  1. Login ke Blog anda > Pilih Rancangan (Design)
  2. Pilih Edit HTML > Centang pada Expanded Widget Template. Catatan : "Sebaiknya unduh dulu template sobat, untuk keamanan"
  3. Cari scipt kode seperti di bawah :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    </b:if>
    Gunakan fasilitas search/cari dengan tombol F lalu masukkan script kode di atas.
  4. Kalau sudah ketemu, paste script kode di bawah ini sebelum kode </b:if> di atas. Berikut script kode yang harus dicopy :
    <h4>Artikel terkait lainnya berdasarkan katgori/tags :<h4>
    <div id='data2007'/>
    <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;data2007&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </div> </b:if>
  5. Simpan, dan Selesai.

Semoga bermanfaat.

10 Februari 2011

Cara Membuat Recent Comment

Untuk membuat Recent Comment sebagai perlengkapan sebuah blog di Blogspot terdapat cukup banyak cara, namun yang paling mudah dan cepat loadingnya dengan menggunakan bawaan dari Blogspot. Recent Comment bawaan Blogspot ini hanya dapat menampilkan 5 komentar saja, dan hanya menampilkan ringkasan teks saja tanpa dilengkapi dengan thumbnail.

Bagaimana caranya menggunakan Recent Comment ini, ok inilah langkah-langkahnya.

Cara membuat Recent Comment :
  1. Login ke Blog anda > Pilih Design
  2. Kemudian Tambahkan gadget (Add a gadged) > pilih Feed
  3. Masukkan Url berikut http://BLOG-SOBAT/feeds/comments/default
  4. Ganti yang warna orange dengan alamat blog anda dan simpan.

Cara membuat Recent Comment seperti yang telah dijelaskan diatas merupakan cara yang paling mudah, dipostingan selanjutnya saya akan memberikan tips atau Cara membuat Recent Comment dengan thumbnail, Ok selamat mencoba.

09 Februari 2011

Cara Membuat Recent Comment + Thumbnail

Cara Membuat Recent Comment + Thumbnail. Pada postingan yang lalu sudah diterangkan bagaimana Cara membuat Recent Comment yang paling mudah dan cepat loadingnya dengan menggunakan bawaan dari Blogspot. Kali ini akan diterangkan Cara membuat Recent Comment yang dilengkapi dengan Thumbnail. Thumbnail itu artinya potongan gambar atau foto, yang tentunya disini adalah gambar atau foto pemberi komentar.

Banyak postingan di internet yang telah menjelaskan bagaimana Cara membuat Recent Comment dengan Thumbnail, tapi tidak ada salahnya juga saya memperkaya atau memperbanyak artikel ini dengan tujuan semoga dengan banyaknya postingan Cara membuat Recent Comment dengan Thumbnail akan memudahkan pencarian artikel ini.

Saya tertarik sekali dengan Cara membuat Recent Comment dengan Thumbnail dari W2Blogging yang manis seperti yang digunakan di Bengkel Blog ini. Jika sobat ingin langsung ke sumbernya boleh saja, atau bisa langsung di sini. Ok, berikut langkah-langkahnya.

Cara membuat Recent Comment dengan Thumbnail
  1. Login ke Blog anda > Pilih Design
  2. Kemudian Tambahkan gadget (Add a gadged) > lalu masukkan kode script berikut ini:
    <style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Recent Comments Settings
    var
    numComments = 5,
    showAvatar = true,
    avatarSize = 40,
    roundAvatar = true,
    characters = 40,
    showMorelink = false,
    moreLinktext = "More »",
    defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
    <script type="text/javascript" src="http://bengkel-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
  3. dan simpan. Selesai

Sedikit penjelasan untuk Recent Comment dengan Thumbnail ini :
numComments = 5
showAvatar = true
avatarSize = 40
roundAvatar = true
characters = 40
showMorelink = false

numComments = 5, akan menampilkan komentar sebanyak 5, di sini dapat dicustom sesuai keinginan sobat silahkan suka-suka maunya berapa komentar yang akan ditampilkan.

showAvatar = true, akan menampilkan Avatar sobat, kalau tidak mau ditampilkan diset "false".

avatarSize = 40, akan menampilkan ukuran Avatar. 40 sesuai dengan yang ada diblog saya. Silahkan sobat mencobanya sesuai keinginan.

roundAvatar = true, akan menampilkan frame bundar. Jika sobat tidak suka dengan frame bundar atau lingkaran, bisa sobat set "false" akan menampilkan frame square atau kotak.

characters = 40, akan menampilkan 40 character pertama sebagai cuplikan komentar yang akan ditampilkan.

showMorelink = false, tidak menampilkan link ke postingan tapi kalau sobat mau menampilkan link ke postingan tersebut harus diset "true".

Ok, semoga bermanfaat.
Older Post ►