Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Cara Membuat Dua Kolom Sidebar

Posted by Unknown 12:29 PM, under | No comments

Cara membuat dua kolom untuk menempatkan widget khususnya banner iklan ataupun adsense berukuran 120x600 piksel dan 160x600 piksel pada template thesis for blogspot.
Contoh Dua Kolom Banner Pada Sidebar


Letakkan script berikut tepat dibawah <div id='sidebar-wrapper'>


<div class='sidebar-120' style='float:left;width:42.5%;'>
<b:section class='sidebar' id='sidebar-right-2-1' preferred='yes'>
</b:section>
</div>
<div class='sidebar-160' style='float:right;width:57.5%;'>
<b:section class='sidebar' id='sidebar-right-2-2' preferred='yes'>
</b:section>
</div>
<div class='clear'/>

Jika Saudara inginkan ukuran yang sama untuk setiap bagian, maka cukup diubah width:42.5% dan width:57.5% menjadi width:50%

Cukup mudah bukan.

Cara Membuat Effect Bayangan Api Pada Link Blog

Posted by Unknown 11:38 AM, under | No comments

Kali ini Saya akan memberikan Tips, Cara Membuat Effect Bayangan Api Pada Link Blog. Effect Banyangan Api pada Link Blog, hemm, ketika Kalian mengarahkan Kursor Blog Kalian pda sebuah Link, maka akan keluar Effect Bayangan Api. Bagaimana, Kalian tertarik...? Kalau Kalian tertarik, silahkan ikuti langkah-langkah berikut.

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Trus cari Rancangan --> Edit HTML.
[3]. Lalu cari Code a:hover kira-kira Codenya seperti di bawah..
a:hover {
text-decoration: underline;
color: #ff0000;
}
[4]. Kalo sudah ketemu, ganti tulisan [underline] menjadi [none], dan hapus Code pada bagian bawahnya. kira-kira Codenya seperti ini color: #ffoooo:
[5]. Lalu Copy dan Paste-kan Code di bawah ini, tepat di bawah Code yang tadi di hapus, atau di belakang Code yang tadi di hapus.
text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
[6]. Kalo Kalian bingung, coba Kalian lihat Code di bawah ini.
a:hover {
text-decoration: none;
text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
}
[7]. Kalo sudah selesai, tinggan di SAVE, dan lihat hasilnya. Link Blog Kalian jadi ada Effect Bayangannya.

Cara Memasang Widget Share Keren di Blog

Posted by Unknown 11:33 AM, under | No comments

Widget Share ini Sangat Menarik dengan Efek Keren yaitu Bisa Bergoyang jika didekatkan ke Kursor Mouse.
Dengan Widget Share Lengkap ini Mungkin blog Anda Akan Mudah Untuk Mengshare Blog Anda di Berbagai Social Media Seperti Facebook , Twitter , Digg dsb .Widget Share Keren di Blog ini Sangat Mudah Jika kalian Ikuti Detail . Widget Share ini Mungkin Sangat Mudah Bagi Para Pengunjung blog untuk Merekomendasikan Blog anda di Suatu Social Media Seperti Facebook dan Mungkin Blog kita akan Mendapat Pengunjung dari Social Media Tersebut .

Widget Share ini Menggunakan Effect Jquery yaitu effek yang bisa bergerak dengan sendirinya dengan kita mendekatkan Kursor kita Ke Widget Share Blog Ini .
Script Jquery ini sangat ringan dan tidak Membuat Loading Blog tidak Berat . jadi jangan khawatir dengan script ini karena tidak ada effectnya dengan loading blog anda .
 
Cara Memasang Widget Share Keren di Blog  
 
Kita Langsung ke Tutorial nya Cara Memasang Widget Share Keren di Blog 
1. Login Seperti Biasa ke Blogger Anda
2. Masuk Ke Menu Template Anda > Edit HTML > Centang Expand Template Widget
3. Kemudian CTRL+F cari Kode dibawah
]]></s:kin>
4. Setelah itu Copy kode  dibawah dan Pastekan diatas kode ]]></s:kin>

