Tutorials & Tricks

Membuat Komentar FB di Blog All Template

Klik Template

Klik Expand Template Widget

Cari kode di bawah ini Menggunakan Ctrl+F

<div class='comments' id='comments'>

Setelah itu Paste kode di bawah ini di bawah kedua kode tadi (masing" Satu)

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Paste ID FB Sobat Disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

Lalu Simpan !!!

Cara Membuat Effect Gambar Berputar Saat Hover

0 comments

Judul postingan kali ini adalah cara membuat effet berputar pada gambar saat hover,effect berputar saat gambar di sentuh pointer,effect gambar berputar pada postingan,effect gambar berputar saat hover dengan mouse.

Sebenarnya cara ini sangat banyak terdapat di blog sahabat lainnya tapi kali ini saya hanya ingin sharing lagi untuk para blogger newbe seperti saya ini.

Sebagian template blogger sudah memiliki fasilitas atau effect seperti ini tapi bagaimana dengan template blogger yang belum memilikinya sedangkan para blogger newbe seperti saya ingin memilikinya,karena menurut saya ini dapat menjadi daya tarik tersendiri.

Judul postingan saya yaitu cara membuat effect berputar pada gambar saat hover tapi tidak hanya itu saja yang saya akan sharing,masih ada yang lainnya :

effect gambar bergoyang
effect gambar membesar atau effect zoom
effect gambar berputar dan membesar
effect gambar memiliki bayangan
effect gambar berubah bentuk

Pertama login dulu ke blogger dan menuju "Edit HTML" kemudian cari kode ]]></b:skin> dan copas kode dibawah tepat diatas kode ]]></b:skin> !

effect gambar berputar

Klik show untuk melihat

.post img {
border:1px solid #ffff01;
margin:3px;
max-width:570px;
padding:3px
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
}

.post img:hover {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);

}

effect gambar berputar dan membesar

Klik show untuk melihat

.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

effect gambar bergoyang

Klik show untuk melihat

