Maximum Trick Collection: April 2013

Slideshow Featured Post Menarik dengan CSS dan jQuery

Slideshow Featured Post Menarik dengan CSS dan jQuery, maxtrick berbagi tips trick bagaimana membuat Slide Show post menarik di blog kita. Untuk Demo, sobat blogger bisa melihatnya di web ini. Kelebihan slider ini adalah dia tidak memberatkan kinerja blog, fast respon slider dan membuat blog kita lebih interaktif. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpMjLgOCeL8PR0VTcYYsDFOxRouSMrgqNGxTMvJ1dkonNFcbkqmQz1K7FZPDSD3yMWp-MscHedvtsmRH1hTOY9kef3U840T6L3MOTC0CWI-m6ClJPY3Qcp-ddFOyO3tMtrQufhsgSymU/s1600/Slideshow+Featured+Post+Menarik+dengan+CSS+dan+jQuery.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Slideshow Featured Post Menarik dengan CSS dan jQuery" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpMjLgOCeL8PR0VTcYYsDFOxRouSMrgqNGxTMvJ1dkonNFcbkqmQz1K7FZPDSD3yMWp-MscHedvtsmRH1hTOY9kef3U840T6L3MOTC0CWI-m6ClJPY3Qcp-ddFOyO3tMtrQufhsgSymU/s320/Slideshow+Featured+Post+Menarik+dengan+CSS+dan+jQuery.PNG" title="Slideshow Featured Post Menarik dengan CSS dan jQuery" width="320" /></a></div>
 
<div style="text-align: center;">
Slideshow Featured Post Menarik dengan CSS dan jQuery 
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggB85vsMJ_IrinRHEZiKiZuP-5MtcatxwYi5xlBglTPcpu06mBN4HRhpfAvoDYrQsrGkr6EXZhBmTZO0Oe1dWgFgMfL5AtnLuYu1VZ2YBHF686obDniunaC8OiRCcldoyH1UUqcfPDKzo/s1600/Slideshow+Featured+Post+Menarik+dengan+CSS+dan+jQuery.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Slideshow Featured Post Menarik dengan CSS dan jQuery" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggB85vsMJ_IrinRHEZiKiZuP-5MtcatxwYi5xlBglTPcpu06mBN4HRhpfAvoDYrQsrGkr6EXZhBmTZO0Oe1dWgFgMfL5AtnLuYu1VZ2YBHF686obDniunaC8OiRCcldoyH1UUqcfPDKzo/s400/Slideshow+Featured+Post+Menarik+dengan+CSS+dan+jQuery.png" title="Responsive Slideshow Featured Post " width="400" /></a></div>
Kriteria Post Hari Ini : 
<ul>
<li>Goal : Membuat Slider menarik diatas Postingan Blog kita</li>
<li>Tujuan : Membuat web kita menjadi lebih menarik dan interaktif</li>
<li>Fitur : User friendly dan fast respon Slide Show, Responsive Slide Show</li>
</ul>
<div>
<div style="text-align: center;">
</div>
<h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-align: justify; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">
Tutorial - Tahap 1: Menampilkan Widget Di Atas Blog Post</h2>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVCEcv5XlJxzXuB3jT1pwsIiu-g_f8dmPxyA-HwMRJfPtCIMfXG6K_0sOGjSN8oYIoet26Vc4ZyUdzP_7U8rM675P9HQPH11DPt0QCTLdEI4k-5858mE3RiCyGEaMI4FABmWTBbzJ0lzU/s1600/Menampilkan+Widget+Diatas+Blog+Post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="membuat widget diatas blog post" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVCEcv5XlJxzXuB3jT1pwsIiu-g_f8dmPxyA-HwMRJfPtCIMfXG6K_0sOGjSN8oYIoet26Vc4ZyUdzP_7U8rM675P9HQPH11DPt0QCTLdEI4k-5858mE3RiCyGEaMI4FABmWTBbzJ0lzU/s1600/Menampilkan+Widget+Diatas+Blog+Post.png" title="membuat widget diatas blog post" /></a></div>
<ol style="background-color: #fcfcfc; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; padding: 0px 0px 0px 30px;">
<li style="box-sizing: border-box;">Pada dashbord pilih Template kemudian klik tombol Edit HTML</li>
<li style="box-sizing: border-box;">Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'> NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.</li>
<li style="box-sizing: border-box;">Klik Simpan</li>
</ol>
<div>
<h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-align: justify; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">
Tutorial - Tahap 2: Menambahkan Widget Feature Post</h2>
<ol style="background-color: #fcfcfc; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; padding: 0px 0px 0px 30px;">
<li style="box-sizing: border-box;">Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area</li>
<li style="box-sizing: border-box;">Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan</li>
<li style="box-sizing: border-box;">Kemudian Masukkan Kode berikut:</li>
</ol>
<span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"><style scoped="" type="text/css"><span class="css" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
 #slides ul{height:600px}
 #slides li:nth-child(1){width:100%;height:49.8%}
 #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
 #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
 #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