<!-- Scriptbybocahporis.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label2 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

5. Setelah itu Cari lagi kode dibawah
<data:post.body/>  

Note: Biasanya kode diatas ada 3-4 jika anda telah memasang auto readmore
silahkan taruh diantara kode ke 2/3

4. Setelah Ketemu Copy kode dibawah . dan taruh diatas atau dibawah kode  <data:post.body/>

<br/>
<b:if cond='data:blog.pageType == "item"'><b>Share it to your friends..!</b><br />
<br />
<table border='0'>
<tr> <td><script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script><g:plusone size="standard"></g:plusone></td>
<td><div class='bookmarks'>
<a class='nudge' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZhgm5AVI4VbLvpb7LYR2eYnSBJGWyW87X9zCRY5jFTpeScPDl_hjnyU1yx_Fa82Fxo4gtC2PLeALidcwONGwUUL_Z4nSY2eKYaNKCX3UmrnEF2FevEf0sal3AZPlnnBeKk5uAxzYgk4/s1600/facebook.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Facebook'/></a>
<a class='nudge' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1K_uEYP4xz-AWODNPZrOM3DQbN9uNbIXG1ej-GoWZQbc_4AnvkZOE6BPlqq_NIrJz-liHGbWn1GMNV1OPr53xMipnXzGdTxtVql1pYCGYd5nY8HG1hYyz4Ebz0I9V24JlGjnYI0jNn74/s1600/twitter.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share this post on twitter'/></a>
<a class='nudge' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZNrFNEgxbpSL387jyIzY_hC1ZxIdcN83FiXUKoKM7iiIZ_fnTANssWWUXmQRJOt69W0e8DS4H0o0rvVKnVFwNVCkyZ3_E2MoDxWelnJj-cxLm9O8VMsdAHx2ZtfCFIfX17T1rBEMuiA/s1600/delicious.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Bookmark on Delicious'/></a>
<a class='nudge' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiviyDc-W1QitzoVaylK4ShQuAejcssoGikSCMJ3wcrRf2EZgBqrTpGJJo4Dh0RMWJ775oUDehVVMOpPIqE5-7le2HNuiXbO3P6BZS3yhK0kIcy1rtk7F4o-VSC5SP-mECR0XbzfRnXwU/s1600/digg.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Digg This'/></a>
<a class='nudge' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0Dsg_XtQX4Tquxu-8NOit7dpAYj1QsdnFL_H5zkALVoPUR1s8Rf5uD4MkgCs2SfRfIxzcPy5WPTpx79olkuKLV9f-4gpKbB7QfoQNi6hMJ0a6QtS59OAGyT0O9cIPY7w5roJAUG2bjw/s1600/stumbleupon.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Stumble This'/></a>
<a class='nudge' expr:href='&quot; http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYV8RX0Y0zDBthdnWpkfYYHNTO4sT5kzIsuunL6zt1avWybx-6OeDGjA5Uh_Q1vV_dLlmZeI35Uebh04MxJQdSd57nGcywhVYz0qpKwQxd3F7LQSofhXIL3OMzD_Ug1-h8LOlNkeVvFM/s1600/reddit.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Reddit'/></a>
<a class='nudge' expr:href='&quot; http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimgjTRPZJ6O21gn0aolL_SfwchbMw61N_VOwwbvZGcl96eiqSlPhXq04RQl_Vx27nLDbnGUFfwv0-TqeCbizOKgi-G_W7BXg6hCtjm3TmgUQ_UcLTTHSaWOI9yrtervKnXnfyeYuHby1c/s1600/yahoo.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Yahoo Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnzwlOLdwO73b9h7eLjdkfZWXFmepy-mWu1zDeRkQYwuKEAtXPe5Rz_II7cCPGu90N8xA56FAFA30zMBx4OOMInR_zu4uqs3GNVHni2DweMkaENlS867Wism5hYJxIy24Pi_z08PBZD4/s1600/furl.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Send to Furl/Diigo'/></a>
<a class='nudge' expr:href='&quot; http://www.google.com/bookmarks/mark?op=edit&amp;amp;output=popup&amp;amp;bkmk=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a9cPDeu5YfbqzMX8VehZqIqzNOEn4SZCXn6H9oumBEp1Q5mDeCYgchBN9K3oGfFxPpnqalkHMnjiI0Sgj7QTs9XTfqacBOkl_NI46aQ-mZOQs54QnFq4FvL8VxbwxGK9L-ty1wn3zp4/s1600/google.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Google Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9NTuJJRGI1VqzB1xRXRQ4oNFFWDWxjPZ7rMu1U1-CYAAAAqtnKMQZKTHgLbd4BzdKMn1W2aFJJP54yXMUWk2GeLYEzmmSIJ9mj0WCMh-ni_BomMPglZHiawj_FodkM7XD2iBapROjcc/s1600/technorati.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Technorati'/></a>
<a class='nudge' expr:href='&quot; http://www.newsvine.com/_tools/seed&amp;amp;save?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdw7mnvJWs6ySkoa7U_lSoaZnvXvivnW-566-FyRWK2YL0N6GFUnpgk8LN-KnClzGMZqOxxsPrMV6cdJHDGvlG64Iu2mpzB-zQX_U7CoorOtWYjUbMYWIFWaCmVRNvfeAYkWRDQxWEdg/s1600/newsvine.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Save to Newsvine'/></a>
<a alt='Tips Triks Blogger, Tutorial SEO, Info,Blogging,Ilmu Pengetahuan' class='nudge' href='http://bocahporis.blogspot.com' title='Tips Triks Blogger, Tutorial SEO, Info,Blogging,Ilmu Pengetahuan' target='_blank'></a></div></td></tr></table></b:if>
Terakhir Klik Simpan dan Lihat Hasilnya diblog

