R2 Blog: Tutorial Blog

Showing posts with label Tutorial Blog. Show all posts

Membuat Tombol Share di Bawah Posting Blog

Unknown December 02, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEylVSDovwp4EmNGZ675wmbWu-incE7AS1unkwJVsvLgjM9qFVSOCTTpRZCJg9XRywbK52_QTMywq7kIxB9xUZOatUx5mUz63M4-yS_TJIW30LjeGAw0qFmrY_mByqlv0jyas0XGgFTg/s1600/tombol-share-blogger-valid-HTML5.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Tombol Share Blogger Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEylVSDovwp4EmNGZ675wmbWu-incE7AS1unkwJVsvLgjM9qFVSOCTTpRZCJg9XRywbK52_QTMywq7kIxB9xUZOatUx5mUz63M4-yS_TJIW30LjeGAw0qFmrY_mByqlv0jyas0XGgFTg/s540/tombol-share-blogger-valid-HTML5.gif" title="Membuat Tombol Share di Bawah Posting Blog" width="540" /></a>
Membuat Tombol Share di Bawah Posting Blog – tentu sudah tidak 
asing lagi dengan tombol share yang biasa terlihat di bawah posting 
blog, fungsi dari tombol share tersebut agar lebih memudahkan visitor 
untuk membagikan artikel yang sudah kita posting ke dalam beberapa media
 sosial seperti facebok, twitter, google+, lintasme dan jejaring sosial 
lainnya. Tanpa memasang tombol share ini sebenarnya blogger juga sudah 
menyediakan widget tombol share, namun apa daya karena tombol share 
default blogger tersebut tidak valid HTML5 jadi ada baiknya apabila kita
 modifikasi agar tombol share yang terletak di bawah posting blog agar 
bisa lolos dari validator W3C dan bisa valid HTML5. Untuk membuat tombol
 share ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga
 tampilan dari tombol share ini lebih sederhana dan minimalis dengan di 
sertai warna-warna yang menarik. Untuk memasang tombol share di bawah 
posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode 
saja yang terdapat dibawah ke dalam Edit HTML template blog maka 
hasilnya seperti yang tertera pada gambar di atas. Untuk itu berikut 
tutorial untuk Membuat Tombol Share di Bawah Posting Blog agar valid HTML5 dan full color. 1. Login ke akun blogger. 2. Masuk ke Template lalu pilih Edit HTML. 3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code>
 
<pre class="css"> </pre>
<pre class="css">.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}
.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }</pre>
4. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code><pre class="xml"> </pre>
<pre class="xml"><div class='widgetshare'>
Share artikel ke: 
<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div></pre>
5. Langkah terakhir tinggal Simpan template lalu lihat hasilnya. Demikian tutorial untuk Membuat Tombol Share di Bawah Posting Blog. Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <code><data:post.body/></code> dan <code><div class='post-footer'></code> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.
</div>

Membuat Tombol Share di Bawah Posting Blog – tentu sudah tidak asing lagi dengan tombol share yang biasa terlihat di bawah posting blog, fungsi dari tombol share tersebut agar lebih memudahkan vis...

02Dec2014

Cara Menghilangkan Newer Post, Home dan Older Post

Unknown November 24, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
 </h3>
<div class="post-header">
Cara
 menghilangkan link posting lama tidaklah sesulit yang di bayangkan, 
posting lama hanya ada pada template baru saja sedangkan pada template 
yang klasik tidak ada (template baru VS template klasik). Posting lama 
ini menurut saya bermanfaat sebagai salah satu cara supaya orang yang 
melihat blog ini tidak kesulitan dalam mengakses artikel yang sudah 
tidak tampil pada halaman muka.</div>
<div dir="ltr" style="text-align: left;">
<div style="font-family: inherit; text-align: justify;">
<a href="http://www.blogger.com/post-create.g?blogID=2162081915894671051" name="more"></a></div>
<div style="color: black; font-family: inherit; text-align: justify;">
 
</div>
<div style="color: black; font-family: inherit; text-align: justify;">
 
</div>
<div style="color: black; font-family: inherit; text-align: justify;">
Cara Pertama:</div>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li>Masuk ke Blogger</li>
<li>Buka Design/Rancangan</li>
<li>Pilih Edit HTML >> Centang pada "Expand Widget Template"</li>
</ul>
<div style="color: black; font-family: inherit; text-align: justify;">
Cari kode:</div>
<div style="color: black; font-family: inherit; text-align: justify;">
</div>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li><data:newerPageTitle/> Untuk tulisan "Newer Post/Postingan Baru"</li>
</ul>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li><data:olderPageTitle/> Untuk tulisan "Older Post/Postingan Lama" </li>
</ul>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li><data:homeMsg/> Untuk tulisan "Home/Beranda" </li>
</ul>
<div style="color: black; font-family: inherit; text-align: justify;">
(Gunakan Ctrl+F) Untuk pencarian, </div>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li>Jika sudah ketemu hapus kode tersebut kemudian simpan dan selesai.</li>
</ul>
<div style="color: black; font-family: inherit; text-align: justify;">
 
</div>
<div style="color: black; font-family: inherit; text-align: justify;">
 
</div>
<div style="color: black; font-family: inherit; text-align: justify;">
 
Cara Kedua: 
Langkah awal sama seperti di atas, kemudian cari kode:</div>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li>#blog-pager </li>
</ul>
<div style="color: black; font-family: inherit; text-align: justify;">
(Gunakan Ctrl+F) untuk mempermudah pencarian,</div>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li>Tambahkan kode ;display: none; di dalam kode #blog-pager di atas, dan contoh akhirnya akan seperti ini;</li>
</ul>
<div style="color: blue; font-family: inherit; text-align: justify;">
<blockquote>
#blog-pager-newer-link{float:$startSide; display: none;}</blockquote>
<blockquote>
#blog-pager-older-link{float:$endSide; display: none;}</blockquote>
<blockquote>
#blog-pager{text-align:center; display: none;}</blockquote>
</div>
<ul style="color: black; font-family: inherit; text-align: justify;">
<li>Kemudian simpan dan selesai. </li>
</ul>
</div>
</div>

