Electronics: Tutorial Blogspot

Showing posts with label Tutorial Blogspot. Show all posts

Friday, January 27, 2012

Cara menghilangkan elemen blog di halaman tertentu

Blognya Reggy - hallo sobat, kita ketemu lagi niih :D. Kali ini saya akan sharing tutorial blogger lagi niih. Yaitu Cara menghilangkan elemen blog di halaman tertentu. Elemen blog seperti sidebar / lainnya dapat dihilangkan di halaman tertentu yang sobat inginkan, seperti pages / postingan / lainnya. Kalau ingin lihat halaman Blognya Reggy yang elemen blognya hilang di halaman tertentu silahkan lihat Disini. Caranya mudah kok, sobat hanya harus TELITI, jadi jika salah sedikit akan gagal sobat. Yasudah ikuti langkah - langkah di bawah ini

Nahh, sobat tinggal pilih kode - kode di bawah ini, sesuai dengan keinginan sobat. Lalu copy dan pastekan di bawah ]]></b:skin>

Menyembunyikan di seluruh halaman postingan

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#sidebar-top, #footer-bottom {display:none;}
</b:if>
</style>

Menyembunyikan di seluruh halaman pages / statis

<style type='text/css'>
<b:if cond='data:blog.pageType == "static_page"'>
#sidebar-top, #footer-bottom{display:none;}
</b:if>
</style>

Menyembunyikan di halaman postingan tertentu

<style type='text/css'>
<b:if cond='data:blog.url == "http://blognya-reggy.blogspot.com/2012/01/cara-mengubah-tampilan-windows-xp.html"'>
#sidebar-top, #footer-bottom {display:none;}
</b:if>
</style>

Menyembunyikan di halaman statis / pages tertentu

<style type='text/css'>
<b:if cond='data:blog.url == "http://blognya-reggy.blogspot.com/p/guest-book.html"'>
#sidebar-top, #footer-bottom {display:none;}
</b:if>
</style>

Keterangan:

Tulisan yang berwarna biru tinggal sobat ganti dengan URL pages / postingan, yang ingin sobat hilangkan elemen bloggernya
Tulisan yang berwarna merah adalah judul elemen yang ingin di hilangkan. lihat di atas ]]></b:skin> dan cari judul elemen yang ingin di hilangkan pada halaman tertentu. Bisa header, menubar, footer dll

Semoga artikel ini bermanfaat bagi kita semua. Selamat Mencoba!!!

Saturday, January 14, 2012

Cara memasang scroll pada kotak komentar

Blognya Reggy - apa kabar sobat? kita ketemu lagi di Blognya Reggy. Pada kesempatan ini saya akan sharing tips blogging yaitu cara memberi scroll pada kotak komentar. Jumlah komentar yang banyak pada sebuah halaman blog memang membuat halaman blog itu panjang ke bawah. Selain itu, pengunjung yang ingin berkomentar harus melewati puluhan komentar. Alangkah baiknya kita memasang scroll pada kotak komentar itu seperti milik saya. mau tau screenshotnya? lihat di bawah

Cara memasangnya cukup mudah kok sobat. Mau tau caranya? ikuti langkah - langkah di bawah ini:

1. Pastikan sobat sudah login pada blog sobat
2. Template
3. Edit HTML
4. Expand Template Widget
5. Cari kode #comments-block{
6. Kalau di template saya seperti ini

#comments-block{border:0px dotted #ccc;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

7. Ganti tulisan yang mirip dengan kode berwarna merah dengan kode di bawah ini

max-height:300px;border:1px solid #eee;overflow:auto;

8. Sehingga akan menjadi seperti ini

#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

9. Simpan Template

Ket:
Ukuran max-height bisa sobat ganti dengan kemauan sobat

Selamat Mencoba!!! :D

Thursday, January 12, 2012

Cara membuat 3 kolom di atas footer

