Cara Memasang Tombol Share To Facebook, Twitter, Google+ di Blog

Dengan memanfaatkan berbagai jejaring sosial seperti facebook, twitter, maupun Google+ kita bisa mendapatkan banyak pengunjung blog kita. Tombol berbagi ke facebook dan sebagainya ini mempunyai fungsi untuk membagikan artikel kita yang sedang di baca oleh pengunjung.

Dengan memasang tombol berbagi ini, akan membawa manfaat bagi blog kita. Semakin banyak artikel yang di share pengunjung ke media jejaring social, maka semakin banyak pula pengunjung yang datang ke blog kita. Bagi anda yang berminat untuk memasangnya, silangkan ikuti langkah -langkah Cara Memasang Tombol Share To Facebook, Twitter, Google+ di Blog.

Cara Memasang Tombol Berbagi Ke Facebook, Twitter, Google+ di blog
1. Loggin ke blogger dengan akun blog anda.
2. Klik menu Tata Letak > Edit HTML > Expand Template Widget
3. Cari kode <data:post.body/> , Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya. Jika Anda sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/> pilih yang kedua. Lalu copy kode di bawah ini dan paste di bawah kode <data:post.body/> ,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>

5. Simpan Template dan lihat hasilnya.

Semoga bermanfaat :)

Continue reading →

Cara Membuat Artikel Terkait/ Related Post di Blog

Dengan menggunakan artikel terkait ini, memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

Berikut Screenshotnya

Dan berikut Cara Membuat Artikel Terkait/ Related Post di Blog :

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari kode ]]><b/:skin> (Gunakan tombol Ctrl+F pada keyboard untuk melakukan pencarian cepat. Copy kode dibawah ini, lalu paste DI ATAS kode ]]><b/:skin> berikut kodenya :

.rbbox{-moz-box-shadow: inset 0 0 20px #aaff00;
-webkit-box-shadow: inset 0 0 20px #aaff00;
box-shadow: inset 0 0 20px #aaff00;
.rbbox:hover{background-color:#000000);}

Keterangan : Code yg bertuliskan hijau (#aaff00) bisa kalian ganti sesuai warna yg kalian suka. ini adalah warna shadow line kotak artikel terkait ini.

dan cari kode <data:post.body/> , Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya. Jika Anda sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/> pilih yang kedua. Lalu copy kode di bawah ini dan paste di bawah kode <data:post.body/> ,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<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 = 10;
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>

Selanjut nya, Simpan Template dan lihat hasilnya. Semoga bermanfaat :)

Continue reading →

Membuat Tombol Like Facebook Di Setiap Postingan Blog

Apa gunanya tombol like FB dipasang di blog ?
Berhubung zaman sekarang Facebook udah termasuk sebagai salah satu situs jejaring sosial yang terpopuler di dunia maya, semua orang mulai melirik halaman facebook yang setiap hari diakses oleh milyaran orang di dunia sebagai media promosi. Salah satunya promosi link dan artikel di blog supaya blog kita bisa dikunjungi milyaran orang di dunia.

Tombol like ini mempunya fungsi yang jika di klik, maka link artikel blog kita bisa nampil di dinding FB di pengeklik. Dengan tampilnya link blog kita di dinding FB nya, so pasti ada kemungkinan juga blog kita dilihat sama teman FB di pengeklik tombol like tadi.

1. Untuk membuatnya, masuk dulu ke menu Perancangan > Edit HTML
2. Centang checklist Expand Template Widget
3. Cari kode <data:post.body/>
4. Letakkan kode berikut diatas kode <data:post.body/> tadi jika kamu ingin menampilkannya diatas postingan. Atau letakkan dibawahnya jika ingin menampilkannya di bawah postingan.

<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=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/><br/>

dan lihat hasilnya. Semoga bermanfaat :)

Continue reading →

Cara Membuat Loading Blog

Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css.

Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat. lumayan menarik bukan? ok mari kita bahas cara pembuatannya.

Demo tampilan STATUS LOADING:

Memuat halaman…

Berikut ini langkah-langkah Cara Membuat Loading Blog :
- Buka Blog sobat
- Pada Dashboard pilih Rancangan atau Design
- Edit HTML dan centrang Expand Widget Template
- Cari kode </head>  kemudian copy - paste kode di bawah ini sebelum kode tersebut

<script src='https://sites.google.com/site/indolaron/file-js/preloadpage.js' type='text/javascript'/>

- Cari kode <body>  , ganti dengan kode dibawah ini:

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>

refresh blog sobat dan lihat hasilnya. semoga bermanfaat! :)

Continue reading →

Script Widget Al-Quran Untuk Blog/Website

Sobat blogger ingin memasang widget Islami semisal memasang widget Al-Qur'an Digital Online pada blog sobat? Kalo iya, maka postingan ini semoga dapat membantu sobat yang ingin memasang widget Al-Qur'an digital online pada blog sobat. Kelebihan dari script widget ini, terdapat terjemahan ayat berbahasa Indonesia dan juga disertai audio yang menambah lengkap fitur widget Al-Qur'an digital online ini.

Caranya:
Sobat hanya perlu mengcopy kan seluruh script dibawah ini:

<iframe frameborder="0" src="http://m.alquran-indonesia.com/mquran/index.php/quran" style="border: 0px; height: 600px; width: 570px;"></iframe>
<span style="font-size: x-small;"> Mau Script Al-Quran seperti ini? <a href="http://dhyck4-tutorial.blogspot.com/2012/08/script-widget-al-quran-untuk-blogwebsite.html">Klik Disini!</a></span>

Keterangan: Script height dan width dapat sobat sesuaikan besaran dan lebarannya.

Kemudian paste-kan script ini bisa dipostingan blog atau menambah elemen html/javascript blog sobat.

DEMO

Continue reading →

Membuat Permalink di Bawah Artikel Agar Blog Lebih Seo

Hai, ada sobat blogger. yang nanya bagaimana Cara Buat Kotak Permalink di Bawah Artikel seperti yang ada di blog ini? kalau belum jelas apa itu permalink, lihat gambar berikut sob:

Nah udah tau kan? yuk saya ajarin Cara Buat Kotak Permalink di Bawah Artikel, check this on:
1. Masuk ke Blogger > Edit HTML > centang Expand Template Widget
2. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah, lalu paste kode dibawah ini tepat diatas kode ]]></b:skin> tadi

.permalink {border: 1px dotted #00bfff; padding: 5px; background: #000;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

3. Cari kode  <data:post.body/> (bila kamu menggunakan read more di blog kamu akan muncul kode seperti itu lebih dari satu, gunakan kode yang kedua)
4. Letakkan / paste kode dibawah ini tepat di bawah kode <data:post.body/> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Anda Sekarang Sedang Baca Artikel Tentang <strong><u><data:blog.pageName/></u></strong> Anda Bisa Menemukan Artikel <data:blog.pageName/>Saya Ini, dengan url <strong><data:post.url/></strong>, Kamu Juga Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel <strong><data:blog.pageName/></strong> ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> Sumbernya. Thank's <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/></small></center></div></b:if>

keterangan : ganti kata-kata yang berwarna hijau dengan kata-kata kamu sendiri jika mau

5. Klik Simpan / Save

Sekarang lihat dibawah artikel kamu sob, pasti sudah ada kotak permalinknya
sekian Tutorial Membuat Permalink di Bawah Artikel Agar Blog Lebih Seo dari Andi-Techno, semoga bermanfaat.

Continue reading →