Cara menghilangkan link posting lama tidaklah sesulit yang di bayangkan, posting lama hanya ada pada template baru saja sedangkan pada template yang klasik tidak ada (template baru VS templa...

24Nov2014

Cara Menghilangkan Newer Post, Home dan Older Post

Unknown May 10, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<div style="color: black; text-align: justify;">
Cara
 menghilangkan link posting lama tidaklah sesulit yang di bayangkan, 
posting lama hanya ada pada template baru saja sedangkan pada template 
yang klasik tidak ada (template baru VS template klasik). Posting lama 
ini menurut saya bermanfaat sebagai salah satu cara supaya orang yang 
melihat blog ini tidak kesulitan dalam mengakses artikel yang sudah 
tidak tampil pada halaman muka.</div>
<div style="text-align: justify;">
<a href="http://www.blogger.com/post-create.g?blogID=2162081915894671051" name="more"></a></div>
<div style="color: black; text-align: justify;">
 
</div>
<div style="color: black; text-align: justify;">
 
</div>
<div style="color: black; text-align: justify;">
Cara Pertama:</div>
<ul style="color: black; text-align: justify;">
<li>Masuk ke Blogger</li>
<li>Buka Design/Rancangan</li>
<li>Pilih Edit HTML >> Centang pada "Expand Widget Template"</li>
</ul>
<div style="color: black; text-align: justify;">
Cari kode:</div>
<div style="color: black; text-align: justify;">
</div>
<ul style="color: black; text-align: justify;">
<li><data:newerPageTitle/> Untuk tulisan "Newer Post/Postingan Baru"</li>
</ul>
<ul style="color: black; text-align: justify;">
<li><data:olderPageTitle/> Untuk tulisan "Older Post/Postingan Lama" </li>
</ul>
<ul style="color: black; text-align: justify;">
<li><data:homeMsg/> Untuk tulisan "Home/Beranda" </li>
</ul>
<div style="color: black; text-align: justify;">
(Gunakan Ctrl+F) Untuk pencarian, </div>
<ul style="color: black; text-align: justify;">
<li>Jika sudah ketemu hapus kode tersebut kemudian simpan dan selesai.</li>
</ul>
<div style="color: black; text-align: justify;">
 
</div>
<div style="color: black; text-align: justify;">
 
</div>
<div style="color: black; text-align: justify;">
 
Cara Kedua: 
Langkah awal sama seperti di atas, kemudian cari kode:</div>
<ul style="color: black; text-align: justify;">
<li>#blog-pager </li>
</ul>
<div style="color: black; text-align: justify;">
(Gunakan Ctrl+F) untuk mempermudah pencarian,</div>
<ul style="color: black; text-align: justify;">
<li>Tambahkan kode ;display: none; di dalam kode #blog-pager di atas, dan contoh akhirnya akan seperti ini;</li>
</ul>
<div style="color: blue; text-align: justify;">
<blockquote>
#blog-pager-newer-link{float:$startSide; display: none;}</blockquote>
<blockquote>
#blog-pager-older-link{float:$endSide; display: none;}</blockquote>
<blockquote>
#blog-pager{text-align:center; display: none;}</blockquote>
</div>
<ul style="color: black; text-align: justify;">
<li>Kemudian simpan dan selesai. </li>
</ul>
</div>
</div>

Cara menghilangkan link posting lama tidaklah sesulit yang di bayangkan, posting lama hanya ada pada template baru saja sedangkan pada template yang klasik tidak ada (template baru VS templat...

10May2014

Membuat Widget Tab View 3 Kolom

Unknown May 10, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-Qhq9V3Sp6GQfFJG2utEVFRDDyO0UtsylqGc9rDn-yY9MEY7EwkWWJdRsW8oVgtvKY1MalsrW3rN-cjBgG8iAehOeljr25pcj0SBbNHL_PlAaBSdJ6f7zrtQJ1jdXNL3qnCkuJrNsew/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-Qhq9V3Sp6GQfFJG2utEVFRDDyO0UtsylqGc9rDn-yY9MEY7EwkWWJdRsW8oVgtvKY1MalsrW3rN-cjBgG8iAehOeljr25pcj0SBbNHL_PlAaBSdJ6f7zrtQJ1jdXNL3qnCkuJrNsew/s1600/1.jpg" width="203" /></a></div>
Widget tab view 3 kolom adalah widget 
yang dipergunakan untuk menghemat tempat yang dapat diisikan dengan 3 
buah widget lainnya agar tidak terlalu banyak memakan tempat. Kalau anda
 masih belum faham apa itu widget tab view 3 kolom itu apa... anda bisa 
melihat gambar diatas. Nah, bagi yang mau coba, Langsung saja..
 
<div style="text-align: justify;">
Chek It Out......</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript. 
 
2.  Pastekan kode dibawah ini 
 
<blockquote class="tr_bq">
<style type="text/css"> 
div.TabView div.Tabs a 
{ 
float: left; 
display: block; 
width: 90px; /* Lebar Kotak Tab */ 
height: 22px; /* Tinggi Menu Utama Atas */ 
text-align: center; /* Posisi Teks Menu Tab */ 
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ 
background-color: #000; /* Warna background Kotak Tab */ 
padding-top: 2px; /* Spasi Atas */ 
border: 1px solid #ffffff; /* Warna border kotak Tab */ 
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */ 
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */ 
font-weight: 900; /* Ketebalan Teks kotak tab */ 
} 
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active 
{ 
background-color: #736F6E; /* Warna background utama kotak tab */ } 
div.TabView div.Pages 
{ 
clear: both; 
border: 1px solid #cccccc; /* Warna border Kotak Konten */ 
overflow: hidden; 
background-color: #ffffff; /* Warna background Kotak konten */ 
} 
div.TabView div.Pages div.Page 
{ 
height: 100%; 
padding: 5px; /* Jarak teks dalam kotak content */ 
overflow: hidden; 
} 
div.TabView div.Pages div.Page div.Pad 
{ 
padding: 3px 5px; 
} 
</style> 
 
<form action="tabview.html" method="get"> 
<div id="TabView" class="TabView"> 
<div style="width: 300px;" class="Tabs"> 
<a>Tab 1</a> 
<a>Tab 2</a> 
<a>Tab 3</a> 
</div> 
<div style="width: 310px; height: 400px;" class="Pages"> 
 
<div class="Page"> 
<div class="Pad"> 
Konten dari Tab 1 
</div></div> 
 
<div class="Page"> 
<div class="Pad"> 
Konten dari Tab 2 
</div></div> 
 
<div class="Page"> 
<div class="Pad"> 
Konten dari Tab 3 
</div></div> 
 
</div> 
</div> 
 
</form> 
 
<script src="http://airalokadotcom.googlecode.com/files/tab%20view.js"> 
</script> 
<script type="text/javascript"> 
tabview_initialize('TabView'); 
</script> 
<div style="text-align:right;margin-right:7px;"><a 
title="Widget Tab View 3 Kolom" style="font:bold 8px 
Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px 
rgba(255,255,255,0.1);opacity:1 !important;visibility:visible 
!important;display:block !important;" 
href="http://pehbate.blogspot.com/2014/05/membuat-widget-tab-view-3-kolom.html"
 target="_blank">&#9658;Get this widget</a></div></blockquote>
</div>
Kustomisasi: 
- Ganti teks yang berwarna biru dengan judul dari widget yang ada pada tab tersebut. 
- Ganti teks yang berwarna merah dengan teks atau script yang akan anda tambahkan. 
 
3.  Simpan 
 
Note: untuk scrpit bisa cari di blog ini atau di <a href="http://www.google.com/">mbah google</a> 
 
Selamat mencoba!
</div>

Widget tab view 3 kolom adalah widget yang dipergunakan untuk menghemat tempat yang dapat diisikan dengan 3 buah widget lainnya agar tidak terlalu banyak memakan tempat. Kalau anda masih belum f...

10May2014

Cara membuat Recent Comments pada blog

Unknown May 10, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5iF4qgZVYJgHb7Ojh8NDH0g5nBrlcGYKh1cC1tmYnTB5lgCOO91H1ayleAuN2MK_939i9vtBWQTn3ahP8rhdeb1j-E6uQ73vWdBOyzSCkW6tFZxzzXSXnbcUACP7_qIFuIhvRpdbtuk/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5iF4qgZVYJgHb7Ojh8NDH0g5nBrlcGYKh1cC1tmYnTB5lgCOO91H1ayleAuN2MK_939i9vtBWQTn3ahP8rhdeb1j-E6uQ73vWdBOyzSCkW6tFZxzzXSXnbcUACP7_qIFuIhvRpdbtuk/s1600/1.jpg" /></a></div>
<div style="text-align: left;">
Step pemasangan :</div>
1. Login ke Blogger 
2. Buat Widget / Gadget baru type HTML/JavaScript 
3. Simpan kode dibawah ini 
<a href="https://www.blogger.com/null" name="more"></a> 
<blockquote class="tr_bq">
<style type="text/css">     ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}  
   .sakahayang_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;}  
   .sakahayang_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;}     .sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}  
   .sakahayang_recent_comments li span{margin-top:4px;color: 
#666;display: block;font-size: 11px;font-style: italic;line-height: 
1.4;} </style> <script type="text/javascript"> //<![CDATA[     // Recent Comments Settings     var  numComments  = 5,  showAvatar  = true,  avatarSize  = 30,  roundAvatar = true,  characters  = 40,  defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",  hideCredits = true;  maxfeeds=20,  adminBlog='rachmat ktp'; //]]> </script> <script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script> <script type="text/javascript" src="http://pehbate.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script></blockquote>
 