Blognya Reggy - hallo sobat, kali ini saya akan share tutorial blogspot niih. Mau tau judulnya? Judulnya "Cara membuat 3 kolom di atas footer". Mungkin pemasangan widget di sidebar sobat sudah penuh. Nah, alangkah baiknya untuk memasang 3 kolom di atas footer ini, yaitu seperti saya. Jadi sobat bisa memasang widget di 3 kolom ini. Cara memasangnya cukup mudah kok sobat, ikuti langkah - langkah di bawah ini ok?

1. Login pada blog sobat
2. Langsung ke halaman Template kemudian Edit HTML
3. Expand Template Widget
4. Cari kode ]]></b:skin> letakkan kode di bawah ini di atas kode tersebut

#footer-bottom {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#left-bottom {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#center-bottom {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#right-bottom{
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

5. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut

<div id='footer-bottom'>
<b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
</b:section>
</div>

6. Simpan dan lihat hasilnya

Keterangan:

Kode yang berwarna merah adalah ukuran masing - masing kolom, bisa sobat ganti dengan kemauan sobat sendiri
Kode yang berwarna biru adalah warna background nya bisa sobat ganti dengan kemauan sobat sendiri. Klik Disini untuk mengecek kode warna

Selamat Mencoba!!! :D

Saturday, January 7, 2012

Cara memasang fitur Reply pada komentar blog

Blognya Reggy - Pada post kali ini saya akan menerbitkan post tentang "Cara memasang fitur Reply pada komentar blog". Mungkin tutorial ini sudah basi menurut sobat yang sudah tau. Memasang fitur reply pada komentar blog adalah salah satu alternatif agar pengunjung blog dapat membalas komentar seseorang. Cara memasangnya cukup mudah kok, ikuti langkah - langkah di bawah ini :

1. Login pada blog sobat
2. Template
3. Edit HTML
4. Cari kode yang mirip dengan kode

<a expr:href='data:blog.url + "#" + data:comment.anchorName' rel='nofollow' title='comment permalink'><data:comment.timestamp/></a></b:if>
<b:include data='comment' name='commentDeleteIcon'/>

5. Copy kode di bawah ini tepat dibawah kode pada no 4 (berwarna merah)

<a expr:href='"https://www.blogger.com/comment.g?blogID=Blog ID Sobat&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Balas Komentar</a>

6. Simpan

Jika sobat ingin mengganti tulisan Balas Komentar dengan gambar, ganti tulisan tersebut dengan kode di bawah ini / bisa di ganti dengan kode gambar sobat sendiri.

Demikian post yang saya update, mudah - mudahan post ini bermanfaat bagi kita semua, Amin. Selamat Mencoba!!!

Tuesday, January 3, 2012

Cara memasang permalink di bawah postingan

Blognya Reggy - Pada post kali ini saya akan sharing tutorial blogspot, yaitu "Cara memasang permalink di bawah postingan". Sedikit penjelasan dari saya, permalink atau yang biasa juga disebut permanen link adalah sebuah kotak yang berisi pesan dan alamat url atau link yang permanen postingan. Pemasangan Permalink di blog sangat penting untuk menambah link internal di artikel postingan kita. Karena permalink yang satu ini dapat membuat template kita seo friendly sehingga mudah dibaca oleh google. Untuk lebih jelas, lihat pada screen shoot:

Klik gambar untuk memperbesar

Untuk memasangnya cukup ikuti langkah - langkah di bawah ini:
1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Expand template widget
5. Cari kode ]]></b:skin>
6. Copy kode di bawah ini dan paste di atas kode pada no 5

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

7. Setelah itu cari kode <div class='post-footer'>
8. Copy kode di bawah ini dan paste di atas kode pada no 7

<b:if cond='data:blog.pageType == "item"'><div class='permalink'> <center><small>Sobat sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan sobat bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div></b:if>

9. Simpan Template dan lihat hasilnya

