Semilyar Trik

Sabtu, 28 April 2012

Cara Membuat Tombol Share Fb, Buzz, Digg, Twitter Di Blogspot

Diposting oleh Admin di Sabtu, 28 April 2012 ~ 02.17

Bagaimana cara membuat tombol share seperti ini :

Membuat Tombol Share

Agan tertarik untuk mencobanya? baiklah kali ini saya akan bagikan salah satu rahasia para Master Blogger hehe, berhubung pengalaman ini didapat dari yang punya ilmu, yaitu para Master, maka hasilnya akan dibagikan lagi semoga berguna dan dapat dimengerti.

Seperti yang saya dengar bahwa, tombol share ini merupakan elemen yang sangat penting, sebab dapat mendatangkan pengunjung yang banyak dari luar. ga percaya? coba tengok aja blog terselubung.

Share atau berbagi saat ini merupakan hal yang penting karena itulah anda wajib memasang tombol share di blog atau web saudara :

Langkah 1

1. Langsung saja silakan copy kodenya terlebih dahulu:

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;font-style:Italic;'>
Share this history 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='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
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>
</b:if>

catatan: pada kode diatas, ada tulisan user_name twitter, ganti dengan milik Anda

Langkah 2

Cari Kode <div class='post-body entry-content'>

Tips mencari kode dengan cepat: tekan ctrl+f dan masukan kode di atas, atau jika tidak ketemu musukan saja tulisan post-body kemudian cari kode yang mirip dengan yang saya sebutkan tadi di atas!. Jika sudah ketemu pastekan code yang telah Anda copy tadi tepat di atasnya <div class='post-body entry-content'> Simpan Template dan Lihat hasilnya !

Oke agan-agan cukupkan sekian dulu ya.. mudah-mudahan dengan update kali ini agan dapat menikmatinya dengan puas, dan semoga bermanfaat!

Selamat memebuat tombol share dari Cara Membuat Tombol Share Fb, Buzz, Digg, Twitter Di Blogspot

Selasa, 24 April 2012

Cara Memasang Menu Navigasi Breadcrumbs Pada Blog

Diposting oleh Admin di Selasa, 24 April 2012 ~ 00.46

Pada Tutorial Para Master Blogger Blogspot sudah banyak dibahas tutorial ini dengan judul Cara Memasang Menu Navigasi Breadcrumbs Pada Blog Tutorial tersebut ternyata amat berguna dan setelah dicoba memasangnya, sangat membantu menemukan isi blog halaman perhalaman yang dicari. Untuk itu, pengalaman ini Semilyar Trik bagi-bagi ilmu pada yang masih belum berhasil menggunakan trik sajian para Master. Terutama buat agan-agan Blogger yang belum mengeti apa yang dimaksud dengan Menu Navigasi Breadcrumbs Pada Blog dan manfaatnya Untuk SEO silahkan baca selanjutnya dan simak dengan seksama.

Berikut langkah-langkah yang harus agan-agan lakukan :

Pastikan agan-agan sudah masuk ke akun blogger milik agan-agan

Pilih Template

Klik Pada Tombol Edit HTML

Klik pada Tombol Proces atau Lanjutkan

Centang kotak kecil bertulisan Expand Widget Templates

Sebelumnya untuk mengantisipasi kegagalan, lakukan Download Template Lengkap agar tiada kesalahan dalam edit HTML

Cari kode berikut ini ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian Kode)
Setelah Ketemu Copy kode dibawah dan Paste Diatas kode ]]></b:skin>

/*---Navi Breadcrumbs---*/
#navi{padding:0px 5px;
margin:0px 0px 8px 0px;
color:#ffffff;
-moz-border-radius:5px;
font:11px trebuchet ms;
}

Sekarang Cari kode <b:if cond='data:post.title'>

Sudah ketemu <b:if cond='data:post.title'> ini. Copy kode berikut dan letakan tepat dibawahnya, apabila Kode ada dua gunakan kode yang pertama

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

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

<div class='navi'>Location : <a expr:href='data:blog.homepageUrl'>Home</a> »

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

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

<b:if cond='data:label.isLast != "true"'> , </b:if>

</b:loop>

</b:if> » <data:post.title/>

</div>

</b:if>

Sekarang Klik Simpan

Selesai dan lihat hasilnya.

Demikian Tutorial Tentang Cara Memasang Menu Navigasi Breadcrumbs Pada Blog yang bisa Semilyar Trik Blogspot sampaikan pada kesempatan ini semoga bisa membantu agan-agan Blogger beserta sahabat agan-agan blogger yang lainnya.

Senin, 23 April 2012

Cara Membuat Read More

Diposting oleh Admin di Senin, 23 April 2012 ~ 23.06

Otomatis Hack Baca lebih lanjut [Hack Otomatis Read more] Untuk Blogger Dengan Thumbnail yaitu hack posting diperluas untuk blogger dengan thumbnail dari gambar yang digunakan dalam posting blogger dan semua pekerjaan ini dilakukan oleh script secara otomatis, Anda tidak perlu mencari gambar, script akan melakukan semua pekerjaan secara otomatis. Yang pasti Anda harus menulis posting dan mempublikasikannya dengan satu gambar dalam posting terkait.