3. Perhatikan kode di atas, edit sesuai selera Anda 
 
    numComments  = 5, (jumlah komentar yang ditampilkan) 
    showAvatar  = true, 
    avatarSize  = 30, (ukuran avatar dalam pixel) 
    roundAvatar = true, 
    characters  = 40, (jumlah karakter yang ditampilkan) 
    defaultAvatar  = " http://www.gravatar.com/avatar/?d=mm", (url avatar) 
    hideCredits = true; 
    maxfeeds=20, (feed yang di load, harus sama dengan maxfeeds) 
    adminBlog='rachmat ktp'; (nama tampilan admin) 
 
4. Ganti pehbate.blogspot.com dengan blog Anda, ganti max-results=20, harus sama dengan maxfeeds 
5. Simpan 
 
Penjelasan :
 maxfeeds adalah jumlah komentar yang di load oleh Json script, termasuk
 komentar admin. Maka jumlah maxfeeds harus lebih besar dari 
numComments, dan yang ditampilkan akan disaring tanpa komentar admin. </div>

Step pemasangan : 1. Login ke Blogger 2. Buat Widget / Gadget baru type HTML/JavaScript 3. Simpan kode dibawah ini ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;} .sak...

10May2014

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Unknown May 10, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Dalam 
membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. 
Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian 
blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari 
tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"?
 Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut 
kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa 
hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan 
namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom)
 adalah fasilitas berlangganan bagi pengunjung untuk mengetahui 
komentar-komentar atas posting/artikel dari blog yang bersangkutan. 
 
 
<div style="text-align: justify;">
Namun demikian sebagian blogger 
tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, 
juga telah tersedia fasilitas berlangganan yang lebih canggih seperti <a href="http://www.feedburner.com/" target="_blank">FeedBurner.Com</a>, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.</div>
 
Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot : 
 
<div style="text-align: justify;">
A. Cara Menghapus Langgan: Entri (Atom):</div>
<ol start="1" type="1">
<li style="text-align: justify;">Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;</li>
<li><div style="text-align: justify;">
Cari kode di bawah ini:</div>
<blockquote>
<b:include data='feedLinks' name='feedLinksBody'/></blockquote>
</li>
<li><div align="justify">
Hapus/delete semua kode di atas, lalu Save Template, selesai.</div>
</li>
</ol>
 
<div style="text-align: justify;">
B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):</div>
<ol start="1" type="1">
<li style="text-align: justify;">Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;</li>
<li><div align="justify">
Cari kode di bawah ini:</div>
<div style="text-align: left;">
<blockquote>
<div class='feed-links'> 
<data:feedLinksMsg/> 
<b:loop values='data:links' var='f'> 
<a class='feed-link' expr:href='data:f.url' 
expr:type='data:f.mimeType' target='_blank'><data:f.name/> 
(<data:f.feedType/>)</a> 
</b:loop> 
</div></blockquote>
</div>
</li>
<li><div align="justify">
Hapus/delete semua kode di atas, lalu Save Template, selesai.</div>
</li>
</ol>
 
<div style="text-align: justify;">
Demikianlah tutorial sederhana cara 
hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar
 (Atom) pada Blogspot ini</div>
 
<div style="text-align: center;">
Semoga bermanfaat.</div>
</div>

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan...

10May2014

Membuat Sitemap Atau Daftar isi Keren di Blogspot

Unknown May 06, 2014 6 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghUWdZlbdDQ1mv9b3k6_v477TT-YRBPLpv22-_JwvHf0bJ1o6aI0a3H0vcDkRlGVam4ULLR37pkFwYgh-ZUadCzo61HzlvZDLbL69YBbghMdZCe1gKjlhN4G_GeS6LjYnuGg7o1j6CGiU/s1600/daftar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghUWdZlbdDQ1mv9b3k6_v477TT-YRBPLpv22-_JwvHf0bJ1o6aI0a3H0vcDkRlGVam4ULLR37pkFwYgh-ZUadCzo61HzlvZDLbL69YBbghMdZCe1gKjlhN4G_GeS6LjYnuGg7o1j6CGiU/s1600/daftar.jpg" width="320" /></a></div>
 
 
 
Kebanyakan
 Blogger pasti sudah paham betul apa itu sitemap, yang mana halaman 
sitemap akan mempermudah para pengunjung untuk menelusuri label demi 
label yang ada di seluruh isi blog atau website. karena manfaatnya yang 
begitu besar maka hampir sebagian besar para blogger menanamkan halaman 
sitemap di halaman kesayangannya. 
 
Silahkan Dilihat dulu Previewnya <a href="http://pehbate.blogspot.com/p/daftar-isi.html">DISINI</a> 
 
 
<div style="margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
Berikut adalah langkah-langkahnya:</div>

