Saturday 27 July 2013

Awesome Slider With Progress Bar for Blogger

,
CSS slider
Earlier I have shared with you a simple CSS slider with many effects. And now I am going to share another Slider which is really awesome. This slider is little different than previous one. I have added a program bar when sliding image will change then the progress bar will complete loading. You would see when you mouse over on the slider then a pause button will appear as well as the slider will pause.  A beautiful image border added and it will change color on mouse over as well as you would see a shadow of the slider below frame. This slider build on complete CSS coding, not added any heavy javascript file. Whole code depend of moz and webkit transition affect. For using the slider you must use image with 600 X 200 px wide. You can use any image resizer to make the perfect size. This slider also able to display post caption within a transparent section. Hope it will help to beautify  your blog. See the Demo from below before proceed to the tutorial.


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by Pressing   Ctrl + F
Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates. 


/* Awesome Slider by www.bloggerspice.com */ 
#BloggerSpiceAwesomeSlider {    width: 600px;    height: 200px;    margin: 40px auto 0;    overflow: visible;    background-color: #362c30;    border: 10px solid #362c30;    -moz-transition: all 150ms ease-in;    -webkit-transition: all 150ms ease-in;    -o-transition: all 150ms ease-in;    position: relative;}
#BSmask {    overflow: hidden;}
#BloggerSpiceAwesomeSlider:hover {    background-color: #fff;    border: 10px solid #00477D;}
#BloggerSpiceAwesomeSlider:hover #BSpause {    opacity: 1;}
#BloggerSpiceAwesomeslider:hover #BSprogress {    background-color: rgba(8,8,8,0.0);}
#BloggerSpiceAwesomeSlider:hover ul, #BloggerSpiceAwesomeSlider:hover #BSprogress, #BloggerSpiceAwesomeSlider:hover {    -moz-animation-play-state: paused;    -webkit-animation-play-state: paused;}
#BSpause {    width: 600px;    height: 200px;    position: absolute;    top: 0;    opacity: 0;    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8PWCce7rLc_kxgO37rzLpfgKpCKtrHHKw-U5R1C1KSEP82q_8Q8N4sAm2fFqMJQ7E1uSwcz7ZSbeDzQp5eTuagk4Nsq6OkSBeoEjdERL3Wnkemw7ycKlNRypTkpRMvsVQM1pHQUMvEpo/s1600/BS+pause.png);    background-position: 566px 10px;    background-repeat: no-repeat;    pointer-events: none;    -moz-transition: all 150ms ease-in;    -webkit-transition: all 150ms ease-in;    -o-transition: all 150ms ease-in;}
#BSprogress {    width: 2px;    height: 5px;    background-color: #0066B3;    -moz-animation: BSprogress 18s infinite;    -webkit-animation: BSprogress 18s infinite;    position: relative;    top: -1px;    -moz-transition: all 150ms ease-in;    -webkit-transition: all 150ms ease-in;    -o-transition: all 150ms ease-in;}
#BloggerSpiceAwesomeSlider ul {    width: 2400px;    list-style: none;    padding: 0;    margin: 0;    -moz-animation: slide-animation 18s infinite;    -webkit-animation: slide-animation 18s infinite;    position: relative;    left: 0px;}
#BloggerSpiceAwesomeSlider li {    display: inline;    width: 600px;    height: 200px;    margin: 0;    padding: 0;    float: left;    position: relative;    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7s4kTzWjnQxL8asMSG1hyphenhyphen1QO0e6VKKBL4LAENOxehfnIFk7Hpq3GIXawJk1dYUJlGHGU1_TBIaRoaGcrw3SanvupCyCivskOFFZSe4jNVGeCJQvbioMc593aHb3FLvwyqG0wI9B-lvuf/s1600/BS+loading.gif);    background-position: 50% 50%;    background-repeat: no-repeat;}
#BloggerSpiceAwesomeSlider li:last-of-type {    background-color: #362c30;}
#BloggerSpiceAwesomeSlider li a {    display: block;    text-decoration: none;}
#BloggerSpiceAwesomeSlider li span {    display: block;    width: 560px;    padding: 15px 20px;    position: absolute;    bottom: 0;    left: 0;    background-color: rgba(54,44,48,0.6);    border-top: 1px solid #362c30;    text-shadow: 1px 1px 1px #362c30;    pointer-events: none;    text-align: left;}
#BloggerSpiceAwesomeSlider-shadow {    width: 100%;    height: 260px;    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEZGWkKNKpTBZ7NLjR0Hd7gQWIRVgqy7whaP8QKrwB8NPz8FOeYApnxdPBLKd89Adq5HJTalv3hexjqe0FrASZpB5PRUSsD696XrCXB8wAUV5BfwvMZVX8g363lKgaQw_pluNdEB69d8b/s1600/shadow-namkna-blogspot-com-v2.png);    background-position: center bottom;    background-repeat: no-repeat;    margin: 10px auto 0;}
@-webkit-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-moz-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-webkit-keyframes BSprogress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-moz-keyframes BSprogress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}
#BloggerSpiceAwesomeSlider ul li span h2 {    font-size: 24px;    line-height: 24px;    color: #fff;    font-weight: normal;    font-family: 'Communist-Regular';    text-shadow: 1px 1px 1px #362c30;}
Step 5 Now Find this code <div id='main-wrapper'> by Pressing   Ctrl + F