<span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"></style><span style="background-color: #f2e8e8; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"><div id="featuredpost"><span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"></div><span style="background-color: #f2e8e8; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<mark style="background-color: white; box-sizing: border-box; display: inline; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px; white-space: pre;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><span style="background-color: #f2e8e8; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"><script src="https://ivyth.googlecode.com/svn/js/featuredpost.min.js" type="text/javascript"><span class="javascript" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"><span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"></script><span style="background-color: #f2e8e8; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px; white-space: pre;">
<span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"><script type='text/javascript'><span class="javascript" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://maxtrick.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
<span class="tag" style="background-color: #f2e8e8; box-sizing: border-box; color: #111111; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 12px; white-space: pre;"></script> 
 
<div>
 </div>


 
<div>
 </div>

NB: Pada line 24 adalah kode untuk responsive. Kode itu jalan ketika tampilan layar kurang dari 600px. jika tidak ingin menyertakan fungsi responsive silahkan hapus kode line 24-30. 
<ol style="background-color: #fcfcfc; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; padding: 0px 0px 0px 30px;">
<li style="box-sizing: border-box;">Pada line 33 adalah link script jQuery library. Jika di template ada sudah ada silahkan hapus kode ini. Karena pemasangan lebih dari 1 jQuery Library dapat membuat error</li>
<li style="box-sizing: border-box;">Klik Simpan</li>
</ol>
<h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-align: justify; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">
Tutorial - Tahap 3: Membungkus Widget dengan Tag Kondisional</h2>
<ol style="background-color: #fcfcfc; box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px; padding: 0px 0px 0px 30px;">
<li style="box-sizing: border-box;">Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagianExpand Widget Templates</li>
<li style="box-sizing: border-box;">Kemudian cari kode <b:section class='main' id='main' showaddelement='yes'>, karena sebelumnya telah ditambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML). Misalnya widget HTML dengan id HTML5 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda Maka akan menjadi seperti ini: <pre data-codetype="CSS+HTML+JQuery" style="-webkit-transition: all 0.4s ease-in-out; background-color: #e9dddd; border-left-color: rgb(181, 137, 0); border-left-style: solid; border-left-width: 4px; box-sizing: border-box; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; line-height: 15px; overflow: auto; padding: 5px 0.5em 5px 1em; position: relative; transition: all 0.4s ease-in-out; word-wrap: normal;"><code class="xml" style="box-sizing: border-box; color: #111111; display: block; font-family: Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; letter-spacing: 0px;"><b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
 
 <b:if cond='data:title != &quot;&quot;'>
 <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='widget-content'>
 <data:content/>
 </div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget></code></pre>
</li>
<li style="box-sizing: border-box;">Klik Simpan</li>
</ol>
<div>
 </div>
</div>
<div>
 </div>
<div>
<div style="background-color: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 5px solid rgb(104, 104, 104); box-sizing: border-box; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; padding: 10px; text-align: justify;">
<div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<div style="box-sizing: border-box; clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
<img align="right" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigV77Un68wb9Wj0npHgQzHB0dCJVLNdQqHbla3bOjOt_7eUMfwXlMG_0RdG-RccKj2jq6bTve91UBpyk7j4Xtu8xagbo3aNza8sdaVLqz8vkyr9z7_EvQqu0mXIL4TWn3gpMz-IrqtYf0/h120/jempol2.gif" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; display: inline; float: right; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="78" /></div>
</div>
Bila merasa keksusahan dalam setting Template, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot. 
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
"Melayani Optimasi Template Sobat Blogger"</div>
<div style="text-align: center;">
 </div>
Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua 
How To Order to us To Optimeze Your Blogger : 
<ol>
<li>Just comment in post below and said that you want to order.</li>
</ol>
Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^</div>
<div style="background-color: white; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
 </div>
<div style="background-color: white; text-align: center;">
Slideshow Featured Post Menarik dengan CSS dan jQuery</div>
</div>
</div>
</div>

Slideshow Featured Post Menarik dengan CSS dan jQuery

Slideshow Featured Post Menarik dengan CSS dan jQuery, maxtrick berbagi tips trick bagaimana membuat Slide Show post menarik di blog kita. U...

4:31 AM

Modifikasi Widget Popular Posts Dengan Efek Tooltip

