Tuesday, July 31, 2012

Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger

Buka gambar di tab baru jika tidak jelas

Scrolling Sticky Bar adalah sebuah widget yang muncul di halaman kamu. Cara kerjanya sama seperti scrolling facebook header, kamu tahu kan ? itu loh, sebuah header yang jika kita scroll ke bawah akan mengikuti arahan pointer mouse.

Widget ini juga berisi sosial sharing yang berisi share ke twitter, facebook ataupun google plus. Sehingga pengunjung yang tertarik dengan postingan kamu bisa langsung membagikannya ke teman-temannya. Secara tidak langsung akan menambah nilai plus dari blog kamu. Langsung saja deh ga usah panjang lebar lagi. Kita coba menaruhnya di blog kita :)

Untuk demo langsungnya bisa kamu lihat disini

1. login ke Blogger.com

2. Klik Template --> Edit HTML --> Cari kode <body> dan kamu salin kode di bawah ini kemudian kamu letakkan di bawah kode <body>.

<div id='SYB-Bar-Container'>
<div id='SYB-Bar-Content'>
<ul id='SYB-Bar-Left'>
<li class='Home'> <a href='MASUKKAN ALAMAT URL BLOG KAMU'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='SYB-Bar-Right'>
<li class='Subscribe'> <div class='SYB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=MASUKKAN USERNAME FEEDBURNER KAMU&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='MASUKKAN USERNAME FEEDBURNER KAMU'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.hzndi.blogspot.com.com" title="Tutorial Blog dan SEO" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div> 

3. Sekarang kamu cari kode </body>, salin kode di bawah ini dan letakkan di atas kode </body>. Untuk mencari kode </body>, jangan lupa gunakan ctrl +f oke :)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#SYB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>
</script>
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>  
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> 

4. Terakhir, kamu cari kode ]]></b:skin>, salin lagi kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

#SYB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

 #SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #SYB-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

#SYB-Bar-Container *{
padding:0;
}

#SYB-Bar-Container a {
text-decoration:none;
}

#SYB-Bar-Content{
width:1024px;
margin:0 auto;
}

#SYB-Bar-Content li{
list-style:none;
float:left;
}

#SYB-Bar-Left{
float:left;
width:45%;
}

#SYB-Bar-Right{
float:right;
width55%;
}

#SYB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#SYB-Bar-Right li{
margin-top:-7px;
}

#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#SYB-Bar-Left .Home a{
background:#143eb4;
}

#SYB-Bar-Left .Home a:hover{
background:#1556fa;
}

#SYB-Bar-Right .Subscribe{
margin-top:-14px;
}



#SYB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#SYB-Bar-Right .btt a:hover{
background:#06b421;
}

.SYB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.SYB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#SYB-Bar-Container{
display:none;
}
}

5. Simpan template dan kamu lihat hasilnya, thanks to http://www.hackinguniversity.in/ yang sudah membuat widget ini :)

Menambahkan Kotak Pada Label Blog Berbentuk Cloud Bagian 2



Di postingan sebelumnya saya juga sudah membagikan trik CSS3 untuk mempercantik desain label blog kamu. Sebua widget yang di buat oleh http://www.stylifyyourblog.com/ ini terlihat cantik dan elegan. Mungkin kamu bisa lihat demo langsungnya di blog tersebut, atau seperti gambar di atas.

Dan jika kamu tertarik untuk membuatnya, kamu bisa mencobanya dengan mengikuti langkah di bawah ini. Sangat mudah kok :)

1. Login ke Blogger.com


2. Klik Tata Letak --> Tambah Gadget --> Label. Untuk pengaturan labelnya bisa kamu pilih sesuka kamu. iya, pilihnya yang cloud yah jangan yang daftar. Kemudian klik simpan.



3. Klik Template --> Edit HTML --> Klik Lanjutkan --> Cari kode ]]></b:skin>, gunakan ctrl + f untuk memudahkan pencarian. Oh iya jangan lupa di back up dahulu templatenya yah.

4. Salin kode CSS di bawah ini dan letakkan diatas/sebelum kode ]]></b:skin>.

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

5. Simpan template dan kamu lihat hasilnya :)

Sunday, July 29, 2012

Menambahkan Kotak Pada Label Blog Berbentuk Cloud dengan CSS3


Di tutorial kali ini saya akan membagikan sebuah trik lagi untuk mempercantik label blog kamu. Jika biasanya label blog terlihat standar dan kurang menarik, dengan menggunakan trik ini label akan terbagi ke dalam kotak-kotak dan terlihat cantik tentunya.

