Widget

Showing posts with label Widget. Show all posts

Modifikasi Label Cloud Ala Mas Sugeng V2

Assalamualaikum sobat,Pada hari ini saya akan membagi sebuah artikel yang berjudul <b>"Modifikasi Label Cloud Ala Mas Sugeng V2".</b>Yang sebelumnya saya telah mempublikasikan yang <a href="http://yasdil-blog.blogspot.com/2014/02/modifikasi-label-cloud-ala-blog-adik.html">V1-nya</a>.dan untuk yang V2 ini hanya perlu memasukan kode cssnya aja :D .Yup, Oke Langsung saja yah.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0hEmaRTgkyFJAD3pHdQah-x6BGiCckcXWt2v2_hF33DB6cf_FJyG9wBilhOmgNvr_9wF4Ng-XV9av_MJbyVvUTg2NN53P987uuFiCKXCNZfDuivesowXvKL4AMyIN5uHaj6b0c8gt8oq2/s1600/Capture159.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Label Cloud Ala Blog Adik Yasdil V2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0hEmaRTgkyFJAD3pHdQah-x6BGiCckcXWt2v2_hF33DB6cf_FJyG9wBilhOmgNvr_9wF4Ng-XV9av_MJbyVvUTg2NN53P987uuFiCKXCNZfDuivesowXvKL4AMyIN5uHaj6b0c8gt8oq2/s1600/Capture159.jpg" title="Modifikasi Label Cloud Ala Blog Adik Yasdil V2" /></a></div>
<h4>
CSS</h4>
<div>
<blockquote class="tr_bq">
.widget-label .widget-content{overflow:hidden;margin:0 0 5px 0;padding:10px 0;}.label-size-1, .label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size{display:block;float:left;margin:0 1px 1px 0;color:#eee;}.label-size a,.label-size span{display:inline-block;color:#fff;padding:6px 8px;background: #223CA7;}.label-size:hover{background:#393939}<br />
.label-count{white-space:nowrap;padding-right:8px;margin-left:-4px;}.label-size{line-height:1.2}#footer-top .label-size{background:#555 !important;}#footer-top .label-size:hover{}#footer-top .label-size a{color:#eee !important;}.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0;}.showpageArea a{color:#555;}.showpageNum a{padding:5px 12px;margin:0 2px 0 0;background:#eee;}.showpageNum a:hover,.showpage:hover{color:#fff !important;}.showpage{margin:0 0 0 0;}.showpage:hover a{color:#fff !important;}.showpageOf,.showpage{padding:5px 12px;margin:0 2px 0 0;background:#eee;}.showpagePoint{color:#fff;padding:5px 12px;margin: 0 2px 0 0;}</blockquote>
<h4>
Cara Pemasangan </h4>
</div>
<div>
Cara ini cukup mudah hanya perlu taruh kode cssnya aja.</div>
<div>
block kode diatas lalu letakan diatas kode<span style="color: blue;"> ]]></b:skin></span> atau <span style="color: blue;"></style></span> simpan deh templatenya</div>
<div>
<br /></div>
<div>
Kiranya cukup sampai disini saja yang saya dapat sampaikan.</div>
<div>
Sekian dan Terima Kasih, Semoga bermanfaat :)</div>

Assalamualaikum sobat,Pada hari ini saya akan membagi sebuah artikel yang berjudul "Modifikasi Label Cloud Ala Mas Sugeng V2". Yan...

Navigasi Menu Fixed ala Droid Pluss

Yeah! Sobat, Kali ini saya mau berbagi Tips Blog.Sebelumnya saya sudah membahas tentang <a href="http://yasdil-blog.blogspot.com/2014/02/sosial-media-efek-sticky.html" rel="nofollow">Membuat Widget Sosial Media Dengan Efek Sticky</a>.Kali ini tentang Menu Navigasi.Selain Membuat style template menjadi keren.Menu Navigasi juga membuat pengunjung lebih gampang menjelajahi blog kita.Nah, Langung ke TKP aja.Jika anda penasaran melihat demonya ? silahkan lihat di blog ini.<br />
<h4>
CSS</h4>
<div>
<blockquote class="tr_bq">
/* Top Menu<br />
----------------------------------------------- */<br />
#top-menuwrapper {<br />
background-color: #fff;<br />
box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);<br />
height: 70px;<br />
width: 100%;<br />
position: fixed;<br />
top: 0;<br />
left: 0;<br />
z-index: 999;<br />
overflow: hidden;<br />
}<br />
#top-menuwrap, #top-menuwrap2{width:980px;margin:20px auto;}<br />
#top-menu{width:100%}<br />
#top-menu ul{list-style: none;}<br />
#top-menu ul li{float:right}<br />
  #top-menu ul li a{line-height:16px;padding:5px 0;margin-left:5px;color:#999;font-size:14px;text-transform:uppercase;display:block;text-decoration:none;padding:6px 14px;border-radius:4px}<br />