Modifikasi Widget Popular Posts Dengan Efek Tooltip, pada kesempatan kali ini MaxTrick akan berbagi bagaimana membuat Popular Post Stylish dan keren tentunya dengan cara yang mudah dan simple. Rubah tampilan popular post kalian menjadi lebih trendy, dan tentunya lebih user friendly. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGI2eEee2olVmAqpS9jVw39nwqXpNt-9oAaOO5ArBU3e0wTaAdco77TgUO-6-90npxUvNqFrwa8ZLA5cldyAPpXQOk9iqFw-iyImINyWjmcPjULiBZWKC-lb7VQt0m-QZuNdld3QNk1e4/s1600/Modifikasi+Widget+Popular+Posts+Dengan+Efek+Tooltip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Widget Popular Posts Dengan Efek Tooltip" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGI2eEee2olVmAqpS9jVw39nwqXpNt-9oAaOO5ArBU3e0wTaAdco77TgUO-6-90npxUvNqFrwa8ZLA5cldyAPpXQOk9iqFw-iyImINyWjmcPjULiBZWKC-lb7VQt0m-QZuNdld3QNk1e4/s400/Modifikasi+Widget+Popular+Posts+Dengan+Efek+Tooltip.jpg" title="Modifikasi Widget Popular Posts Dengan Efek Tooltip" width="400" /></a></div>
<div style="text-align: center;">
Modifikasi Widget Popular Posts Dengan Efek Tooltip</div>
 
Kriteria Post Hari Ini : 
<ul>
<li>Goal : Menjadikan Popular Post kita menjadi lebih interaktif dan menarik</li>
<li>Tujuan : Meningkatkan Popular Site di pandangan Visitor Blog</li>
<li>Fitur : User friendly dan fast respon popular post</li>
</ul>
<div>
<h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-align: justify; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">
Tutorial - Tahap 1:</h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6uTIWLTELIr7m6pViBVXA2O0BldIeTfyQ1kkwxNb6OQyZc2UWTSMDWCHRBXJ6hvxwPqwQhOExs8g4f6o6t7vXudphUN4GMsxk5jdUsOe7jEqllQRmYl1rw2Ak6AEZZMKaphRduqXfa0/s1600/Widget+Popular+Posts.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6uTIWLTELIr7m6pViBVXA2O0BldIeTfyQ1kkwxNb6OQyZc2UWTSMDWCHRBXJ6hvxwPqwQhOExs8g4f6o6t7vXudphUN4GMsxk5jdUsOe7jEqllQRmYl1rw2Ak6AEZZMKaphRduqXfa0/s200/Widget+Popular+Posts.jpg" width="200" /></a></div>
<ol>
<li>Login akun blogger anda</li>
<li>Pada Dashboard pilih Tata Letak » Tambah Gadget » Pilih Entri Populer</li>
<li>Lalu pilih jumlah post yang akan ditampilkan, Setting seperti gambar Disamping !</li>
<li>Klik Simpan </li>
<li>Klik Simpan Setelan</li>
</ol>
<div>
 </div>
<div>
 </div>
<div>
<h2 style="background-color: #ececec; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; line-height: 1.4em; margin: 8px -12px; padding: 2px 10px; text-align: justify; text-shadow: rgb(165, 165, 165) 0px 1px 1px;">
Tutorial - Tahap 2 :</h2>
</div>
1. Masuk ke Template » Edit HTML » Centang Expand Template Widget 
<label for="expand-widget" style="background-color: white; border: 0px; box-sizing: border-box; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2. </label>Letakkan kode berikut ini diatas kode <span style="background-color: white; border: 0px; box-sizing: border-box; color: blue; font-family: 'Segoe UI'; font-size: 14px; line-height: 18.1875px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">]]></b:skin>  
 
<blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">
.PopularPosts li {margin-bottom:-10px} 
.PopularPosts .item-thumbnail {float:left} 
.popular-posts ul li img { 
  width:60px; 
  height:60px; 
  padding:2px; 
  -moz-border-radius:60px; 
  -webkit-border-radius:60px; 
  border-radius:60px; 
  -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.2) rotate(-360deg); 
  -webkit-transform:scale(1.2) rotate(-360deg); 
  -o-transform:scale(1.2) rotate(-360deg); 
  -ms-transform:scale(1) rotate(-360deg); 
  transform:scale(1.2) rotate(-360deg); 
} 
.popular-post-isi { 
  position:relative; 
  background-color:#f7f7f7; 
  padding:5px; 
  min-height:60px; 
  border:1px solid #ccc; 
  -moz-border-radius:5px; 
  -webkit-border-radius:5px; 
  border-radius:5px; 
  margin-left:75px; 
  margin-bottom:5px; 
} 
.popular-post-isi:before { 
  content:""; 
  width:0; 
  height:0; 
  position:absolute; 
  right:100%; 
  top:19px; 
  border-width:10px; 
  border-style:solid; 
  border-color:transparent #f7f7f7 transparent transparent; 
} 
.item-title { 
  font-size:12px; 
  line-height:1.1em; 
} 
.item-snippet { 
  color:blue; 
  font-size:11px; 
  line-height:1em; 
}</blockquote>
3. Cari kode dibawah ini 
<blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">
             
            <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;'/></blockquote>