Cara membuatnya pun mudah, kita hanya perlu menambahkan sedikit kode CSS dan widget label kita pun akan terlihat "Wah". Dan jika kamu benar-benar tertarik untuk membuatnya, bisa kamu lihat tutorialnya di bawah ini. Untuk hasilnya seperti gambar di atas yah :)

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> Label. Untuk pengaturan labelnya bisa kamu pilih sesuka kamu. iya, pilihnya yang cloud yah jangan yang daftar. Kemudian klik simpan.



3. Setelah itu, kamu klik Template --> Edit HTML --> Klik Lanjutkan --> Centang Expand Widget Template. Jangan lupa juga untuk mem-backup template kamu terlebih dahulu.

4. Cari kode ]]></b:skin>, dan salin kode di bawah ini dan letakkan di bawah kode ]]></b:skin>.

/*CSS3 Bricks Style Labels By http://www.hzndi.blogspot.com/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By http://www.hzndi.blogspot.com/ */

5. Cari kode yang kira-kira tampilannya seperti ini,

<b:widget id='Label1' locked='false'

.... (hingga)

</b:widget>

Kamu hapus semua kode dari


<b:widget id='Label1' locked='false'

.... (hingga)

</b:widget>

dan kamu ganti dengan kode di bawah ini.

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>
            </h2>
        </b:if>
        <div class='textwidget'>
            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                <b:if cond='data:display == &quot;list&quot;'>
                    <ul>
                        <b:loop values='data:labels' var='label'>
                            <li>
                                <b:if cond='data:blog.url == data:label.url'>
                                    <span expr:dir='data:blog.languageDirection'>
                                        <data:label.name/>
                                    </span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>
                                    <span dir='ltr'>(
                                        <data:label.count/>)</span>
                                </b:if>
                            </li>
                        </b:loop>
                    </ul>
                    <b:else/>
                    <b:loop values='data:labels' var='label'>
                        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                            <b:if cond='data:blog.url == data:label.url'>
                                <span expr:dir='data:blog.languageDirection'>
                                    <data:label.name/>
                                </span>
                                <b:else/>
                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                            </b:if>
                            <b:if cond='data:showFreqNumbers'>
                                <span class='label-count' dir='ltr'>(
                                    <data:label.count/>)</span>
                            </b:if>
                        </span>
                    </b:loop>
                </b:if>
                <b:include name='quickedit' />
            </div>
        </div>
    </b:includable>
</b:widget>

6. Simpan template dan lihat hasilnya, jangan takut untuk mencoba :)

Membuat Widget Social Bookmark 3D yang Bisa Berputar

Social Bookmark


Setelah sempat vakum bebeapa hari di karenakan akses internet yang di blokir sepihak oleh provider, akhirnya saya bisa meng-update rumah saya yang sederhana ini. Di tutorial kali ini, saya akan membagikan widget sosial bookmark. Yup, memang di beberapa postingan sebelumnya saya memang pernaha membagikan tentang widget sosial bookamrk. Ada yang berbentuk segitiga, hati dan lain sebagainya yang bisa kamu cari di daftar menu.

Kalau widget yang saya bagikan ini, terlihat sangat cantik dan menarik. Bagaimana tidak, selain bentuknya yang imut dan 3D, widget ini apabila kamu letakkan kursor kamu ke icon-nya, maka iconnya akan berputar 360 derajat secara otomatis ! Wow sangat keren bukan ? naha kalau kamu tertarik dengan widget ini, bisa kamu coba triknya dengan mengikuti langkah-langkah di bawah ini.

1. Masuk ke Blogger.com dengan akun kamu.

2. Klik Tata letak --> Tambah Gadget --> Pilih HTML/Javascript dan kamu masukkan kode-nya di bawah ini.

    <style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> 

<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="MASUKKAN URL FEED KAMU DISINI" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> 

<!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="MASUKKAN URL FACEBOOK KAMU DISINI" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> 

<!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="MASUKKAN URL TWIITER KAMU DISINI" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> 

<!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="MASUKKAN URL GOOGLE PLUS KAMU DISINI" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> 

<!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="MASUKKAN URL PINTEREST KAMU DISINI" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>

 <!--Start Feed Count Button--> <a href="MASUKKAN URL FEEDBURNER KAMU DISINI" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/MASUKKAN-USERNAME-FEEDBURNER-KAMU DISINI?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

