Cara Membuat Link Di Komentar Blog

Cara Membuat Link Di Komentar Blog  -  Trik ini mungkin sudah banyak para blogger yang tau namun bagi pemula tentu sangat membantu dan di cari" hehe...
Dalam hal ini sering kita jumpai Blogger yang meninggalkan alamat web nya di kotak komentar dengan cara menuliskan Text URL tersebut. Ada juga yg memberikan link langsung sehingga apabila link itu di klik akan langsung menuju blog yang dituju nah yang saya bahas kali ini adalah tentang bagaimana caranya membuat link text langsung  .
Contohnya seperti ini :



Dengan menaruh link seperti diatas, tentunya akan sangat mudah bagi orang lain yang ingin mengunjungi blog kita lewat kotak komentar itu tanpa harus mengkopy anchor text nya jika kita meninggalkan Anchor text URL saja.
Langsung saja yah untuk langkah langkahnya :
Copy code dibawah dan letakkan di kotak komentar :

<a href="http://blogzafar.blogspot.com/2013/05/cara-membuat-link-di-komentar-blog.html">Cara Membuat Link Di Komentar Blog</a>

Maka hasilnya akan  terlihat seperti ini : Cara Membuat Link Di Komentar Blog
Contoh :
My Blog :

<a href="http://blogzafar.blogspot.com/2013/04/cara-mudah-mencari-kode-template-di.html">Cara Mudah Mencari Kode Template di Menu Edit HTML Baru</a>

Maka jadinya seperti gambar diatas tadi atau di bawah ini.

Cara Mudah Mencari Kode Template di Menu Edit HTML Baru

Anda juga bisa menambahkan ketebalan huruf dengan menambahkan <b> Kode diatas </b>
Dan masih banyak tag lagi yang bisa anda gunakan.
Semoga bisa membantu :)

Continue Reading

Cara Mengatasi Pesan Komentar Yang Berada Dibawah

Kali ini saya ingin memberikan trik
cara mengatasi pesan komentar yang jatuh berada dibawah formulir komentar.

masalah tersebut mungkin masih banyak dialami para blogger,
Mungkin bukan masalah besar namun tentunya ditinjau dari tata letak desain akan nampak ganjil dan kurang rapi.
Untuk anda yang mengalami masalah ini, silahkan ikuti langkah-langkah cara mengatasi masalah pesan komentar yang jatuh dibawah form komentar berikut:

• Setelah login ke akun anda
• Pada dasbor  Klik Edit HTML ---> karna tampilan edit htmlnya baru yang sudah tidak tersedia centang Expand Widget Templates maka kini untuk lebih cepat mencari kodenya lihat di Cara Mudah Mencari Kode Template di Menu Edit HTML Baru
• Klikk Ctrl+F dan cari kode  berikut ini: 

Lihat Code

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

Lalu hapus semua kode berawal dari kode <b:includable id='threaded-comment-form' var='post'> sampai </b:includable> selanjutnya ganti dengan kode dibawah ini: 

Lihat Code

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='form-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

• Selanjutnya cari kode berikut ini: 

 document.getElementById(domId).insertBefore(replybox, null);

•  Ganti dengan kode berikut ini:

 document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

• Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial kali ini. Semoga dapat menjadi solusi untuk masalah pesan komentar yang jatuh dibawah formulir komentar pada blog anda.

sumber:http://www.tipstrikblogging.com

Continue Reading

Cara Mudah Mencari Kode Template di Menu Edit HTML Baru

Cara Mudah Mencari Kode Template di Menu Edit HTML Baru - Sebelum adanya perubahan pada tampilan menu edit HTML Blogger, saya sudah menjelaskan cara mencari kode template yang dengan mudah bisa kita temukan hanya dengan melakukan CTRL+F pada keyboard dan memasukkan kode yang dicari kedalam kolom pencarian yang berada di pojok kiri bawah dangan mencentang Expand Template Widget yang akan memunculkan semua kode template, sehingga dari sini kita bisa menemukan kode yang di cari.

Namun tidak demikian dengan tampilan menu edit HTML dalam template blogger, saat kita mencari kode template, fitur centang Expand Template Widget sudah ditiadakan sehingga mau tidak mau kita harus mencari cara termudah dalam mencari kode template yang kita inginkan.
Nah bagi yang belum tau Berikut panduannya... yg dah tau cicing tong gandeng hehe...