Step 6 Now Paste the Below code above <div id='main-wrapper'>
<div id="BloggerSpiceAwesomeSlider-shadow"> <div id="BloggerSpiceAwesomeSlider">      <div id="BSmask">       <ul><!-- Awesome slider by www.bloggerspice.com -->        <li>         <a href="#" title="Img Alter Text"><img src="Image URL Here" /></a><span><h2>ADD CAPTION HERE</h2></span>        </li><!-- Awesome slider by www.bloggerspice.com -->        <li>         <a href="#" title=" Img Alter Text "><img src=" Image URL Here " /></a>         <span><h2> ADD CAPTION HERE </h2></span>        </li><!-- Awesome slider by www.bloggerspice.com --><li>         <a href="#" title=" Img Alter Text "><img src=" Image URL Here " /></a><span><h2> ADD CAPTION HERE </h2></span>        </li><!-- Awesome slider by www.bloggerspice.com--><li>         <a href="#" title=" Img Alter Text "><img src=" Image URL Here " /></a><span><h2> ADD CAPTION HERE </h2></span>        </li>       </ul>   </div>      <div id="BSprogress">      </div>      <div id="BSpause">      </div> </div></div>

Customization


  • Replace # with Post URL.
  • Replace Image URL Here  with Post Image URL.
  • Change Img Alter Text with Image alternative text.
  • Change ADD CAPTION HERE with Post name.
Read more →

Cara Membuat Biodata Penulis Dengan CSS Efek Hover

,


Cara Membuat Biodata Penulis Dengan CSS Efek Hover
Beberapa Blogger profesional sering menggunakan atau menampilkan biodatanya dapa Blog nya supaya mudah dikenal oleh para pengunjung. Dan selama ini yang kita lihat tampilan biodatanya biasa - biasa aja. Tapi pada tips kali ini saya akan berbagi tutorial cara membuat biodata penulis yang berbeda, yaitu dengan CSS efek hover. Widget HTML/JavaScript untuk biodata penulis ini bisa di letakkan pada pada sidebar ataupun footer. Oh ya kode CSS ini dibuat oleh Mohammad Fazle Rabbi dan disini saya hanya sharing aja. .
Sobat bisa lihat demo nya di sini.
Cara memasangnya gampang banget tinggal menambahkan gatget saja di sidebar atau footer blog. Berikut ini adalah caranya membuat biodata penulis dengan CSS efek hover:
1. Masuk ke dashboard Blogger > Tata Letak atau Layout.
2. Tambahkan Gadget > HTML/JavaScript.
3. Copy dan paste kode di bawah ini:

<style>
 .BSprofileBorder {
 margin:0 auto;
 padding:5px;
 width:290px;
 border-radius:5px;
 border: 5px #009999 solid;
 min-height:70px;
 }.BSprofileBorder1 {
 margin:5px auto;
 padding:5px;
 width:auto;
 border-radius:5px;
 border: 5px #80C8FE solid;
 min-height:70px;
 }#BSprofile{
 border:2px solid #888;
 margin:2px 5px 0px 5px;
 padding:2px;
 }
 #BSprofile:hover {
 border:2px solid #ccc;
 cursor:pointer;
 }
 .BSprofileopacity  {
 opacity: 0.5;
 margin-left: 50px;
 -moz-transition: all 0.5s ease-out;
 -o-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 -ms-transition: all 0.5s ease-out;
 transition: all 0.5s ease-out;
 -moz-transform: rotate(7deg);
 -o-transform: rotate(7deg);
 -webkit-transform: rotate(7deg);
 -ms-transform: rotate(7deg);
 transform: rotate(7deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
 zoom: 1;
 }
 .BSprofileopacity:hover  {
 opacity: 1;
 margin-left: 0px;
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
 zoom: 1;
 -moz-box-shadow: 1px 1px 4px #000;
 -webkit-box-shadow: 1px 1px 4px #000;
 box-shadow: 1px 1px 4px #000;
 } 
</style>
<div>
 <div>
 <img id="BSprofile" height='50' src="YOUR_IMAGE_OR_PICTURE" width='50' align="left"/>
 I'm <a rel="me" href=https://plus.google.com/u/0/GOOGLE_PLUS_ID/ title="YOUR NAME" target="_blank"> YOUR NAME </a> YOUR OTHER INFORMATION </span> >>>
 <a style="color:#888;" href="ABOUT_ME" target="_blank">Read More &#187;</a>
</div>
</div>     

Ganti tulisan yang berwarna merah seperti rincian dibawah ini:

YOUR_IMAGE_OR_PICTURE - Ganti dengan URL photo profile yang mau sobat pakai.
GOOGLE_PLUS_ID - Ganti dengan 21 digit ID Google+ sobat.
ABOUT_ME - Ganti dengan URL halaman 'About Me' yang sobat punya.
YOUR_NAME - Ganti dengan nama yang mau sobat pakai.
YOUR OTHER INFORMATION - Ganti dengan informasi apapun mengenai diri sobat, seperti negara/lokasi, judul (ex. Admin, Penulis, dll) atau basic informasi lainnya tentang diri sobat.

P.S : kalau sobat mahir dalam pengeditan CSS, sobat juga bisa mengedit warna dasar atau garis batas sesuai dengan keinginan sobat.

4. Simpan widget dan selesai.
5. Lihat hasilnya pada blog sobat. 
Selamat membuat biodata penulis dengan CSS efek hover. Enjoy it! Salam Blogger!
Read more →

Effect Lipat Join Us On Facebook Pada Sudut Blog

,


Effect Lipat Join Us On Facebook Pada Sudut Blog - Begitu banyak sekali cara yang dapat kita lakukan supaya blog berpenampilan semakin menarik, tidak hanya manusia blog juga harus berpenampilan menarik agar para pengunjung blog betah dan nyaman saat berada di halaman blog kita. Pada kesempatan kali ini disini akan dibahas cara memasang effect lipat join us on facebook pada sudut blog, karena selain penampilan blog akan lebih menarik bermanfaat juga untuk mempermudah pengunjung mengetahui keberadaan halaman fans page di facebook. Effect lipat ini sering kali disebut juga dengan istilah effect page peel oleh para mastah blogger.
Page peel blog memang menarik dan unik jika diperhatikan, halaman yang melipat pada sudut blog akan terbuka lebar lipatannya jika mouse di arahkan diatas efek tersebut, jika Anda ingin lihat contohnya seperti pada sudut kanan atas blog ini. Biasanya effect halaman lipat ini oleh pada master - master blogger dipergunakan untuk memasang iklan. Namun pada kesempatan kali ini kita akan membuat effect halaman lipat join us on facebook. Nah, berikut ini adalah langkah - langkah cara membuat effect lipat pada blog :

1. Login ke akun Blogger.
2. Pilih Template » Edit HTML » Lanjutkan » Expand Template Widget.
3. Cari kode </head>, lalu letakkan kode dibawah tepat diatas kode </head>.

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/arieadie &#39;</script>
<script src='https://sites.google.com/site/republicofnote/script/page_peel_effect.js/' type='text/javascript'/>

4. Silahkan ganti tulisan yang warnanya merah dengan nama fans page facebook Anda.
5. Klik Save.
6. Refresh halaman blog Anda dan lihat hasilnya.


Read more →

Memasang Widget Metro Style Social Media

,


Memasang Widget Metro Style Social Media Pada Blog
Ayo sob hias blog kita dengan widget sosial media . Widget yang satu ini selain indah untuk tampilan blog juga berguna sebagai tombol share ke media sosial seperti facebook, twitter, dan google plus. Widget ini di beri nama oleh penciptanya Metro Style Social Media.

Bagi sobat yang suka widget silahkan dicoba, berikut ini adalah langkah sederhana untuk memasang widget Metro Style Social Share:
1. Login ke akun Blogger.
2. Pilih Template » Edit HTML » Lanjutkan » Expand Template Widget.
3. Cari kode ]]></b:skin> dengan menggunakan Ctrl+F, lalu letakkan kode dibawah tepat di atas kode ]]></b:skin>.
 .widget-item-control a{display:none;}

 .widget-item-control a{display:none;}

    #supportive{width: 300px;

    float: left;margin-top: 10px;}

    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}

    #supportive .facebook, .googleplus, .rss, .twitter{

    position: relative;

    -moz-transition: all 0.4s ease-in-out;

    -webkit-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    z-index: 5;

    display: block;

    float: left;

    margin: 1px;}

    #supportive .icon{overflow:hidden;}

    #supportive .facebook{width: 147px;

    height: 150px;

    background: rgba(59,89,152,1) url("https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;}

    #supportive .twitter{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGOTH4qfCp_sGiCCIVPOFPZ4tyYPUpG1_kR4Y3cGLFTAYqgX8ISH9N6fju2THdRyZ7a_b7hLwRwmSVbUpJ64qn_BqHPG-Yf_XJqopL11euIfagcS3G3c_1CH5XdsH8G34ZG3l-EaBLKZO/s1600/Twitter.png") no-repeat center center;}

    #supportive .googleplus{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUK3i5Rxqe5Ox8qxF6EM0TS0b8aHpdgbfFvFnJ18Thh2UokL2hYgxZPL6AAYI_VrIHP5oeTTZqTd_TtLH1toEcst5BrWtAvlMVC6LPgDCHPpsQCiuAOeRXuJOf9JfDAzvXbAS3uloya6Uu/s1600/google+plus.png") no-repeat center center;}

    #supportive .rss{ width: 299px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzlLxkg1OIkFqJjacz1PrQbJQF7U6FTC470crMP9GSK05wM8SV5VdPMbfdwdeLc9RO8EzcTV_HWHRIDIzyDQAs3GdU9HlyIp83qKNF6hPST-U8xrq5x5LhgGx37HI4XJH9ZYSdCwjG-O0/s1600/rss.png") no-repeat center center;}

    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}