3. Tinggal kamu ganti saja kode yang berwarna biru, masukkan kedalam kotak HTML/Javascript tadi, setelah itu kamu simpan deh, mudah bukan ? untuk demo langsung widgetnya, bisa kamu lihat di bawah ini.




Icon Icon Icon Icon Follow Me on Pinterest

spice up your blog

Tuesday, July 24, 2012

Blogger Vs WordPress, Mana yang Lebih Baik ?

Blogger vs Wordpress


Berbicara tentang dunia blog, tentunya kita sudah mengenal 2 platform dunia blog yang sangat terkenal dan terbesar yakni blogger dan wordpress. Tentunya diantara kedua platform tersebut memiliki kelebihan dan kekurangan masing-masing. Dan di artikel kali ini saya akan menjelaskan tentang kedua platfrom tersebut.

Blogger Vs Wordpress

Blogger merupakan salah satu layanan blog yang di akuisi oleh google sejak tahun 2003. Dibawah subdomain blogspot.com, blogger kini menjadi platform blog yang digunakan oleh para pemula yang baru saja terjun di dunia blog. Terlebih lagi dengan kemudahan user interface-nya dan fitur-fiturnya, blogger pun semakin di gemari oleh semua kalangan. Dan di tahun 2012 ini saja blogger memiliki perubahan yang sangat signifikan. blogger sudah menyediakan fitur permalink atau tautan permanen, mengatur robots.txt untuk SEO dan lain sebagainya.

Sedangkan Wordpress, juga merupakan layanan blog pula. Bedanya dengan blogger, wordpress dapat di modifikasi sesuai penggunanya. Seperti yang saya kutip dari wikipedia, WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya.

Oke itu dari segi pengertiannya, nah kalau dari segi fitur-fitur yang di sediakan oleh kedua platform tersebut akan saya jelaskan di bawah ini :

Fitur Blogger
  •      Mudah untuk mengedit serta membuat postingan
  •      Kendali kontrol atas Desain
  •      Memungkinkan monetisasi
  •      Tidak harus memerlukan SEO plug-in
  •      Terindeks secara otomatis oleh google (karena memang kepunyaan google
Fitur Wordpress
  •      Jumlah Kontrol atas Desain dan Template
  •      Kendali kontrol terhadap Monetisasi
  •      Harus menambahkan plugin SEO dengan pilihan yang dapat disesuaikan.
  •      Postingan terindeks secara perlahan-lahan tidak secara cepat
  •      Mendukung ribuan plugin

Membandingkan Antara Blogger dan Wordpress

Blogger

Blogger semenjak di beli oleh google memiliki beberapa keuntungan yang tidak di miliki oleh Wordpress, seperti yang bisa kita lihat di fitur-fitur blogger diatas. Keuntungan yang membuat postingan-postingan di blogger lebih cepat terindeks daripada wordpress. Namun walaupun postingannya lebih cepat terindeks, hal ini  tidaklah mempengaruhi dalam kefektifan di peringakt mesin pencari. Ibaratnya, postingan yang lebih cepat terindeks, tidak ada jaminan untuk langsung mendapat peringkat pertama di dalam search engine.

Pada kenyataannya, google lebih menyukai postingan yang berasal dari blogger ketimbang wordpress. terlebih lagi kamu menulis postingan yang fresh, bermanfaat, orisinil serta berkualitas. Dan hal ini lah yang membuat blog kamu semakin dicintai oleh google. Mungkin untuk lebih jelasnya bisa kamu lihat tabel perbandingan indexing antara blogger, tumblr, dan wordpress.

Blogger vs Wordpress

Wordpress

Pengguna WordPress harus menghadapi masalah Ranking di mesin pencari saat memulai dunia blog. Jika kita berbicara tentang WordPress, maka kita perlu melakukan upaya ekstra dalam sebagian besar-meskipun 50% dari Wordpress CMS sudah Search Engine Optimized. Namun walaupun harus membuat usaha ekstra, banyak web-web yang membaha trik-trik wordpress untuk lebih disukai oleh google.

Blogger dan WordPress dalam Hal Keuangan

Blogger

Pada awalnya orang membuat blog mungkin haya sekedar hobi atau mengisi waktu luang, namun lama kelamaan hal tersebut bergeser kepada mengisi kantong. Yup, jangan buat blog kita kosong melompong, buatlah hobi kita menjadi sesuatu hal yang bermanfaat seperti menghasilkan uang  tentunya.

Memang dengan menggunakan blogger kita bisa menghasilkan uang melalui iklan yang dipajang, namun tahukah kalian jika bahwa blogger merupakan salah satu platform yang tidak efektif untuk menghasilkan uang ! What ? ya walaupun kamu dapat menaruh iklan kamu dimana saja, namun hal itu tidak seefektif menghasilkan uang melalui WordPress.

WordPress

WordPress merupaka mesin penghasil uang yang lebih baik dari bloggeer, kenapa ? Karena kamu dapat mengedit file apapun serta memeiliki kontrol penuh terhadap iklan yang anda kelola. Kamu juga dapat menggunakan plugin-plugin untuk adsense yang bisa di terapkan di WordPress serta membuat blog kamu semakin banyak mengumpulkan receh.

Blogger vs Wordpress dalam Hal Desain

Blogger

Di blogger, kita bisa mengedit template dengan mudah, mendesainnya semau kita dan kamu juga bisa mendownload miliaran template yang tersedia khusus untuk blogger. Biasanya para pemula web designer akan lebih condong memilih blogger daripada WordPress dalam hal kustomisasi desain.

WordPress

Well, jika berbicara dalam hal desain lebih jauh, WordPress lah pemenangnya, kenapa ? karena dengan mendukung berbagai macam bahasa pemrograman dan juga pengambilan perspektif desain blog berplatfor WordPress lebih unggul. Banyak dari para web designer ingkat lanjut lebih memilih WordPress sebagai bahan percobaannya di bidang desain web.

Kesimpulan

Keduanya sama-sama bagus dan sama-sama layak di perhintungkan, jika berbicara tentang dalam hal kemudahan penggunaan, user interface yang ramah, kecepatan terindeks mesin pencari serta dukungan tutorial-tutorial untuk blogger, blog berplatform blogger lah pemenangnya.

Namun jika berbicara hal tentang desain dan membuat uang dengan cepat, platform bertipe Wordpress lah pemenangnya. Semuanya bergantung kepada diri kita masing-masing. Jika kamu merasa baru terjun di dunia blog, gunakanlah platform blogger, namun jika kamu ingin mencoba tantang baru atau sudah lebih maihr, maka gunakanlah Wordpress.

Jadi, yang mana pilihan kamu ? :)

