Cara Membuat Iklan Disamping Judul Blog

Assalammualaikum WR WB

Elemen Gadget Iklan di samping judul blog

Iklan. Siapa sih yang gak tau, iklan? Jangan-jangan, agan lagi. Di semua blog (kecuali blog yang page rank nya kecil seperti blog ini) pasti ada. Kenpaa di blog itu harus ada iklan. Seperti yang ane jelasin dulu di postingan Cara Membuat Kotak Iklan, sama saja dengan postingan ini, namun beda letak nya. Ok, langsung kita mulai!

1. Klik disini untuk membuka blogger.com ---> lalu isi dengan akun gmail agan

2. Klik judul blog agan ---> lalu klik Template

3. Klik Edit HTML dan klik sembarang pada korak script ---> tekan CTRL + F dan kiranya seperti di atas tampilan kotak search nya 

4. Lalu cari kode berikut ini :

#header-wrapper

5. Setelah script di atas di temukan, ganti kode diatas dengan kode berikut ini :

#header{background:transparant;float:left;width:179px;padding-top:15px;margin-left:7px;text-align:left;color:#f2f2f2}
#header2{float:right;margin-right:7px;width:728px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJZeLq16TGW62keLUwCmWRl9noVk78OKc7ysl2M9G5F18XvRAb8nDjH7rWcAC418utQa1t-glIOZaXmR0B1SaJOECQzXWeN8TNU0v_3VtUuxDvwCAg8g1S1LbhjG5_MIUKuuyOV-2XHc/s1600/Advertisement+728x90.jpg) no-repeat;height:90px;margin-bottom:4px;margin-top:4px;}
#header h1{line-height:1em;text-transform:uppercase;letter-spacing:.01em;font:bold 30px Georgia, Serif;margin:0 auto;padding:0 auto}
#header a{color:#666;text-decoration:none}
#header a:hover{color:#666}
#header .description{max-width:100%;text-transform:none;letter-spacing:.01em;line-height:1.2em;font:normal 13px Arial;color:#999;margin:0 auto;padding:0 1px 5px}
#header img{margin:auto}

6. Belum selesai di edit HTML, cari kode di bawah inj

 <div id='header-wrapper'>

7. Letak kan kode dibawah ini tepat diatas kode <div id='header-wrapper'> tadi

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
 <b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

8. Klik simpan (proses penyimpanan) dan klik tata letak dan jika ada pesan 'Anda memiliki....' tekan OK saja karena agan 'kan dah nyimpan tadi

9. Klik Tata Letak --> klik tambahkan gadget disamping judul blog agan.

10. Klik HTML/JavaScript Dan blok kode ini dan klik kanan dan Copy

<a href="URL tujuan saat pengunjung mengklik" title="Judul iklan"><img border="0" src="URL letak gambar" alt="alt/text gambar" width="Lebar Gambar" height="Tinggi Gambar" /></a>

Catatan : ubah sesuai teks nya atau kalau agan punya ppc/ptc paste script nya di konten (maks ukuran 728 x 90)

11. Paste di konten dan klik simpan

Perlu di ketahui bahwa script berikit ini hanya bisa untuk template yg di download di internet saja sedangkan template bawaan blogger tidak bis

Enjoy it!

Diposting oleh Rayhan Sabtu, November 30, 2013 0 komentar

Cara Membuat Burung Twitter Terbang di Blog

Assalammualaikum WR WB

 Burung Twitter 

 Hai, gan! Udah lama nih ane gak posting lagi. Ok langsung kita mulai!

1. Klik disini untuk buka blogger.com, lalu, masukkan akun google agan

2. Klik judul blog agan --> Klik Tata Letak

3. Klik Tambahkan Gadget ( letak bebas gak bakalan ngaruh ) --> lalu klik HTML/Java Script

4. Blok dan Copy Script berikut ini :

