Menambahkan Link Sumber Ketika Di CoPast

Blog sobat sering jadi sasaran Copas artikel? Bagaimana rasanya saat posting sobat dicopas tanpa sumber, sebagian besar dari kita pasti kesal tentunya. Kita tidak tahu ada berapa postingan blog kita yang dicopast oleh para Copaster, Kita pun tidak tahu postingan kita itu di publish dengan mencantumkan sumber atau tidak.

Nah, banyak blogger yang menggunakan cara ini, sehingga setiap postingannya (atau bahkan sepatah kata/kalimat atau code HTML) akan muncul bersama dengan link sumber ketika di-Paste. Ini bagus untuk blog yang sering jadi sasaran para Copaster.

Disini yang kita bahas adalah cara menambahkan Link sumber otomatis saat postingan dicopast. Berikut ini caranya :

• Login ke blogger sobat.
• Klik Template, lalu klik Edit HTML
• Seperti biasa, centang Expand Template Widget.
• Cari kode <body> (gunakan tombol F3 untuk mempermudah), lalu copas code berikut tepat diatasnya :

Lihat Script:

<script type='text/javascript'> if(document.location.protocol==&#39;http:&#39;){ var Tynt=Tynt||[];Tynt.push(&#39;cXIEhKYVSr4lJ5adbi-bpO&#39;);Tynt.i={&quot;ap&quot;:&quot;Sumber Artikel Dari: &quot;}; (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://infonetmu.googlecode.com/files/sumber-otomatis.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})(); } </script>

• Klik Simpan Template.

Untuk mencobanya, Copy salah satu artikel posting blog sobat dan Paste di Notepad, dibawah artikel akan ada link sumber yang mengarah ke postingan sobat yang yang dicopas.

Membuat Fungsi Scroll di Archive Blog

Tutorial  berikut ini adalah, membuat fungsi scroll di archive blog.

Jika sobat ingin tau, sebenarnya beberapa kali saya gagal memasang widget ini, dikarenakan tutorial yang saya lihat tidak jelas perintahnya. Namun setelah saya amati dengan teliti saya tau letak kesalahannya.

Membuat fungsi scroll pada archive blog. Tujuannya agar, arsip blog yang kita buat dalam bentuk Hirarkie, bisa dilihat secara ringkas. Karena semakin banyak archive artikel yang sobat muat di blog tentunya akan menyita banayak tempat. Namun jika kita menggunakan fungsi scroll maka sesempit apapun ruang archive yang diberikan bisa berfungsi dengan baik.

Bagaimana caranya? Mudah, tinggal ikuti langkah-langkah dibawah ini saja :

1. Masuk ke Dashboard Blogger

2. Klik Desain, Klik Edit HTML, Jangan Lupa Centang (Ö) Expand Widget

3. Jika sobat menamai Blog Archive dengan nama "Arsip Blog" (misalnya),  Tekan CRTL + F, 

    Lalu cari kata "Arsip Blog "

4. Jika sudah ketemu kode CSS nya seperti ini :

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>

5. Ubah bentuk Kode Fungsi Scroll Pada Archive Blog sobat menjadi seperti ini :

Lihat Script:

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog Ini' type='BlogArchive'>

<b:includable id='main'>

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

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

</b:if>

<div class='widget-content'>

<div style='overflow:auto; width:ancho; height:250px;'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

<b:if cond='data:style == &quot;HIERARCHY&quot;'>

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

</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>

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

</b:if>

<b:if cond='data:style == &quot;MENU&quot;'>

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

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

6. Save dan lihat hasilnya.

Catatan: Warna Hijau adalah Kode Script yang ditambahkan. Warna merah: dapat diatur sesuai keinginan sobat.

Pasang Tombol Like di Setiap Postingan

Memasang Tombol Like adalah cara alternatif untuk mempromosikan blog kita ke khalayak ramai. Apalagi jika sobat melakukan trik yang satu ini, yaitu memasang tombol like disetiap postingan. Tentunya sangat berguna untuk mempromosikan artikel ataupun blogger sobat. Jika sobat tertarik untuk memasang tombol like, caranya cukup mudah. Sobat hanya perlu mengikuti tahap-tahapnya yang akan saya share kali ini.

Cara Memasang Tombol Like di Setiap Postingan :

1.    Login Blogger

2.    Masuk ke Menu Template - Edit HTML

3.    Beri Tanda Centang Expand Template Widget

4.    Cari Kode : <data:post.body/>

5.    Letakan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:31px;'/>

6.    Simpan Template

Catatan :

Jika dalam pencarian kode <data:post.body/> sobat menemukan lebih dari 1 kode, maka pilih saja kode yang kedua.

Membuat Scrollbar Sebagai Widget

Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin sobat pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog sobat tidak seperti itu, saya akan menjelaskan cara dengan membuat scrollbar.

Membuat Menu Header Dengan Kotak Pencarian

Memasang template bawaan blogger tentunya memiliki keterbatasan, salah satunya tidak terdapatnya Menu Navigasi/Menu header dan Kotak penelusuran yang terpasang secara bersama-sama. Nah kali ini saya akan berbagi bagaimana membuat Menu Navigasi/ Menu Header yang dipasang secara bersamaan dengan Kotak Penelusuran guna mempercantik blog sobat.

Berikut ini tutorialnya:

1. Masuk ke Dashboard Blogger sobat.
2. Pilih Tata Letak > Add Gadget/Widget > Pilih HTML/Javascript> Kemudian masukkan  kode script dibawah ini.

Lihat Script:

<style type="text/css">

       #navright {

              width: 200px;

              font-size: 11px;

              float: right;

              margin: 0px;

              padding: 6px 5px 0px 0px;

              }

          #navright a img {

              border: none;

              margin: 0px;

              padding: 0px;

              }