#top-menu ul li a:hover{color:#fff;background:#80bd01}<br />
.logo{float:left;font-family:&#39;Montserrat&#39;, Oswald;font-size:160%;text-transform:uppercase;font-weight:300;}<br />
  #top-menu ul li a.current{color:#fff;background:#80bd01}<br />
.logo a{color:#fff;text-decoration:none;margin-top:-5px}<br />
.logo a:hover{color:#fff;text-decoration:none}<br />
.logo img{margin-top:2px;}</blockquote>
</div>
<h4>
HTML</h4>
<div>
<blockquote class="tr_bq">
<div id='top-menuwrapper'><br />
<div id='top-menuwrap'><br />
<div id='top-menu'><br />
<div class='logo'><br />
  <a href='/'><img alt='DroidPluss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9PfzTJPVfEmoGqHM33mPZSG25n8kgWhNWFR7d2-WLdPAGd9hJDV-9_Cv_fRA3UMvkU__KlVczo01pomeQ6HpJxMfISJ5yd0vamaZKGFnbTGLEbccpt2dkDwRWl8sxviWiR3NemUUyPm9g/s1600/droidpluss.png'/></a><br />
  </div><br />
<ul><br />
<li><a href='http://droidpluss.blogspot.com/p/kebijakan-privasi.html'>Privacy</a></li><br />
<li><a href='#'>Contact</a></li><br />
<li><a href='http://droidpluss.blogspot.com/p/about.html'>About</a></li><br />
<li><a class='current' href='/'>Daftar Isi</a></li><br />
</ul><br />
</div><br />
</div><br />
</div></blockquote>
</div>
<h4>
Cara Pemasangan</h4>
<div>
- Untuk Cssnya Silahkan ditaruh diatas kode <b><span style="color: blue;"></style></span></b> atau <b><span style="color: blue;">]]></b:skin></span></b></div>
<div>
- Untuk HTMLnya silahkan ditaruh diatas kode <b><span style="color: blue;"><div id='wrapper'></span></b></div>
<div>
<b><br /></b></div>
<div>
Nah, Itulah sebagian tips dari blog adik yasdil.Dan juga saya tidak lupa untuk mengucapkan terima kasih terhadap <a href="http://blog.kangismet.net/" rel="nofollow">Kang Ismet</a>.</div>
<div>
Sekian dan Terima kasih.</div>

Yeah! Sobat, Kali ini saya mau berbagi Tips Blog.Sebelumnya saya sudah membahas tentang Membuat Widget Sosial Media Dengan Efek Sticky .Kali...

Membuat Widget Sosial Media dengan Efek Sticky

Sobat, Kali ini saya akan berbagi trik yang bermanfaat.Trik ini saya ambil dari template <a href="http://droidpluss.blogspot.com/">DroidPluss </a>Milik <a href="http://blog.kangismet.net/">Kang Ismet</a>.Caranya Cukup Mudah sob, tinggal di tambahin Javascript,HTML, dan CSS.Gimana ? Tertarik dengan trik ini ? silahkan di simak yah sobat.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkrtOTfspBUJBmuph57KU1k_UdfxjCbLXCL0wrDvAg5YzaWWIdwHXreseILKca761Qgd5ujV0YHUKUEQChLZm4rhFSQHsgwuLhozpods28clGkpMZDTw0DHtHEdKOXsyRvZl65JJmzd_W/s1600/Capture156.jpg"><img alt="Membuat Widget Sosial Media dengan Efek Sticky" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkrtOTfspBUJBmuph57KU1k_UdfxjCbLXCL0wrDvAg5YzaWWIdwHXreseILKca761Qgd5ujV0YHUKUEQChLZm4rhFSQHsgwuLhozpods28clGkpMZDTw0DHtHEdKOXsyRvZl65JJmzd_W/s1600/Capture156.jpg" title="Membuat Widget Sosial Media dengan Efek Sticky" /></a></div>
<h4>
CSS</h4>
<div>
<blockquote class="tr_bq">
/* STYNKI */<br />
.sticky {<br />
  position:fixed;<br />
  top:10px;<br />
  z-index: 100;<br />
  width:274px;<br />
}<br />
  #stickywidget {<br />
  display: block;<br />
clear: both;<br />
background: #409FC5;<br />
padding: 15px;<br />
width: 280px;<br />
margin: 0px 0px 10px 0px;<br />
  }<br />
  #stickywidget h3 {color: #fff !important;<br />