1. Tentukan terlebih dahulu kode yang ingin di cari, sebagai contoh saya akan mencari kode <data:post.body/>
2. Tekan tombol CTRL+F pada keyboard laptop anda
3. Muncul kolom Search di pojok kanan atas
4. Masukkan kata kunci kode didalam kolom tersebut, contoh <data:post.body/>
5. Tekan Enter  pada keyboard laptop anda

Kode ditemukan!...... mudah kaaan kalo dah tau hehe....
Semoga membantu

trima kasih

Continue Reading

Cara Membuat Efek Lipatan Kertas Di Ujung Blog

Cara Membuat Efek Lipatan Kertas Di Ujung Blog - Setelah saya berhasil dengan apa yg di inginkan, membuat efek lipatan kertas pada ujung kanan blog, 
yang menurut saya agak lumayan bikin pusing  juga

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog siti, {sedikit pamer, heheheheee,, } ga apa" yaaah

Bagai mana....! ada yang berminat untuk membuat lipatan kertas pada ujung blog seperti blog
Tips Trik Blog {tenag aja yang saya bagi tidak ada foto jelek saya ko heheheheee,,, }
silakan ikuti lankah-langkah berikut ini ya :

1. Silahkan Login ke akun blogger anda.
2. Lalu masuk ke design Template, klik Edit HTML
3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

 6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save)

Keterangan:

• Kode warna hijau: ganti dengan URL Feeds anda
• Kode warna biru: ganti apabila anda ingin mengganti gambar sesuai selera ea.

Ikuti langkah-langkah berikut ini bila ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.

• Setelah selesai download silakan buka script tersebut dengan Notepad.

Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) anda cari url berikut dalam text kalo ga salah ada di bagian atas dan silakan ubah dengan url gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png 

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

• Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) ubah url berikut dengan url gambar anda:

http://petir-project.googlecode.com/files/feed.png

•  Setelah selesai merubah kode URL gambar tersebut... Save Text, selanjutnya silakan anda upload text tersebut dan ganti URL http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload  tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba.... dan jangan lupa like nya yaaaaa  ^_~

http://zuazz.blogspot.com

Continue Reading

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan

Cara Membuat Artikel Terkait (Related Post) Di Bawah Postingan -  Dengan adanya related post atau artikel terkait di setiap postingan, tentu saja ini akan memberikan backlink kepada posting yang lama dan visitor bisa mengunjungi postingan tersebut walaupun sudah lama dipublish. Cara Membuat Related Post/Postingan Terkait? Silahkan baca step-step nya Di Bawah:

1. Login ke Blogger.com --> Design --> Edit HTML
2. Lalu tandai kotak kecil Expand Widget
3. Lalu cari kode <data:post.body/> jika menemukan banyak kode tersebut, gunakan kode yang ke-2
4. Copy-paste kode berikut di bawah kode <data:post.body/>

Lihat Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

5. Kemudian cari kode ]]></b:skin>
6. Copy-paste code CSS berikut ini tepat diatasnya

Lihat Code

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

 Terakhir klik Save/Simpan
KETERANGAN:
*ARTIKEL TERKAIT,bisa Anda ganti sesuai keinginan...misal:Related Post,Baca Juga,dll
*maxNumberOfPostsPerLabel = 50; adalah jumlah posting atau artikel terkait yang ingin di tampilkan *maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
*background-color: #F2F2F2; adalah warna background kotakan(bisa anda ganti sesuai keinginan)
*background-color: #EFFBEF; adalah warna background waktu disorot kursor(bisa diganti sesuai keinginan)
*http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png adalah icon didepan link(bisa diganti sesuai keinginan,usahaka size gambarnya kecil)
Contoh hasilnya:

 Catatan: karena semua template berbeda-beda maka jangan salahkan saya yah kalo ga berhasil yang jelas cara ini sudah saya praktekan dan berhasil sesuai gambar di atas atau di dalam blog ini

Continue Reading

Cara menambah gadget di bawah header Blog

Cara menambah gadget di bawah header Blog -  selain menambah gadget di halaman sidebar ataupun bagian bawah kita juga bisa menambah gadget/widget di bawah ataupun di atas blog salah satunya adalah bagaimana caranya menambah gadget di bawah header ?

Contoh gadget di bawah header  tampilannya seperti ini

Buat sahabat  yang ingin menambahkan gadget di bawah header silakan ikuti langkah langkah berikut ini :