<div style="margin: 0px; outline: medium none; padding: 0px; vertical-align: baseline;">
</div>

<ul style="list-style-image: initial; list-style-position: initial;">
<li style="margin: 0px; outline: medium none; padding: 0px; vertical-align: baseline;">Masuk ke akun blogger sobat</li>
<li style="margin: 0px; outline: medium none; padding: 0px; vertical-align: baseline;">Masuk ke menu laman dan buat halaman baru</li>
<li style="margin: 0px; outline: medium none; padding: 0px; vertical-align: baseline;">Silahkan kasih judul Sitemap </li>
<li style="margin: 0px; outline: medium none; padding: 0px; vertical-align: baseline;">Kemudian dalam keadaan mode edit html silahkan copy paste script di bawah ini :</li>
</ul>
 <div 1px="1px" solid="solid" style="height: 620px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;"> <link
 
href="https://sites.google.com/site/republicofnote/script/SitemapV2.css"
 media="screen" rel="stylesheet" type="text/css" /> <script src="https://sites.google.com/site/republicofnote/script-1/daftarisipackv2.js"></script> <script src="http://pehbate.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> <script type="text/javascript"> var accToc=true; </script> <script
 
src="https://sites.google.com/site/republicofnote/script-1/daftarisiv2.js"
 type="text/javascript"></script></div> 
 
 
<div class="post-body entry-content" id="post-body-482772364079399999" itemprop="description articleBody">

<li style="margin: 0px; outline: medium none; padding: 0px; text-align: justify; vertical-align: baseline;">Untuk setting lebar dan tingginya silahkan ubah script nilai height dan width-nya. dibawah ini contoh tinggi saya buat 620px dan lebar saya buat auto alias menyesuaikan lebar halaman sitemap</li>
<li style="margin: 0px; outline: medium none; padding: 0px; text-align: left; vertical-align: baseline;">Dan ubah http://irrandy.blogspot.com menjadi nama blog sobat^^</li>
<li style="margin: 0px; outline: medium none; padding: 0px; text-align: start; vertical-align: baseline;">Simpan perubahan.</li>
</div>
 
Selamat Mencoba. 
<div>
 
  
<div>
</div>
</div>
</div>

Kebanyakan Blogger pasti sudah paham betul apa itu sitemap, yang mana halaman sitemap akan mempermudah para pengunjung untuk menelusuri label demi label yang ada di seluruh isi blog atau web...

06May2014

Menampilkan Rating Bintang Di Google

Unknown May 03, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Menampilkan Rating Bintang Di Google merupakan salah satu cara 
untuk menampilkan banyaknya review terhadap blog atau artikel blog yang 
berguna dalam optimasi SEO agar blog atau artikel blog mendapatkan posisi yang baik di SERP karena banyaknya view page atau halaman yang tampil. Selain itu, dengan menerapkan "menampilkan rating bintang di Google",
 juga akan menjadi daya tarik tersendiri dan meningkatkan nilai klik 
karena adanya tampilan rating bintang untuk artikel blog di search 
engine seperti tampilan gambar berikut ini: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSaXvj1C-3BLagHRzc1TxJu9NE-bU2PiaxIBxvfXIsk2rBQC48s1QWee1difbvsFl-MgGIu6qQoMIyt2GtAOcedQMjTcq1eBPE1RtGAGabGg9EemlT8nVA2aAvR-gcHlSmFsuSjsFsHc/s1600/2014-05-03_172304.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSaXvj1C-3BLagHRzc1TxJu9NE-bU2PiaxIBxvfXIsk2rBQC48s1QWee1difbvsFl-MgGIu6qQoMIyt2GtAOcedQMjTcq1eBPE1RtGAGabGg9EemlT8nVA2aAvR-gcHlSmFsuSjsFsHc/s1600/2014-05-03_172304.jpg" width="400" /></a></div>
 
Berikut Cara Menampilkan Rating Bintang Di Google 
 
<ul style="text-align: left;">
<li>Anda harus punya akun di Google Plus terlebih dahulu, jika belum silahkan klik <a href="https://plus.google.com/" rel="nofollow" target="_blank">https://plus.google.com/</a> </li>
</ul>
<ul style="text-align: left;">
<li>Masuk ke akun blogger anda. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard. </li>
</ul>
<ul style="text-align: left;">
<li>Cari kode <head></li>
</ul>
<ul style="text-align: left;">
<li>Tempatkan kode <link href='https://plus.google.com/113748039543292949277' rel='author'/> tepat dibawah kode <head>. 
Sebelumnya, 113748039543292949277 merupakan ID dari Contoh akun Google Plus, silahkan ganti dengan ID Google Plus anda. </li>
<li>Cari kode <body></li>
<li>Tempatkan kode berikut tepat dibawah kode <body> 
<div> 
<div itemscope='' itemtype='http://data-vocabulary.org/Review'> </li>
<li> Cari kode </body></li>
<li> Tempatkan kode </div></div> tepat diatas kode </body></li>
<li>Cari kode post-title entry-title dengan hasil pencarian seperti berikut:</li>
</ul>
<h3 class='post-title entry-title'><b:if cond='data:post.link'> 
<a expr:href='data:post.link'><data:post.title/></a> 
<b:else/> 
<b:if cond='data:post.url'> 
<a expr:href='data:post.url'><data:post.title/></a> 
<b:else/> 
<data:post.title/> 
</b:if> 
</b:if> 
</h3> 
</b:if> 
 
<ul style="text-align: left;">
<li>Tempatkan kode dan diantara kode post-title entry-title </li>
</ul>
<ul style="text-align: left;">
<li>Hasilnya sebagai berikut:</li>
</ul>
 
<h3 class='post-title entry-title '><b:if cond='data:post.link'> 
<a expr:href='data:post.link'><data:post.title/></a> 
<b:else/> 
<b:if cond='data:post.url'> 
<a expr:href='data:post.url'><data:post.title/></a> 
<b:else/> 
<data:post.title/> 
</b:if> 
</b:if> 
</h3> 
 
</b:if> 
 
<ul style="text-align: left;">
<li>Cari kode <data:post.body/> atau <data:post.body/>  </li>
</ul>
 
<ul style="text-align: left;">
<li>Tempatkan kode berikut tepat dibawah kode <data:post.body/> 
atau <data:post.body/> atau diantara 
elemen-elemen (Artikel terkait, sosial bookmark, dll) 
Description: <data:post.title></data:post.title> 
Rating: 3.5 
Reviewer: <data:post.author></data:post.author> 
ItemReviewed: <data:post.title></data:post.title> </li>
</ul>
 
<ul style="text-align: left;">
<li>Simpan Template.</li>
</ul>
 