4. Setelah selesai simpan template.
5. Kembali ke dasboard > Tata Letak > Tambah Gadget > HTML/Java Script > Letakkan kode dibawah ini.

 <ul id='supportive'>

<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>

<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>

<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>

</ul>

6. Ganti URL Facebook, Twitter, Google Plus, dan Feedburner milik sobat.
PS : Ukuran ideal untuk widget ini lebar 300px, kalo di rubah ukurannya penampilan akan terlihat kurang proporsional.
Semoga menarik ya sob blognya setelah dipasang widget metro style social media. Salam Blogger!
Read more →

Menarik Pengunjung Blog Melalui Gambar

,


Menarik Pengunjung Blog Melalui Gambar
Meningkatkan jumlah pengunjung tentunya sangat diperlukan, seperti yang telah saya bahas pada artikel yang berjudul Kenapa Pengunjung Blog Kita Harus Banyak. Hal ini masih berkaitan dengan optimasi blog atau trik SEO. Jadi selain dengan mengirim artikel ke situs sosial bookmark, share ke komunitas Google+, Facebook, Twitter, dan lain sebagainnya. Kita juga dapat menarik pengunjung blog melalui gambar yang ada di dalam postingan kita. Bahasa simpel nya gini sob, ketika pengguna internet membuka gambar kita yang ada pada search engine google image maka akan langsung diarahkan ke url blog kita. Menarik kan? saya sendiri sering mengalami hal ini, ketika membuka sebuah gambar untuk tampilan besar, yang ada bukan muncul gambarnya tapi malah lari ke situs orang...
Nah, ternyata hal itu cukup mudah untuk di praktekin di blog kita sendiri, cara ini saya dapetin dari sebuah blog yang bernama Seosaja.com, silahkan yang mau baca artikel aslinya disana.
Tinggal taroh aja kode dibawah ini di atas kode </head> di HTML blog kita.
<script language="JavaScript" type="text/javascript">
if (top.location != self.location) top.location = self.location;
</script>
Buka dasboard Blogger -> Pilih template -> Edit HTML -> Centang Expand -> Cari kode </head> pake Ctrl+F -> Taroh kode yang tadi -> Save Template -> Selesai.
Oh ya, tentunya supaya gambar pada postingan blog kita mudah terindeks kita harus tau cara menggunakan keyword pada gambar tersebut, silahkan baca pada postingan saya yang lain yaitu Cara Mengoptimasi Gambar Pada Blogger. Oke selamat mencoba semoga cepat sukses blognya.  Dan saya ucapkan terimakasih bagi yang telah menyempatkan waktunya untuk berkunjung, silahkan tinggalkan komentar yang bijak demi perbaikan blog ini.
Read more →

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

