Dummy Blog

Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Klik Simpan Template. Begitu saja.

Label: CSS, Dasar, Desain Tampilan, Widget

# posted by Taufik Nurrohman @ Februari 12, 2013 0 comments

Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan:

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style type="text/css">
#dte_recent-post {
  margin:0 0;
  padding:0 0;
  font:normal 11px Arial,Sans-Serif;
  color:#333;
  margin:0 auto;
  min-height:100px;
  background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
}

#dte_recent-post li {
  list-style:none;
  margin:0 0;
  padding:7px 7px;
  background-color:white;
  border-bottom:1px solid #ddd;
}

#dte_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0 0;
  border:none;
  background:transparent;
  outline:none;
}

#dte_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#1155CC;
}

#dte_recent-post li a.title:hover {
  text-decoration:underline;
}

#dte_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}
</style>
<ul id="dte_recent-post"></ul>
<script type="text/javascript">
//<![CDATA[
var rp_homePage    = "http://nama_blog.blogspot.com", // Your blog homepage
    rp_numPosts    = 5, // How many posts?
    rp_thumbWidth  = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars    = 100, // Number of posts summary
    rp_sortByLabel = false, // Replace false with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
    rp_noImage     = "http://reader-download.googlecode.com/svn/trunk/images/meee-44x44.png", // A 'no-image' image
    rp_monthNames  = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink  = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer   = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

Konfigurasi Widget

Label: Dasar, JavaScript, Posting, Widget

# posted by Taufik Nurrohman @ Juli 21, 2012 0 comments

Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang mirip seperti ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Tepat di dalam elemen .addthis_toolbox tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <span class="addthis-tooltip">Bagikan kepada teman!</span>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Sekarang masuklah ke halaman editor HTML blogmu kemudian tambahkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>:

/* Modifikasi widget AddThis */

.addthis_toolbox {
  width:150px;
  position:relative;
  background-color:darkgreen;
  padding:10px 15px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;    
}

.addthis_toolbox .addthis-tooltip {
  display:block;
  width:140px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-align:center;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.addthis_toolbox .addthis-tooltip:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:15px;
}

.addthis_toolbox:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:20px;
}

/* Akhir modifikasi widget AddThis */

Klik Simpan template.

Label: CSS, Dasar, Desain Tampilan, Tooltip, Widget

# posted by Taufik Nurrohman @ April 02, 2012 0 comments

Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.

Pertama-tama masuklah ke halaman tata letak widget kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:

<style type="text/css">
/*
Juli 2011 :: Taufik Nurrohman
Visit: http://hompimpaalaihumgambreng.blogspot.com
*/
#paneltovik {display:block}

#panel {
  background-color:#96BC43;
  border:2px solid #a7cc54;
  border-width:2px 2px 0 2px;
  height:250px;
  overflow:auto;
  margin:0;
  padding:10px;
  color:#111;
  font:normal 12px Times,Serif;
  -webkit-box-shadow:inset 0 0 7px #222;
  -moz-box-shadow:inset 0 0 7px #222;
  box-shadow:inset 0 0 7px #222;
  display:none;
}

.tombolpanel {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:#333;
  border-top:3px solid #a7cc54;
  color:#e5e5e5;
  text-align:center;
  font:bold 14px Times,Sans-Serif;
  font-style:italic;
  -webkit-box-shadow:0 -1px 2px #222;
  -moz-box-shadow:0 -1px 2px #222;
  box-shadow:0 -1px 2px #222;
  -webkit-border-radius:0 0 14px 14px;
  -moz-border-radius:0 0 14px 14px;
  border-radius:0 0 14px 14px;
}

.tombolpanel:hover {color:#ccc}

.tombolpanel:after {
  content:'';
  position:absolute;
  top:100%;
  margin-top:-10px;
  left:5%;
  width:0;
  height:0;
  display:block;
  border-width:20px;
  border-style:solid;
  border-color:#333 #333 transparent #333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.tombolpanel').click(function() {
        $('#panel').slideToggle('slow');
        $('.tombolpanel span.in').toggle();
    });
});
</script>
<div id="paneltovik">
  <div id="panel">

    ... KONTEN DI SINI ...

  </div>
  <div class="tombolpanel">
    <span class="in">Buka Panel</span>
    <span class="in" style="display:none;">Tutup Panel</span>
  </div>
</div>

Kode yang Saya beri garis bawah adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi templatemu. Jika templatemu sudah dilengkapi dengan JQuery, buang kode tersebut dari widget.

Klik Simpan dan lihat hasilnya:

Label: Dasar, JQuery, Sidebar, Widget

# posted by Taufik Nurrohman @ November 04, 2011 0 comments