Sekarang cara mengisikan Hack Otomatis Reademore Untuk Blogger amat mudah sekali tinggal copy paste saja. Mari kita mulai dengan instalasi: - . Sekarang Login ke Blogger Pergi ke Layout>> Edit HTML di dashboard Blogger Anda dan periksa "memperluas template widget" kotak Cari penutupan tag </head> pada template blog Anda, dan paste bagian kode berikut segera sebelumnya:

<script type='text/javascript'> var thumbnail_mode = "no-float";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://contents-ente.googlecode.com/files/suar.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Catatan: Dalam kode di atas kita dapat mengubah angka numerik sesuai dengan kebutuhan kita, summary_noimg = 430; adalah memotong ketinggian posting tanpa gambar summary_img = 340; adalah memotong ketinggian posting dengan gambar img_thumb_height = 100; adalah thumbnail gambar tinggi img_thumb_width = 120; adalah lebar gambar thumbnail.

Sekarang cari kode <data:post.body/> dalam template Anda dan menggantinya dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Pratinjau Template Anda setelah memasang Hack Otomatis Reademore ini, setelah yakin akan hasilnya kemudian klik Simpan.

Catatan: Untuk tampil thumbnail dipostingan, jelas harus memiliki gambar dalam setiap posting untuk itu, silahkan meng-upload file gambarnya untuk masing-masing posting. dan bila ada minat mengoleksi scrip ini silahkan upload fail.js ke server Anda dan jangan lupa untuk mengubah link dengan punya Anda dalam kode untuk membuat hack ini bekerja. Saya yakin semua orang akan menyukai hack ini pasti.

Cara Memasang Related Post Dengan Thumbnail

Diposting oleh Admin di ~ 11.35

Memberikan menu navigasi yang sederhana dan mudah diakses oleh pengunjung adalah hal yang sangat baik untuk blog kita. Hal ini karena akan membuat pengunjung berlama-lama pada blog kita, dan menjelajahi satu persatu halaman yang tersedia di blog kita. Ini akan berimbas terhadap page view dan SEO blog kita.

Karena page view blog kita meningkat maka akan mengundang para pemasang iklan untuk memasang iklan-nya di blog kita. Dan efek buat SEO-nya adalah Google akan menyukai blog kita karena google suka blog yang memberikan fasilitas menu navigasi yang mudah di telusuri.

Pada beberapa hari yang lalu saya pernah posting artikel Cara Membuat Related Posts Di Sidebar dan Cara Membuat Related Posts Di Bawah Posting dan kali ini saya akan mengulas kembali artikel tentang related posts, tetapi kali ini berbeda, kita akan menambahkan gambar pada related posts-nya, jadi related post kali ini akan terlihat lebih menarik.

Bagaimana apakah anda juga ingin memasang-nya juga di blog anda? Ikuti langkah-langkah berikut ini.

1. Log in ke blogger.

2. Klik rancangan » edit HTML » centang kotak Expand Template Widget. Bagi yang menggunakan tampilan blogger yang baru, klik template » edit HTML » centang kotak Expand Template Widget.

3. Cari kode </head> dan letakkan kode dibawah ini tepat diatas-nya.

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts-1 {
float:center;
text-transform:none;
height:100%;
width:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts-1 h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts-1 a{
color:black;
}
#related-posts-1 a:hover{
color:black;
}
#related-posts-1 a:hover {
background-color:#d4eaf2;
}
</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVhastTYCw8C3HNEVjVia9OpOTI4DW5zfJEFqbTLM55pmWFI8FvPjDLmxF9Gr9lAYzTR5viidHns-reoY7cKnH8v5cI1Meb3zLaID5NKEYGm1UrzayuNNDR3ewMaCCntTKOAzoJP5P-W-Z/s1600/no_image.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Bacaan Terkait";
</script>
<script src='http://contents-ente.googlecode.com/files/conten-ente.js' type='text/javascript'/></b:if>

Keterangan:
Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, anda bisa merubahnya sesuai keinginan anda.
Kode yang berwarna biru adalah judul dari widget related posts-nya, anda bisa merubah-nya sesuai keinginan anda.

4. Cari kode <div class='post-footer-line post-footer-line-1'> (biasanya dalam satu template terdapat dua kode <div class='post-footer-line post-footer-line-1'> , jika ada dua pilihlah yang kedua) Dan letakkan kode dibawah ini tepat dibawah kode <div class='post-footer-line post-footer-line-1'>.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://semilyartrik.blogspot.com/2012/04/cara-memasang-related-post-dengan.html'><img style="border: 0" alt="Cara Memasang Related Post Dengan Thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLFibsBxR06kmZWjJzgSRVG9KOGQMpNIMO_Ks6MrXK_8lux-IeHywVGYYMl9mRa_Sd5fxBtv2svbfl6lUVfA7FgrHbREBErG07IbDkn6kYaXhJ1CzYJ8mfIDEoy14V5ihACCZC_1YBcX-/s1600/tumbnail.png" /></a>
</b:if>
</b:if>

5. klik save template.

Selesai sudah langkah-langkah Cara Memasang Related Post Dengan Thumbnail bagaimana, mudah bukan? Semoga artikel ini bisa bermanfaat bagi anda.

Pages