.post img {
box-shadow: 0 3px 6px rgba(0,0,0,.25);
transform: rotate(+2deg);
-o-transform: rotate(+2deg);
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
box-shadow: 0 3px 6px rgba(0,0,0,.5);
transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

effect gambar membesar atau zoom

Klik show untuk melihat

.post img {
height:auto;
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

effect gambar memiliki bayangan

Klik show untuk melihat

.post img {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

effect gambar berubah bentuk

Klik show untuk melihat

.post img {
border-radius: 30px 0 30px 0;
-moz-border-radius: 30px 0 30px 0;
-webkit-border-radius: 30px 0 30px 0;
-o-border-radius: 30px 0 30px 0;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.post img:hover {
box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0;
}

Itu semua kode CSS nya dan bisa kalian edit sendiri sesuai dengan template blogger masing-masing.
Sekian dulu pertemuan hari ini dan selamat mencoba.

Terus mencari ilmu dan berbagi ilmu.

Source ( By Arimika ) : http://arimika90.blogspot.com/2012/08/cara-membuat-effect-hover-berputar-pada.html#ixzz2JZp7wNI4

Text Area

0 comments

Nassroom ▼

<div>
<form name="copy">
<div align="left">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /></div>
<div align="left">
<textarea cols="55" name="txt" rows="100" style="background-color: black; border: 1px dotted #ff0000; color: #ff0000; height: 80px; width: 550px;" wrap="VIRTUAL">TEXT</textarea></div>
</form>
</div>

------------------------------------------------------------------------------------------------------------

<div>
<form name="copy">
<div align="left">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /></div>
<div align="left">
<textarea cols="55" name="txt" rows="100" style="background-color: black; border: 1px dotted #ff0000; color: #ff0000; height: 80px; width: 550px;" wrap="VIRTUAL">TEXT</textarea></div>
</form>
</div>

------------------------------------------------------------------------------------------------------------

ROOM

------------------------------------------------------------------------------------------------------------

ROOM

------------------------------------------------------------------------------------------------------------

ROOM

------------------------------------------------------------------------------------------------------------

<div class='right'>
<a class='iconFacebook' href='#'>Facebook</a>
</div>

------------------------------------------------------------------------------------------------------------

ROOM ▼

------------------------------------------------------------------------------------------------------------

ROOM

------------------------------------------------------------------------------------------------------------

KODE SOBAT DISINI

------------------------------------------------------------------------------------------------------------

Cara Membuat Entri Populer Dengan Animasi Berputar

0 comments

Untuk contohnya sobat bisa lihat gambar di atas. sekarang mari kita bahas Cara Membuat Entri Populer Dengan Animasi Berputar di Blogger sobat.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (di bagian manapun sobat ingin widget ini muncul)

3. Lalu pilih Entri Populer ➨ Setting Entri Populer seperti gambar berikut, lalu simpan.

4. Selanjutnya pada menu klick Rancangan ➨ Edit HTML ➨ CentangExpand Template Widget.

5. Sekarang dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

6. Bila sudah ketemu sekarang letakkan kode berikut ini di atas kode tadi.

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

6. Cara di atas sebenarnya sudah bisa lansung di Simpan dan Entri Populer sobat sudah bisa berputar, tapi bentuknya masih memanjang ke bawah. Jika ingin membentuknya seperti pada gambar di atas maka silahkan ikuti langkah selanjutnya.

7. Jika ingin membentuknya seperti pada gambar di atas, maka kita harus menghancurkan kode Widget Entri Populer.

Bukan menghancurkan sebenarnya lebih tepatnya adalah mengganti kode widget Entri Populer.

8. Untuk membentuknya seperti pada gambar di atas sobat cari kode : PopularPosts1

9. Setelah ketemu sobat perhatikan sampai kode </b:widget> ,lebih lengkapnya ini :

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

10 .Lalu ganti atau hapus kode tersebut dan ganti dengan kode berikut :

<b:widget id='PopularPosts1' locked='false' title='Popular posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95Zx32KaYhz5Qn-RkR4H1on38asZnigaiHW4c3cCtzJ1ZXkLwjSlWUJDkhhTk-5ulwHWrr7Fjj79nNjEQsoRaZdPbCgZmrK2Hwl5W21aH5NAcZjrBBoRxF71Fgmpp08wUAtQgCBxP8ns/s1600/otowebsite.jpg'/> </b:if> </a> </div> </div> <b:else/>  <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

11. Simpan Template.

Sekarang sobat bisa lihat sendiri hasilnya dan coba arahkn cursor ke widget Entri Populer.

Sumber : http://otowebsite.blogspot.com/2012/06/cara-membuat-entri-populer-dengan_16.html#ixzz2ITg4aj00

Syntax Highlighter

0 comments

Halo.. apa kabar sobat blogger ?? semoga semua dalam keadaan baik ... oke, dalam kesempatan kali ini kami akan mencoba berbagi informasi mengenai Syntax Highlighter, mari kita bahas besama-sama.

Apa itu Syntax Highlighter ?

Syntax Highlighter terdiri dari dua suku kata yaitu Syntax ( identitas-deskripsi code ) dan Highlighter ( Penanda - Pembeda ) , dalam pengertian secara umum Syntax adalah bentuk deskripsi suatu bahasa dalam aturan-aturan tetentu, dan dalam dunia programing syntax lebih dikenal sebagai suatu identitas atau bentuk dari suatu code tertentu seperti ; syntax HTML , syntax CSS , syntax JavaScript, dan lain sebagainya, dari masing-masing syntax memiliki ciri tertentu yang lebih spesifik lagi dalam pembagian fungsi code perintah , pembahasan khusus secara detil mengenai syntax HTML, CSS, JavaScript atau yang lain, mudah-mudahan kita dapat membahasnya di lain kesempatan, oke untuk selanjutnya mari kita kembali kepada pokok bahasan, berdasarkan keterangan yang telah disebutkan di atas maka kesimpulanya adalahSytax Highlighter merupakan penanda dari identitas suatu code tertentu, dan mengenai fungsinya tentunya untuk mempermudah dalam mengenali identitas, perintah serta fungsi suatu code, untuk contoh agar lebih mudah difahami mari kita lihat gambar dibawah :

Contoh : Syntax Highlighter

Setelah melihat contoh gambar di atas setidaknya kita telah memperoleh sedikit pengertian mengenai Syntax Highlighter berikut fungsinya, dan bagi sahabat pustaka kreasi yang tertarik untuk menyematkan Syntax Highligter di blognya disini kami akan mencoba sharing mengenai tata caranya,

Syntax Highlighter untuk Website dan Blog dikembangkan oleh seseorang yang bernama Alex Gorbatchev untuk lebih detil mengenai Alex Gorbatchev silahkan kesitusnya di sini.

Untuk pemasangan Syntax Highligter di Blogger mari kita ikuti langkah berikut :
Login ke Blogger >> Design >> Edit HTML >> Download Template Lengkap
Kemudian cari code : ]]></b:skin> agar lebih cepat gunakan fungsi Ctrl + F untuk pencarian,
Letakan code dibawah ini di bawah code ]]></b:skin>

<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css">
    <link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
    <script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript">
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>

4. Setelah selesai Preview kalau oke Save template

Untuk penulisan script code pada posting silahkan gunakan cara di bawah ini sesuai dengan jenis code yang akan di posting, pemanggilan code akan dikenali oleh Syntax Highlighter bila dalam penulisan code menggunakan tag pembuka <pre> dan tag </pre> sebagai penutup.

Untuk posting code HTML gunakan :

<pre class="brush:html;">Letakan Code HTML disini

</pre>

Untuk posting code CSS gunakan :

<pre class="brush:css;">#Letakan Code CSS disini

</pre>

Untuk posting code JavaScript gunakan :

<pre class="brush:js;">Letakan Code JavaScript disini

</pre>

