Home » Blog Tutorial
Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan

Cara Memasang Scroll Box di Komentar Blog

Cara Memasang Scroll Box di Komentar Blog - Fungsi scroll box jika komentar pada blog banyak maka komentar tersebut tidak memanjang kebawah, jika ingin melihat komentar cukup menggeser scroll box nya. Berikut ini cara memasangnya -

1.Login
2.Design > Edit HTML > Centang expand widget templates.
3.Kemudian cari kode seperti ini #comments-block{
4.Setelah itu akan dijumpai kode yang seperti dibawah ini

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

5.Dan selanjutnya ganti tulisan yang berwarna dengan kode di bawah ini

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

6.Save template dan selesai.

Nb - Ganti angka 300 sesuai keinginan. ----selamat mencoba----
Read More →

Cara Membuat Related Post dengan Gambar / Thumbnail

Cara Membuat Related Post dengan Gambar / Thumbnail - Berikut ini cara membuat related post dengan gambar yang terletak dibawah postingan blog.
Fungsi related post ini untuk menyajikan artikel lain kepada pengunjung blog. Berikut ini cara membuatnya -

1.Login
2.Design > Edit HTML > Centang expand widget templates.
3.Cari kode </head> (Ctrl+F untuk mempermudah pencarian) kemudian paste kode di bawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails*Scripts and Styles Start-->
<!-- remove --><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.2em;
font-weight: bold;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
.post-body img {border:none;}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhthWE3UIlFEG2j2ZrzXvSGGtg37qbUcsRSVmCCfGcKLGGrmUvOqna8GOrgAdP0YM0ELERM0FW4uW3yycDJVbWs7-jvemtvT1TcgamUyjPw-iHBmD1qRG8-r5INTlwLJ2emnQdVJd4v8rw/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Software Terkait Yang Mungkin Anda Cari&quot;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4.Lanjut lagi, cari kode seperti dibawah ini

<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

5.Kalau sudah ketemu, sekarang paste kode berikut di bawah kode tadi.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

6.Save template dan selesai.
Read More →

Cara Membuat Otomatis Refresh Di Blog

Cara Membuat Otomatis Refresh Di Blog - Fungsi Refresh pada blog ini adalah menyegarkan halaman pada blog. Pada umumnya Refresh menggunakan F5 atau cara lainnya namun kali ini dibuat secara otomatis. Berikut ini cara membuatnya -

1.Login
2.Masuk ke Rancangan >> Edit HTML
3.Cari kode </head> (Ctrl+F lebih cepat pencarian)
4.Letakkan kode berikut ini setelah kode </head>

<meta content=’200‘ http-equiv=’refresh’/>

5.Simpan template

Nb - Ganti angka 200 sesuai keinginan, angka 200 menunjukkan rentang waktu 200 detik.
----selamat mencoba----
Read More →

Cara Buat Tombol Back To Top di Blogspot

Cara Buat Tombol Back To Top di Blogspot - Tombol Back To Top adalah sebuah tombol yang berguna untuk mempercepat scrolling dari bawah keatas di sebuah blog page.
Back To Top yang akan dibuat disini menggunakan Efek jQuery ini sedikit lebih lembut. Lansung saja untuk membuatnya -

1. Langkah pertama Sudah pasti Login
2. Pilih Template >> Edit HTML >> klik Expand Widget Template
3. Cari kode </body> (lebih cepat pencarian gunakan CTRL+F)
4. Copy kode dibawah ini dan Paste tepat diatas kode </body> (jika kode dibawah sudah ada pada template , kode dibawah tidak perlu dipasang)

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

5. Kemudian Copy lagi kode dibawah ini dan Paste tepat dibawah kode diatas.

<script src='http://yourjavascript.com/387011122541/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Andi - Andisitorus.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_lJzX93LOUfq7ljiwkmzORnL8i_YXTJVKVEi19c8ucHu31ULYt5jMB10-EqXDjGZ54nXjdju7KBvfbNjW08ihvPMDvc5XCddDVaRed3BB-FJ5uXhGDD3q1Eqg749oYAhh7ItQp_A8Q4/s1600/back-to-top.gif'/></a>

Selesai. ----selamat mencoba----
Read More →

Cara Membuat Breadcrumb Terindex Google