Cara Membuat Artikel terkait (Related Post) Dengan Gambar/Tumbnail

Posted by Unknown 1:02 PM, under | No comments

Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan terpukau, Lebay :D

Penerapan CSS & JavaScript Artikel Terkait Bergambar

Cara Membuat Artikel terkait (Related Post) Dengan Gambar/Tumbnail

Masuk / Login ke www.blogger.com
Pada Dashboard pilih Template → Edit HTML → Klik di dalam kotak EDIT kemudian tekan CTRL + F, dan cari code ]]></b:skin> 
Kemudian COPAS kode dibawah ini di atas kode ]]></b:skin>

    <b:if cond='data:blog.pageType == "item"'>
    <style type="text/css">
    #related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
    #related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
    #related-posts a{color:black}
    #related-posts a:hover{color:black}
    #related-posts a:hover{background-color:#d4eaf2}
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJfkC9oLVMfiEVliLIOWdCx-dsdxncn-SVquMENTW8uTo5pxZxmMRTQqkEu8FIDgkG2lsppepReYxwCqaEIkS6-NaQ4t0kR9sYNfALZ1WHWLndPr3xm7IdL-2hX-ucd9qMd0wQsvOzDc/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
    </b:if>

Penerapan Kode HTML Artikel Terkait Bergambar

Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna, caranya

    Silahkan Anda cari kode <data:post.body/>
    Kemudian letakan kode di bawah ini setelah kode <data:post:body/>

    <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'/>
    </b:if>


    Simpan Template (Save Template)

Keterangan Terkait Kode Artikel Terkait Bergambar
1. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.

2. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.

3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya,

4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.

5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikian tutorial tentang  Cara Membuat Artikel terkait (Related Post) Dengan Gambar/Tumbnail yang bisa saya share. dan semoga bermanfaat untuk sobat semua.

Mebuat Related post dengan gambar/thumbnail

Posted by Unknown 12:46 PM, under | No comments