Selamat Mencoba!!

Thursday, December 29, 2011

Cara membuat show / hide guest book dari atas

Blognya Reggy - Ehm..Ehm.. Cek..Cek..1..2..3.. Hai sobat, apa kabar, Setelah lama kebingungan mau update post tutorial blogspot tentang akhirnya ketemu juga, yaitu Cara membuat show / hide guest book dari atas. Tapi yang kali ini beda loh, bukan yang saya share Disini . Kalau yang itu kan show / hide dari kanan. Kalau ini show / hidenya dari atas. Seperti punya saya. Kalau mau lihat Demonya lihat ke bagian kanan blog saya ada gambar Guest Book dan klik itu. Dan chat box pun keluar. Sobat ingin tau bagaimana cara membuatnya? Ikuti langkah - langkah di bawah ini:

1. Pastikan sobat sudah login pada blog sobat
2. Langsung beralih ke halaman Rancangan
3. Selanjutnya klik Tambah Gadget dan pilih HTML / Javascript
4. Kemudian pasang kode di bawah ini

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}

</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#F5F5F5;">



</div>
</div>

<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>

</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:80px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png" /></a>
</div>

5. Simpan dan lihat hasilnya

Keterangan:

Ganti tulisan yang berwarna merah dengan kode chat box sobat
Jika sobat ingin merubah garis pinggirnya ganti kode yang berwarna biru
Jika sobat ingin merubah tab picturenya ganti kode yang berwarna pink
Kode yang berwarna hijau adalah kode background nya
Sobat tiadk tau kode warna? silahkan lihat Disini

Bagaimana? sudah jelas? bila masih ada pertanyaan silahkan berkomentar oke? Selamat Mencoba!!

Wednesday, December 21, 2011

Cara menonaktifkan highlight pada blog

Blognya Reggy - Sudah agak lama niih tidak update post tentang Tutorial Blogspot, pada post kali ini saya akan menerbitkan post tentang Cara Menonaktifkan highlight pada blog. Sedikit penjelasan dari saya, highlight adalah jika sobat ingin mengcopas kata, maka kata tersebut di block terlebih dahulu. Jadi, highlight adalah memblock kata. Cara menonaktifkan highlight pada blog adalah salah satu cara agar blog kita tidak bisa di copas. Artikel tentang disable klik kanan Sebelumnya, yaitu tentang Cara disable klik kanan. Sobat ingin tau bagaimana cara menonaktifkan highlight pada blog? Berikut langkah - langkahnya

1. Login pada blog sobat
2. Rancangan
3. Tambah Gadget
4. HTML / Javascript
5. Copy paste kode dibawah ini

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
disableSelection(document.body)
disableSelection(document.getElementById("mydiv"))
//Sample usages
//Disable text selection on entire body
// //Disable text selection on element with id="mydiv"

</script>

<body oncontextmenu="return false;">
<body document.onselectstart="return false">

6. Simpan dan lihat hasilnya

Selamat Mencoba!!!

Cara memasang widget floating social bookmark efek mouseover

Di liburan ini saya akan menerbitkan post tentang "Cara memasang widget social bookmark efek mouseover". Di widget ini letaknya di atas dan bila mouse di arahkan ke widget tersebut akan keluar widgetnya itulah yang dimaksud dengan efek mouseover. Kita telah banyak menjumpai widget ini di berbagai situs. Namun designnya yang berbeda - beda. Jika ingin tau lebih jelas lagi silahkan lihat demonya Disini. Sobat ingin tau cara memasang widget ini? Langsung saja kita ke TeeKaaPee:

1. Login pada blog sobat
2. Rancangan
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 90px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKD-hh5eWzEqmnraE0N8DWclA1GKoCYF3aozoXhDN6BHiQgA8yVjttdkTLTzvDQ89hnuZ8Z55b5CIkhKtY6CrAn92BXEz96Q4QjP8AXwTsyePN6QxL42hh3zO5ckSFX9xFc58T4HCdJQ6/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipKORT2mXwwkruPIrdqUq-ZsRcJUuexZqv7YXVLuusGf2TOf-4wmrZVYv2j3sDZ4OZcc4d8dRunF0EfaMw5bqi8upK-dfEEZCGnQhi7He6fHg8WxAhEx7qnlyS_wTJZmJrXpq-_Alw6WXX/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVaSFBBOFZOlTICH2aBCnAnxw_xbx9OF4o6Q78_5Kq6aIqSTmSn3ubndMHi0y83aVsYqYsbm_Vgf7d0cBPUQmu1mQiq11ZmTmPTCVfL5QO6vzccqYDp5Jr-ooNJE3dOnK8PrVlUEYNDOaE/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1sfoN29i73VAQL5iYb7i3_Twr-MfPJWZpSB4ZvR2eOVwuUE5gbCYGPIfguJ1pZT0sTo_CliIINnDvshn2Y0orR7oZORPzxhZDaWdVM2obgofCUlFzbsWej_DCLsFtis3RLViMn2u6jHDe/s400/google_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<br />
<ul id="navigation">
<li class="rss"><a href="http://Blog Kamu.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="http://Ganti Dengan Url Akun Facebook Kamu">Facebook</a></li>
<li class="twitter"><a href="http://Ganti Dengan Url Akun Twitter Kamu">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>

6. Simpan dan lihat hasilnya

Selamat Mencoba!!!

Saturday, December 10, 2011

Cara memasang efek power saver pada blog

Pada post kali ini kita akan membahas tentang "Cara memasang efek power saver pada blog". Sedikit penjelasan dari saya, Energy saving mode merupakan sebuah desain yang dimaksudkan untuk penghematan energy yang diaplikasikan pada blog. Maksudnya bila blog di diamkan selama beberapa detik akan keluar mode power saver. Dan jika mouse di gerakkan ke blog tersebut, efek ini akan hilang lagi. Jika masih belum tau apa itu power saver lihat Demonya DISINI dan tunggu beberapa saat akan muncul power saver. Cara memasangnya tidak sulit ternyata sobat. Ikuti saja langkah - langkah di bawah ini:

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Cari kode </head>
5. Copy kode di bawah ini dan pastekan di atas kode pada no 4

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=20' type='text/javascript'/>

Keterangan: Tulisan yang berwarna merah adalah waktu untuk mengaktifkan mode power saver. Jadi bisa sobat ganti dengan waktu yang sobat inginkan
6. Simpan Template
7. Lihat Hasilnya

Selamat Mencoba!!!

Thursday, December 8, 2011

Cara memasang widget follow twitter

Hallo sobat :D

Kali ini kita akan membahas bagaimana cara memasang widget follow twitter. Oh iya, maaf ya bagi semua pengunjung, jika berkomentar keluar kode captha. Mengapa saya memasang demikian? karena agar blog saya aman dari komentar spam. Ya sudah kita kembali ke pembahasan. Ngomong - ngomong sobat punya twitter gak? Pasti punya kan? Ya, ternyata twitter sudah menyediakan widget tombol follow. Mau tau cara memasangnya? Ikuti langkah - langkah di bawah ini:

1. Pilih dan desain tombol twitter sesuka hati sobat DISINI

2. Jika sudah, copy kodenya

3. Pasang di blog sobat

Contoh Widget Tombol Follow Twitter Blognya Reggy Sekalian follow okeh ;)

Follow @reggy_70

Jika Sobat Ingin Memasangnya Di Bawah Post Ikuti Langkah - Langkah berikut:

1. Rancangan

2. Edit HTML

3. cari kode <data:post.body/> atau <div class='post-footer'>
4. Copy kode <div style='float:right;margin-right:5px;'>Kode Twtter Button</div> dan pastekan di atas kode pada no 3
Ket: ganti tulisan yang berwarna biru dengan kode toblog follow twitter sobat
5. Simpan Template dan lihat hasilnya