,


1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode berikut......


<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Lalu Terapkan Seperti di bawahh ini.....

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>

itulah pemasangannya di blog saya


7. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200 adalah tingginya, dan kalian  bisa ubah seseuai ke inginann kalian..
Read more →

cara membuat kolom scroll pada blog archive ( arsip blog )

,

cara membuat kolom scroll pada blog archive - Trik cara membuat scroll pada arsip blog, cara membuat scroll pada arsip blog (blog archive), cara membuat kolom blog archive dengan scroll. apapun itu judulnya pasti hasilnya tetap sama.

cara membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan keren. sobat blogger juga bisa membaca postingan saya kemarin Cara Membuat Scroll Pada Kolom Komentar sobat akan lihat hasilnya betapa menarik dan ringkas menggunakan efek scroll. lebay...... hahaha
Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......
Cara/tutorial 1
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F. 
6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:
<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>
Keterangan :
  • Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
  • Harap disesuaikan saja kodenya, karena tidak semua templates sama,
  • 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
  • Jika sudah klik Save templates dan lihat hasilnya. 

Cara/tutorial 2

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut :


    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

4. Lalu Terapkan Seperti di bawah ini.....
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div></div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>

5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200px adalah tingginya, dan kalian  bisa ubah seseuai ke inginann kalian..
Demian cara membuat kolom scroll pada blog archive. ikuti selalu software mania pc akan selalu update dengan tutorial yang baru.
Read more →

Cara Membuat Widget Recent Comment Dengan Avatar Untuk Blog

,
Widget - Kali ini saya akan membahas bagaimana cara membuat widget recent comment dengan avatar untuk blog. Fungsi widget ini akan menampilkan komentar terbaru secara otomatis ditambah avatar, yang dimaksud avatar adalah gambar profil orang yang berkomentar.

Berikut cara membuat widget recent comment dengan avatar

1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML/JavaScript.
3. Copy kode di bawah ini.


<div style="overflow:auto;width:300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: none;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 100,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://bloggermania69.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=3"></script>
</div>
Sekarang perhatikan baik-baik kode yang berwarna merah.

width:300px; (sesuaikan dengan lebar, supaya mudah ubah saja jadi 100%)
numComments (jumlah komentar yang ingin ditampilkan)
avatarSize (ukuran avatar atau gambar profil)
characters (jumlah kata pada komentar yang ingin ditampilkan)
Read more →

Cara Membuat Tombol Share Di Bawah Posting Blog

,