<!-- floating twitter bird http://blogserbagunaku.blogspot.com Start -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script><script type="text/javascript">var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtvaybQTxlXDyAlWIyKyQYBZb0FP2fiIqbo1WW4XxokugpRoIqaOc6JY5nXxzzOnr4YnCLY9Ce_L1eRmu_vf7-JjjNo5C9KLVqPmI_clj2C9uOHi_2VV4iesb_7cleDbggYT34i-cwEYU/s1600/burung+twitter+terbang.png";var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");var twitterAccount = "http://twitter.com/Blog_Serbaguna";var tweetThisText = "Twitter - UserID http://blogserbagunaku.blogspot.com/";tripleflapInit();</script>

<!-- floating twitter bird http://blogserbagunaku.blogspot.com End -->

Perhatikan kode yang berwarna : 

Biru : Ganti dengan Id Twitter misalnya @Blog_Serbaguna, hapus Blog_Serbaguna dan @ nya dan Ketik id agan (tanpa @) ingat tanpa @

Merah : dengan domain blog agan

5. Paste di konten --> Lalu klik simpan 

6. Selesai

Semoga bermanfaat

Diposting oleh Rayhan Sabtu, November 30, 2013 0 komentar

Cara Membuat Kotak Iklan di Blog

Assalamualaikum WR WB

Contoh Banner di Blog

Agan-agan. kali ini kita akan membahas tentang Cara Membuat Kotak Iklan di Blog. 

- Apa sih kegunaan iklan di blog?

Pasti, agan-agan pernah nonton tv, dan aja jeda iklan nya, 'kan? Iklan di TV itu menguntungkan si pembuat stasiun TV. Coba kalo gak ada iklan, pasti bangkrut, 'kan. Sama seperti blog, kalo gak ada iklannya, nyape-nyapein badan aja! 

Kalo ada agan-agan yang ingin buat iklan, Let's go, kita buat!

1. Klik disini  untuk membuka blogger (kalau sudah masuk, langsung ke langkah 2), masukkan E-mail dan Password nya

2. Klik Judul Blog agan lalu klik Tata Letak

3. Klik Tambahkan Gadget (terserah mau di mana)

4. Klik HTML/JavaScript lalu blok dan copy kode berikut

<a href="url iklan yang dituju" title="judul iklan"><img border="0" src="Url gambar/banner" alt="alt/text gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img border="0" src="Url gambar/banner" alt="alt/text gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img border="0" src="Url gambar/banner" alt="alt/text gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img border="0" src="Url gambar/banner" alt="alt/text gambar" width="125" height="125" /></a>
</div>

 Catatan : Perhatikan kode yang berwarna :

Merah di ganti dengan URL Blog/Wordpress/Website si pengiklan
Oranye di ganti URL gambar yang disediakan si pengiklan
Biru di ganti dengan Judul iklan
Hijau di ganti Deskripsi iklan (gak usah panjang-panjang)


5. Paste di Konten (judul tidak usah di isi) dan selesai


Semoga bermanfaat!

Diposting oleh Rayhan Sabtu, November 16, 2013 0 komentar

Cara Membuat Tulisan Mengetik Sendiri di Blog

Assalamualaikum WR WB

Barusan tadi ane posting, ehh posting lagi, hihihihihihi. Maklum, pengunjung blog berkurang tadi (turun drastis!). Oh iya, script ini udah ane simpan di arsip script widget blog. Ok, langsung kita mulai!

1. Klik disini untuk masuk ke blogger --> Masukkan email dan password nya

2. Klik judul blog agan.

3. Klik Tata Letak, pilih Tambahkan Gadget (lebih baik, di letakkan di bawah menu bar, karena bagusnya sebagai salam pembuka)

4. Klik HTML/JavaScript lalu Copy-Paste script berikut ini :

<script type="text/javascript">
//<![CDATA[
var newsText = new Array();
newsText[0] = ".";
newsText[1] = "Tulisan yang mau di ketik 1";
newsText[2] = "Tulisan yang mau di ketik 2";
newsText[3] = "Tulisan yang mau di ketik 3";
newsText[4] = "Tulisan yang mau di ketik 4";
newsText[5] = "Tulisan yang mau di ketik 5";
newsText[6] = "Tulisan yang mau di ketik 6";
var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 250; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE -------------
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
//]]>
</script>

Catatan: ganti tuliaan berwarna merah dengan tulisan narasi agan sendiri

Semoga bermanfaat

Diposting oleh Rayhan Sabtu, November 16, 2013 0 komentar