Selamat Mencoba!!! :D

Wednesday, December 7, 2011

Cara mengganti tulisan posting baru, home, posting lama dengan gambar

Cara mengganti tulisan posting baru, home, posting lama dengan gambar. Itulah judul posting yang akan kita bahas kali ini. Maksud dari Tulisan Posting Lama, Home, Posting Baru adalah kayak fitur next post / previous post gitu, bisa di ganti dengan gambar. Letaknya Di bawah post sobat. Jika sobat ingin memasangnya ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Rancangan

3. Edit HTML

4. Expand Template Widget

5. Untuk tulisan Postingan baru cari kode <data:newerPageTitle/> dan Ganti kode tersebut dengan kode

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN02Yqsbiew8WEg8PzPw6KBtUoIY5NEtVxXJzPXiC58LXxT5TsjudtAWwXvbxrLoXgor2xVIBze2K4qIQQePTJzwFcV559OwsnD0Eyk0KA-xofETz5mFO1zTZ-gZpxPWquZ1vPpF9uLjk/s400/icon+new.bmp'/>

6. Untuk tulisan Postingan lama cari kode <data:olderPageTitle/> dan ganti kode tersebut dengan kode

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghGaA3OIWmKPdsKew0DCwXTwiX-XhAQrcZvnsnz7NnAXO_ZImmnDNCluDGimN3zTfR330WYN92CKakiwli66zXmIfIS05I4OQST3yitxAhs-vXhchN5M0d4y3aXY4vqKHopHuKOR2t2_8/s400/icon+back.bmp'/>

7. Untuk tulisan Home cari kode <data:homeMsg/> dan ganti kode tersebut dengan kode

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoGWD51_l9SByZw4TDubcXTIj8PhzKv-fIHvlFUV70FF8dHlCcsBV15JyIMGzPWPinJgPqr0Dqy6xqReFJh-biH97APxYCRplTjTUHa0EeJ04Ney4CFCyzj98nkW7B1uHguv7ovqBaXVs/s400/icon+home.jpg' title='Halaman Awal'/>

8. Simpan Template dan lihat hasilnya

Tulisan yang berwarna merah bisa sobat ganti dengan link gambar sobat sendiri. Oh iya, link gambar di atas saya temukan di icalcell.com Bagaimana? tertarik untuk Mengubahnya? Selamat Mencoba!!!

Tuesday, December 6, 2011

Cara membuat artikel blog terhubung ke fanpages facebook

Pada post sebelumnya kita telah membahas Cara membuat fanpages di facebook. Kali ini kita akan membahas tentang trik - trik untuk Fanpagesnya. Yaitu tentang "membuat artikel blog terhubung ke fanpages facebook". Sobat tau maksudnya kan? Yaa, setiap sobat membuat post di blog. Akan langsung di terbitkan pula di Fanpages sobat. Cara ini banyak digunakan orang, karena dapat meningkatkan trafik blog sobat dari fanpages tersebut. Sobat pasti ingin tau kan caranya? Berikut Cara membuat artikel blog terhubung ke fanpages facebook:

1. Pertama, sobat harus memiliki Fanpages. Jika belum memiliknya Lihat Caranya DISINI

2. Kita akan menggunakan aplikasi Rss Grafiti. Mengapa demikian? karena menurut saya Aplikasi Tersebut lebih mudah digunakan

3. Untuk menggunakan aplikasi tersebut, klik DISINI

4. Jika sudah klik Suka (Like).

5. Kemudian, kita beralih ke Aplikasinya dengan Mengklik Kotak Bertuliskan "Ke Aplikasi"

6. Ada permintaan Izinkan, dan klik Izinkan

7. Di halaman setting Feed nya klik pada fanpages sobat, misalkan "Blognya Reggy", lihat pada gambar