1. Login ke blog kamu
2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template > Cari kode <data:post.body/>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmW7xaQ3ob8bPY3V34RIe0kQoJHSbiDizkP3vWt0lV_FxzFTvb4utPkO0amvk66e5L21kKXa5DVsgyK1zUje-AKeDyL4b4dXR610nALCkZRefnlaAC8jK6n-CUkLQGclQIs-2a7MkVPE/s1600/sharebelow.png) no-repeat;
}
.sharebelow  a.googleplus {
background-position: 0px -348px;
}
.sharebelow  a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow  a.pinterest {
background-position: 0px -464px;
}
.sharebelow  a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow  a.delicious {
background-position: 0px 0px;
}
.sharebelow  a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow  a.digg {
background-position: 0px -116px;
}
.sharebelow  a.digg:hover {
background-position: 0px -174px;
}
.sharebelow  a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow  a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow  a.technorati {
background-position: 0px -928px;
}
.sharebelow  a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow  a.twitter {
background-position: 0px -928px;
}
.sharebelow  a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow  a.facebook {
background-position: 0px -232px;
}
.sharebelow  a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow  a.reddit {
background-position: 0px -580px;
}
.sharebelow  a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow  a.rss {
background-position: 0px -696px;
}
.sharebelow  a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
</b:if></div>
<div style="clear:both"/>
4. Simpan dan lihat hasilnya.
Read more →

Friday 26 July 2013

MEMBUAT TOMBOL SHARE UNIK

,
 
Menu sosial bookmark adalah salah satu komponen penting untuk sebuah blog anda. Selain untuk mempercantik tampilan blog, juga untuk mempermudah pengunjung blog anda untuk membagikan / share ke jaringan sosial yang lain. Bentuk menu sosial bookmark share sangat bermacam-macam. Sudah banyak tutorial di blog-blog dan situs yang telah membagikan cara membuat tombol menu share sosial bookmark.
Kali ini akan berbagi tutorial cara membuat tombol menu share sosial bookmark berbentuk slide telur yang bisa membuka dan menutup berada di pojok bawah blog anda (seperti dalam gambar). Slide telur terbuka berisi tombol bookmark untuk pembaca anda untuk share posting di Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble dan Email.
Langsung saja bagaimana cara memasangnya. Ikuti langkahnya dibawah :




Selalu Back Up Template Anda Sebelum Anda Membuat Perubahan.
1. Masuk ke dashboard blog anda pilih "Template" lalu pilih "Edit Html" kemudian klik "expand widget".
2. Cari kode berikut </head> di blog anda atau klik Ctrl F untuk mempermudah pencarian kode
3. Copy paste kode dibawah ini tepat di atas / sebelum </ head>
<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->


4. Kemudian cari kode </body>
5. Sekarang copy paste kode di bawah ini  di atas / sebelum kode </ body>


<!-- Start Heart Share Code From http://www.spiceupyourblog.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->



Tambahan :
Tombol menu ini diatur berada di sudut kanan bawah dari blog anda, tetapi anda dapat dengan mudah merubahnya. Lihat kode yang berwarna kuning di atas bottom: 2%; left: 2%;. Anda dapat merubah posisi tombolnya dari bawah ke bagian atas halaman atau dari kiri ke kanan halaman blog anda. Rubahlah persentase atau bottom / up dan left / right.

6. Simpan Template Anda.



CATATAN:
sebelumnya backup dulu sebelum sobat edit. blog sobat. agar tidak terjadi salah simpan
untuk hasilnya  sobat pratinjau untuk melihatnya.
semoga berhasil salam sahabat,:



TOMBOL SHARE YANG KEDUA CARA PENYIMPANAN  SAMA SEPERTI DI ATAS 
DAN INI GAMBAR DANCODE 


CODE NO : 1



<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>


CODE NO 2



<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:'holiday'});</script>
</div><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Tips</a><!-- End Christmas Share Code From http://www.spiceupyourblog.com/ -->


Sebelumnya sobat buck up dulu templetnya ,
untuk berjaga jaga,
 nah cukup dari sini dulu ya bro, and sis..
 semoga bermanfaat :
SALAM SAHABAT:
Read more →
 
Web Analytics