Edit Blogger: [OprekBlog]

Tampilkan postingan dengan label [OprekBlog]. Tampilkan semua postingan

Rabu, 12 Juni 2013

Membuat Daftar Isi Blog

Membuat Daftar Isi Blog di Blogger dengan mudah

Caranya sebagai berikut:

Login ke blogger
Buat page baru
letakkan code dibawah ini ke dalam mode html dan terbitkan.

<div style="background-color: none; border: 1px solid #CCC; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;">
<script src="http://memed.googlecode.com/files/daftarisi.js">
</script><script src="http://lompatblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
</div>

Catatan:
- Ganti http://lompatblog.blogspot.com dengan url blog anda.

Membuat Social Buttoh Melayang

Caranya sebagai berikut:

Login blogger
Edit Element
pilih HTML/Javascript
Masukkan kode dibawah ini.

<style>
#pageshare {position:fixed; bottom:60%; left:250px; float:right; 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>

Membuat Like Box Facebook Melayang di Blog

Caranya sebagai berikut:
1. Login Blogger
2. Edit Element
3. Pilih HTML/Javascript
4. Letakkan kode dibawah ini pada element diatas.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:40%;
      margin:0px 0px 0px -182px;
      width:310px;
      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;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

-----Letakan Script Widget Like Box Facebook disini-----

<!-- Selesai --!><a class='close' href='#'>×</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-memasang-widget-like-box-facebook.html">Get This Widget</a></p>
    </div>

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:40%;
      margin:0px 0px 0px -182px;
      width:310px;
      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;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

-----Letakan Script Widget Like Box Facebook disini-----

<!-- Selesai --!><a class='close' href='#'>×</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-memasang-widget-like-box-facebook.html">Get This Widget</a></p>
    </div> - See more at: http://regibrader-free.blogspot.com/2013/05/cara-memasang-widget-like-box-facebook.html#sthash.oXtVvssk.dpuf

Kamis, 06 Juni 2013

Cara Setting Custom Domain Blogspot di Namecheap

Cara Setting Custom Domain Blogspot di Namecheap. Bagaimana caranya langsung saja simak dibawah ini:

1. Buat blog yang ingin di custom domain, misalnya: http://tongkr.blogspot.com
2. Pastikan sudah memiliki domain di namecheap, misalnya: http://www.tongkrongin.com
3. Login ke blogger, Pilih Setting - Basic

- Masukkan nama domain di bagian Advance Setting dan klik save
- Akan tampil 2 kode seperti pada gambar diatas
4. Login ke akun Namechep, Pilih Manage Domain klik All Host Record, Jika tidak ada silahkan klik dulu Transfer back DNS to US.

- Pada : @ => isi http://www nama domain anda com. misalnya: http://www.tongkrongin.com => URL Redirect => TTL 1800
- Pada : www => ghs.google.com => CNAME (Alias) => TTL 1800

Pada bagian sub-domain setting :
- Kolom pertama masukkan kode 1 (XXX6mqnr3XXX)
Kolom ke 2 masukkan kode 2 (xx- xxnqyi63utdrza.dv.googlehosted.com.)
Kolom 3 nya pilih CNAME (Alias) dan TTL 1800

Jumat, 31 Mei 2013

Membuat Social Share (Facebook Like, Tweet, Google+) Melayang

Membuat Social Share (Facebook Like, Tweet, Google+) Melayang

Gambar Social Share Melayang

Langkah-Langkah:

Login Blogger
Tata Letak - New Element
Paste code dibah dan save.



<!--Widget Tombol Berbagi Start-->

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid green; 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="Share This With Your Friends">

<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>

<!--Widget Tombol Berbagi End-->

Selasa, 07 Mei 2013

Cara Submit Sitemap ke Webmaster Tools

// Gunakan ini jika ingin menggunakan yang standar saja //
Tipe Atom:
feeds/posts/default

Tipe RSS:
feeds/posts/default?alt=rss

// Gunakan ini jika Postingan anda di bawah 500 //
atom.xml?redirect=false&start-index=1&max-results=500

//Gunakan ini Untuk Blog dengan posting kurang dari 1000 //
atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500