Untuk mudah menemukannya cari saja kode   
 
Lalu ganti semua kode tersebut dengan kode berikut ini 
<blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">
              
            <div class='item-content'> 
              <b:if cond='data:post.thumbnail'> 
                <div class='item-thumbnail'> 
                  <a expr:href='data:post.href' target='_blank'> 
                    <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/> 
                  </a> 
                </div> 
    <b:else/> 
    <div class='item-thumbnail'> 
    <a expr:href='data:post.href' target='_blank'> 
     <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUM84S2BoJ2PAkVt1K5wcKYKMwSMQQgWjDcucDsBdvfGi7-PiXTdU4Wrrv7Am4Qu1fJgT4osrqwWyHuDB15KtOhvl_JJ5uTo38TG0hW1Be3FFOrFW5XZoJGejIp8HCTELvfzZBzNV-jofK/'/> 
    </a> 
    </div> 
              </b:if> 
              <div class='popular-post-isi'><div class='item-title'><a expr:href='data:post.href' itemprop='url'><data:post.title/></a></div> 
              <div class='item-snippet'><data:post.snippet/></div></div> 
            </div> 
            <div style='clear: both;'/>  </blockquote>
4. Simpan Template dan Lihat hasilnya.. 
 
<span style="background-color: white; border: 0px; box-sizing: border-box; color: #990000; font-family: 'Segoe UI'; font-size: 14px; line-height: 18.1875px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">//Pengaturan 
Jika anda ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini 
<blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">
.item-snippet { display:none }</blockquote>
 
<div style="text-align: center;">
Note :</div>

Url <span style="background-color: white; border: 0px; box-sizing: border-box; color: blue; font-family: 'Segoe UI'; font-size: 14px; line-height: 18.1875px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUM84S2BoJ2PAkVt1K5wcKYKMwSMQQgWjDcucDsBdvfGi7-PiXTdU4Wrrv7Am4Qu1fJgT4osrqwWyHuDB15KtOhvl_JJ5uTo38TG0hW1Be3FFOrFW5XZoJGejIp8HCTELvfzZBzNV-jofK/ 
 
 
<div style="text-align: center;">
merupakan gambar yang tampil jika artikel tidak memiliki gambar, silahkan ganti dengan url gambar anda. </div>
 
<div style="text-align: center;">
Sisanya silahkan anda sesuaikan sendiri.</div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
</div>
<div style="background-color: white; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 5px solid rgb(104, 104, 104); box-sizing: border-box; padding: 10px; text-align: justify;">
<div style="box-sizing: border-box; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;">
<div style="box-sizing: border-box; clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
<img align="right" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigV77Un68wb9Wj0npHgQzHB0dCJVLNdQqHbla3bOjOt_7eUMfwXlMG_0RdG-RccKj2jq6bTve91UBpyk7j4Xtu8xagbo3aNza8sdaVLqz8vkyr9z7_EvQqu0mXIL4TWn3gpMz-IrqtYf0/h120/jempol2.gif" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; display: inline; float: right; height: auto; max-width: 100%; padding: 5px; transition: all 0.4s ease-in-out;" width="78" /></div>
</div>
Bila merasa keksusahan dalam setting Template, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot. 
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
"Melayani Optimasi Template Sobat Blogger"</div>
<div style="text-align: center;">
 </div>
Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua 
How To Order to us To Setting Your Tag Heading : 
<ol style="color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px;">
<li>Just comment in post below and said that you want to order.</li>
</ol>
Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^</div>
<div>
 </div>
<div style="text-align: center;">
<a href="http://maxtrick.blogspot.com/2013/04/modifikasi-widget-popular-posts-dengan.html" rel="nofollow" target="_blank">Modifikasi Widget Popular Posts Dengan Efek Tooltip</a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div>
 </div>

Modifikasi Widget Popular Posts Dengan Efek Tooltip

Modifikasi Widget Popular Posts Dengan Efek Tooltip, pada kesempatan kali ini MaxTrick akan berbagi bagaimana membuat Popular Post Stylish d...

4:04 AM