My Diary: Widget

Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Cara Menambahkan Scroll pada Widget Blogspot

Ada kalanya widget pada Blogspot anda tidak memiliki ukuran yang anda inginkan. Khususnya jika widget tersebut memiliki ukuran yang terlalu tinggi. Bagaimana ya cara mengatasi hal tersebut? Salah satunya dengan cara memberikan scroll pada widget tersebut.
Bagaimana Cara Menambahkan Scroll pada Widget Blogspot ini? OK, silakan simak terus artikel pada kesempatan kali ini.

Jika dilihat dari cara memasangnya, widget Blogspot terbagi menjadi Widget Bawaan Blogspot dan Custom Widget (widget pada mode HTML/Javascript). Widget bawaan ini adalah widget yang memang sudah disediakan oleh Blogspot itu sendiri. Sedangkan Custom Widget maksudnya adalah widget yang dibuat/dipasang sendiri oleh user dengan menambahkan dan mengedit kode HTML/Javascript, karena widget tersebut tidak disediakan oleh Blogspot. Tentunya untuk dapat menambahkan scroll pada kedua jenis widget ini caranya akan berbeda. Namun pada intinya untuk menambahkan scroll pada widget ini yaitu dengan memberi sedikit tambahan kode HTML overflow:auto;

OK, silakan langsung saja simak langkah-langkahnya berikut ini.

Untuk widget standar/bawaan blogspot atau widget tanpa pengeditan kode HTML.

1. Pastikan widget telah dipasang pada Blog anda.
2. Login ke akun Blogger anda.
3. Masuk ke Bagian Tata Letak.
4. Katahuilah nama widget id pada widget yang akan diberikan scroll. Caranya, sentuhkan corsor pada tulisan edit Tata Letak widget tersebut dan lihat di bagian sudut kiri bawah monitor, disitu terdapat tulisan yang menampilkan nama widget id dan sebagainya. Perhatikan gambar dibawah, contoh berikut menampilkan nama widget id yaitu PopularPosts2.

5. Setelah widget id diketahui, maka selanjtnya anda masuk ke bagian Template lalu klik Edit HTML.
6. Dengan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut ini diatas kode ]]></b:skin>.

#PopularPosts2 .widget-content{
height:230px;
width:auto;
overflow:auto;
}

7. Ubahlah kode berwarna merah dengan widget id yang anda inginkan, dan kode berwarna biru dengan ukuran tinggi yang anda inginkan.
8. Setelah selesai, silakan akhiri dengan klik Simpan Template. Berikut contoh hasilnya.

Untuk widget mode pengeditan HTML/Javascript.

1. Login ke akun Blogger anda.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget dimanapun anda inginkan.
4. Pilih mode HTML/Javascript.
5. Yang perlu anda lakukan adalah hanya menambahkan sedikit kode HTML berikut pada kode HTML widget.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

-------KODE WIDGET-------

</div>

6. Masukan kode HTML widget pada tulisan berwarna merah. Ubahlah tampilan widget terutama pada kode berwarna biru dengan ukuran tinggi widget yang anda inginkan.
7. Setelah selesai, akhiri dengan klik Simpan. Berikut contoh hasilnya.

Silakan lihat hasilnya pada Blog anda, Semoga berhasil.

Membuat Sidebar Multi Tab Ala Minima Colored

Unknown

Sumber : bdk-blogger.blogspot.com

My Diary | Membuat Sidebar Multi Tab Ala Minima Colored ~ Kembali kali ini saya akan membagikan tutorial Caranya Membuat Sidebar Multi Tab Ala Minima Colored, setelah sebelumnya membagikan Tips-Trik dan Template Blogger, langsung saja berikut tutorialnya:

ScreenShot :

1. Masuk ke blogger

2. Pilih template >> Edit HTML

3. Cari kode ]]></b:skin> atau </style>

4. letakkan kode dibawah ini tepat diatasnya