• Masuk ke blogger
• Pilih Template
• Klik Edit HTML
• Klik Lanjutkan
• Centang kotak Expand Template Widget
• Cari kode di bawah ini di dalam template sahabat gunakan Ctrl + F untuk mempermudah pencarian

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

• Nah jika sudah ketemu kode seperti di atas silakan sahabat ganti dengan kode di bawah in

 <b:section class='header' id='header' preferred='yes'>

• Klik pratinjau dahulu untuk mencegah hal hal yang tidak diinginkan
• Jika sudah ok lanjut klik simpan template
• Selesai

terima kasih dan selamat mencoba.

Continue Reading

Cara Membuat Halaman Page Baru Di Blog

Cara Membuat Halaman Page Baru Di Blog 

Sama seperti ketika membuat artikel, membuat halaman blog juga tidak sulit. Jadi, jika anda terbiasa menulis artikel di Ms.Word, anda pasti bisa menulis artikel di blog. Jika anda bisa menulis artikel di blog, anda juga bisa membuat halaman blog dan mengisinya dengan artikel yang di inginkan. ok 

Contohnya seperti gambar berikut:

Halaman blog tidak hanya bisa di isi oleh tulisan saja, apapun bisa anda masukkan atau anda pasang di halaman blog tersebut. Seperti gambar, musik, Daftar isi Dll bahkan jika anda memiliki toko online, anda bisa membuatnya disana. 

Berikut panduan cara membuat halaman blog

• Masuk ke akun blogger anda
• Pilih menu Laman yang ada disebelah kiri dashboard blogger dan pilih Laman baru lalu klik Laman kosong

•  Isi Judul halaman (page) dan artikelnya sesuai tanda panah gambar di bawah. Isi dengan sesuatu yg di butuhkan setelah selesai klik publiskan

• Ubah pil“Jangan tampilkan” dengan pilihan “Tab atas”. Lalu klik Tombol “Simpan Pengaturan”.

Pada menu ini, ada 3 opsi yaitu;

trima kasih ;)

• Tab atas
  Merupakan pengaturan standart dari blogger yang secara otomatis akan tampil setiap kali anda membuat halaman baru. Laman atau halaman blog akan berada di atas blog atau tepatnya dibagian bawah header atau judul blog anda dan tampilan yang umum digunakan. Contohnya adalah blog ini.
• Tautan samping
  Merupakan pengaturan standart dari blogger yang secara otomatis akan tampil setiap kali anda membuat halaman baru. Laman atau halaman blog akan berada di samping blog atau tepatnya dibagian sidebar blog. Jarang digunakan.
• Jangan tampilkan
  Laman atau halaman blog tidak akan ditampilkan alias tersembunyi dan untuk menampilkannya, anda hanya bisa menggunakan cara manual dengan membuat halaman blog sendiri.
Dari ketiga opsi diatas, saya sendiri biasanya dan selalu memilih opsi yang ketiga, Jangan tampilkan.

Continue Reading

Cara Membuat Tag Cloud Berputar Di Blog

Cara Membuat Tag Cloud Berputar Di Blog

Pada kesempatan kali ini saya akan posting tentang bagaimana cara membuat label tag clould berputar

Setelah cari-cari di Google akhirnya ketemu juga langsung saya share dech

Tidak semua template bisa mendukung untuk dikasih tag cloud. Dan sebelum kamu nyoba bikin label tag cloud berputar ini, kamu download template punyamu dulu biar agar terjadi kesalahan kamu tidak pusing ,

Caranya Adalah sebagai berikut:

• Login ke  Blogger 
• Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,  Cari kode : <b:section class='sidebar' id='sidebar' preferred='yes'>  ( kalau kesulitan nyarinya pakai Ctrl + F aja)
• Lalu copy paste kode di bawah ini tepat berada di bawah kode tadi

Lihat Code

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>

<b:includable id='main'>

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

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://anvity.googlecode.com/files/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.anvity.blogspot.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Distributed by <a href='http://www.anvity.blogspot.com'>Tifan Dwi Avianto</a></div>

<script type='text/javascript'>

var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Keterangan :ganti tulisan yang berwarna merah dengan keinginan anda
1.Lebar widget : 250px
2. Tinggi widget : 300px
3. Warna latar (background) : #ffffff (putih)
4. Warna huruf : 0x333333 (abu-abu)
5. Ukuran huruf : 12 

perlu tau juga manfa'at tag cloud lihat di Apa itu Tag Cloud?
Selamat mencoba semoga bermanfa'at

Continue Reading