padding: 5px 0px 15px 0px !important;<br />
margin: -1px -1px 0;<br />
font-weight: normal;<br />
text-shadow: 1px -1px 2px #ccc;<br />
}</blockquote>
<h4>
HTML </h4>
</div>
<div>
<blockquote class="tr_bq">
<div id='stickywidget'><br />
<h3>Sosial Media</h3><br />
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/adik.yasdil' data-layout='standard' data-share='false' data-show-faces='false' data-width='285' style='margin-bottom:5px'/><br />
<div><a class='twitter-follow-button' data-lang='id' href='https://twitter.com/MaverickZetta'>Ikuti @MaverickZetta</a></div><br />
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><br />
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/102300855950251107036' data-rel='author'/><br />
<div class='g-plusone' data-count='true' data-href='http://yasdil-blog.blogspot.com/' data-size='medium' data-width='100'/><br />
</div></blockquote>
<h4>
Javascript</h4>
</div>
<div>
<blockquote class="tr_bq">
<script type='text/javascript'><br />
$(document).ready(function() {<br />
var stickyWidgetTop = $(&#39;#stickywidget &#39;).offset().top;<br />
var stickyWidget = function(){<br />
var scrollTop = $(window).scrollTop();   <br />
if (scrollTop &gt; stickyWidgetTop) {<br />
    $(&#39;#stickywidget &#39;).addClass(&#39;sticky&#39;);<br />
} else {<br />
    $(&#39;#stickywidget &#39;).removeClass(&#39;sticky&#39;);<br />
}<br />
};<br />
stickyWidget();<br />
$(window).scroll(function() {<br />
    stickyWidget();<br />
});<br />
});<br />
</script></blockquote>
<h4>
Cara Pemasangan</h4>
</div>
<b>1. Pemasangan CSS</b><br />
<div>
- Taruh Kode CSS yang saya berikan tepat di ATAS kode <b><span style="color: blue;"></style></span></b> atau <b><span style="color: blue;">]]></b:skin></span></b></div>
<b>2. Pemasangan HTML</b><br />
<div>
- Taruh Kode HTML yang saya berikan tepat di BAWAH kode <b><span style="color: blue;">Sidebar Wrapper</span></b></div>
<b>3. Pemasangan Javascript</b><br />
<div>
- Taruh Kode Javascript yang saya berikan tepat di ATAS kode <b><span style="color: blue;"></body></span></b></div>
<div>
<br /></div>
<div>
Nah, Gimana sobat ? cukup bermanfaat artikel kali ini kan :D .Sampai berjumpa di Artikel Berikutnya yah ^_^</div>

Sobat, Kali ini saya akan berbagi trik yang bermanfaat.Trik ini saya ambil dari template DroidPluss Milik Kang Ismet .Caranya Cukup Mudah so...

Modifikasi Label Cloud Ala Blog Adik Yasdil

Assalamualaikum sobat, kali ini ada trik baru dari <a href="http://yasdil-blog.blogspot.com/">Blog Adik Yasdil</a> nih.Trik ini memang sudah lama di terapkan di setiap Template <a href="http://yasdil-blog.blogspot.com/">Blog Adik Yasdil</a>.Well, Artikel Kali ini Membahas Tentang Widget.Dan Untuk Post Sebelumnya Saya Telah Berbagi Sidebar Flat UI :D .Langsung Ke TKP aja gan ^_^<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KNcZf1KT5LWgbJ0Uq8aDZO51cZe0jXcPzo4w6wnhnLHth_8jLZMqUGlG6WpQK8wnBrTbMh-b9MyvOL2xLwVaqmJn1TPAG1go6_vguZFfuVD89v6-TwdCh78rCqoE2VnqKahyphenhyphenub3emXbh/s1600/Capture152.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Label Cloud Ala Blog Adik Yasdil" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-KNcZf1KT5LWgbJ0Uq8aDZO51cZe0jXcPzo4w6wnhnLHth_8jLZMqUGlG6WpQK8wnBrTbMh-b9MyvOL2xLwVaqmJn1TPAG1go6_vguZFfuVD89v6-TwdCh78rCqoE2VnqKahyphenhyphenub3emXbh/s1600/Capture152.jpg" title="Modifikasi Label Cloud Ala Blog Adik Yasdil" width="200" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<h4>
Tips:</h4>
<div>
- Buat Widget Label > Centang Tampilkan jumlah entri per label</div>
<div>
- Pergi Ke Menu Edit Template Lalu Cari Kode <b><span style="color: blue;">]]></b:skin></span></b> atau <b><span style="color: blue;"></style></span></b> lalu letakan kode dibawah ini tepat diatas kode tadi</div>
<div>
<blockquote class="tr_bq">
/* LABEL MODIFIKASI */<br />
   .label-size {display: inline-block;font-size:  13px;margin:2px 0;}<br />
    .label-size a {background: #3B4247;padding: 5px;color: #999; text-decoration: none;display: inline-block;}<br />
    .label-size span {background: #3D5668;padding: 5px;margin-left:-4px;display: inline-block;color: #fff;}<br />
    .label-size a:hover {background:#3A4B57; color: #fff;}<br />
#Label1 li a {color: #2c3e50;text-decoration:none;}<br />
#Label1 li a:hover, #Label2 li a:active, #Label1 li a:focus {color: #20aea6;text-decoration:none;}<br />
#Label1 li .label-counter {float:right;background-color:#2c3e50;color:#fff;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:12px;}<br />
#Label1 li:hover .label-counter {background-color:#255e96;color:white}</blockquote>
Jika Anda ingin mengatur silahkan diganti/diatur sesuka hati anda ^_^<br />
- Lalu Cari Kode<span style="color: blue;"><b> <span dir='ltr'>(<data:label.count/>)</span></b></span> dan ganti dengan kode dibawah<br />
<blockquote class="tr_bq">
<span class='label-counter'><data:label.count/></span></blockquote>
- Simpan Template<br />
<br />
Nah, Gmna gan ? Gampang Banget Kan.Jika Anda Bermasalah dalam Tips ini silahkan berkomentar atau PM saya di <a href="https://www.facebook.com/zetta.zone?ref=tn_tnmn">Facebook</a>. </div>

Assalamualaikum sobat, kali ini ada trik baru dari Blog Adik Yasdil nih.Trik ini memang sudah lama di terapkan di setiap Template Blog Adik...

[UPDATE] Sidebar Widget Conten Flat UI

Kali ini Saya Akan Memberikan Suatu Trik Yang sangat Mudah.Trik ini adalah <a href="http://yasdil-blog.blogspot.com/2014/01/sidebar-widget-conten-flat-ui.html" rel="nofollow">"Sidebar Widget Conten Flat UI"</a>.Selain Mudah trik ini tidak Ribet.Inti dari trik ini adalah <b>Penataaan CSS</b>.Nggak Usah Panjang Lebar Yah Sobat, Silahkan Masuk ke TKP yah ^_^<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLHMNSUyNjNohg2CTVkz42tNBILaGGx9KJk5JX6tOpWwPg8jS6zQbf6_yOMZv98xNFksqjNJcClMQcJ0JMrOskXJNNnyr862MjC2A0ozlix7eVjVBJaerLjBsyhOM9u2i7wiEak-wFKRpL/s1600/Capture145.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Sidebar Widget Conten Flat UI" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLHMNSUyNjNohg2CTVkz42tNBILaGGx9KJk5JX6tOpWwPg8jS6zQbf6_yOMZv98xNFksqjNJcClMQcJ0JMrOskXJNNnyr862MjC2A0ozlix7eVjVBJaerLjBsyhOM9u2i7wiEak-wFKRpL/s1600/Capture145.jpg" title="Sidebar Widget Conten Flat UI" width="187" /></a></div>
<h4>
Cara Pengerjaan:</h4>
<ul>
<li>Login ke Blogger</li>
<li>Lalu Masuk ke Menu Edit Template > Edit HTML</li>
<li>Lalu Cari kode <b></style></b> atau <b>]]></b:skin> </b>dan letakan kode dibawah ini tepat diatas kode tadi</li>
</ul>
<div>
<div>
<blockquote class="tr_bq">
/* WIDGET MODIFIKASI by Yasdil-blog.blogspot.com*/<br />
#<span style="color: blue;"><b>PopularPosts1 </b></span>.widget-content {<br />
    background:rgb(0, 74, 122);<br />
}<br />
#<b><span style="color: blue;">Label1 </span></b>.widget-content {<br />
    background:rgb(0, 64, 100);<br />
}</blockquote>
<ul>
<li> Lalu Simpan/Save Template</li>
</ul>
NB: Untuk berwarna <span style="color: blue;">Biru </span>silahkan ganti dengan ID Widget Contohnya <span style="color: blue;"><b>Label1 </b></span>atau <span style="color: blue;"><b>PopularPosts1</b></span><br />
Untuk Cara Melihat ID widget Sebagai Berikut<br />
<h4>
Cara Melihat ID widget</h4>
</div>
<div>
<ul>
<li>Buka Blog Anda</li>
<li>Lalu Klik Kanan Dan Pilih Inspect Element Seperti Gambar dibawah ini</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieK5z7VgOdlq_Zmi4qnmkgoJxpxob2R3vBw3iUM_xeBlm4uVf0WuRGayxHi-PpL_tYZBqB8NKRzGPea-fvaScgoGr2TzYpfaqDNLCK2rOVAXp6TF-sTtg2aBmtDz-hoj_T3IrNTdq2qnYj/s1600/Capture146.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Sidebar Widget Conten Flat UI" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieK5z7VgOdlq_Zmi4qnmkgoJxpxob2R3vBw3iUM_xeBlm4uVf0WuRGayxHi-PpL_tYZBqB8NKRzGPea-fvaScgoGr2TzYpfaqDNLCK2rOVAXp6TF-sTtg2aBmtDz-hoj_T3IrNTdq2qnYj/s1600/Capture146.jpg" title="Sidebar Widget Conten Flat UI" width="320" /></a></div>
<div>
<ul>
<li>Nah, Langsung saja sobat ganti dengan Tulisan berwarna Biru tadi</li>
</ul>
<div>
Nah, Sekian Artikel Kali ini.</div>
</div>
</div>
<div>
Terimah kasih Dan Semoga bermanfaat ^_^<br />
<br />
<h3>
Update</h3>
</div>
<div>
Saya Baru Tahu ternyata bisa juga diubah tag h2 nya.silahkan di pelajari css dibawah ini.</div>
<div>
<blockquote class="tr_bq">
  #<span style="color: lime;">HTML2 </span>.widget-content {background:<span style="color: blue;">#40d47e</span>}<br />
  #<span style="color: #274e13;"><b>HTML2 h2</b></span> {background:<span style="color: blue;">#27ae60</span>}<br />
  #<span style="color: lime;">PopularPosts1 </span>.widget-content {background:<span style="color: blue;">#e67e22</span>}<br />
  #<b><span style="color: #274e13;">PopularPosts1 h2</span></b> {background:<span style="color: blue;">#d35400</span>}<br />
  #<span style="color: lime;">Label1 </span>.widget-content {background:<span style="color: blue;">#9b59b6</span>}<br />
  #<span style="color: #274e13;"><b>Label1 h2</b></span> {background:<span style="color: blue;">#8e44ad</span>}</blockquote>
Keterangan:<br />
- Pada Text Saya Warnain Hijau Muda Berarti itu adalah widget content dari Widget Tersebut.<br />
- Pada Text Saya Warnain Hijau Tua+Bold Berarti itu tag h2 (tittle) dari widget tersebut.<br />
- Pada Text Saya Warnain Biru Berarti Warna Background silahkan diubah sesuka hati<br />
<br />
Untuk Mencari ID Widget sudah saya jelaskan diatas. Sekian dan terima kasih.</div>
<div>
</div>
</div>

Kali ini Saya Akan Memberikan Suatu Trik Yang sangat Mudah.Trik ini adalah "Sidebar Widget Conten Flat UI" .Selain Mudah trik ini ...