Cara Buat Widget Follow dan Dashboard

Assalammualaikum WR WB

Contoh gambar Follow dan Dashboard

Masih bersama ane lagi agan-agan! Kali ini, kita akan membahas tentang cara buat widget follow dan dashboard di blog kita. Contoh nya bisa dilihat di gambarpalin atas itu. Ok, langsung kita mulai!

1. Masuk ke blog agan --> Klik judul blog sobat

2. Klik Tata Letak --. Tambahkan gadget (dimana aja bisa)

3. Klik HTML/JavaScript

4. Copy kode berikut :

<div style="display:scroll; position:fixed; top:5px; right:95px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=Id blog agan" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://dapur-tutorial.blogspot.com" target="_blank" rel="dofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>

Catatan : Tulisan berwarna hijau ganti dengan id blog agan 

 

Contoh id blog serbaguna :

1703703XXXXXXXXXXX

5. Paste di Konten

6. Klik simpan --> Selesai

Semoga bermanfaat

Diposting oleh Rayhan Jumat, November 15, 2013 0 komentar

Cara Membuat Like Box dan Follow Twitter melayang

Assalamualaikum WR WB

Contoh Like Box dan Follow Twitter melayang

Haloo, agan-agan. Kali ini kita akan membahas tentang Cara Membuat Like Box dan Follow Twitter Melayang. Ok, deh langsung kita mulai!

1. Masuk ke blogger --> Klik judul blig agan

2. Klik Tata Letak --> Klik Tambahkan gadget ( Letak terserah agan mau dimana)

3. Pilih HTML/JavaScript dan Copy-Paste kode berikut :

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Like dan Follow sobat!</a></center>
<center>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/pages/Blog-Serbaguna/227598834074565?ref=hl" width="250" show_faces="true" border_color="" stream="false" header="true">
</fb:like-box></center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/Blog_Serbaguna">Ikuti @Blog_Serbaguna</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>
<a class='close' href='#'>&times;</a>
<br />
<div style="text-align:center">
<span style="float:right; color::#000000;">Dapatkan<a target="_blank" href="http://blogserbagunaku.blogspot.com/2013/11/cara-membuat-like-box-dan-follow.html"> widget ini </a></span>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