Untuk penulisan code yang lain silahkan < pre class="..........;"> diganti dengan brush:php, brush:sql, brush:python

Oke sekian dulu sharing kita kali ini selamat mencoba semoga bermanfaat, salamHappy Blogging !!!

Cara Membuat Artikel Terkait Di Bawah Postingan Blog

0 comments

Kembali sedikit di bahas perbedaan tips untuk postingan sebelumnya untuk Artikel Terkait di Bawah Postingan Blog, memiliki perbedaan yang mana artikel terkait sebelumnya hanya menampilkan teks link postingan blog saja, dan untuk yang sekarang Saya akan coba tambahkan dengan bumbu kode variasi agar tampilan terlihat lebih menarik lagi untuk di lihat dan di pasang. Lihat contoh hasilnya seperti gambr berikut.

Cara Buat Artikel Terkait Thumb Di Blog

Berikut langkah-langkahnya yang harus di perhatikan dan di implementasikan jika Anda tertarik lanjutkan!

1. Masuk Blogger.com
2. Pilih icon "Go to post list" ->> Template
3. Back up template
4. Pilih Edit HTML ->> Proceed ->> Centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode </head>
6. Letakkan kode berikut tepat di atas kode tersebut


<!--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%; width:auto;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:.75em;margin-top:0;padding-top:0}#related-posts a{color:black}#related-posts a:hover{color:black}#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh3.googleusercontent.com/-bLOTerzs-sA/T233ABjFebI/AAAAAAAACnI/AgKh7Ney4kA/s72/no-image.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://berbagi-kreativitas.googlecode.com/files/related-posts-thumb.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Berikutnya cari kode <div class="post-footer-line post-footer-line-1"> letakkan kode berikut ini tepat di bawah kode tersebut, atau sesuaikan dengan template blog Anda


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

8. Pratinjau, jika tidak ada error lanjutkan
9. Simpan template

Keterangan:

Untuk kode yang bercetakkan tebal bisa Anda rubah.
Link gambar:
https://lh3.googleusercontent.com/-bLOTerzs-sA/T233ABjFebI/AAAAAAAACnI/AgKh7Ney4kA/s72/no-image.png
adalah gambar thumb jika postingan blog tidak menggunakan gambar, maka gambar tersebut akan muncul pada artikel terkait, lihat gambar yang Saya lingkari.
Untuk Maxresults=7; adalah jumlah artikel yang ingin di tampilkan.
Artikel Terkait: Bisa di ubah menjadi Related post dan lain sebagainya sesuai keinginan.

OK selamat mencoba semoga berhasil, jika ingin ada yang di tanyakan jangan ragu sekian dan Salam.

Cara membuat daftar isi dengan jquery

0 comments

Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para blogger. karena dengan daftar isi ini tampilannya sangat keren dan cantik.

DEMO

- Login ke akun blogger

- Pilih rancangan –> Edit HTML

- Lalu copy kode di bawah dan letakkan di atas kode ]]></b:skin>

#dafis-acc{

font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color:#333;

background:#ffffff;

}

.dafis-label {

background: url("http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;

border: 1px solid #2F94BA;

color: #FFFFFF;

cursor: pointer;

font-weight: bold;

line-height: 1.4em;

margin: 1px 3px;

outline: medium none;

overflow: hidden;

padding: 2px 10px;

text-decoration: none;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

vertical-align: baseline;

white-space: nowrap;

}

.dafis-label:hover {

background: url("http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;

color: #003366;

}

.dafis-daf ol {

margin: 0 0 0 30px !important;

padding: 0 !important;

}

.dafis-daf ol li {

background-color: #C9E9F4;

border: 1px solid #339DC6;

line-height: 1.5em;

margin: 1px 3px !important;

text-align: left;

white-space: nowrap;

}

.dafis-daf ol li a {

color: #333333 !important;

display: block;

padding-left: 10px;

text-decoration: none !important;

}

.dafis-daf ol li a:hover {

background: none repeat scroll 0 0 #7BC4DF;

border-left: 5px solid #333333;

padding-left: 5px;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

- Lalu copy kode di bawah dan letakkan di atas kode </head>

- Jika sudah, copy dan paste kode dibawah ini, boleh kamu letakkan dalam postingan maupun widget blog kamu.

Ganti yang berwarna biru dengan URL blogmu.Selesei.

Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkn..

- Nah, lalu copy paste kode berikut ke dalam postingan dengan mengklik Edit html di samping compose

#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://tutorials-tricks.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Ganti yang berwarna biru dengan URL blog kamu.

Membuat Komentar FB di Blog All Template

Cara Membuat Effect Gambar Berputar Saat Hover

Text Area

Cara Membuat Entri Populer Dengan Animasi Berputar

Syntax Highlighter

Cara Membuat Artikel Terkait Di Bawah Postingan Blog

Cara Buat Artikel Terkait Thumb Di Blog

Cara membuat daftar isi dengan jquery

Search

Popular

Category