<div style="text-align: left;">
<ul style="text-align: left;">
<li>Agar panduan cara membuat & menampilkan rating bintang di Google ini berhasil. Lakukan verifikasi penulis blog (author) ke akun Google Plus anda, dengan cara berikut ini:</li>
<li>Masuk ke akun Google Plus anda.</li>
<li>Klik menu Edit Profil yang ada disebelah atas.</li>
<li>Klik menu Kontributor Untuk yang ada disebelah bawah</li>
</ul>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHr5zFaOB57lDbxGG0kq536oBg3uSi0X4_HeKhT3KmgVLR7mzeQUZowDWN2Stqb3J3N9gUq1SB2euU1VfL-XEn7DbC1Is1pEhGVjAAUajbcdMbR4OckgJU3VecsX3Z-U0ld6mF_fS-f4/s1600/r2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHr5zFaOB57lDbxGG0kq536oBg3uSi0X4_HeKhT3KmgVLR7mzeQUZowDWN2Stqb3J3N9gUq1SB2euU1VfL-XEn7DbC1Is1pEhGVjAAUajbcdMbR4OckgJU3VecsX3Z-U0ld6mF_fS-f4/s1600/r2.jpg" width="400" /></a> 
Punya saya sudah ada seperti gambar diatas, tanpa menambah kontributornya lagi. 
 
Jika punya kalian belum ada silahkan ikutin cara dibawah ini:</div>
<div style="text-align: left;">
<ul>
<li>Klik tambahkan tautan khusus.</li>
<li>Isikan label dengan judul blog anda.</li>
<li>Isikan url dengan url blog anda.</li>
<li>Simpan</li>
<li>Klik Pengeditan Selesai.</li>
</ul>
</div>
<div style="text-align: left;">
Langkah terakhir, kunjungi <a href="http://www.google.com/webmasters/tools/richsnippets" rel="nofollow" target="_blank">http://www.google.com/webmasters/tools/richsnippets</a> untuk mengetahui berhasil tidaknya cara membuat & menampilkan rating bintang di Google ini. 
<ul>
<li>Isikan url dari link artikel blog anda</li>
<li>Jika berhasil, maka akan seperti gambar berikut ini</li>
</ul>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxPSExn9LaPbhLaUR8EqoN1W8nDDMIDLJH3TU-3-eqOH1Ip3BujzcoOvRFc4t1GQ6uhBabcAZnZs-_UvcsvKbhI-J2YpJgQIyWPMDtZZIMtVo90hMsiLAAObY4v2C4L_7EKqapTyf6RU/s1600/test.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxPSExn9LaPbhLaUR8EqoN1W8nDDMIDLJH3TU-3-eqOH1Ip3BujzcoOvRFc4t1GQ6uhBabcAZnZs-_UvcsvKbhI-J2YpJgQIyWPMDtZZIMtVo90hMsiLAAObY4v2C4L_7EKqapTyf6RU/s1600/test.jpg" width="400" /></a></div>
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
Selesai, terimakasih telah membaca artikel cara menampilkan rating bintang di Google ini. Semoga bermanfaat, jika ada kesalahan, silahkan tinggalkan komentar di cara menampilkan rating bintang di Google. </div>
</div>

Menampilkan Rating Bintang Di Google merupakan salah satu cara untuk menampilkan banyaknya review terhadap blog atau artikel blog yang berguna dalam optimasi SEO agar blog atau artikel blog mendapa...

03May2014

Cara menambahkan gadget Artikel Terbaru di blogspot

Unknown May 03, 2014 1 Tutorial Blog

Assalamualakum.. kali ini saya ingin posting cara membuat gadget di blogspot. pertama buka akun blogger anda, lalu pilih Tata letak dan tambah kan gadget, pilih HTML/Java Script Paste Script dibawah...

03May2014

Tiga Posting menjadi Satu Laman

Unknown May 03, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQ11Syc4f5HGk7hQCTMM19zkw9-2eHPbigNuXxFJT-k_Ak0OjQiHuXXKK6yJ81zS3ktbGE5VVt1b1jCQKcjY3RT7TtXbcHOVGAxc1iNp4DoEynQ4OXrldt9b7_f88CoaCnbdi5LsnC-g/s1600/Snapshot_234.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQ11Syc4f5HGk7hQCTMM19zkw9-2eHPbigNuXxFJT-k_Ak0OjQiHuXXKK6yJ81zS3ktbGE5VVt1b1jCQKcjY3RT7TtXbcHOVGAxc1iNp4DoEynQ4OXrldt9b7_f88CoaCnbdi5LsnC-g/s1600/Snapshot_234.png" /></a></div>
<div class="content11" id="page-1">
1. Bagai mana caranya untuk membuat satu postingan dalam tiga halaman 
sekaligus di Blogger? Seperti kita ketahui pada posting atau artikel di 
blog, mungkin hampir semua artikel blog, menampilkan satu posting atau 
posting halama dengan masing-masing pada satu halaman saja. Seperti 
disebutka dari artikel ini adalah, contoh: Misalanya Anda ingin membuat 
posting seperti pada artikel ini untuk menghemat tempat di halaman 
postingan, dan ini memang sangat menghemat sebagai penghematan tempat</div>
 
<div class="content11" id="page-2">
2. Cara kerjanya dari halaman ini adalah:Jika Anda akan membuat konten 
untuk ditampilkan di halaman posting baru blog, maka artikel akan muncul
 di halaman pertama dan secara otomatis tombol judul akan memberi tanda 
dengan font lebih besar pada tombol tersebut. Pada tombol judul 
berikutnya (2) pun Anda, dapat mengisi dengan artikel-artikel yang 
berhubungan dengan konten terkait satu dengan yang lainnya agar tersusun
 dari halaman pertama hingga halaman yang terakhir</div>
<div class="content11" id="page-3">
3. Codenya sebagai berikut di bawah ini:

<div class="MsoNormal" style="background: #FCE5CD; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js"
></script></div>
<div class="MsoNormal" style="background: #FCE5CD; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<script
type="text/javascript">activatables('page', ['page-1',
'page-2','page-3' ]);</div>
<div class="MsoNormal" style="background: #FCE5CD; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
</script></div>