Catatan 1 : Kode berwarna merah, ganti dengan kata-kata lain, kalau gak mau gak papa kok.
Catatan 2 : Kode berwarna Oranye ganti dengan URL FansPage agan
Catatan 3 : Kode berwarna Hijau ganti dengan Twitter teman (khusus kode berwarna hijau di https://twit.... jangan di beri @ dan yang kedua Ikuti Blo... harus diberi @

Semiga bermanfaat

Diposting oleh Rayhan Senin, November 11, 2013 1 komentar

Cara Membuat Widget Recent Post Bergerak diblog

Assalamualaikum WR WB

Recent post adalah, post yang terakhir kita buat. Contoh nya, bisa dilihat di samping posting blog ini. Ok, langaung kita mulai!

1. Masuk ke blogger sobat --> lalu klik judul blog sobat

2. Klik Tata Letak --> Lalu klik Tambahkan Gadget

3. Pilih HTML/JavaScript

4. Blok dan Copy script berikut : 

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
   
</script>
<ul id="rp_plus_img"><script>
    var numposts = 100;
    var numchars = 0;
   
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://blogserbagunaku.blogspot.com/2013/11/cara-membuat-widget-recent-post.html" target="_blank">Klik disini untuk dapatkan widget ini!</a></small>

4. Paste di Konten.

5. Klik simpan dan selesai!

Diposting oleh Rayhan Sabtu, November 09, 2013 0 komentar

Cara Membuat Widget Buku Tamu (Melayang)

Assalammualaikum WR WB

                                               Salah satu contoh buku tamu

Kembali lagi sob, di Blog Serbaguna™. Kali ini, kita akan membahas tentang cara membuat buku tamu. Kegunaan buku tamu adalah sama seperti komentar, tapi buku tamu bisa diisi dengan email selain gmail, dan juga bisa memasukkan URL Blog kita. Ok, langsung kita mulai

1. Masuk ke Cbox, Klik disini ---> lalu klik sign up

2. Dan ikuti caranya dan klik Publish! Lalu buka tab baru buka blogger

3. Masuk ke Blog Sobat, lalu klik judul blog sobat

4. Klik Tata Letak, lalu klik Tambahkan Gadget

5. Klik HTML/JavaScript

6. Blok semua kode ini lalu klik kanan lalu klik copy

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXkwzURBK1b7L7u7xZZzb4jB8C5H8FmYjlMXEr576jI2Xeblx1iTBASe3RiFmVQmick4p6iOUolwAWf2sPH7Awdtd0InGKbFwUzchwARhxhMj0K-whArHZ3Eb0t419YbtAgllzGKJf9TQ/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Kode Cbox Sobat

<div style="text-align:right">
<a href="http://blogserbagunaku.blogspot.com/2013/11/cara-membuat-widget-buku-tamu-melayang.html">[get this widget]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Catatan 1 : Paste semua kode ini di konten lalu Copy semua kode buku tamu dari cbox, hapus Kode Cbox sobat, lalu paste kan

7. Klik simpan

8. Selesai!

Semoga bermanfaat

Diposting oleh Rayhan Rabu, November 06, 2013 0 komentar

Cara Membuat Back To Top di Blog

Assalamualaikum WR WB

Salah satu contoh gambar back to top

Kembali lagi sob! Di Blog Serbaguna™. Pada artikel ini kita akan membahas tentang back to top. Kegunaan dari Back to top adalah sama seperti kursor mouse. Namun ini versi layarnya. Jika pengunjung meng-klik itu, maka akn langsung ke atas tanpa perlu menggerakan roda mouse. Jadi, ini sangat membantu. Ok, langsung kita mulai!

1. Masuk blog sobat

2. Klik Tata Letak lalu tambahkan gadget

3. Klik HTML/JavaScript

4. Copy-paste script berikut ini

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
   
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0,
 cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

Catatan : ganti script warna merah dengan URL gambar back to top atau bisa klik contoh gambar back to top itu dan Copy-Paste URL nya

5. Klik simpan dan selesai

Demikian, semoga bermanfaat!

Diposting oleh Rayhan Rabu, November 06, 2013 0 komentar

Cara Membuat Widget Share Button di blog (Melayang)

Assalamualaikum WR WB

                                            Contoh Floating Share Button 

Pasti, sobat-sobat yang memeluk agama islam senang sekarang, karena sekarang itu Tahun Baru Hijriah 1435 H. Selamat Tahun Baru hijriah ya, sob.

Widget Share Button. Widget ini memiliki kemampuan menyebarkan posting kita di media sosial seperti Facebook, Twitter, dll. Misalnya, saat pengunjung meng-klik Share via Facebook, akan langsung di sebarkan. Dan akhirnya, posting kita akan di sebarkan ke orang lain.

Kelebihan dari ini adalah, poating kita akan disebarluaskan

Kekurangan dari ini adalah, akan menggangu pengunjung membaca posting kita, karena ini sifat nya melayang.

Ok deh, sobat baca baik-baik ya!

1. Masuk ke blogger sobat dulu

2. Klik Tata Letak, lalu Tambah Gadget

3. Pilih HTML/JavaScript 

4. Copas Script berikut ini :

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://blogserbagunaku.blogspot.com/2013/11/cara-membuat-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

5. Selesai

Demikian sob, semoga bermanfaat!

Diposting oleh Rayhan Senin, November 04, 2013 0 komentar

Cara Membuat Widget Google Translate (bendera)

Assalamualaikum WR WB

Seperti yang ane jelaskan pada artikel cara membuat widget google translate di blog dulu, kegunannya dengan bemdera ini sama saja dengan yang tidak, Ok langsung kita mulai

1. Masuk ke blog sobat dan klik Tata Letak

2. Klik "Tambahkan Gadget"

3. Lalu klik "HTML/JavaScript"

4. Copy-Paste kode ini

 <style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXK9RhWueLdFZC8JvqvBrk1yN2lFlI3zQN6mJnyP9sM-3HwV9rMNTOjyTTPe5NSGerD6HhmCSxSAcPY6OB7v5A5ybiYkBFBr1ZsGNs-xayKyynW6K6s_kZr7G3esVAUI9RpbdaHw4HmqXC/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAv4gSr2ssLVtpHxqVBuMkqBrOX2ddGP7we4ZC4iB0NLjjpOVbU0f_ASHF1s0r7y6AZ0X3meOK00GjxRW5Ge4D3pmlkqMHLgUUtq9ETVBNLS_B9kcqODdDk5OKgO_K_-FsiD6UB1TEDsrF/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxX8vjPIkThMLq5hmdRz1XJSwVprKAIFAc27YykY5saz3F-w-rvZOaQXXX9DE961Uk4EDUyBpwuWIOqfUFHbKRVaabCuCKEZjMCxHOI09hib1h9hH73ZYG8alL4xZmz9lRJBRSbfbw_WL/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHm5UuNon3HG8cYgNXVloQj8QJis4hAE8GvUqXQYigXT9qAObg8i5BHmWrvYCdwVv9bfnWfhY5iGF41CkSCTeZQabsACCAlSDAc1UUOtiz8lvYhVH0oT-TDTETWfEz1Xr0Jcz85VpHROv/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3P8_dvq7vq_gvidFeLgggaV-dU5ywJqtHfMODdcUaihO5oJPMJO2TfAJZzo-Uql9XRKoqKzYtiHNAU2VujwAVfiM7yt-bib6yluG9znPZe2JvvLPL-_I-NMXdYn6Xqa_Pk67Ne6I9wdY9/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeODELkGtWCXhjbXO56rMpp-voWSfaORYdoKEEnsPYPJUufMB2p-Nd8FDK-Pdd1V83Ly02IbkF6kQA7sDoy-Kcej7nO2qp1lFtKGzJV38RPyioJyQVe7kMqmfD59_WGXotIr_19jxV8xjX/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <br/><br/> <a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiz6v6NIXGHAGAy4kbhjRUKuxsBYbZH958x1sTvWRsR6TSu_2O_A3SAOc3fKtQpeqwPkz6vc9tdBZeyHIFMMnwL2ECIgmuKCDkX2j6BekxuHxcuGXKNQm7MhQvkK4Am3Be6UpT8-TpgECK/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii1ANVzc71Cc4DIqQ3Q3ZxZcFpQEdzxVRIp4pgZ6cEI9d_jxeNx-_xep3CXHjAVQrEGyzPwONHv6-bJTcvvYO5eRcuGtjAeMN8IRJ_-f8NPEzc2eEj_X12xnCD481l4dnpbvIRTsR4kZeT/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6G70sJZDVP2bpa5692wqYE4lbnsI50WTWFob1k9bjfBL6mDkQRalJqpV9Ai_Ja9ba0rNEnLrDnPdkBWSeIIihTUw1mgEohIs6C1uSFBCU-FMSbrOBbvrG8iln8qYyAkq9vGwFvQuLBLq/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrM-FrpfoAGwOhKl98YMSWgYKlLJGhL0GCp8WIvPsEliodLTx2cTVxGA7lXkxyLYYRzS9MB6xf5LMGl6obHUGOoS6MUYyJcTeTjQnoUfArd8kB1RdzJAAQ2XN5FeTNRyuEXkWczFGpscQM/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVFzWrYvbgLLRnL3RiF_sFZPRebWszVyhsMxfS9M9MVZVWQSPooifex9WHwHgMoZTAdt219VhwpAgq9VogoLeLaptaVHN16XD4DNvbOxxWTdLrI4uEarK8CHYdpkC1j_0yydoZdmSaJpv/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkOgX6xEVGVubVVel16v25J2SQYL7pS4qKLgY3LkmOIm6SV-sTzM2cY_A06utPvF_Dxn0S4v_BUL3Z1GOsFxhM9-3HJNbmtm39Nn-bJYkoY6pbJptpcNhrjsXz6gHNooU793IzMq3PreY/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"> <a href="http://blogserbagunaku.blogspot.com" title="translate widget"/>Translate Widget by Google</a> Get This Widget</div></ div> 

Ok semoga sukses 

Diposting oleh Rayhan Minggu, November 03, 2013 0 komentar