English French German Spain Italian Dutch
Loading...
Tampilkan postingan dengan label Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Membuat Tombol Back To Top di Blog

Sabtu, 21 Desember 2013

Cara Membuat Tombol Back To Top di Blog
Tombol Back To Top ini akan bermanfaat bagi pengunjung ketika ia ingin kembali ke bagian paling atas pada halaman web setelah membaca artikel pada Blog sobat yang panjang. Ok, jika sobat ingin membuat Tombol Back To Top ini, silakan simak artikel kali ini tentang Cara Membuat Tombol Back To Top di Blog.
Tombol Back To Top ini akan berada di sudut kanan bawah pada halaman web.

Berikut langkah-langkah dalam Membuat Tombol Back To Top di Blog.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.

<!--Back to top script-->
<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={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="http://2.bp.blogspot.com/-5xtKo3sslHs/UPbpgD8LY2I/AAAAAAAACBc/gIQGZ9ZBzDg/s1600/back+to+top13.png" />',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

<!--Back to top script end--></script>

Catatan:
  • Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
  • Kode-kode berwarna hijau bisa sobat ubah:
- Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.
- Scrollto: Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
- Scrollduration: Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
- Fadeduration: Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
- Offsetx: Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
- Scroll Back To Top: title pada tombol
  • Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.
Tombol Back To Top 
Ada beberapa pilihan gambar untuk tampilan tombol Back To Top:

Tombol Back To Top

Tombol Back To Top

Tombol Back To Top

Tombol Back To Top

Tombol Back To Top

Tombol Back To Top

Tombol Back To Top

Tombol Back To Top

6. Setelah selesai, maka klik Simpan.

source : http://regibrader-free.blogspot.com

Mengoptimasi Sitemap Blog di Bing

Cara Mengoptimasi Sitemap Blog di Bing
Salah satu keperluan SEO pada Blog adalah optimasi sitemap. Selain pada Google sitemap perlu dioptimasi, pada Bing juga perlu dilakukan pengoptimalan sitemap. Sitemap jika diartikan pada bahasa Indonesia yaitu Peta Situs. Jadi mungkin menurut saya Sitemap adalah sebuah URL yang perlu dioptimalkan untuk membantu Search Engine dalam mengenali konten-konten pada Situs/Blog. Kali ini saya akan bahas optimasi sitemap di Bing saja, silakan baca terus untuk mengetahui Cara Mengoptimasi Sitemap Blog di Bing.

source by :  http://regibrader-free.blogspot.com
Jadi dengan dikirim dan dioptimalkanya sitemap pada Blog sobat, dapat mempermudah search engine untuk mengindex konten-konten pada Blog sobat. Kini apakah sobat tertarik untuk meningkatkan nilai SEO pada Blog sobat dengan mengoptimalkan sitemap khususnya di Search Engine Bing? Silakan simak langkah-langkahnya berikut ini:

1. Masuk serta lakukan sign in ke Bing Webmaster Tools.
2. Jika sobat memiliki beberapa situs/Blog, pilih Blog yang akan dilakukan pengoptimasian sitemap.
3. Setelah masuk di halaman dashboard, perhatikan menu-menu di sebelah kiri halaman. Klik menu dropdown Configure My Site dan pilih Sitemap.

Cara Mengoptimasi Sitemap Blog di Bing

4. Selanjutnya sobat masukan xml sitemap pada kotak yang telah disediakan dan klik Submit.

Cara Mengoptimasi Sitemap Blog di Bing

Saya akan berikan 4 contoh sitemap xml yang bisa sobat gunakan salah satu atau pun semuanya:
  • http://regibrader-free.blogspot.com/feeds/posts/full 
  • http://regibrader-free.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500 
  • http://regibrader-free.blogspot.com/feeds/posts/default
  • http://regibrader-free.blogspot.com/feeds/posts/default?max-results=9999&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc
Ubah url berwarna merah dengan URL Blog sobat.

Selesai, biasanya sitemap yang sobat kirimkan tidak akan langsung direspon oleh Bing dan akan ada keterangan "pending".

Cara Mengoptimasi Sitemap Blog di Bing

Jadi sobat harus sabar menunggu hingga akhirnya sitemap yang sobat kirimkan sukses dikirim dan akan muncul jumlah url yang berhasil dioptimasi. Setiap sitemap xml yang saya berikan diatas memiliki kemampuan untuk mengoptimasi url dengan jumlah yang berbeda-beda.

Cara Mengoptimasi Sitemap Blog di Bing

Mengatahui Web/Blog yang Nofollow atau Dofollow

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow
Sobat tau apa itu rel nofollow dan dofollow? Pada web/Blog sobat, sobat menerapkan yang mana diantara yang dua tersebut? Bahkan sobat tidak mengetahuinya, ok saya akan membahas Cara Mengatahui Web/Blog yang Nofollow atau Dofollow. Pengertian intinya, rel nofollow adalah istilah pada web/blog yang jika kita berkomentar pada web/blog yang diterapkan rel nofollow tersebut maka Google tidak menghitung backlink pada komentar yang kita buat. Sedangkan dofollow adalah istilah pada web/blog yang jika kita berkomentar pada web/blog yang diterapkan rel dofollow maka Google menghitung backlink pada komentar yang kita buat.
Biasanya, web/blog akan memiliki rel nofollow pada saat pertama dibuat, namun bisa diubah menjadi dofollow jika memang sobat menghendakinya. Silakan sobat terapkan rel mana saja yang sobat sukai. Namun kali ini saya tidak akan membahas cara mengubah rel pada suatu web/blog, melainkan Cara Mengatahui Web/Blog yang Nofollow atau Dofollow.
OK, tanpa basa-basi kita mulai saja pembahasan kali ini.

  • Untuk pengguna Mozila Firefox.
Salah satu caranya adalah dengan menambahkan pengaya pada Mozila Firefox.
1. Silakan masuk ke halaman Add On NoDoFollow for Firefox.
2. Klik Continue to Download.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

3. Klik Add to Firefox.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

4. Silakan tunggu NoDoFollow sedang diunduh.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

5. Akan muncul jendela baru, klik pasang sekarang.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

6. Setelah Add On berhasil terpasang, silakan klik Mulai Ulang Firefox.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

7. OK, sekarang Add On NoDoFollow telah terpasang dan dapat digunakan. Untuk cara penggunannya, silakan sobat kunjungi web/blog yang ingin sobat ketahui rel yang digunakanya. Lalu klik kanan pada halaman web/blog tersebut dan centang opsi NoDoFolow. Maka rel yang digunkan web/blog tersebut dapat diketahui. Untuk link yang berlatar merah maka rel nofollow, sedangkan link yang berlatar biru maka rel dofollow.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

  • Untuk pengguna Google Chrome.
Yang saya tau tidak perlu memakai pengaya tambahan pada Google Chrome ini. Caranya pun lebih singkat dan mudah, silakan simak.
1. Masuk ke halaman web/blog yang ingin sobat ketahui rel yang digunakanya.
2. Lalu klik kanan pada link di halaman web/blog tersebut dan klik opsi Inspect Element.
3. Akan muncul sebuah kotak di bagian bawah yang berisi kode sumber link yang dipilih. Nah dengan ini, rel yang digunakan pada suatu web/blog pun dapat diketahui.

Jika memakai rel nofollow, maka akan ada kode rel="nofollow" pada kotak tersebut.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

Sedangkan, jika memakai rel dofollow, maka tidak akan ada kode rel="nofollow" pada kotak tersebut.

Cara Mengatahui Web/Blog yang Nofollow atau Dofollow

OK, demikian saja pembahan saya. Semoga bermanfaat bagi sobat yang membaca.

source : http://regibrader-free.blogspot.com/2013/07/cara-mengatahui-webblog-yang-nofollow.html

Tools Parse Kode Iklan Adsense

Sabtu, 20 Juli 2013

Adsense sangatlah teliti dalam penilaian aditing kode iklannya, dengan itu berhati-hatilah dalam memparse kode iklan tersebut. Blog ini dulu saya pasangkan adsense, namun hanya gara-gara sepele dengan mengganti kode iklan mereka dengan parse yang tidak sesuai maka dikatakan adsense sebagai pelanggaran TOS mereka. Solusinya adalah dibawah ini, HTML Parse Tools yang telah teruji aman untuk google adsense.



Masukkan kode adsense anda, dan tekan Encode !


Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Mudahnya memasang Like Facebook untuk Blogger

Like Facebook blogger hampir disemua blog tercantum widget ini. Mungkin banyak yang binggung cara memasukkan widget ini untuk blog sobat. Ternyata tidaklah susah untuk menerapkannya. Langsung saja cara pembuatannya :

 

1. Login ke blogger
2. Masuk ke Tab Kode HTML
3. Paste kode dibawah ini :
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F415864008437023&amp;width=300&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe>
Keterangan :
  • Ganti nomor 415864008437023 dengan Nomor ID Facebook sobat
  • Ganti width:300px; height:290px, merupakan ukuran lebar dan tinggi widget
  • Frameborder="0" bisa ditambahkan 1, apabila sobat menginginkan widget ada bordernya.
  • Selesai
Semoga bermanfaat. Salam Saung Jiwa...

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Related Post Dibawah Postingan Dengan Gambar

Cara ini mungkin sudah banyak yang menerapkannya, mungkin saja ada teman-teman blogger yang ingin mengetahui dari blog saungjiwa ini. Langsung saja cara pembuatan Related Post atau artikel terkait Dibawah Posting Dengan Thumbnail Gambar :

  • Sobat Login ke akun blog sobat.
  • Pilih Template =>> Edit HTML. (Saya sarankan untuk mem-backup dulu template sobat untuk menghindari hal-hal yang tidak diinginkah / error)
  • Sobat cari kode berikut </head> Untuk mempercepat pencarian sobat tekan Ctrl+F di kotak script Edit HTML sobat.
  • Kemudian letakan kode dibawah ini tepat diatas kode </head>

<!--Related Posts mari-berbagi244.blogspot.com Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>
<!--Related Posts mari-berbagi244.blogspot.com Styles End-->

  • Jangan disimpan dulu template sobat.
  • Kemudian sobat cari lagi kode <data:post.body/> Untuk mempermudah pencarian gunakan Ctrl+F di kotak Edit HTML. (biasanya ada 3 kode seperti ini. Jika memang benar, pilih kode yang ke 2)
  • Copy kode berikut, dan letakan di bawah kode <data:post.body/>

<!--Related Posts mari-berbagi244.blogspot.com Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</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://saungjiwa2012.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!--Related Posts mari-berbagi244.blogspot.com Styles End-->

  • Kode yang berwarna Orange bisa sobat ganti dengan kata-kata sobat sendiri apakah Artikel Terkait / Related Post.
  • Kode yang berwarna Merah adalah kode banyaknya artikel terkait yang akan di tampilkan di blog sobat, jadi modifikasikan sesuai dengan keinginan dan kebutuhan sobat.
  • Kode yang berwarna Biru sobat ganti dengan alamat URL blog sobat.
  • Kemudian Simpan Template dan lihat hasilnya.
Semoga artikel ini dapat bermanfaat dan berguna buat sobat blogger yang membutuhkan. Jika ada yang ingin ditanyakan atau mengalami error dalam pembuatan silahkan berkomentar di kolom komentar atau di chatbox. Terima kasih dan Salam blogger.

Cara Membuat Tanda Admin pada Komentar Blog

Senin, 03 Juni 2013

Cara Membuat Tanda Admin pada Komentar Blog
Jangan bosan, mulai Blogging lagi para Blogger. Saya baru kepikiran bagaimana cara menandakan komentar pada Blog yang ditulis oleh admin pada posting yang memiliki banyak komentar. Hal ini mungkin perlu sobat, maka kali ini saya akan membahas Cara Membuat Tanda Admin pada Komentar Blog.
Saya mengunjungi Blog milik teman saya yang pada salah satu posting-nya memiliki banyak komentar. Bingung juga melihat komentar-komentar yang jumlahnya sampai ratusan, mana yang ditulis admin dan mana yang ditulis pengunjung Blog. Tanda komentar admin ini mungkin perlu sobat, salah satunya ketika pengunjung bertanya pada Admin, pengunjung tidak bingung siapa yang menjawab pertanyaanya.
OK, jika ada sobat Blogger yang menganggap hal ini perlu, silakan simak cara pembuatanya di bawah ini.
1. Login ke Akun Blogger sobat.
2. Masuk ke bagian Template.
3. Klik Edit Html.
4. Cari kode </body> dengan tombol ctrl + F.
5. Masukan kode berikut diatas kode </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Komentar admin by Brader Blog start -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("http://3.bp.blogspot.com/-RU1Q-HwrfsU/T2CyurPWOtI/AAAAAAAABmY/S0uNp_lWCNw/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- Komentar admin ends -->

>>Sobat bisa ubah kode berwarna merah muda untuk warna garis pembatas. Kode berwana biru untuk warna background komentar. Dan URL berwarna merah untuk gambar/Tulisan "Admin" jika sobat punya atau yang telah saya sediakan di bawah ini.

http://3.bp.blogspot.com/-RU1Q-HwrfsU/T2CyurPWOtI/AAAAAAAABmY/S0uNp_lWCNw/s1600/admin2.png Tanda Admin pada Komentar Blog
https://lh5.googleusercontent.com/--i0eum3yNGs/T_-3jqWLsBI/AAAAAAAAAbA/8el9Fa3Zuxs/s79/admin.png Tanda Admin pada Komentar Blog
https://lh3.googleusercontent.com/-FNBmuxUDgVU/Taz9hSvhFkI/AAAAAAAAAuA/CmxYQ1es0z8/s288/logo_admin.gif Tanda Admin pada Komentar Blog
https://d592ae48-a-62cb3a1a-s-sites.googlegroups.com/site/rakasajmk/home/page-3/Admin.png Tanda Admin pada Komentar Blog
http://4.bp.blogspot.com/-WpJs5dgGemU/UaxmmwjqetI/AAAAAAAACH4/4BTPK5hcnOA/s1600/Untitled3.png Tanda Admin pada Komentar Blog

Jika sobat tidak mengubah apapun, maka hasilnya akan seperti ini.
Tanda Admin pada Komentar Blog
6. Jika telah selesai, klik Simpan.

Selesai, singkat dan mudah yaah.

Cara Membuat Widget Melayang di Blog

Minggu, 26 Mei 2013

Cara Membuat Widget Melayang di Blog
Selamat siang, apa kabar sobat Blogger? Rasanya sudah lama saya tidak membuat posting baru. Kalian ingat posting beberapa waktu lalu tentang widget like box facebook melayang dan widget follow me twitter melayang? Ternyata Widget melayang tersebut bisa memuat widget lainya, tentunya widget dengan kode HTML. Dan bisa memuat lebih dari satu widget. Oleh karena itu kali ini saya akan membahas tentang Cara Membuat Widget Melayang di Blog.
Apa sih maksudnya widget ini dapat memuat lebih dari satu widget Contohnya saya memasang tiga buah widget pada widget melayang ini, yaitu Tombol Google Plus One, Tombol Follow Me Twitter, dan Like Box Facebook. Contoh hasilnya seperti gambar berikut.
Cara Membuat Widget Melayang di Blog
Widget ini akan muncul secara melayang dari bawah sebelum halaman pada Blog sobat belum seluruhnya dimuat. Widget ini memiliki tombol close di sudut kanan atas untuk pengunjung jika ingin menutup widet.
Bagaimana, sobat tertarik untuk memasang widget ini? Berikut langkah-langkahnya.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi manapun, karena hasilnya akan tetap melayang.
4. Pilih mode HTML/Javascript.
5. Masukan kode HTML berikut ini dan Editlah.

<!-- WD melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:38%;
      margin:0px 0px 0px -182px;
      width:300px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -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;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;">Rekomendasikan, Follow, dan Like yah Sobat.</p>
<!-- Mulai --!>

<center><h2 class=”title”>Judul Widget 1</h2></center>
---- Kode HTML Widget 1 ----

<center><h2 class=”title”>Judul Widget 2</h2></center>
---- Kode HTML Widget 2 ----

<center><h2 class=”title”>Judul Widget 3</h2></center>
---- Kode HTML Widget 3 ----

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/search/label/Widget%20Blogspot">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-melayang-di-blog.html">Get This Widget</a></p>
    </div>

Masukan Judul Widget pada tulisan warna biru dan kode HTML Widget pada tulisan berwarna merah. Jumlah widget dapat ditambah atau dikurangi.
Untuk tulisan berwarna hijau adalah pesan-pesan pada widget yang dapat sobat ubah.
Ukuran tinggi widget tidak jadi masalah, karena akan menyesuaikan ketika bertambahnya jumlah widget yang dimuat.
Sobat perhatikan posisi widget dan lebar widget pada kode berwarna ungu.
#Pada gambar diatas saya contohkan widget-widget yang dimuat berdampingan secara vertikal. Nah, jika sobat ingin membuatnya berdampingan secara horizontal, sobat hanya perlu menambah lebar widget sekiranya dapat memuat lebih dari satu widget.

6. Setelah sobat selesai mengedit, klik Simpan.

Selesai, semoga sobat tidak pusing dengan penjelasan dari saya dan semoga berhasil.

Cara Mambuat Widget Google +1 di Blog

Rabu, 22 Mei 2013

Google +1
Selamat malam sobat Blogger, saya akan beritahu hal yang bisa membuat kualitas dan SEO Blog sobat menjadi semakin baik. Yaitu dengan banyaknya pengguna internet yang merekomendasikan Blog sobat ke Google. Bagaimana pengguna internet merekomendasikan Blog kita? Salah satu medianya adalah Google +1, sehingga kali ini saya akan membahas tentang Cara Mambuat Widget Google +1 di Blog.
Namun tetap saja cara yang paling utama agar Blog sobat memiliki kualitas yang baik, selain memuat konten-konten yang bermanfaat dan bermutu adalah teroptimasi oleh search engine. Silakan baca Cara-cara SEO Website. Rekomendasi dengan Google +1 ini sebagai tambahan saja. Dengan banyaknya pengguna internet yang merekomendasikan Blog sobat, maka Blog sobat akan diperhitungkan oleh search engine.

OK, cara membuatnya gampang kok sob, silakan simak:
Seperti biasa Login dulu ke akun Blogger sobat. Lalu masuk ke bagian Tata Letak. Klik Tambahkan Gadget di posisi yang sobat inginkan.
Ada dua cara nih sob.
  • Cara biasa:
Cara ini gampang, sobat tinggal pilih "Tombol +1", lalu atur tampilanya. Setelah selesai, Klik Simpan.
Cara Mambuat Widget Google +1 di Blog

Cara Mambuat Widget Google +1 di Blog
  • Dengan Mode HTML/Javascript:
Mungkin ada sobat Blogger yang ingin memasang widget Google +1 ini dengan agak berbeda. Misalnya ingin dipasang secara digabungkan dengan widget lain. Jadi pada satu lapak widget memuat beberapa widget yang berbeda. Tentunya cara biasa tidak akan berlaku yah sobat. Nah, sobat bisa memasang widget ini dengan mode HTML.
Ketikan memilih widget, tentunya sobat pilih mode HTML/Javascript.
Widget HTML/Javascript
Lalu sobat masukan kode HTML berikut ini.

<g:plusone size="tall" annotation="inline" width="300" href="http://regibrader-free.blogspot.com"></g:plusone>

Kode berwarna ungu bisa sobat ubah dengan jenis tampilan yang sobat inginkan, diantaranya:

Inline Untuk tampilan Baloon, sobat hapus kode annotation="inline" None

Sobat ubah kode berwarna merah dengan URL Blog/Website sobat, dan kode berwarna merah muda dengan lebar widget yang sobat inginkan. Untuk kode berwarna biru yang akan merubah jenis ukuran widget. Berikut kode-kode dan jenis ukuran yang akan dihasilkan.
Setelah diatur, maka klik Simpan. OK Selesai deh..

Cara Membuat Widget Recent Comment di Blog

Sabtu, 18 Mei 2013

Cara Membuat Widget Recent Comment di Blog
OK sobat blogger, saya akan mulai membuat posting lagi. Setelah beberapa hari kurang sehat menyebabkan semangat Blogging saya menurun, hehe. Kali ini saya akan bagikan saja Cara Membuat Widget Recent Comment di Blog. Mungkin sobat sudah tidak asing lagi dengan widget ini. Widget Recent Comment ini menampilkan komentar terbaru dari konten-konten pada Blog sobat. Widget ini dilengkapi dengan tampilan foto profil pemberi komentar dan tentunya menampilkan kata-kata dalam komentar.
Keuntungan dari widget ini, mungkin jika sobat tidak mengaktifkan moderasi komentar, sobat bisa mengetahui komentar-komentar yang masuk pada konten Blog sobat. Sehingga sobat bisa mengontrol komentar tersebut apakah perlu balasan atau perlu dihapus (karena dianggap spammy).

OK, sobat yang tertarik dengan widget ini, berikut Cara Membuat Widget Recent Comment di Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascrpt.
5. Masukan kode berikut.

<div style="overflow:auto;width:auto;height:378px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style>
<script type="text/javascript">
 //<![CDATA[
 // Recent Comments Settings
var
numComments = 10,
showAvatar     = true,
 avatarSize      = 35,
 roundAvatar   = true,
characters       = 250,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://regibrader-free.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

-Ubah URL berwarna merah dengan URL Blog sobat.
-Ubah kode berwarna biru dengan ukura tinggi widget yang diinginkan.
-Atur jumlah komentar yang ingin ditampilkan pada kode berwarna ungu.
-Atur jumlah maksimal karakter pada komentar sesuai keinginan.
#Kode diatas juga memuat kode-kode ukuran lain, kode-kode warna seperti warna background yang bisa sobat edit kembali.

6. Jika telah selesai, klik Simpan dan silakan lihat hasilnya.

Cara Membuat Widget Follow Me Box Twitter Melayang di Blog

Minggu, 12 Mei 2013

Cara Membuat Widget Follow Me Box Twitter Melayang di Blog
OK buat para sobat Blogger yang mempunyai Twitter yang berisikan konten-konten pada Blog-nya. Posting ini adalah salah satu solusi untuk menambah Follower pada Twitter tersebut, yaitu Widget Follow Me Box Twitter Melayang di Blog beserta Cara Membuatnya.
Widget ini memungkinkan pengunjung Blog sobat lebih tertarik untuk menjadi follower pada Twitter sobat. Karena sebelum seluruh halaman Blog sobat berhasil dimuat akan muncul Widget ini dengan melayang. Jadi serasa memberi kesan "Follow Dulu Sebelum Membaca Artikel", kurang lebih begitulah. Pengunjung diberi pilihan apakah akan meng-klik follow atau malah meng-klik close pada widget ini. Jadi sebenarnya tetap sebagian pengunjung akan menilai dahulu kualitas Blog sobat, apakah layak untuk di-follow atau tidak. Dengan demikian sobat jangan terpaku pada widget ini untuk menambah follower. Tetaplah senjata paling ampuh agar pengunjung Blog menyukai Blog sobat adalah konten-konten yang bermanfaat dan berkualitas. Jadi, sobat tetap harus meningkatkan kualitas Blog, OK.

Yap, bagi sobat yang tertarik untuk memasang widget ini, Inilah Cara Membuat Widget Follow Me Box Twitter Melayang di Blog:
1. Login pada akun Blogger sobat.
2. Masuklah pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode HTML berikut:

<!-- TW melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:38%;
      margin:0px 0px 0px -182px;
      width:290px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -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;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;">Twit dari Bader Blog. Please <blink>Follow Me !!!</blink> </p>
<!-- Mulai --!>

---Masukan Script Widget Follow Me Box Disini---

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/search/label/Widget%20Blogspot">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-follow-me-box_12.html">Get This Widget</a></p>
    </div>

#Terdapat banyak kode-kode ukuran dan warna yang bisa sobat ubah. Namun walaupun tidak diubah, Widget ini sudah diatur sedemikian rupa.
Ubah tulisan warna biru dengan pesan-pesan yang sobat sukai.
6. Masukan script Widget Follow Me Box pada tulisan berwarna merah. Jika sobat belum mempunyai scriptnya, silakan kunjungi Halaman Ini untuk mendaptkanya.
7. Klik Simpan. Maka Insaaloh hasilnya akan seoerti ini.
Cara Membuat Widget Follow Me Box Twitter Melayang di Blog
Demikanlah pembahasan ini, semoga berhasil dan sobat Blogger menyukainya.

Cara Membuat Widget Follow Me Box Twitter di Blog

Sabtu, 11 Mei 2013

Cara Membuat Widget Follow Me Box Twitter di Blog
Masih tentang widget Twitter di Blog nih sobat. Mumpung waktu luangnya lumayan, saya gunakan untuk buat posting. Kali ini saya akan membahas Cara Membuat Widget Follow Me Box Twitter di Blog.
Berbeda dengan Widget Burung Twitter terbang atau Tombol Follow Me Twitter, Widget Follow Me Box Twitter ini menampilkan tombol follow, beberapa foto follower, jumlah follower, dan foto pada akun Twitter.
Untuk lebih jelasnya lihat gambar disamping. Itulah screenshot Widget yang akan kita buat kali ini. Hampir mirip yah dengan Widget Like Box Facebook yah.
Apakah meurut sobat widget ini menarik? Jika sobat tertarik dengan widget ini, simaklah cara-cara membuatnya:
1. Login pada akun Blogger sobat.
2. Masuk padaa bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=Regy_Brader" class="FB_SERVER_IFRAME" style="width: 290px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("Regy_Brader");</script>

#Ubahlah kode warna merah dengan ID Twitter sobat. Tentukan ukuran widget pada kode warna Biru.

6. Klik Simpan, dan Selesai

Cara Membuat Widget Burung Twitter Terbang di Blog

Cara Membuat Widget Burung Twitter Terbang di Blog
Kemarin saya membuat posting tentang Cara Membuat Tombol Follow Me Twitter di Blog. Telah saya jelaskan sebelumnya kegunaan tombol tersebut kan?. Kali ini saya akan membahas mengenai Cara Membuat Widget Burung Twitter Terbang di Blog. Fungsinya sama, yaitu untuk mempermudah pengunjung Blog sobat  melakukan follow pada Twitter sobat yang tentunya memuat konten-konten pada Blog sobat.
Yang membedakan widget ini dengan tombol follow me adalah tampilanya. Widget ini jelas lebih menarik dengan menampilkan burung yang terbang dan selalu mengikuti jika halaman pada layar monitor digulir. Jika pengunjung meng-klik burung ini tentunya ia akan menjadi follower Twittter sobat.

OK, jika sobat ingin memasang widget ini, berikut langkah-langkahnya:
1. Masuk pada akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi mana saja,hasilnya akan tetap menjadi burung terbang.
4. Pilih mode HTML/Javasript.
5. Masukan kode berikut ini.

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/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/Regy_Brader";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

#Untuk kode warna biru sobat ubah dengan ID Twitter sobat.
Nah, untuk kode warna merah sobat bisa ubah dengan berbagai URL jenis burung kesukaan sobat.
Saya telah menyediakan beberapa contohnya.

Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-xL1Dk6Bhi4g/TqN5gbyvSCI/AAAAAAAAAGM/jxsjBiRWMLw/s1600/yellow+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://1.bp.blogspot.com/-N3RvHfV3MUk/TqN5iPPqAEI/AAAAAAAAAGU/oYKSvsOj108/s1600/black+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-FNowQ1mqsLg/TqN5kxq86EI/AAAAAAAAAGc/VzatkjsUAEc/s1600/Blue+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-b-9ncuDJxm0/TqN5nrOnTCI/AAAAAAAAAGk/LREurKp_tLc/s1600/brown+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-SJP4OZmyeCU/TqN5qcyXgGI/AAAAAAAAAGs/jKQaqHF9EkA/s1600/Green+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://3.bp.blogspot.com/-Ec4JlrN6yc4/TqN5tIAXDpI/AAAAAAAAAG0/ywnjHeG4ASM/s1600/purple+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog http://1.bp.blogspot.com/-qsxd6A0vUFU/TqN5vZVI2-I/AAAAAAAAAG8/lb0Ol5Nbrvw/s1600/white+bird.png
Cara Membuat Widget Burung Twitter Terbang di Blog
http://1.bp.blogspot.com/-knGCnCFCahI/TqN59awa61I/AAAAAAAAAHE/mniE1h9IW14/s1600/red+bird.png

Kalau sobat tidak merubah URL-nya, maka hasilnya akan seperti berikut.

Cara Membuat Widget Burung Twitter Terbang di Blog Cara Membuat Widget Burung Twitter Terbang di Blog

6. OK, jika sobat telah selesai mengaturnya, klik Simpan. Selesai, lihat hasilnya.
 
Support : Jasa Buat Web Pangkalpinang | Tips Blogger | Special Thanks
Copyright © 2013. Saungjiwa Blog - All Rights Reserved
Inspired by Sportapolis Shape5.com
Proudly powered by Blogger