Sunday, July 22, 2012

Cara Membuat Twitter Box Untuk Blogger



Di sore hari ini saya akan membagikan salah satu widget yang sangat bagus untuk kamu. Namanya Twitter Follower Box. Nah fungsi dari widget ini tentu saja akan menampilkan semua follower twitter kamu layaknya facebook fanpage. Thanks to Mark Carey yang sudah membuat widget ini. Langsung saja lihat caranya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode HTML/Javascript di bawah ini.

<!-- Twitter Fan Box --> <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("MASUKKAN-USERNAME-TWITTER-KAMU-DISINI");</script><div style="font-size:10px;"> <a href="http://goo.gl/tQQ6e">Tutorial Blog dan SEO</a></div> <!-- End Twitter Fan Box -->

3. Simpan Template dan amu lihat deh hasilnya :)

Saturday, July 21, 2012

Cara Membuat Widget Sosial Bookmark Berputar


Sore-sore begini enaknya membagikan tutorial widget social bookmark. Yup ditengah kegalauan saya yang sudah 5x lebih daftar google adsense namun terus2an di tolak, akhirnya saya memutuskan untuk membagikan tutorial saja. Di kesempatan kali ini saya akan membagikan widget sosial bookmark yang di postingan sebelumnya sudah banyak sekali saya berikan tentang widget ini.

Widget ini akan memberikan kepada pengunjung kamu untuk like fan page facebook kamu, follow twitter kamu hingga berlangganan artikel-artikel blog kamu hanya dengan sekali klik. Widget yang di buat menggunakan CSS3 ini sangat menakjubkan dan cocok dengan blog kamu. Dan ketika di sorot, langsung deh wusss wuss, widget ini akan berputar- putar dengan cantiknya :D Oh iya, saya juga sudah menyertakan demo widgetnya loh :)

Langsung saja kamu lihat tutorialnya di bawah ini oke.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kemudian kamu salin kode di bawah ini sesuai dengan keinginan kamu. Saya sudah menempatkan 3 widget spesial yang bisa kamu pilih :)

A. Gaya Putar 180'





<style>
p#hb_socialicons img {
 /* Spinning Social Icons Widget By hzndi.blogspot.com */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By hzndi.blogspot.com */
</style> 