</style>

<div id="tabshori">

<div id='navleft'>

<ul>

<li><a href="http://onetroverlight.blogspot.com"><span>Home</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/Tips%20dan%20Trik%20Blog"><span>Blogging</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/Software"><span>Free Aplikasi</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/serbagratis"><span>Gratis</span></a></li>

<li><a href="http://onetroverlight.blogspot.com/search/label/Money%20Blogging"><span>Money Blogging</span></a></li>

<div id='navright'>

<form action="http://onetroverlight.blogspot.com/search" class="cariform " method="get">

<input class="carifield" onblur="if (this.value == '') {this.value = 'Cari artikel...';}" onfocus="if (this.value == 'Cari artikel...') {this.value = '';}" type="text" value="Cari artikel..." /><input class="caributton" type="button" value="cari" /></form>

</div></ul>

</div>

<!-- akhir bg_nav --></div>

     3.  Save dan lihat hasilnya.

Sebagai Catatan: Ganti tulisan berwarna merah dengan URL punya sobat blogger.

Cara Cepat Menghilangkan Navbar, Attribution Pada Template Blog

Apa kabar sobat bloger, kali ini saya akan berbagi rahasia simpel untuk menghilangkan Navbar, dan Attribution pada blog melalui  template. Navbar dan Atrtribution merupakan element bawaan dari blogspot. Kenapa saya menghapusnya ? tentu saja saya melakukannya bukan tidak bangga dengan blogspot, hanya saja karena setiap kali mengganti template, dua element tersebut seakan mengganggu susunan template blog yang kita pasang.

Cara Menambahkan Tabel Pada Postingan

Banyak blogger yang  membuat tabel dalam postingan blogspot. Guna memberikan tempat untuk iklan, link, ataupun gambar, dan lainnya. Jadi dalam hal ini saya akan berbagi tips tentang bagaimana membuat tabel dalam blogspot. Di dalam table kita dapat menempatkan gambar / artikel, dan kita bisa menempatkan link di dalamnya.

Membuat Kotak Scroll Dalam Postingan

Membuat kotak scroll di dalam posting, salah satu kegunaannya apabila posting pada blog terlalu panjang bisa kita masukkan post ke dalam kotak scroll agar dapat meminimalkan tempat pada halaman posting.

Cara Memasang Spoiler Pada Blog

Spoiler di blog berguna untuk menyembunyikan dan menampilkan gambar/teks/item yang dirahasiakan dan disembunyikan pada posting, atau sebagai kotak kejutan, dengan maksud untuk membuat penasaran pengunjung tentang isi spoiler sehingga pengunjung tinggal membuka, dan juga berguna untuk membuat posting sobat terlihat pendek.