//Gunakan ini untuk Blog dengan postingan kurang dari 1500, tapi lebih 1000 //
atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500
atom.xml?redirect=false&start-index=1001&max-results=500

Minggu, 05 Mei 2013

Cara Membuat Breadcrumbs Terindex Google

Pertama-tama masukan kode css untuk breadcrumbnya, taruh di atas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Setelah itu cari kode <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut,



<b:includable id='breadcrumb' var='posts'>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

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

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

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

<b:if cond='data:label.isLast == &quot;true&quot;'>

&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:if>

</b:loop>

&#187; <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Minggu, 04 Desember 2011

Membuat Tombol Share di Blogger

Cara membuat tombol Share atau Share button Blogger

Pertama silahkan login blog anda
Klik menu Design > Edit HTML > centang expand widget templates
Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>

Kode

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

<g:plusone size="medium"></g:plusone>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>

Langkah terahir yaitu simpan template

Cara Membuat Tombol Share atau share button di blogger ini adalah cara paling mudah untuk memasang fitur share / membagikan artikel anda. Share button ini juga bisa anda edit sesuai keeinginan anda, tapi jangan lupa back up templatenya dulu untuk menghindari kesalahan pada proses editing. Oh ya "User Name" diganti user name twitter anda. Untuk blog yang sudah menggunakan read more biasanya bukan menggunakan kode
<div class='post-body entry-content'>
melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
Pahami dulu, baru praktekkan cara membuat tombol share atau share button blogger type ini.

Sabtu, 26 November 2011

Dinamyc Meta Blogspot

Salah satu masalah ketika kita memasang meta tag di platform Blogger (blogspot) adalah duplikat konten meta.
Dalam postingan kali ini kita akan mencoba untuk membuat solusi dengan membuat kata kunci meta dinamis dan deskripsi untuk blog Blogger (blogspot) Anda.
Bagaimana pun memasang meta tag di blog sangatlah penting untuk mengoptimalkan SEO pada search engine blog kita. Beberapa mesin pencari mengandalkan pada konten meta tag untuk hasil pencarian mereka. Meskipun dampak apabila muncul pada hasil pencarian dengan 'deskripsi meta' Anda
menghadapi dengan istilah pencarian mereka.
Berikut adalah cara paling mudah untuk membuat isi meta tag yang dinamis untuk blog platfom Blogger.

Cari tag ini pada awal template Anda:

<head>
<b:include data='blog' name='all-head-content'/>
<title> <data:blog.pageTitle/>
</title>
<b:skin> <[[CDATA / *!

Hapus baris tag kode di bawah ini:

<title><data:blog.pageTitle/></title>

Sekarang salin dan paste blok kode no 2 dengan kode berikut.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='Tulis dreskripsi blog anda di sini panjang minimal 100 karakter dan maksimal 250 karakter ' name='description'/>
<meta content='Isi dengan kata kunci (keyword) blog anda setiap kata kunci di pisahkan dengan koma ( , )' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " Tulis deskripsi blog anda panang minimal 100 karakter maksimal 250 karakter "' name='Description'/>
<meta expr:content='data:blog.pageName + " Tulis kata kunci blog anda di sini. Setiap kata kunci di pisahkan dengan koma ( , ) "' name='Keywords'/>
</b:if>

Ganti bagian text yang berwarna merah yang dengan deskripsi meta dan kata kunci meta blog Anda.

<meta content='Tulis deskripsi blog anda di sini panjang minimal 100 karakter dan maksimal 250 karakter'
name='description'/>

<meta content='Isi dengan kata kunci (keyword) blog anda setiap kata kunci di pisahkan dengan koma ( , )'
name='keywords'/>

Kemudian simpan template Anda.

Sekarang Anda dapat menguji jika konten meta berubah secara dinamis dengan melihat blog Anda, kemudian klik kanan->> view source halaman tersebut, dan anda harus melihat meta deskripsi dan kata kunci atau keyword yang berbeda ketika Anda melihat situs blog anda berada di homepage dan salah satu posting Anda (single post).
Selamat mencoba.!!!

Edit Blogger

Laman