/* CSS Tabs */
.tabs, .tably {margin:0 0;}
.tabs .tably {padding:0 0;}
.tabs-menu {color:#0f9abb;padding:0 0;margin:0;margin-bottom:0;border:1px solid #e0e0e0;}
.tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:&#39;Oswald&#39;;font-weight:400;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:0 0;background:transparent;color:#0f9abb;cursor:pointer;position:relative;transition:all 0.1s linear;}
.tabs-menu li:hover {background:#363636;color:#fff;}
.tabs-menu .active-tab {background:#0fa9cd;color:#fff;}
.tabs-menu .active-tab:hover {background:#10b1d7;color:#fff;}
.tabs-menu .active-tab:after {top:100%;left:50%;border:solid transparent;
content: &quot; &quot;;height:0;width:0;position:absolute;pointer-events:none;border-color: rgba(136,183,213,0);border-top-color:#0fa9cd;border-width:8px;margin-left:-8px;}
.tabs-content {padding:10px;background:#f9f9f9;border:1px solid #e0e0e0;border-top:none;margin-bottom:15px;}
.tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;}
.tabs-content .widget li {background:#f9f9f9;color:#666;float:none!important;}
.tabs-content .widget ul {background:#f9f9f9;color:#666;overflow:visible;}
.tabs-content .Label li {background:#f9f9f9;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;}

5. Letakkan Script dibawah ini diatas kode </head>

<script type='text/javascript'>
$(function() {
$(&quot;.tabs-1&quot;).mtabs();                                
});
</script>

6. Letakkan script dibawah ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.tabs=d.$element.children(),d.options=a.extend({},a.fn.mtabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.tabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.tabs.wrapAll('<div class="'+c.tabs_container_class+'" />'),b.tabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.tabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.tabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.tabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$tabs_menu=a(g).prependTo(c.$wrapper),b=c.$tabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$tabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.tabs.hide().filter(":eq("+b+")").show(),c.$tabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onTabSelect)&&b!==c.current_tab&&d.onTabSelect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$tabs_menu.remove(),a.tabs.unwrap().unwrap(),a.tabs.removeAttr("style"),a.tabs.children(b+":first").removeAttr("style"),a.$element.removeData("mtabs")}},a.fn.mtabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mtabs");e="object"==typeof c&&c,g||f.data("mtabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mtabs.defaults={container_class:"tabs",tabs_container_class:"tabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",tabsmenu_class:"tabs-menu",tabsmenu_el:"ul",tmpl:{tabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onTabSelect:null}}(window.jQuery,window,document);
//]]>
</script>

7. lalu letakkan HTML dibawah ini diatas kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>

<div class='tabs tabs-1'>
  <b:section class='tably tably-1 section animated fadeIn' id='tably-1' showaddelement='yes'/>
<b:section class='tably tably-2 section animated fadeIn' id='tably-2' showaddelement='yes'/>
<b:section class='tably tably-3 section animated fadeIn' id='tably-3' showaddelement='yes'/>
</div>

8. Simpan Template
9. Untuk mengatur widgetnya masuk ke halaman tata letak > tambahkan widget
10. .::SELESAI::.

Result

Sekian terimakasih [-.::Jangan Lupa Berkomentar::.-]

Sumber : http://www.iyan-blog.com/2014/09/membuat-sidebar-multi-tab-ala-minima.html

Membuat Tab View di Blogspot

Unknown 5/17/2015 Add Comment CSS HTML Widget

Unknown

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh anda blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik-baik tutorial ini dan yang paling penting jangan lupa untuk backup template andaterlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan

Pertama tentunya harus login dulu ke Blogger dengan akun anda.
Tuju Tata Letak.
Klik Edit HTML.
Jangan lupa backup template ansa terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>

Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs

{

height: 30px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 98px; /* Lebar Menu Utama Atas */

text-align: center;

height: 30px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #BDBDBD; /* Warna border Menu Atas */

border-bottom-width: 0;

text-decoration: none;

font-family: "Verdana", Serif; /* Font Menu Utama Atas */

font-weight: bold;

color: #000; /* Warna Font Menu Utama Atas */

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px;

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #E6E6E6; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #BDBDBD; /* Warna border Kotak Utama */

overflow: hidden;

background-color: #E6E6E6; /* Warna background Kotak Utama */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Kemudian Simpan Template.
Langkah selanjutnya, silahkan anda klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br /> </div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br /> </div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kemudian Simpan.

Keterangan :

Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan anda sesuaikan dengan isi.
Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.

Itu dulu tutorial hari ini, jika ada yang mau ditanyakan, temen-temen bisa isi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Sumber : http://www.maskolis.com/2011/03/membuat-tab-view-di-blogspot.html

Cara Mudah Membuat Permalink Pada Blog

Unknown 3/23/2015 Add Comment HTML Widget

Unknown

Cara Mudah Membuat Permalink Pada Blog-Malam sobat blogger semua? Malam hari ini saya akan sedikit share tutorial blog tentang Bagaimana Cara Memasang Permalink pada blog? Memasang permalink di blog selain untuk mempercantik blog, biasa juga di pakai untuk memberitahukan jika ingin mengcopy-paste artikel tesebut harus menyertakan link yang tersedia di bawahnya. Sebelum kita ke TKP ada baiknya saya jelaskan dulu apa itu permalink (permanen link)

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman postingan yang biasanay di letakan di bawah atau sesudah postingan, fungsinya tidak lain tidak bukan yaitu untuk meningkatkan seo on page blog sobat.

Permalink saya kali ini sudah di lengkapi dengan author box di mana di dalam kota permalink tersebut bisa di pasangi foto / Gambar milik sobat. Permalink kali ini juga di lengkapi url artikel yang auto drag (otomatis terblock). Contoh permalink yang akan kita buat terlihat seperti gambar di bawah ini.

Buat sobat tang tertarik memasangnya sobat bisa ikuti langka-langkah berikut ini :

Login dengan akun blog sobat.
Pilih opsi template-->>> Edit Html -->>> Centang Expand Template Widget
Cari kode ]]></b:skin>
Tekan Ctrl F untuk mempermudah pencarian kata.
Letakan kode berikut tepat diatas kode ]]></b:skin>

.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:#FF0000;
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;
}

Cari kode <data/:post.body/>, dan letakan kode berikut tepat di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tongkrongan Blogger</h4>
<div class='kontainer'>
<img alt='Ahmad Nufin' src='https://lh3.googleusercontent.com/-CBOiNUOEbn4/AAAAAAAAAAI/AAAAAAAAACE/1TnhEzc1etc/s120-c/photo.jpg'/>
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'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://anufin.blogspot.com/2015/03/cara-mudah-membuat-permalink-pada-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Klik simpan template dan lihat hasilnya

Catatan :

Ganti yang berwarna Biru dengan URL gambar/Foto milik sobat.
Untuk yang berwarna Merah sesuaikan dengan ukuran pada template blog sobat (Ukuran Text Area)

Demikianlah artikel saya kali ini tentang Cara Mudah Membuat Permalink Pada Blog. Semoga artikel yang saya buat ini bermanfaat bagi sobat blogger semua.

Sumber : http://bloggercungkring.blogspot.com/2013/02/cara-mudah-membuat-permalink-pada-blog.html

Cara Membuat Info Melayang Keren Di Blog

Unknown 3/22/2015 6 Comments CSS HTML Widget

Unknown

Hallo sahabat Diary, kali ini saya akan memposting artikel tentang cara membuat Info melayang yang keren dan mudah, caranya praktis, Info ini akan memberitahukan tentang informasi blog anda dan tentang anda, ikuti langkah berikut ini :

Login blogger.com
Klik "Template" Edit HTML
Cari kode ]]></b:skin> untuk mempermudah pencarian tekan Ctrl + F atau F3
Copy code di bawah ini pastekan tepat di atas code ]]></b:skin>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px} .panel p{color:#fff;margin:0 0 15px;padding:0} .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0} .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0} a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja4akQrsdMNoGGok7RBvNu56ouWaAa5_02jmo4T6WzzrzxkL12g1dg1n2pyzEAf9Cz7WW0klW7gt1aCrr64MERHmiIPrV5wlThWXjjeYDbvhn7VULw1hY3AR_IYcvk-6rRznRfX3tgGQ/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 35px 10px 10px} a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja4akQrsdMNoGGok7RBvNu56ouWaAa5_02jmo4T6WzzrzxkL12g1dg1n2pyzEAf9Cz7WW0klW7gt1aCrr64MERHmiIPrV5wlThWXjjeYDbvhn7VULw1hY3AR_IYcvk-6rRznRfX3tgGQ/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 40px 10px 10px} a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mfwomKr8zSDN-OHvgcby4UPCRbQ6GWKBv6FRvqQTLVAjCtB8r7fb0nCQem2coTxMFPaM7pAr90uPmsG1BNQdaJWnfoAL2GTXmMjLImeh_vU8giMZeYpUyxSLA8i6AE8u18izVvQdRTA/s320/minus.png) 85% 55% no-repeat} .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px} a:focus{outline:none} .panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px} .panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700} .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Kemudian cari lagi kode </head>
Copy code di bawah ini, lalu pastekan tepat di atas code </head>

$(document).ready(function(){

$(".trigger").click(function(){

$(".panel").toggle("fast");

$(this).toggleClass("active");

return false;

});

</script>

Belum Selesai gan, langkah terakhir

Masuk ke Tata Letak > Add Gadget > HTML/Java Script
Copy Code di bawah ini

<div class='panel'>
<h3>WELCOME</h3>
<p style="text-align:justify">Selamat datang di blog yang sederhana ini :D semoga anda betah menjelajah di blog ini.. silahkan baca - baca di artikel terbaru saya..
terima kasih telah berkunjung ^_^
<br/>
<a title="Ahmad Nufin" target="_blank" href="https://plus.google.com/104169733184205086019">Selengkapnya tentang saya</a></p>
<h3>Tentang Saya.</h3>
<img width="73px" height="73px" alt="Ahmad Nufin" src="https://lh3.googleusercontent.com/-CBOiNUOEbn4/AAAAAAAAAAI/AAAAAAAAACE/1TnhEzc1etc/s120-c/photo.jpg" />
<p>Ahmad Nufin
<br/>
Perkenalkan, saya Nufin seorang pendatang baru dunia blogger.. saya masih dalam tahap pembelajaran, jadi mohon maaf jika ada banyak kesalahan di blog ini.. jangan dihina ya bro :D</p>
<div class='columns'>
<div class='colleft'>
<h3>FIND ME ON..</h3>
<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62pTzHv21OXAJUNxI0bbcHDoBXcYHhfFEgd-J7AEojVo4YfQ3OfEPGw2EuMLltq-DmEXtdEW0VGhudXy3Pu5ihnmwiSpaE7qZB2HXPfW9eMGdcmA_tqKJJJwW0_cxWEQK4X26MS1_7-o/s320/r.png" /></a>
<a href="https://twitter.com/anufinm"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wrDhR_0Kpu0Todz3FXVvOKrR50eQt_rfAeLPMrFCyoRwzdG5_6XlcPiYRphLKons2D6xzh0ZLy1Xw5cO1kjscdXRgAFBsemAEjrgTfSstCPzP38hO6kKUtPO6FZdeIo4e4ctCZgZdXY/s320/t.png" /></a>
<a href="https://www.facebook.com/anufinm"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJvautopM0kM_R2ltHwNlPVdfE1BryfmJoXAqAFOkdz5dT-7W9wc-c-ym7-WDaXIZuy1N6Mf6yvfs94G2WllRnJvEKpqFVJGTfduwzWWxsql3ElZu5csKhg1a32j22Eq76UzjFXA33SQ/s320/f.png" /></a>
<a href="http://anufin.blogspot.com/"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSgQ_mIsH9vb-N3xpIzNYrq8w_pXB6sRvmgSIiRtO7YkPIggz4iNLhY-Ku2QAI3_x3Bs4QbPgYJt8L66BM7OtLxUPMItr2OFXcjtNzF62IVIWQwntpQu_8owHtn7RxRxmawyzoZFtejyU/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

CATATAN
Yang warna Hijau ganti kata-kata sobat sendiri
Yang warna Biru Ganti dengan Url Foto Sobat
Yang warna KUNING ganti dengan alamat Feedburner anda,ganti dengan alamat Facebook anda, Blogger anda dan Twitter Anda.

Terakhir klik SIMPAN

Lihat Hasil

Semoga artikel ini bermanfaat.