8. Setelah di klik, klik On (Di sebelah kanan judul fanpages sobat). Ada permintaan izin dan klik Izinkan. Kemudian Di kotak Add Feed, Klik Add Feed+ dan ketikan alamat Blog sobat (Lihat pada gambar)

9. Kemudian Simpan dan lihat hasilnya :D

Jika masih ada yang belum di mengerti silahkan Comment. Selamat Mencoba!!!

Friday, December 2, 2011

Cara memasang related post di bawah post

Blogging..bloggging.. Hhe :D. Lagi semangat blogging nih sobat. DI hari jum'at ini saya akan menerbitkan post tentang " Cara memasang related post di bawah post". Related post ini dilengkapi dengan fitur Scrolling. Fungsi dari widget ini adalah agar pengunjung dapat melihat artikel lainnya dari blog sobat. Berikut langkah-langkah memasang related post di bawah post:

1. login pada blog sobat

2. Rancangan

3. Edit HTML

4. Cari kode ]]</b:skin>

5. Copy kode di bawah ini dan pastekan di atas kode pada no 4

/* Related post
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

6. Cari kode <p><data:post.body/></p>
7. Copy kode di bawah ini dan pastekan di bawah kode pada no 6

<b:if cond='data:blog.pageType == "item"'>
<H2>Related Post:</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 = "<data:blog.homepageUrl/>";var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement('ul');var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i < maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}var li = document.createElement('li');var a = document.createElement('a');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 < json.feed.link.length; l++) {if (json.feed.link[l].rel == 'alternate') {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k<20; k++) label = label.replace("%20", " ");var txt = document.createTextNode(label);var h = document.createElement('b');h.appendChild(txt);var div1 = document.createElement('div');div1.appendChild(h);div1.appendChild(ul);document.getElementById('albri').appendChild(div1);}}}function search10(query, label) {var script = document.createElement('script');script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');script.setAttribute('type', 'text/javascript');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 = "<data:label.name/>";var test = 0;for (var i = 0; i < labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel < maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
</div>
</b:if>

Tulisan yang berwarna merah bisa sobat ganti dengan judul related postnya
8. Simpan Template

Selesai dan Lihat hasilnya

Thursday, December 1, 2011

Cara membuat floating ads

Di siang hari yang agak mendung - mendung ini kita saya akan menerbitkan post tentang "Cara membuat floating ads". Sedikit penjelasan dari saya. Floating ads adalah iklan yang melayang dan dapat ditutup dengan mengkliknya. Nahh? gimana? sobat sekarang sudah emngerti kan apa floating adas itu. Jika masih belum mengerti silahkan lihat pada gambar diatas. Caranya mudah kok copy kode di bawah ini dan pastekan di penambahan gadget HTML pada rancangan blog sobat:

<style type="text/css">
#gb{
position:fixed;
top:10px;
right:100px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:center;
border:2px solid #F5F5F5;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript" src="http://www.geocities.ws/reggy/ads.js"></script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
Klik iklan di bawah ini lalu Klik CLOSE
</a>
</div>
<center>

Iklan Adsenesenya

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Simpan dan lihat hasilnya

Ket: Tulisan yang berwarna merah adalah kode adsensenya, bisa juga sibat ganti dengan kode lain
Tulisan yang berwarna biru adalah posisi floating ads nya
Sobat bisa merubah warna kotak adsnya. Ganti tulisan yg berwarna hijau

Cara memasang widget recent comment by Blognya Reggy

Pada post kali ini kita akan membahas tentang Tutorial BLogspot lagi, yaitu "Cara memasang widget recent comment by Blognya Reggy". Memasang recent comment adalah salah satu cara agar pengunjung tau pengunjung mana yang berkomentar di halaman A atau di halaman B. Oh iya. Saya ambil kode ini dari jayaputrasbloq.blogsspot.com . Cara memasangnya cukuplah mudah ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Rancangan

3. Tambah Gadget

4. HTML/Javascript

5. Copy kode di bawah ini

<script style="text/javascript" src="http://recent.googlecode.com/files/recent%20comment.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;</script><script src="http://blognya-reggy.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

6. Simpan dan lihat hasilnya

Keterangan:
> showposttitle adalah penampilan judul posting pada widget
> car numcomments adalah jumlah comment yang ingin sobat tampilkan
> sohcommentdate adalah setting penampilan tanggal komentar

Wednesday, November 30, 2011

Cara membuat posting di homepage tampil hanya judul

Pada post kali ini kita akan membahas tentang tutorial blogspot lagi. Yaitu "Cara membuat posting di homepage tampil hanya judul". Selain fitur read more. Kita juga bisa mempercepat loading blog dengan membuat posting di homepage tampil hanya judul. Caranya cukup mudah. Sobat tinggal menyelipkan beberapa kode di template anda. Berikut Cara membuat posting di homepage tampil hanya judul:

1. login pada blog sobat

2. Rancangan

3. Edit HTML

4. Cari kode ]]</b:skin>

5. Copy kode di bawah ini dan pastekan di bawah kode pada no 6

<style type='text/css'>

     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     .post-body{display:none;}
     </b:if>
     </b:if>

     </style>

6. Simpan Template dan lihat hasilnya

Setelah memasang dan dilihat, ternyata mesih menyisakan elemen - elemen seperti tanggal post dan jumlah komentar. untuk menghilangkannya sisipkan kode di bawah ini di bawah kode ]]</b:skin>

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     .post-body, .post-footer, .jump-link, 
     .post-timestamp, .reaction-buttons, 
     .star-ratings, .post-backlinks, 
     .post-icons, .date-header{display:none;}
     </b:if>
     </b:if>

     </style>

Bagaimana? mudah kan? Selamat Mencoba!!!

Cara membuat popular post dengan komentar

Pada kali ini Blognya Reggy akan menerbitkan post tentang "Cara membuat popular post dengan komentar". Ngomong - ngomong sobat tau Popular post kan? Yups.. Popular post adalah widget daftar artikel blog sobat yang paling sering di baca dan di komentari. Cara memasangnya mudah kok. Ikuti langkah - langkah di bawah ini

1. Login pada blog sobat

2. Rancangan

3. Tambah Gadget

4. HTML/Javascript

5. Copy kode di bawah ini

<script language="javascript">
titlebold=false;
numposts=9999;
maxshowresult=5;
explanation="komentar";
home_page="blognya-reggy.blogspot.com";
</script>
<script style="text/javascript" src="http://www.geocities.ws/reggy/popular%20post.js"></script>

Ganti tulisan yang berwarna merah dengan alamat blog atau web sobat. Dan tulisan yang berwarna biru adalah jumlah popular post yang ditampilkan
6. Simpan

Lihat hasilnya...

Sunday, November 27, 2011

Cara memasang daftar isi sitemap blog

Ini adalah gambar Daftar isi script 1

Pada hari minggu kuturut Blognya Reggy buat posting..HeHeHe.. :D. Kok malah nyanyi lagu delman tapi tentang Blognya Reggy HeHehE :p. Pada hari minggu yang cerah ini kita akan membahas tentang "Cara memasang daftar isi sitemap blog". Ngomong - ngomong sobat tau fungsi Daftar isi sitemap gak? Funsinya untuk memudahkan pengunjung blog sobat melihat artikel apa saja yang terdapat di blog sobat. Tetapi widget ini buka buatan saya melainkan buatan http://www.abufarhan.com. Berikut langkah - langkah untuk memasang daftar isi sitemap di blog:

1. Pilih dahulu kode di bawah ini

Script 1:

<linkhref="http://abu-farhan.com/script/acctoc/acc-toc.css"media="screen" rel="stylesheet"type="text/css"></link>
<scriptsrc="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<scriptsrc="http://alamat-blog-sobat.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<scripttype="text/javascript">
var accToc=true;
</script>
<scriptsrc="http://abu-farhan.com/script/acctoc/accordion-pack.js"type="text/javascript"></script>

Script 2:

<scriptsrc="http://jarlok.com/Script/Sitemap.js">

</script> <scriptsrc="http://alamat-blog-sobat.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">

</script>

Ganti tulisan yang berwarna merah dengan alamat blog/web sobat
2. Jika sudah memilih, copy kodenya
3. Buat sebuah Post Baru
4. Di pojok kanan atas kotak post ada 2 plihan yaitu Edit HTML dan Compose pilih Edit HTML
5. Paste kodenya dan Terbitkan Entri
6. Jika sobat ingin memasangnya di menubar lihat DISINI caranya

Langkah Membuat Daftar Isi Sitemap Selesai. Dan Selamat Mencoba!!! :D

Saturday, November 26, 2011

Cara menghilangkan navbar blogger

Pada postingan dahulu kita telah membahas tentang "Cara membuat navbar blogger autohide". Nah, dulu saya lupa ingin menerbitkan post ini. Alias baru ingat sekarang. HeHeHe :D. Tidak perlu dijelaskan lagi apa itu navbar pasti sobat sudah tau kan? Pastinya. Selain membuat navbar autohide apakah navbar blogger bisa dihilangkan? Tentunya Bisa. Tinggal menyelipkan kode ke template sobat. Tapi, saya tidak bertanggung jawab oke! atas kejadian sesuatu di blog sobat suatu hari. Alias resiko di tanggung masing - masing. Yasudah bila sobat ingin menghilangkannya ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Rancangan

3. Edit HTML

4. Cari kode ]]</b:skin>

5. Copy kode di bawah ini dan pastekan di atas kode pada no 4

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

6. Simpan Template

Lihat Hasilnya. Selamat Mencoba Sobat!!!!

Friday, November 25, 2011

Cara memasang meta tag otomatis di setiap halaman blog

Gambar ini diambil dari google

Pasti sobat sudah nebak kalau saya mau mengatakan "Pada kali ini kita akan membahas tentang "Cara memasang meta tag otomatis di setiap halaman blog"". Yups.. betul sekali :D. Kita telah membahas cara setting meta tag pada blog. Namun ternyata setelah saya browsing di google cara itu mash belum bisa membuat agar blog mudah terindeks mesin pencari. Cara memasang meta tag oromatis di setiap halaman blog kali ini dapat dikatakan sempurna agar blog mudah terindeks mesin pencari. Cara memasangnya pun cukup mudah sobat. Ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Rancangan

3. Edit HTML

4. Cari kode <title><data:blog.pageTitle/></title>

5. Ganti kode tersebut dengan kode di bawah ini

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

<title><data:blog.title/></title>
<meta expr:content='data:blog.title + " Tutorial Blogspot | Games | Top rate."' name='description'/>
<meta expr:content='data:blog.title + ", Tutorial Blogspot | Games | Top rate"' name='keywords'/>
<b:else/>

<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", Tips n trick | Lirik lagu | Free template."' name='description'/>
<meta expr:content='data:blog.pageName + ", Tips n trick | Lirik lagu | Free template"' name='keywords'/>
</b:if>

Ket: ganti tulisan yang berwarna merah dengan deskripsi blog sobat di halaman home
dan danti juga tulisan yang berwarna biru dengan deskripsi blog sobat di halaman post
6. Simpan Template

Selesai dehh!!! Sobat tau tidak. Template yang di pakai Blognya Reggy sudah di pasang meta tag seperti ini. Jika sobat ingin memasang meta tag tersebut ikuti langkah - langkah di atas okeh? Selamat Mencoba!!! :D