<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
<style> </div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
div.content11 {clear: left;padding: 4em;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
div.content11.inactive {display:
none;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
ol#toc {height: 4em;list-style: none;margin: 0;padding: 0;}        
ol#toc a {padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px
solid #ff9900;-webkit-border-radius:3px;-moz-border-radius:3px;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
ol#toc a:hover {background-color: #6aa84f;padding: 0px 8px 0px;border:1px solid
#000000;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
ol#toc a:hover span {background-position: 150% -120px;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
ol#toc li {float: left;margin: 0 6px 0 0;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
          ol#toc li
a.active {background-color: #f8f804;background-position: 0 -60px;color:
#ff0000;font-weight: bold;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
ol#toc li a.active span {background-position: 150% -60px;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
         
ol#toc span {background: url(tabs.gif) 150% 0;display: block;line-height:
4em;padding-right: 20px;}</div>
<div class="MsoNormal" style="background: #CFE2F3; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
</style></div></div>

<div class="MsoNormal" style="background-color: #ead1dc; color: #351c75;">
</div></div>
<div class="MsoNormal" style="background-color: #ead1dc; color: #351c75;">
<ol id="toc"></div>
<div class="MsoNormal" style="background-color: #ead1dc; color: #351c75;">
<li><a href="#page-1">1</a></li></div>
<div class="MsoNormal" style="background-color: #ead1dc; color: #351c75;">
<li><a href="#page-2">2</a></li></div>
<div class="MsoNormal" style="background-color: #ead1dc; color: #351c75;">
<li><a href="#page-3">3</a></li></div>
<div class="MsoNormal" style="background-color: #ead1dc; color: #351c75;">
</ol></div>
 
Cara memasangnya: 
 Atur code dengan teliti, bila ada kesalahan satu code sajja, maka halaman ini tidak akan befungsi. Setelah selesai lalu klik Publish 
Jika Anda merasa kesulitan dalam penerapan code ini silakan bertanya lewat komentar. 
Buka dan masuk ke Blogger teruskan Klik New Post.
Lalu klik lagi pada halaman posting baru dalam posisi HTML, kemudian paste code tadi seperti pada contoh gambar di bawah ini: 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkbSBNy341OEviI8qkH673GgcJKemS9DfHPTyDb0BxLTVC2Jc3lzROwa41R2Rx4OCn3QiO_SICkoU8Q8c9Y5D7cenMGzDr6cHKQEoiyiR2xEIzrRA1mqY2kBsCVKmNAyzmXUys96w3p7d5/s320/Snapshot_233.png" width="320" /> </div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
Selamat mencoba. </div>
</div>
</div>

1. Bagai mana caranya untuk membuat satu postingan dalam tiga halaman sekaligus di Blogger? Seperti kita ketahui pada posting atau artikel di blog, mungkin hampir semua artikel blog, menampilkan...

03May2014

Membuat Related Post Dibawah Postingan

Unknown April 26, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Contohnya Seperti Gambar Dibawah ya gan.. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko6eFPc6rgZ9y_rhSfp4LN1lntoy90_ame6rqNblCvmkBIRslewCtWHo0EaWhX2x0Szgov99yjpfzHqPad5Ov3IE-rCtj9iiexEA4qSzL_Sl3v7utCVM-SX3NP-8ASwv-YG2CGuhYUSM/s1600/2014-04-27_015722.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko6eFPc6rgZ9y_rhSfp4LN1lntoy90_ame6rqNblCvmkBIRslewCtWHo0EaWhX2x0Szgov99yjpfzHqPad5Ov3IE-rCtj9iiexEA4qSzL_Sl3v7utCVM-SX3NP-8ASwv-YG2CGuhYUSM/s1600/2014-04-27_015722.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
Nah, sekarang kita buat ya,,</div>
ikuti tahap-tahap dibawah ini: 
<div class="separator" style="clear: both; text-align: left;">
1. Masuk ke edit template</div>
2. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian) 
3. Copy script dibawah ini Di atas kode </head> 
-------------------------------------------------------------------------------------------------- 
<blockquote class="tr_bq">
<script type="text/javascript"> 
//<![CDATA[ 
var relatedTitles = new Array(); 
var relatedTitlesNum = 0; 
var relatedUrls = new Array(); 
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) { 
var entry = json.feed.entry[i]; 
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) { 
if (entry.link[k].rel == 'alternate') { 
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}} 
function removeRelatedDuplicates() { 
var tmp = new Array(0); 
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) { 
if(!contains(tmp, relatedUrls[i])) { 
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;} 
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;} 
function printRelatedLabels() { 
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) { 
document.write('<li><a href="' + relatedUrls[r] + '">' + 
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} 
else {
r = 0;}
i++;}
document.write('</ul>');} 
//]]> 
</script> </blockquote>
---------------------------------------------------------------------------------------------------------  
note: Tes aja di kode pertama anda menemukannya,, kalau gak bisa, tes di tempat kedua, begitu seterusnya,, 
 
klik simpan, lalu klik salah satu postingan agan,, 
jika muncul, berarti sudah berhasil, 
jika belum mncul tes di tempat kedua kode <data:post.body/> , begitu seterusnya,, 
ok, sekian dulu ya gan, sampai jumpa lagi.</div>

Contohnya Seperti Gambar Dibawah ya gan.. Nah, sekarang kita buat ya,, ikuti tahap-tahap dibawah ini: 1. Masuk ke edit template 2. Carilah kode (Gunakan Ctrl+F untuk mempermudah pencarian)...

26Apr2014

Cara Membuat Multi Menu Drop Down

Unknown April 23, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
1. Login ke Blog kamu. 
2. Pilih Menu Edit HTML, cari kode ]]></b:skin> 
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode Di tahap 2. 
 
.ddsmoothmenu{ 
font: bold 12px Verdana; 
background: #414141; /*background of menu bar (default state)*/ 
width: 100%; 
} 
.ddsmoothmenu ul{ 
z-index:100; 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
/*Top level list items*/ 
.ddsmoothmenu ul li{ 
position: relative; 
display: inline; 
float: left; 
} 
/*Top level menu link items style*/ 
.ddsmoothmenu ul li a{ 
display: block; 
background: #414141; /*background of menu items (default state)*/ 
color: white; 
padding: 8px 10px; 
border-right: 1px solid #778; 
color: #2d2b2b; 
text-decoration: none; 
} 
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ 
display: inline-block; 
} 
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ 
color: white; 
} 
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ 
background: black; 
color: white; 
} 
.ddsmoothmenu ul li a:hover{ 
background: black; /*background of menu items during onmouseover (hover state)*/ 
color: white; 
} 
/*1st sub level menu*/ 
.ddsmoothmenu ul li ul{ 
position: absolute; 
left: 0; 
display: none; /*collapse all sub menus to begin with*/ 
visibility: hidden; 
} 
/*Sub level menu list items (undo style from Top level List Items)*/ 
.ddsmoothmenu ul li ul li{ 
display: list-item; 
float: none; 
} 
/*All subsequent sub menu levels vertical offset after 1st level sub menu */ 
.ddsmoothmenu ul li ul li ul{ 
top: 0; 
} 
/* Sub level menu links style */ 
.ddsmoothmenu ul li ul li a{ 
font: normal 13px Verdana; 
width: 160px; /*width of sub menus*/ 
padding: 5px; 
margin: 0; 
border-top-width: 0; 
border-bottom: 1px solid gray; 
} 
/* Holly Hack for IE \*/ 
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ 
 