Cara Membuat Breadcrumb Terindex Google
Cara Membuat Breadcrumb Terindex Google - Beberapa waktu lalu saya pernah posting artikel cara membuat navigasi breadcrumb di blog, tapi itu hanyalah tutorial bagaimana kita bisa membuat navigasi breadcrumb biasa. Sedangkan yang ini beda, breadcrumb yang ini bisa terindex oleh google. Oke, langsung saja Cara Membuat Breadcrumb Terindex Google:

1. Seperti biasa silahkan masuk ke dashbor blog sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Cari kode berikut ini:
]]></b:skin>

4. Pastekan kode di bawah tepat di atas kode di atas:
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

5. Next cari kode berikut:
<b:includable id='main' var='top'>

6. Setelah ketemu, hapus 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'/>

7. Simpan Template Sobat.

Untuk mengetes kinerja dari breadcrumb ini, silahkan sobat posting artikel kemudian memasukkannya dalam salah satu label blog sobat. Untuk mengecek postingan sobat terindex apa belum, silahkan masukkan url postingan blog sobat tadi ke Google, maka akan terlihat apakah breadcrumb sobat bisa terindex atau tidak. Saya kira cukup penjelasan mengenai cara agar breadcrumb bisa terindex google. Selamat mencoba dan semoga berhasil. (sumber : amronbadriza.blogspot.com)
Read More →

Cara Membuat Daftar Isi di Blogger

Cara Membuat Daftar Isi di Blogger
Cara Membuat Daftar Isi di Blogger - Daftar isi diblog adalah kumpulan atau isi dari semua postingan yang ada pada blog. Semua postingan akan tampil pada daftar isi. Daftar isi yang akan dibuat juag memakai New!!! itu tanda pada postingan terbaru.

[ DEMO ]

1. Masuk ke blogger.
2. Masuk ke design/rancangan.
3. Di bagian elemen laman pilih "Tambah Gadget/Add a Gadget".
4. Pilih HTML/JavaScript.
5. Copy dan pastekan Code Di Bawah ini:

Code daftar isi yang menggunakan fungsi scroll

<div style="background: #F0F0F0; border: 1px solid #F0F0F0; height: 300px; overflow: auto; padding: 10px; width: 250px;"><script style="text/javascript" src="http://yourjavascript.com/3125010235/daftarisi.js.htm.js"></script><script src="http://www.andisitorus.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Code daftar isi yang tidak menggunakan fungsi scroll

<script style="text/javascript" src="http://yourjavascript.com/3125010235/daftarisi.js.htm.js"></script><script src="http://www.andisitorus.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

6. Next simpan. Selamat mencoba !!!!!
Keterangan : Ganti http://www.andisitorus.com dengan alamat url blog sobat.
(by post)
Read More →

Cara Membuat Recent Comment dengan Avatar

Cara membuat Recent Comment dengan Avatar di blog, sebelumnya saya sudah share cara membuat recent comment tapi recent comment yang ini jelas berbeda, recent comment yang menampilkan Avatar .


Langsung saja Cara Membuat Recent Comment di Blog :

1.Login ke blog sobat.
2.Pilih Rancangan.
3.Pilih Add a Gadget > Tambah Gadget.
4.Kemudian pilih HTML / JavaScript.
5.Kemudian Copy dan pastekan Code dibawah ini :

<div style="height: 180px; overflow:auto; text-align: left; width: 300px;">
<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 = 30,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://www.andisitorus.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>
</div>

6.Selesai.
Keterangan : Ganti http://www.andisitorus.com dengan alamat Url blog sobat, numComments = 10 : jumlah Comment yang tampil, avatarSize = 30 : atur besar atau kecil avatar nya. Selamat Mencoba!!!
(by post)

Read More →

Cara Membuat LABEL Dengan Fungsi Scroll

Bagi sobat yang memiliki banyak LABEL mungkin sedikit kerepotan dengan banyaknya LABEL karena terlalu memanjang kebawah jelas tentu pemborosan tempat. Lebih jelas lihat gambar di bawah ini :


Cara Membuat Label Dengan Fungsi Scroll :
1.Login ke blog sobat.
2.Pilih Rancangan.
3.Pilih Edit HTML.
4.Centang Expand Template Widget.
5.Cari Kode di bawah ini :


6.Kemudian Copy dan paste Kode berikut Tepat dibawah kode tersebut.


7.Kemudian cari kode di bawah ini :



8.Copy dan paste kode dibawah ini tepat diatasnya.


9.Next Simpan.

(by post)
Read More →
Langganan: Postingan (Atom)
Home
Tentang
Demo
Facebook
Twitter