Kali ini saya akan berbagi cara bagaimana menambahkan kotak spoiler pada posting dan gadget blog sobat.

1. Login ke akun Blogger sobat.

2. Pada dasbor, buat posting seperti biasa dengan mengklik New Post atau Entri Baru.

3. Untuk menambahkan spoilernya, masukkan kode HTML berikut :

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;"><b>Lihat Script </b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">

</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">

<div style="display: none;"> Isikan Konten<br></div>

</div>

</div>

4. Untuk teks berwarna merah diatas, ganti sesuai keinginan sobat. Dan untuk  " Isikan Konten ", sobat bisa menggantinya dengan kode Gambar, Video, Link, atau memasukkan teks tertentu.

5. Jika selesai klik Publikasikan atau Publish.

Judul Spoiler:

Isikan Konten

3 Cara Mendapatkan Penghasilan Dari Blog

Mendapatkan dollar dari internet pasti menjadi impian semua orang yang memiliki ketertarikan dibidang bisnis online, baik saya maupun sobat, baik untuk seorang newbie maupun expert.Kita harus sadari bahwa untuk menghasilkan dollar dari internet memang tidak mudah, bahkan sang expert pun harus jatuh bangun terlebih dulu baru kemudian bisa menikmati hasilnya. Namun, meski tidak mudah hal tersebut tetap realistis untuk sobat kejar meskipun sobat belum mengerti secara luas tentang seluk-beluk cara menghasilkan dollar dari media online.

Membuat Related Post Dengan Fungsi Scroll-DropDown

Membuat Related Post atau Artikel Terkait di blog sobat, akan memberi banyak keuntungan khususnya meningkatkan pageview blog sobat. Selain itu fitur ini akan memudahkan pembaca ketika mencari artikel-artikel yang terkait dengan topik yang ada. Maka dari itu, kali ini saya akan membagi tutorial   cara MembuatRelated Post namun dengan diberi Scroll-DropDown agar blog lebih terlihat ringkas dan rapi.

Langkah Membuat Related Post Dengan FungsiScroll-DropDown :

• Masuk Blogger > Template > edit HTML
• Back up template dahulu > klik Download Full Template
• Check "Expand Widget Templates" box
• Tekan Control + F > cari kode <data:post.body/>
• Copy  kode script HTML berikut dan letakkan setelah/dibawah tag <data:post.body/>

Lihat Script:

<!-- START Related posts--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <H2>Artikel Terkait:</H2> <DIV class='rbbox'> <DIV style='margin:0; padding:10px;height:200px;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 = 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;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> <!-- END Related posts -->

• Selanjutnya, copy kode CSS berikut dan letakkan diatas tag : ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}.rbbox:hover{background-color: rgb(255, 255, 255);}

• Kemudian Save Template.

"pada beberapa template terdapat lebih dari satu tag <data:post.body/>, oleh karena itu sobat bisa pilih salah satu kalau gagal tag yang pertama pilih tag yang kedua atau cobalah semuanya dimana yang berhasil".

Code Warna HTML

Dibawah ini adalah Code warna HTML yang sering dipakai pada Script blog,
semoga  bisa membntu sobat mengetahui dan menghafal Code Warna HTML yang berguna untuk mempercantik blogger sobat.

Pasang Widget Amazing Counters

Sudah tahukah sobat dengan total pengunjung dari blog sobat? berapa pengunjung tiap harinya. Untuk hal seperti itu, sobat tidak perlu repot - repot menghitungnya satu persatu karena dengan widget statistik blog kita dapat mengetahuinya dengan mudah. ada banyak model yang disediakan untuk tampilan statistik  blog dan website, semua nya dapat sobat pasang sesuai dengan keinginan sobat. 

Trik Jitu Tambah Traffict Pengunjung di Blog

Setiap blogger tentunya berharap banyak pengunjung yang selalu datang di blognya, seperti hal nya saya,
Namun semua itu harus disadari, bahwa tidak mudah untuk mendatangkan pengunjung pada blog kita, jika kita tidak memperkenalkannya.