/* ######### CSS classes applied to down and right arrow images ######### */ 
.downarrowclass{ 
position: absolute; 
top: 12px; 
right: 7px; 
} 
.rightarrowclass{ 
position: absolute; 
top: 6px; 
right: 5px; 
} 
/* ######### CSS for shadow added to sub menus ######### */ 
.ddshadow{ 
position: absolute; 
left: 0; 
top: 0; 
width: 0; 
height: 0; 
background: silver; 
} 
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/ 
opacity: 0.8; 
} 
 
 
4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head> 
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/> 
 
 
5. Selanjutnya cari kode yang mirip dengan kode di bawah ini. 
 
<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='Nama Blog (Header)' type='Header'/> 
</b:section> 
</div> 
 
  
  Punya saya seperti ini : (Template Bawaan Blogger) 
         <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>           <b:include name='description'/>         </b:if>       </div> 
  
   Kode di atas merupakan kode bagian Header
 dan untuk yang berwarna merah biasanya itu adalah judul header blog 
anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu 
letakan kode di bawah ini tepat di bawah kode bagian akhir kode header 
di atas (letakan tepat di bawah kode yang berwarna biru). 
 
<div class='ddsmoothmenu' id='smoothmenu1'> <ul> <li><a href='http://pehbate.blogspot.com/'>Home</a></li> <li><a href='#'>Download</a> <ul> <li><a href='http://pehbate.blogspot.com/p/software.html'>Software</a></li> <li><a href='#'>Modul Kuliah</a> <ul> <li><a href='http://pehbate.blogspot.com/p/modul-manajemen-informatika.html'>Manajemen Informatika</a></li> <li><a href='#'>Akan Hadir</a></li> </ul> </li> </ul> </li> <li><a href='#'>Tutorial</a> <ul> <li><a href='http://pehbate.blogspot.com/p/tutorial-jaringan.html'>Jaringan</a></li> <li><a href='#'>Komputer</a> <ul> <li><a href='#'>Sistem Operasi</a> <ul> <li><a href='http://pehbate.blogspot.com/p/tutorial-windows.html'>Windows</a></li> <li><a href='http://pehbate.blogspot.com/p/tutorial-kali-linux.html'>Kali Linux</a></li> </ul> </li> <li><a href='#'>Hardware</a></li> </ul> </li> <li><a href='http://pehbate.blogspot.com/p/tutorial-blog.html'>Blogspot</a></li> <li><a href='#'>Pemograman</a> <ul> <li><a href='http://pehbate.blogspot.com/p/tutorial-visual-basic.html'>Visual Basic</a></li> <li><a href='http://pehbate.blogspot.com/p/tutorial-mysql.html'>Mysql</a></li> <li><a href='http://pehbate.blogspot.com/p/tutorial-turbo-pascal.html'>Turbo Pascal</a></li> </ul> </li> </ul> </li> <li><a href='#'>Tips Dan Triks</a> <ul> <li><a href='#'>Laptop</a> <ul> <li><a href='http://pehbate.blogspot.com/p/lenovo.html'>Masalah Lenovo</a></li> </ul> </li> <li><a href='http://pehbate.blogspot.com/p/printer.html'>Printer</a></li> <li><a href='http://pehbate.blogspot.com/p/trik-lainnya.html'>Trik Lainnya</a></li> </ul> </li> <li><a href='#'>Pengetahuan</a> <ul> <li><a href='#'>Bahan Kuliah</a> <ul> <li><a href='http://pehbate.blogspot.com/p/manajemen-informatika.html'>Manajemen Informatika</a></li> </ul> </li> <li><a href='#'>Tahukah Anda</a></li> </ul> </li> <li><a href='#'>Akan Hadir</a></li> </ul> <div class='menusearch'> <div style='float:right;padding:8px 8px 0 0;'>   <form action='http://pehbate.blogspot.com/search/label/' method='get' target=''> <input name='sitesearch' style='display:none;' value='http://pehbate.blogspot.com'/> <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVifs96UN1-1spm9Yw-6VaqZBzMg4SnTxMTGpSV8de3_b36ol5Iu4ArhECRzPDppRsO023f65JyA_pvdLiK8janwWQRqCw2CLYhf9SCkQuBppwnBLlO3qFkLjsj-ojgzXl-8m2Gl6-hY/s1600/field-bg.gif) no-repeat;' type='text' value='Search'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTL5y0SLx9CI21O7HmJNdGqeO6WSN0dr7md4P9r_P7zCIrDwOkHViIUVBqH-QNV2f9IS2z5ZmdyNXF_wEtsqVObUfWwwtTQYBNl7qZ1tPiOwvr-Oh9eOMYxxiICWaL2e7A-mdOowi-Dc4/s1600/bg_search.gif' type='image' value='Search'/> </form></div></div> </div><div style='clear:both;'/>   
 
maaf gan gak sempat edit,, ane Buru-buru ni mau ke kampus,, Silahkan di edit link-Link Blog saya dengan link-link blog agan.. Ok. Selamat Mencoba ya gan..</div>