Mebuat Related post dengan gambar/thumbnail adalah utuk memperindah tampilan blog dan juga untuk mempercepat agar blog terindex oleh google membuat related post/artikel terkait sebenarnya tidak terlalu sulit untuk membuat-nya langsung saja berikut langkah-langkah Mebuat Related post dengan gambar/thumbnail:

1.Seperti biasa sobat login dulu ke blogger.com
2.pilih template --> Edit html
3.centang expand widget
4.Cari kode <head> caranya tekan ctrl+f
5.letakan kode di bawah ini sebelum atau diatas kode <head>

<!--Related Posts with thumbnails Scripts and Styles Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <style type='text/css'> #related-posts {float:center;text-transform:none;height:215px;background-color: #f4f4f4; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;border: 1px solid black;  } #related-posts h2{padding: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;} #related-posts a{color:#D80556;} #related-posts a:hover {background-color: #D80556;color: white; font-weight: bold; text-decoration: initial;} </style><br /> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGJfkC9oLVMfiEVliLIOWdCx-dsdxncn-SVquMENTW8uTo5pxZxmMRTQqkEu8FIDgkG2lsppepReYxwCqaEIkS6-NaQ4t0kR9sYNfALZ1WHWLndPr3xm7IdL-2hX-ucd9qMd0wQsvOzDc/s400/noimage.png"; var maxresults=6; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script><br /> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


6.Kemudian sobat cari kode di bawah ini:  

<div class='post-footer-line post-footer-line-2'> 
</div>
<div class='post-footer-line post-footer-line-3'>
</div> 
</div>
</div>

Jika sudah ketemu sobat copy paste kode di bawah ini dan letekan setelah kode diatas (yang sobat cari tadi).

 <!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");</script><br /> </div> <div style='clear:both'/> </b:if><br /> <!-- Related Posts with Thumbnails Code End-->

7.sekarang tinggal Save template sobat.

Cara Membuat Permalink di Blog fleksibel

Posted by Unknown 1:24 PM, under | No comments

Hallo agan-agan semua. Bagaimana kabarnya? pastinya baik kan.
Kali ini saya mau posting tentang Cara Membuat Permalink di Blog. Sebelumnya saya mau jelasin sedikit apa itu Permalink (Permanen Link).

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog agan. Biasanya agan yang newbie seperti saya menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum agan tahu bahwa namanya adalah permanen link.

 Permalink yang saya posting ini sudah dilengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milikagan , juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) . Contohnya bisa agan lihat seperti gambar di bawah ini :


Oke langsung saja saya kasih tutorialnya. Silahkan di baca dan dipraktekin langsung.

1. Login ke akun Blogger agan
2. Pilih menu Template > klik Edit HTML (jangan lupa centang Expand Template Widget)
3. Cari kode ini (biar cepat tekan Ctrl+F)  ]]></b:skin> terus letakkan kode di bawah ini di atas kode tadi

    .admin-tulisan{
    width:auto;
    background:#f2f2f2;
    border:2px solid #000000;
    margin:30px 0 10px 0;
    display:block;
    font-family:"julee";
    color:#000;
    }
    .admin-tulisan .kontainer{padding:5px;}
    .admin-tulisan h4{
    background:#000000;
    border:none;
    border-bottom:1px solid #000000;
    color:#fff;
    font-family:"julee";
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
    padding:5px 10px;
    margin:0 0 0 0;
    display:block;
    }
    .admin-tulisan h4 a{color:#000000;}
    .admin-tulisan img{
    background:#000000;
    width:90px;
    height:100px;
    border:1px solid #000000;
    margin:3px 10px 0 0;
    float:left;
    padding:2px;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }

4. Cari kode ini (biar cepat tekan Ctrl+F) <data:post.body/> kemudian letakkan kode di bawah ini tepat di bawah kode tadi

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
    <div class='kontainer'>
    <img alt='nama agan' src='url foto/gambar agan'/>
    Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
    <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>

 Ket : warna merah ganti sesuai keinginan agan

5. Kemudian Save Template. Selesai deh...

Post Populer

Populer pos