<center><div id="hb_socialicons">
<a href="MASUKKAN URL FACEBOOK KAMU DISINI">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="MASUKKAN URL TWITTER KAMU DISINI">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="MASUKKAN URL GOOGLE PLUS KAMU DISINI">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="MASUKKAN URL FEEDBURNER KAMU DISINI">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="MASUKKAN URL YOUTUBE KAMU DISINI">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</div>
</center>


B. Gaya Putar 360'








<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By Hzndi.blogspot.com */
</style> 


<center><div id="hb_socialicons">
<a href="MASUKKAN URL FACEBOOK KAMU DISINI">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="MASUKKAN URL TWITTER KAMU DISINI">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="MASUKKAN URL GOOGLE PLUS KAMU DISINI">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="MASUKKAN URL FEEDBURNER KAMU DISINI">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="MASUKKAN URL YOUTUBE KAMU DISINI">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</div>
</center>


C. Gaya Putar 360' bagian 2








<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By HelperBlogger */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}


/* Spinning Social Icons Widget By Hzndi.blogspot.com */
</style> 

<center><div id="hb_socialicons">
<a href="MASUKKAN URL FACEBOOK KAMU DISINI">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    <a href="MASUKKAN URL TWITTER KAMU DISINI">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    <a href="MASUKKAN URL GOOGLE PLUS KAMU DISINI">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="MASUKKAN URL FEEDBURNER KAMU DISINI">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    <a href="MASUKKAN URL YOUTUBE KAMU DISINI">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</div>
</center>



3. Simpan Template dan lihat hasilnya :D

Membuat Blog Anti Copas Menggunakan CSS


Duluu sekali, saya pernah membagikan salah satu trik agar postingan serta artikel kamu tidak bisa di copas oleh orang lain. Pastinya sangat menjengkelkan dan mengesalkan bila artikel yang sudah kita buat susah payah dengan penuh keringat dan perjuangan, eh orang lain malah tinggal copas seenaknya. Nah berikut ada 1 tips yang bisa kamu coba jika ingi artikel kamu tidak bisa di copas yakni dengan menggunakan trik CSS.

Tutorial

1. Login Blogger.com

2. Klik Template --> Edit HTML --> Cari kode ]]></b:skin> kemudian kamu salin kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

3. Simpan template dehhh :)

Cara Membuat Recent Post Berjalan Dengan Jquery

Di sela-sela waktu berpuasa, saya akan membagikan sebuah tutorial tentang bagaimana caranya membuat recent post atau yang biasa dikenal dengan artikel terbaru berjalan sendiri. Nah loh ! berjalan sendiri ? maksudnya bagaimana tuh ? maksudnya, widget ini akan menampilkan artikel terbaru kamu dari atas ke bawah. Kira-kira screen shotsnya seperti gambar yang ada di atas itu loh ! nantinya, apabila kita menyorot gambar pada widget tersebut, maka gambar tersebut akan berputar2 wush2, mantaaap sekali bukan ? nah langsung saja kamu lihat tutorialnya di bawah ini :)

Tutorial

1. Login ke Blogger.com

2. Klik Template --> Edit HTML --> Klik Lanjutkan --> Kamu cari kode </head> dan salin kode di bawah ini dan kamu letakkan  kode yang sudah kamu salin di atas kode </head>. Ini di gunakan untuk menambahkan efek berputar pada widget kamu.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

3. Simpan Template, setelah itu kamu klik lagi Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode di bawah ini ke dalam kotak HTML/Javascript dtersebut.

<style type="text/css" media="screen">
<!--

/* ========== hzndi.blogspot.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://lh6.googleusercontent.com/-A6a829gqfDQ/T-3xppy6MlI/AAAAAAAACFE/RrOao4P11Uk/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.hzndi.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

NOTE :
  • Ganti height: 385px; untuk mengatur tinggi widget
  • Ganti width: 295px; untuk mengatur lebar widget
  • Gnumposts = 10; = Untuk menampilkan jumlah total postingan.
  • home_page = "http://www.hzndi.blogspot.com/"; = Ganti dengan alamat blog/web kamu
  • limitspy=4; = di gunakan untuk menampilkan jumlah postingan yang tampil pada widget
  • intervalspy=4000; = Di gunakan untuk kecepatan scroll
4. Simpan dan lihat deh hasilnya hehehe

Penasaran dengan widget Recent Post lainnya ? Klik di bawah ini !

1. Membuat Widget Postingan terbaru dengan Scroll
2. Auto Scrolling Widget Postingan Terbaru Untuk Blogger
3. Cara Membuat Recent Post (Postingan Terbaru) dengan Javascript

Twitter Delicious Facebook Digg Stumbleupon Favorites More