1. Login ke Blog kamu. 2. Pilih Menu Edit HTML, cari kode ]]> 3. Setelah ketemu letakan kode di bawah ini tepat di atas kode Di tahap 2. .ddsmoothmenu{ font: bold 12px Verdana; background: #414141; ...

23Apr2014

Hanya Menampilkan Judul Posting Pada Halaman Awal Blog

Unknown April 23, 2014 Tutorial Blog

ok gan,, saya berpura-pura agan sudah posisi edit template :P langsung saja: 1. Cari kode 2. Gantikan Kode tersebut dengan script dibawah Mudah kan gan :D ok, selamat mencoba..

23Apr2014

Cara Buat Postingan Utama blog Dengan Thumbnail

Unknown April 22, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
capek ane cari2 cara di google,, 
gak ada yang bisa,, 
Ok,, 
Mungkin dengan cara pengalaman ini,, agan pasti bisa menangkali auto readmore lainnya 
langsung aja ya gan... 
 
saya anggap agan udah di bagian edit template yah.. 
1. Cari kode  </head> 
2. Tepat diatas kode </head> Pastekan Script di bawah ini 
------------------------------------------------------------------------------------------------------------------ 
<pre class="numbered" data-codetype="CSS+HTML+JQuery" title="Double Click to Copy"><code class="xml">
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 60;
img_thumb_width = 100;
</script>

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script></code></pre>
<pre class="numbered" data-codetype="CSS+HTML+JQuery" title="Double Click to Copy"><code class="xml"> </code></pre>
<pre class="numbered" data-codetype="CSS+HTML+JQuery" title="Double Click to Copy"><code class="xml"> </code></pre>
------------------------------------------------------------------------------------------------------------------ 
 
Ok,saya anggap agan udah Memastekannya.. 
 
Sekarang tahap selanjutnya: 
3. Carilah Kode  <data:post.body/> 
 
 
   Disini ane mendapatkan 3 kode yang sama gan :D 
ane pake yang kedua,, 
4. Blok kode <data:post.body/> Lalu paste kan Script dibawah ini: ---------------------------------------------------------------------------------------------------------------------- 
 
<pre data-codetype="CSS+HTML+JQuery"><code class="xml"><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if> </code></pre>
<pre data-codetype="CSS+HTML+JQuery"><code class="xml"> </code></pre>
<pre data-codetype="CSS+HTML+JQuery"><code class="xml">--------------------------------------------------------------------------------</code></pre>
<pre data-codetype="CSS+HTML+JQuery"><code class="xml"> </code><code class="xml"> </code></pre>
 Tunggu dulu gan,, disini ane mendapatkan masalah, yaitu ada script yang tidak ter spasi sesudah mem pastekan Script di atas,, 
 
nah agan tau akhiran script di ataskan? 
yaitu : 
<pre data-codetype="CSS+HTML+JQuery"><code class="xml"></b:if>
</b:if> </code></pre>
<pre data-codetype="CSS+HTML+JQuery"><code class="xml">
</code></pre>
<code></code>Sekarang agan tekan enter sekali sesudah akhiran script di atas.. 
 
ok,, sekarang di save ya gan.. 
jika tidak bisa,, komentar saja,, 
insyaallah saya balas. 
 
 </div>

capek ane cari2 cara di google,, gak ada yang bisa,, Ok,, Mungkin dengan cara pengalaman ini,, agan pasti bisa menangkali auto readmore lainnya langsung aja ya gan... saya anggap agan udah di bagia...

22Apr2014

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Unknown April 22, 2014 Tutorial Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header: 
 
1. Seperti biasa sobat harus login dulu di akun blog sobat 
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan 
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan 
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin> 
 
   /* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ8E14mIrRPEhrAzs6xE7R0ZOk6WhaNxNpZjNaWGM3BOKQAWKe2ezSz_Rd3wdy35LF2bkg2rs6crZB8MV24gWEJotOMmbU0ZtkygyuW3r8Ks31hg30JptUUC5UcOfnvjzn9GbanFMk8Kk/s1600/menubar.png)
 repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:35px;margin:0 auto}
.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, 
serif;margin:0;padding:0}
#menubar 
a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px
 solid #191919;padding:12px 10px 8px}
#menubar 
a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq_Xzh4Jbeb7yPsf0wsdxRsmyySpJIRLL7_xzZSD6z-NIw5NQupD53EJrAOFvx2u8BR7GT4YbA2cPlB097QXm37uZz8WS_n8uLxDOKaHYnTIWnFZmjyf_17aWYfayd3xZNvBs16yXYi1c/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right
 center;padding:12px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li 
a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px
 10px}
#menubar li 
ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0
 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr 
a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul 
a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid 
#000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul 
a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} 
 
 
 
Selanjutnya sobat blogger cari kode berikut: 
<ul>
<li><header>  : untuk menempatkan menu di atas nama blog</li>
<li></header> : untuk menempatkan menu di bawah nama blog</li>
</ul>
Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header> 
 
   
 <div id='menuwrapperpic'> 
<div id='menuwrapper'> 
<ul id='menubar'> 
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWszZ1Lg1HIh2mPjr9S8Dnbd5JNE0sKX05XqtKsscNPZQ26b0mU562QQnSsdrr9A0v6qpLp6RBRC1_Mgb0l2563TvObugWpfgrC20UbzV9eHDcm0L2-XlMbOTmRrh7IjXGGWTeX9WOYI/s1600/home_white.png' style='padding:0px;'/> Home</a></li> 
<li><a href='http://pehbate.blogspot.com/p/blog-page_13.html'>Windows</a></li> 
<li><a href='http://pehbate.blogspot.com/p/backtrack.html'>Kali linux</a></li> 
<li><a class='trigger'>Download</a> 
<ul> 
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Software</a></li> 
<li class='hr'/> 
<li><a href='http://pehbate.blogspot.com/p/best-site-games-pc.html' target='new'>Best Site PC Games</a></li> 
<li class='hr'/> 
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li> 
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li> 
</ul> 
</li> 
<li><a class='trigger'>Tutorial</a> 
<ul> 
<li><a href='http://pehbate.blogspot.com/p/j.html'>Jaringan</a></li> 
<li class='hr'/> 
<li><a href='#'>Komputer</a></li> 
<li class='hr'/> 
<li><a href='#'>Blogspot</a></li> 
<li class='hr'/> 
<li><a href='#'>Visual Basic</a></li> 
<li class='hr'/> 
<li><a href='#'>Turbo Pascal</a></li> 
</ul> 
</li> 
<li><a class='trigger'>Pengetahuan</a> 
<ul> 
<li><a href='#'>Jaringan</a></li> 
<li class='hr'/> 
<li><a href='#'>Komputer</a></li> 
<li class='hr'/> 
<li><a href='#'>#</a></li> 
</ul> 
</li> 
</ul> <div class='menusearch'> 
<div style='float:right;padding:8px 8px 0 0;'> 
  <form action='http://pehbate.blogspot.com/search/label/' method='get' target=''> 
<input name='sitesearch' style='display:none;' value='http://pehbate.blogspot.com'/> 
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVifs96UN1-1spm9Yw-6VaqZBzMg4SnTxMTGpSV8de3_b36ol5Iu4ArhECRzPDppRsO023f65JyA_pvdLiK8janwWQRqCw2CLYhf9SCkQuBppwnBLlO3qFkLjsj-ojgzXl-8m2Gl6-hY/s1600/field-bg.gif) no-repeat;' type='text' value='Search'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTL5y0SLx9CI21O7HmJNdGqeO6WSN0dr7md4P9r_P7zCIrDwOkHViIUVBqH-QNV2f9IS2z5ZmdyNXF_wEtsqVObUfWwwtTQYBNl7qZ1tPiOwvr-Oh9eOMYxxiICWaL2e7A-mdOowi-Dc4/s1600/bg_search.gif' type='image' value='Search'/> 
</form></div></div> </div><div style='clear:both;'/></div> 
 
 
silahkan sesuaikan dengan keinginan anda </div>

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header: 1. Seperti biasa sobat harus login dulu di akun blog sobat 2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan 3. Centang &q...

22Apr2014

R2 Blog

Labels

Comment

Technology

Articles by "Tutorial Blog"

Membuat Tombol Share di Bawah Posting Blog

Cara Menghilangkan Newer Post, Home dan Older Post

Cara Menghilangkan Newer Post, Home dan Older Post

Membuat Widget Tab View 3 Kolom

Cara membuat Recent Comments pada blog

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Membuat Sitemap Atau Daftar isi Keren di Blogspot

Menampilkan Rating Bintang Di Google

Cara menambahkan gadget Artikel Terbaru di blogspot

Tiga Posting menjadi Satu Laman

Membuat Related Post Dibawah Postingan

Cara Membuat Multi Menu Drop Down

Hanya Menampilkan Judul Posting Pada Halaman Awal Blog

Cara Buat Postingan Utama blog Dengan Thumbnail

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Author Name

Contact Form