BulshitMan

Nike

2017-02-03T14:09:00.003+07:00

Artis: Nike Ardilla
Judul: Bintang Kehidupan
Nada Dasar: Am (Original)
Genre: Pop Rock, Slow Rock


[Intro]
Am   G   F   Dm  E
Am   G   F   Dm  E

[Verse 1]
Am                 G
Jenuh aku mendengar
F                   Am
Manisnya kata cinta
Am                  G
Lebih baik sendiri
F              E
Bukan menyendiri
Dm           G       C
Kala cinta menggoda
Dm           E       Am
Hati jadi gelisah..

[Verse 2]
Am                  G
Tak peduli apa kata
F                   Am
Orang yang tak suka
Am                  G
Tak perlu aku duka
F              E
Luka dalam dada
Dm           G       C
Biarkan semua sirna
Dm           E       Am
Ditalan masa..

[Chorus]
          A             Dm
Malam-malam aku sendiri
      G                C
Tanpa cintamu lagi
      F           Dm
Hanya satu keyakinanku
       B           E
Bintang kan bersinar
          A             Dm
Menerpa hidupku
      G                C
Bahagia kan datang.. oo..
      F           Dm
Hanya satu keyakinanku
       E           Am
Bintang kan bersinar

[Interlude]
Am   G   F   Dm  E
Am   G   F   Dm  E

[Verse 3]
Am                  G
Tak perlu aku duka
F                   Am
Luka dalam dada
Dm           G       C
Biarkan semua sirna
Dm           E       Am
Ditalan masa..

[Chorus]
          A             Dm
Malam-malam aku sendiri
      G                C
Tanpa cintamu lagi
      F           Dm
Hanya satu keyakinanku
       B           E
Bintang kan bersinar
          A             Dm
Menerpa hidupku
      G                C
Bahagia kan datang.. oo..
      F           Dm
Hanya satu keyakinanku
       E           Am
Bintang kan bersinar

[Outro]
Am   G   F   G   Am

Cara Memasang Kode Warna HTML Color Di Blog

2017-01-31T10:52:00.002+07:00

Cara Memasang Code Warna New Style Color Di Blogr

hallo shobat blogger kali ini saya akan coba membagikan sebuah tutorial Cara Memasang Kode Warna HTML Color Di Blog atau Website anda. oky code warna adalah sebuah rancangan code yang di buat untuk menghasilkan warna (Html), warna dapat di hasilkan sesuai dengan code perintah yg di buat. oky code warna sangat di butuhkan saat memodifikasi tampilan blog, memang sudah di sediakan oleh pihak tertentu namun kadang kita masih kesal karna harus melewati steep by steep yang lama. nah di sana lah saya akan memberikan solusinya agar anda tidak muter2 mencari code warna yang akan anda gunakan untuk memodifikasi blog/mendesign ulang blog kamu, hingga keliling di mbah google. cara yang tepat adalah kamu langsung memasang code war ini di blog kamu, sehingga kamu dapat melihatnya kapan saja, bahkan orang lain pun bisa melihat code color yang anda buat sendiri.
oky shobat langsung ajha dech kita ke TKP maaf kalo9 penjelasan saya bikin anda pusing tuju keliling hehehehe.

Cara Memasang Kode Warna New Style Color Di Blog

Cara Memasang Kode Warna New Style Color Di Blogr

DEMO SHOW

Login Blogger

Cara Memasang Code Warna New Style Color Di Blogr

pertama-tama silahkan kamu login ke blogger/web kamu, jika sudah silahkan kamu tambahkan enter/enteri baru terus pindah dari mode Compose menjadi HTML seperti pada gambar di atas.

Code Warna New Style Color Di Blog

Nah langsung saja kamu copas code di bawah ini lalu paste di area lembar HTML tadi.

<div id="flatuindzgn">
<ul class="flatui">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span> </li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span> </li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span> </li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span> </li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span> </li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span> </li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span> </li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span> </li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span> </li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span> </li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span> </li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span> </li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span> </li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span> </li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span> </li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span> </li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span> </li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span> </li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span> </li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span> </li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span> </li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span> </li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span> </li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span> </li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span> </li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span> </li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span> </li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span> </li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span> </li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span> </li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span> </li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span> </li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span> </li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span> </li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span> </li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span> </li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span> </li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span> </li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span> </li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span> </li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span> </li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span> </li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span> </li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span> </li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span> </li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span> </li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span> </li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span> </li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span> </li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span> </li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span> </li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span> </li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span> </li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span> </li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span> </li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span> </li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span> </li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span> </li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span> </li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span> </li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span> </li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span> </li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span> </li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span> </li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span> </li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span> </li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span> </li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span> </li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span> </li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span> </li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span> </li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span> </li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span> </li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span> </li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span> </li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span> </li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span> </li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span> </li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span> </li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span> </li>
</ul>
</div>
<style scoped="" type="text/css">/* Flat UI Color by indzgn.blogspot.com */ #flatuindzgn ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0} #flatuindzgn ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)} #flatuindzgn ul.flatui li:hover{z-index:4} #flatuindzgn ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)} #flatuindzgn ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)} #flatuindzgn ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s} #flatuindzgn ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s} #flatuindzgn ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3} #flatuindzgn ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3} @media screen and (max-width:800px){#flatuindzgn ul.flatui li{width:33.3%;line-height:normal}} @media screen and (max-width:640px){#flatuindzgn ul.flatui li{width:50%}} @media screen and (max-width:480px){#flatuindzgn ul.flatui li{width:100%}} </style></p>
<div class='clear'></div></style>

jika sudah silahkan klik simpan lalu pilih pertinjau terlebih dahulu. cara ini di lakukan untuk mencegah terjadinya hal-hal yang tidak di inginkan pada blog anda.

Cara Membuat Widget Like Box Melayang Di Blogger

2017-01-13T09:30:00.001+07:00

Hallo shobat wah udha lama nih kita ga ketemu heee, dalam pertemuan ini mungkin ada sedikit tutorial yang saya akan bagikan kepada shobat blogger semua, yang kali ini saya akan bagikan adalah Cara Membuat Widget Like Box Melayang Di Blogger.
widget ini juga saya gunakan di blog ini bisa anda liat langsung, sederhana, namun bisa memberikan kesan positif, pengunjung bisa menambahkan Like/Suka ke blog anda langsung.
oky ne penjelasan udha lumayan oky yukk kita intip cara membuatnya langsung.

Cara Membuat Widget Like Box Melayang Di Blogger

Cara Membuat Widget Like Melayang Di Blogger

Memasang Code Widget Like Melayang Di Blogger

Pertama-tama silahkan anda masuk ke Menu Blogger Tatat Letak Jika sudah masuk silahkan pilih Tambahkan Widget lalu silahkan anda masukan Code di bawah Ini Pada area Code

<br />
<div id="seocipssharebtn" title="Share This With Your Friends">
<div class="sbutton" id="gb">
<fb:like font="" layout="box_count" show_faces="false"></fb:like></div>
<div class="sbutton" id="gplusone">
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script><g:plusone size="tall"></g:plusone></div>
<div class="sbutton" id="su">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
</div>
<script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-52127658-1']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = (document.location.protocol == 'https:' ?
                      'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
          })();
        </script>

Jika Sudah selesai silahkan kalian Simpan/Pertinjau terlebih dahulu terakhir masukan Code CSSnya. Silahkan kamu masuk ke Menu Template lalu Pilih Edit Html Silahkan anda cari Code ]]></b:skin> atau </style> pada area Html, jika sudah ketemu silahkan anda masukan code di bawah ini tepat sebelum code yang saya suruh cari tadi di atas. untuk mempercepat pencarian silahkan anda klik tombol pada keyboard

CTRL

untuk mempercepat pencarian. jika sudah silahkan anda masukan code di bawah ini tepat sebelum code yang saya suruh cari tadi.

/*Share Button*/
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}

oky jika sudah silahkan anda simpan template anda. Semoga Berhasil ya.

Cara Membuat prism Syntax Highlighter Di Blogger

2016-05-08T22:47:00.002+07:00

Cara Membuat prism Syntax Highlighter Di Blogger | Syntax Highlighter sangat cocok di gunakan untuk anda pengguna blog yang menyediakan tutorial blogging maupun tips blogging, sudah jelas blog yang menyediakan tutorial blog pasti akan mempostingkan Code yang berupa: HTML, CSS, JAVASCRIPT, dan JEQUERY nah Syntax Highlighter ini berfungsi untuk memperlihatkan code yang di posting dengan style yang lebih menarik, cantik, dan juga code akan menjadi lebih rapi.
penggunaan Syntax Highlighter ini juga sangat gampang hampir sama dengan menggunakan Blocquote yang membedakannya hanya dari segi tampilan saja.

Cara Membuat prims Syntax Highlighter Di Blogger

LIHAT DEMO

Langkah-Langkah Membuat prims Syntax Highlighter Di Blogger

1. Masuk terlebih dahulu/Loging ke Blog kamu
2. Jika Sudah Pilih Menu Template==>Edit Html
3. Silahkan anda cari code ]]></b:skin> atau </style> pada area Html lalu silahkan kamu copy pastekan code berikut tepat di atas salah satu codedi atas, untuk mempermudah pencarian code silahkan kamu klik

Ctrl

pada keyboard kamu

/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
}

4. Selanjutnya jika code di atas sudah anda pasang lalu silahkan kamu sisipkan javascript di bawah ini tepat di bawah code ]]></b:skin>

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'></script>

<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Nah pada prosses pembuatan sudah selesai sekarang silahkan kamu save/simpan template kamu, sekarang kita masuk ke cara pemasangannya:
1. silahkan kamu buat postingan blog kamu terlebih dahulu, nah alihkan perhatian kamu pada bagian pojok kiri atas di sana ada pilihan Compose, dan HTML silahkan ubah dari mode Compose ke mode HTML lalu pastekan kode berikut pada area HTML
Syntax Highlighter: HTML

<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> &lt;pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"&gt;&lt;code class=" language-markup"&gt; Taruh Script HTML Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Syntax Highlighter: CSS

<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> &lt;pre class="line-numbers language-css" data-codetype="CSS" title="CSS"&gt;&lt;code class=" language-css"&gt; Taruh Script CSS Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Syntax Highlighter: JAVASCRIPT

<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> &lt;pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"&gt;&lt;code class=" language-javascript"&gt; Taruh Script Java Script Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Syntax Highlighter: JQUERY

<pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> &lt;pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"&gt;&lt;code class=" language-jquery"&gt; Taruh Script JQuery Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Note

Pada code yang sudah saya warnai merah silahkan kamu ganti dengan code yang ingin kamu postingkan, sesuaikan juga dengan judul Syntax Highlighter.

Nah bagai mana shobat cukup mudah bukan, Oky sampai di sini dulu yaaa pembahasan tutorial Cara Membuat prism Syntax Highlighter Di Blogger ini sampai ketemu lagi di Frequenzi yang sama

SELAMAT MENCOBA

Cara Agar Postingan Blog Bisa Cepat Terindex Di Google Search

2016-05-03T14:50:00.002+07:00

Cara Agar Postingan Blog Bisa Cepat Terindex Di Google Search | Google Search Console adalah salah satu Devloper google yang di gunakan untuk mengindex postingan blogger maupun website secara cepat. Biasanya jika kita mempublikasikan salah satu postingan blogger yang baru saja di buat maka google tidak akan otomatis mengindex postingan yang baru saja di publikasikan secara otomatis, perlu waktu sampai 4-6 hari baru google akan mengindex postigan yang kamu publikasikan, Tapi kamu tidak perlu hawatir jika ingin agar postingan kamu cepat terindex google kamu cukup mengunjungi Google Search Console lalu submit Url postingan kamu yang baru saja kamu publikasikan.

Langkah-Langkah Agar Postingan Blog Bisa Cepat Di Index Google Search

Cara Agar Postingan Blog Bisa Cepat Di Index Google Search

1. Masuk terlebih dahulu ke Google Search Console
2. Pastikan tampilan yang keluar menyerupai gambar di atas, jika sudah silahkan kamu submit URL kamu di Kotak URL Search Console misalnya:

http://bulshitman.blogspot.com/2016/05/cara-agar-postingan-blog-bisa-cepat-terindex-google-search.html

Di atas adalah contoh dari Url yang di masukan
3. Centang Saya Bukan Robot, Hal ini untuk mengecek keamanan apakah anda manusia atu robot xixix
4. Jika semua sudah terisi dengan benar terakhir silahkan kamu kirim permintaan

Note

Tunggu sampai prosses Kiriman selesai, Jika sudah selesai anda akan di beri Notifikasi bahwa prosses telah selesai
Nah bagai mana untuk Cara Agar Postingan Blog Bisa Cepat Terindex Di Google Search Cukup mudah bukan, Oky jika sudah selamat dan sampai bertemu di Frequenzi yang sama

SEMOGA SUKSES

Cara Membuat Box Related Post Di Blogger Blue Style

2016-05-03T08:30:00.000+07:00

Cara Membuat Box Related Post Di Blogger Blue Style|Hallo sehabat blogging semua? jika sebelumnya saya membagikan tutorial cara membuat Recent post Light style di blogger, Nah Kali ini BulshitMan akan mencoba membagikan Tutorial Cara Membuat Box Related Post Di Blogger Blue Style.
Kamu akan mendapatkan tampilan yang menarik, kamu j dapat Memasang Related post ini di bagian bawah postingan kamu, untuk tutorialnya silahkan kamu liat di bawah ini.

Cara Membuat Box Related Post Di Blogger Blue Style

DEMO SHOW

Langkah-Langkah Cara Membuat Box Related Post Di Blogger Blue Style

1. Buka terlebih dahulu blog kamu
2. Pada menu blog kamu silahkan kamu pilih menu template
3. Jika sudah silahkan kamu pilih mode Edit Html | Pada area Html silahkan kamu cari code ]]></b:skin> atau bisa juga </style> untuk mempercepat pencarian silahkan kamu klik tombol

Ctrl

pada keyboard, jika kode di atas sudah ketemu silahkan anda pasang kode di bawah ini tepat sebelum kode yang mirip seperti kode yang di sarankan di atas.

/* ==== Related Post Widget Start ==== */
.related-post {
margin:15px 0 0;
border-top:1px solid #f0f0f0;
padding:15px 0 0;
}
.related-post h4 {
font-size:16px;
margin:0 0 .5em;
text-transform:uppercase;
background:#07ACEC;
padding:10px;
color:#fff;
}
.related-post-style-2 {
margin:0 0 0 0 !important;
padding:0 0 0 0 !important;
list-style:none;
}
.related-post-style-2 li {
margin:0 0 0 0;
padding:0 0 0 0;
}
.related-post-style-2 li {
padding:5px 0 !important;
border-top:1px solid #eee;
overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
width:65px;
height:65px;
max-width:none;
max-height:none;
background-color:transparent;
border:5px solid #07ACEC;
padding:0;
float:right;
margin:5px 5px 0px 50px;
}
.related-post-style-2 .related-post-item-title {
font:normal normal 16px Fjalla One, Helvetica, Arial, sans-serif;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

4. Masuk ke tahap berikutnya.
5. Masih pada area Html tadi silahkan kamu cari kode <div class='post-footer-line post-footer-line-1'> lalu pastekan code berikut tepat di atas kode <div class='post-footer-line post-footer-line-1'>

<script type="text/javascript">
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          "<data:label.name/>"<b:if cond='data:label.random != "true"'>,</b:if>
      </b:loop></b:if>];
        var relatedPostConfig = {
            homePage: "<data:blog.homepageUrl/>",
            widgetTitle: "<h4>Baca Juga :</h4>",
                numPosts: 5,
                summaryLength: 300,
                titleLength: "auto",
                thumbnailSize: 60,
                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufZb16BC8aDnoIewVEZynKhZqsFO4TfBXuxs8FBBxwhEUCkk84jO34GxrcVPgZA6XWnXTKpLeAbh1mcVGKS43DYvvW04a7f2wNlj1LS-IQG8wv6vExxUors_DaRao25WHbIMqDPD_eB8/s1600/nyamukkurus-no-image.png",
                containerId: "related-post",
                newTabLink: false,
                moreText: "Read More",
                widgetStyle: 2,
                callBack: function() {}
            };
            </script>

6. Jika sudah selanjutnya silahkan kamu cari code </body> pastekan javascript di bawah ini tepat sebelum code </body>

<script type="text/javascript">
//<![CDATA[
/*! Related Post Widget for Blogger by bulshitman.blogspot.com => Dikhen Mikhen */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>
Artikel Terkait:</h4>
",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='
<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>
"}else{if(A==3||A==4){c+='
<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip">
<a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>
"+y+"</li>
"}else{if(A==5){c+='
<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>
"}else{if(A==6){c+='
<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip">
<img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div>
</li>
"}else{c+='
<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>
"}}}}}s.innerHTML=c+="</ul>
"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

Terakhir silahkan kamu save/simpan template kamu, buka salah satu postingan kamu untuk melihat hasilnya
Nah bagai mana shobat qu semua cukup mudah bukan. Oky sampai ketemu lagi di Frequenzi yang sama ya

SELAMAT MENCOBA

Bandicam 3.0 Full Version Software Perekam Dekstop Komputer/PC

2016-05-01T10:53:00.001+07:00

BulshitMan-Kali ini akan coba membagikan Bandicam 3.0 Full Version Software Perekam Dekstop Komputer/PC. Bandicamp ini dapat di gunakan untuk merekam aktivitas layar komputer/pc kamu, Bandicamp ini cocok di gunakan untuk kamu yang bekerja di bidang tutorial. Ya dengan kamu menggunakan Bandicamp pekerjaan yang sedang kamu kerjakan akan terasa seperti prefesional. bukan hanya itu Bandicamp juga dapat menangkap screenshot komputer kamu, merekam vidio via webcamp, DLL.
Ukuran Fila Bandicamp ini juga lebih kecil dari pada yang lainnya, meskipun ada beberapa software yang berjalan di komputer kamu Bandicamp ini akan tetap terasa ringan di karenakan Bandicamp ini tidak memerlukan ruangan RAM yang begitu banyak

Cara Membuat Iframe Screenshot Blogger Version

Link Download For Bandicam 3.0 Full Version

Cara Membuat Iframe Screenshot Blogger Version

2016-04-30T20:54:00.001+07:00

Hallo shabat blogging semua, gi mana kabar kalian baik? setelah saya lumayan lama meninggalkan dunia blogging/Offline nah tepat pada hari ini saya hadir untuk membagikan tutorial-tutorial yang mungkin akan bermanfaat untuk anda, Kali ini saya akan membagikan Cara Membuat Iframe Screenshot Blogger Version.
Tutorial kali ini saya bagikan karna masih jarang orang yang memakai Iframe ini. Iframe ini biasanya di pakai untuk memperlihatkan hal-hal yang baru pada blog/website misalnya ingin menampilkan template yang memiliki fitur yang baru, sehingga pengunjung secara tidak langsung dapat melihat screenshot template itu sendiri. iframe ini dapat di tampilkan pada homepage, postingan, dan halaman static anda, untuk cara pembuatan iframe ini silahkan anda lihat pada tutorial di bawah ini.:

Cara Membuat Iframe Screenshot Blogger Version

DEMO SHOW

Langkah-Langkah Membuat Iframe Screenshot Blogger Version

1. Silahkan kamu terlebih dahulu masuk ke dasboard blog kamu.
2. Jika sudah silahkan kamu masuk ke menu Template==> Edit Html
3. Pada area Html silahkan anda cari kode ]]></b:skin> atau </style> untuk pencarian agar lebih cepat anda bisa klik

Ctrl

pada keyboard kamu, masukan kode di bawah ini tepat pada salah satu kode di atas.

.BM-Design {background:rgba(1, 0, 1, 0.2);margin:0;padding:3px;text-align:center;position:fixed;bottom:5px;left:20px;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;}

4. Silahkan kamu sisipkan kode di bawah ini di mana saja pada area Html, kamu juga bisa menyisipkan kode berikut sebagai widget blog/website kamu

<div class="BM-Design">
<a href="URL TUJUAN"><img alt="Domshit V.02 Template Khusus Demo Widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpV2YyQyhyOthg1MgQ74UZMlCcK14dwMiXnCxNU4SMrCTSI_Lg_c1Qka6vWhOEc5r1D_d8MvGFOgXSCK8_W7FHQ7GLE3fFTONV89g9D4DSEc6v9hfCCAGyLURliuD0sd39nn5nVPZ3PaXR/s200/demo+template.png" title="Template Husus Demo Widget" /></a>
</div>
<div style='clear: both;'></div>

Note

Pada Text yang sudah saya warnai merah (URL TUJUAN) silahkan kamu ganti dengan url tujuan kamu.
Untuk Text yang sudah saya warnai kuning (Domshit V.02 Template Khusus Demo Widget) silahkan kamu ganti dengan alt gambar kamu.
Satu lagi Untuk Text/Url yang saya beri warna ungu silahkan kamu ganti dengan url gambar yang ingin kamu tampilkan.

Nah bagai mana shobat untuk tutorial nya di atas cukup mudah bukan. Oky dech sampai di sini dulu tutorial artikel saya kali ini sampai ketemu di Frequenzi yang sama.

SELAMAT MENCOBA

Cara Membuat Web Hosting File dengan Gratis Di Google Sites

2016-04-26T13:44:00.000+07:00

Cara Membuat Web Hosting File dengan Gratis Di Google Sites - Baiklah shobat kali ini saya akan membagikan cara Host File Secara Gratis Di Google Sites. Ya Host File secara gratis bisa di lakukan lewat google sites, di google sites kamu bisa menyimpan berbagai macam file mulai dari: Gambar, Musik, Nootpad, sampai dengan Seterusnya..Untuk membuat Hostingan gratis ini anda dapat mengikuti tutorial berikut ini

Cara Membuat Web Hosting File dengan Gratis Di Google Sites

1. Masuk terlebih dahulu ke akun Google anda
2. Jika sudah silahkan klik Icon seperti gambar di bawah ini

Cara Membuat Web Hosting File dengan Gratis Di Google Sites

3. Jika sudah maka akan muncul kotak menu seperti gambar di atas
4. Pada kotak menu silahkan anda klik more liat gambar di atas
6. Klik lihat Lebih banyak
5. Jika sudah terlihat gambar seperti di bawah ini lalu klik menu Sites

Cara Membuat Web Hosting File dengan Gratis Di Google Sites

Nah pada langkah ini apakah anda sudah ada yang mengerti??
Hehehe, Lanjutin Dulu Ya biar nggk setengah-setengah
6. Jika sudah pastikan muncul gambar seperti di bawah ini
7. Lalu silahkan pilih Create
Nah tahap selanjutnya adalah pingisian forum/formulir yang nantinya akan menuntun anda ke tahap berikutnya.

Silahkan Isi Forum Dengan Lengkap.

1. Nama Site kamu
Untuk Gambar yang saya tandai merah di atas tidak perlu untuk di isi (Otomatis)
2. Pastikan anda bukan robot (Cek keamanan), Jika Formulir sudah lengkap silahkan kamu pilih Create

Selamat Web Host anda sudah di buat.
Oky sehabat gi mana untuk tutorial Cara Membuat Web Hosting File dengan Gratis Di Google Sites kali ini cukup mudah bukan,?? Mungkin sampai di sini dulu penjelasan saya untuk kali ini, sampai ketemu lagi di Frequenzi yang sama

SELAMAT MENCOBA

4 Cara Membuat Dan Memasang Kolom/Kotak Komentar Facebook Di Blogger 2016

2016-04-22T13:01:00.003+07:00

4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016

4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016 - facebook adalah salah satu social media yang sudah lama ngetren di kalangan social media, siapa sangka pada blog kamu juga bisa memasang kotak komentar layaknya seperti kotak komentar facebook pada umumnya. ya banyak cara untuk membuat kotak komentar ini salah satunya bisa memasangnya lewat developer facebook namun pemasangan lewat cara satu ini cukup ribet, nah ini adalah solusi terbaru untuk anda jika tidak ingin ambil pusing untuk membuat kotak komentar facebook

4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016

1. Membuat Kotak Komentar Facebook pada template biasa

1. Login terlebih dahulu blogger kamu
2. Pilih menu template==>Edit Html
3. Pada Html silahkan anda cari code <div class='comments' id='comments'> Untuk mempercepat pencarian silahkan anda

Ctrl

klik pada keyboard anda
4.Pastekan code di bawah ini tepat di bawah code <div class='comments' id='comments'> yang tadi sudah anda cari

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FACEBOOK KAMU' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Silahkan anda ganti Text: "ID FACEBOOK KAMU" dengan ID Facebook kamu, Jika sudah Lihat hasilnya

2. Cara Membuat Kotak Komentar Facebook Responsive Di Blog

Jika kamu sudah memasang template kamu dengan Responsive maka tutorial di Membuat Kotak Komentar Facebook di bawah ini sangat cocok untuk kamu gunakan,.. iya dengan kamu memasang kotak facebook Responsive pada template Responsive kamu, maka Responsive pada blog kamu akan menjadi lebih baik.
1. Masih Pada Mode Template==>Edit Html
Yang Harus kamu Lakukan Hanya Dengan Menambah Javascript di bawah ini

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>

Jangan Lupa javascript di atas silahkan kamu simpan tepat pada kode </head>
Langkah selanjutnya kamu harus memasang kode Html di bawah ini tepat sesudah code <div class='comments' id='comments'> atau kamu juga bisa menambahkan Html ini tepat di bawah Code related post

<b:if cond="data:blog.pageType == "item"">
<h4>Post Comment</h4>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%'><fb:comments expr:href='data:post.url' num_posts='5' width='500'/></div>
</b:if>

Nah jika sudah silahkan kamu save template kamu dan lihat hasilnya

3. Cara Membuat Kotak Komentar Facebook 2015

Untuk pemasangan Ini Anda hanya harus sedikit menambahkan Javascript dan kode Html
1.Masih Pada Edit Html
2. Silahkan anda cari code berikut <div class='comments' id='comments'> jika 2 kode yang sama silahkan anda coba memasang satu persatu
3. Salin kode di bawah ini tepat sebelum kode <div class='comments' id='comments'>

<b:if cond='data:blog.pageType == "item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>

Note 600 adalah lebar kotak komentar pada blog anda

4. Jika sudah selesai langkah berikutnya silahkan anda cari code <body>
5. Salin Kode Javascript berikut tepat di bawah kode <body>

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

Jika sudah selesai bisa langsung anda simpan, dan lihat hasilnya

4. Cara Membuat Kotak Komentar Responsive Terbaru 2016

Nah Ini adalah cara terakhir dan terbaru untuk membuat kotak komentar facebook untuk memasang kotak komentar facebook ini cukuplah mudah. Oky langsung ajha ke cara pembuatannya Anda hanya harus menambahkan Javascript di bawah ini tepat pada kode <div class='comments' id='comments'> atau bisa juga pada kode <div class='post-footer-line post-footer-line-3'>

<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' num_posts='5'/></div>
</b:if>

Nah terakhir save template kamu

bagai mana shobat blogger cukup mudah bukan, Wahhh memang mudah tapi tangan saya juga sudah mulai pegel ketik ini semua, tapi nggk apalah yang penting semua ini bisa bermangfaat untuk anda
Sampai ketemu lagi di Frequenzi yang sama

SELAMAT MENCOBA

Cara Membuat Tombol Demo Keren Menggunakan CSS Di Blog

2016-04-18T21:37:00.000+07:00

Baiklah shobat kali ini saya akan coba membagikan Tutorial Cara Membuat Tombol Demo Keren Menggunakan CSS Di Blog, sebelum kita membahas Tutorial nya, saya akan mencoba membahas apa itu CSS??? dari beberapa postingan sebelumnya, mungkin anda juga akan tertarik dengan tutorial kami untuk berikut ini.

Apa Itu CSS?

CSS adalah kependekan dari Cascading Style Sheet. CSS adalah salah satu bahasa pemrogaman HTML yang bertujuan untuk menghias, memperindah, mempercantik,- Gaya Tampilan/Lyout halaman web supaya lebih elegan dan lebih menarik.

Langkah-Langkah Membuat Tombol Demo Keren Menggunakan CSS Di Blog

Cara Membuat Tombol Demo Keren Menggunakan CSS Di Blog

LIHAT DEMO

1. Masuk terlebih dahulu ke blogger blog kamu==>Pilih menu template
2. Pada menu template silahkan pilih Edit Html
3. Cari code ]]></b:skin> Untuk mempermudah pencarian silahkan anda gunakan

Ctrl

pada keyboard anda, lalu silahkan anda pastekan code berikut tepat di atas code ]]></b:skin>

.download {font-family:'Arial';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download .bj {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover .bj{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info bj{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo .bj {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info .bj{background-color:#fff;}
.infotool a:link, infotool a:visited { position:relative; }
.bgttooltip { width:225px; position:absolute; bottom:100%; margin:0 0 27px 0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.3); line-height:1.5; border:solid 1px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#fff; background:#2aa4cf; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background:#2aa4cf; border-color:#2aa4cf; }
.bgttooltip:before,.bgttooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; }
.bgttooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; }
.infotool a:hover .bgttooltip { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
.bgttooltip,.bgttooltip.left { left:0; right:0; }
.bgttooltip:before,.bgttooltip:after,.bgttooltip.left:before,.bgttooltip.left:after { left:40px; right:auto; }
.bgttooltip:before { border-top-color:#2aa4cf; }
.bgttooltip:after { border-top-color:#2aa4cf; }

Simpan template/Save
5. Buat Postingan baru, dari mode compose silahkan anda beralih ke mode Html
6. Pada area Html silahkan kamu pastekan code berikut

<div class="download download-info">
<div class="bj">
LIVE DEMO</div>
<ul>
<li><a href="http://bulshitman-demo.blogspot.com/p/margin0-padding0-body-background333.html" target="_blank" title="Gambar efek slide ancording style"> Test Demo1 </a></li>
<li><a href="http://bulshitman-demo.blogspot.com/p/recent-post-dark-style.html" target="_blank" title="Recent Pst (dark Style) "> Test Demo2</a></li>
</ul>
</div>

Silahkan kamu ganti Url yang berwarna merah dengan url demo yang kamu tuju, dan jangan lupa sebelum publikasikan postingan nya silahkan kamu pertinjau terlebih dahulu

Oky sehabat Bloging sampai di sini dulu Tutorial yang saya sampaikan kali ini, sampai ketemu lagi di waktu yang sama

SEMOGA SUKSES

Cara Membuat Recent Post Light Style Di Blog,Blogger/Website

2016-04-16T14:38:00.002+07:00

Baiklah shobat kembali lagi bersama saya Admin BulshitMan. Untuk postingan kali ini masih dalam topik pembahasan Widget recent post, setelah sebelumnya saya share Cara membuat Widget Recent Post Dark Style nah kali ini beda lagi saya akan membagikan Cara Membuat Recent Post Light Style Di Blog,Blogger/Website. Untuk pengertian dari apa itu Recent Post saya tidak membahasnya untuk kali ini karna sebelumnya saya sudah menjelaskan apa itu recent post.

Cara Membuat Recent Post Light Style Di Blog,Blogger/Website

LIHAT DEMO

Langkah-Langkah Memasang Recent Post Light Style Di Blog,Blogger/Website

1. Masuk menu blogger ==> Tataletak
2. Tambahkan widget ==> Javascript/Html
3. Masukan code berikut tepat pada kolom area Javascript/Html

<style scoped='' type='text/css'>
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:900!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nNzuCsVaDY3v7mwXWPHnc5anwRkSz-OlOA0O8bc1T9yJuhIbLVYHyfKjQxKaq34f3QKSqLGSEnb46iJ4sq_eouNgH82Gj7tZ_etZMr850J-1GlDDBRQ6ZV-gTvI14F5kagYPlGA3Zmc1/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:600!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 4;
    var startfeed = 0;
    var urlblog = "http://www.bulshitman.blogspot.com";
    var charac = 20;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmRbsBdgOO4AFi843O60y-u6JwZJ6Erm2cWPmFoSm46slmGMS3kIQXdd-SUHrYtjpUWotc4SEvuz8cP2w0cliftSBx_unxIlF70A7kZNJx84chdNf5kB7cqBV7QEgLybWVry0T53U6Oo5i/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

4. Silahkan kamu save/simpan

Note

1. Silahkan anda ubah Text yang berwarna merah, dan ganti dengan url blog kamu
2. Untuk mengatur banyak sedikitnya Recent post yang di tampilkan silahkan anda ganti angka yang berwarna biru Default (4)

Intip juga:
Recent Post Horizontal Style

Cara Membuat Efek Transisi/Transitions CSS3 Pada Postingan Blog/Website

2016-04-15T20:46:00.001+07:00

Cara Membuat Efek Transisi Pada Postingan Blog/Website, baiklah shobat efek transisi ini sangat mudah di gunakan dari pada anda harus menggunakan flas atau javascript. CSS transisi merupakan code perintah untuk membuat sebuah Tujuan/objek bergerak mengikuti code perintah untuk menghasilkan sebuah gerakan/gaya yang di berikan oleh user. berikut adalah beberapa code CSS3 yang dapat menghasilkan sebuah efek Transisi/transitions tertentu, agar efek transisi ini bisa berjalan dengan baik anda di tujukan untuk menentukan propert CSS, mengatur cepat-lambatnya/durasi kecepatan efek/gaya yang di inginkan jika hal ini tidak di atur maka efek transisi tidak akan bekerja karena masih dalam mode default yaitu "NOL" (0)

Cara Membuat Efek Transisi/Transitions CSS3 Pada Postingan Blog/Website

Sintaks CSS Transisi :

.contoh { -webkit-transition: nama_properti durasi tipe_kecepatan delay; -moz-transition: nama_properti durasi tipe_kecepatan delay; -ms-transition: nama_properti durasi tipe_kecepatan delay; -o-transition: nama_properti durasi tipe_kecepatan delay; transition: nama_properti durasi tipe_kecepatan delay; }

Keterangan Untuk Sintaks di atas
1. Nama properti ini mewakili properti yang akan di animasikan (sesuai dengan Code yang di berikan)
2. Durasi di gunakan dalam hitungan satuan detik
3. Tipe Kecepatan di gunakan untuk menentukan efek percepatan yang akan di animasi. delay dapat di gunakan untuk menerapkan waktu menunggu efek transisi itu di jalankan

Contoh Transisi Dengan Efek Widht/Melebar

Contoh Elemen yang menggunakan Transisi width / melebar !

CSS3

#transisi1 { width:120px; height:120px; background-color:#e0e0e0; border:3px solid #cc0000; padding:10px; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } #transisi1:hover { width:500px; }

Html

<div id="transisi2">Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !</div>

Contoh Transisi Berputar Efek Zoom

Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !

CSS3

#transisi2 { width:120px; height:120px; background-color:#1de9b6; border:3px solid #cc0000; padding:10px; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ } #transisi2:hover { width:150px; height:150px; transform:rotate(720deg); -moz-transform:rotate(720deg); /* Firefox 4 */ -webkit-transform:rotate(720deg); /* Safari and Chrome */ -o-transform:rotate(720deg); /* Opera */ }

Html

<div id="transisi2">Contoh Elemen yang menggunakan Transisi Membesar dan Berputar !</div>

Efek Transisi Wenggunakan Warna/Background

Contoh Elemen yang menggunakan Transisi Warna & Background!

CSS3

#colorbackground { width:90%; background:gray; color:black; border:2px solid #222; padding:15px; font:bold 20px Sans-Serif; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } #colorbackground:hover { color:white; background:black; }

Html

<div id="colorbackground">Contoh Elemen yang menggunakan Transisi Warna & Background!</div>

Nah shobat sekalian di atas adalah beberapa Cara Membuat Efek Transisi/Transitions CSS3 Pada Postingan Blog/Website, sebenarnya masih banyak efek transisi yang lain namun belum saya pelajari hanya efek transisi ini yang mungkin saya bagikan dulu.
Oky sampai ketemu lagi ya shobat di Frequenzi yang sama

SEMOGA SUKSES

Cara membuat Slider Responsive Berdasarkan Post Publisher Di Blog

2016-04-09T08:10:00.001+07:00

Cara membuat Slider Responsive Berdasarkan Post Publisher Di Blog, Baiklah shobat blogging sekalian, kali ini bulshitman.blogspot.com akan coba membagikan tutorial Cara membuat Slider Responsive Berdasarkan Post Publisher Di Blog. Widget ini bisa kamu pasang dengan berbentuk slider di blog kamu, slider ini akan menampilkan postingan kamu bisa dengan berdasarkan label atau bisa juga dengan postingan Published yang baru kamu publikasikan.
Pemasangan slider ini biasanya pada tampilan homepage, atau di manapun (sesuaikan dengan tempat yang kamu inginkan), Nah bukan hanya itu kamu juga bisa menampilkan Slider Widget ini pada postingan kamu, slider ini juga sudah di lengkapi dengan Fitur Responsivenya, jadi bisa kamu pasang di template manapun..

Cara membuat Slider Responsive Berdasarkan Post Publisher Di Blog

DEMO SHOW

Cara Pemasangan membuat Slider Responsive Berdasarkan Post Publisher Di Blog

1. Masuk terlebih dahulu ke Dasboard blog kamu
2. Pilih menu tataletak==>tambahkan widget Html/javascript
3. Pastekan code di bawah ini tepat pada aera Html/Javascript

<style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.bulshitman.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

Ganti Code ==>http://www.bulshitman.blogspot.com/, dengan Url blog/website kamu
nah jika kamu mau ingin mengganti postingan yang di tampilkan slider dengan postingan sesuai label, silahkan kamu ganti tagName:false dengan tagName:'Labelkamu' (silahkan kamu ganti Labelkamu sesuai dengan postingan label yang kamu inginkan tampilkan)
4. Simpan dan lihat hasilnya
Kamu bisa menambahkan tag kondisional pada widget kamu, jika kamu ingin menampilkan widget ini pada halaman tertentu.

SELAMAT MENCOBA

Cara Membuat Menu Navigasi Lavalamp Efek Pure Css3 Blogger Version

2016-04-07T22:53:00.002+07:00

Cara Membuat Menu Navigasi Lavalamp Efek Pure Css3 Blogger Version, Dengan menu ini kamu bisa menampilkan blog kamu dengan gaya yang lebih keren, Pada kesempatan sebelumnya saya sudah membagikan cara membuat mega menu droupdouwn with image or thumnbnails,. namun kali ini saya akan mencoba memberikan tutorial yang sedikit berbeda, masih mengenai menu, namun tampilan kali ini cukup keren dengan tampilan Lavalamp, Navigasi ini memberikan sensasi mata tersendiri.
kemungkinan kamu berminat dengan tutorial membuat menu lainnya, jika kamu mau melihat lebih banyak lagi silahkan kamu masuk ke halaman Menu yang sudah kami sediakan untuk kamu semua.

Cara Membuat Menu Navigasi Lavalamp Efek Pure Css3 Blogger Version

LIVE DEMO

Mungkin shobat blogger semua sudah sering melihat menu seperti ini di beberapa template blog,!! Sebenarnya navigasi ini sudah lama beredar dan kali ini saya akan coba membagikannya kembali..

CSS Coding

#nav,#nav ul { list-style:none outside none; margin:0; padding:0; }
#nav { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpfFzSPxEkWXg2nu1lBScPfCvl1KzWny-eX72zsAUMPYV6hET3anq-dnzb3vfXZKMD0wU9weDrMJaN2MG1wffSuWbb13DiY2idifimuWAgdv3gAtunU5TTAR3v5ORn99J0xBmQ3IHEXmi/s1600/menu_bg.png') no-repeat scroll 0 0 transparent; clear:both; font-size:12px; height:58px; padding:0 0 0 9px; position:relative; width:957px; }
#nav ul { background-color:#222; border:1px solid #222; border-radius:0 5px 5px 5px; border-width:0 1px 1px; box-shadow:0 5px 5px rgba(0,0,0,0.5); left:-9999px; overflow:hidden; position:absolute; top:-9999px; z-index:2; -moz-transform:scaleY(0); -ms-transform:scaleY(0); -o-transform:scaleY(0); -webkit-transform:scaleY(0); transform:scaleY(0); /*-moz-transform-origin:0 0; -ms-transform-origin:0 0; -o-transform-origin:0 0; -webkit-transform-origin:0 0; transform-origin:0 0; -moz-transition:-moz-transform 0.1s linear; -ms-transition:-ms-transform 0.1s linear; -o-transition:-o-transform 0.1s linear; -webkit-transition:-webkit-transform 0.1s linear; transition:transform 0.1s linear; */; }
#nav li { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uQVm7a7yFvnRUnlrJhHHuUXyDxYKrqWnXltV5r81xGGM2WqmJ3UWfLZZo2O3LQa9Z7DTf0E4PtNRw5iJRJJ4jlv4QWz4hHhsvPZD1e4y_Gi6W8wmZUceiPjLGNVjBDMhJr01ZgoeGoDc/s1600/menu_line.png') no-repeat scroll right 5px transparent; float:left; position:relative; }
#nav li a { color:#FFFFFF; display:block; float:left; font-weight:normal; height:30px; padding:23px 20px 0; position:relative; text-decoration:none; text-shadow:1px 1px 1px #000000; }
#nav li:hover > a { color:#00B4FF; }
#nav li:hover,#nav a:focus,#nav a:hover,#nav a:active { background:none repeat scroll 0 0 #121212; outline:0 none; }
#nav li:hover ul.subs { left:0; top:53px; width:180px; -moz-transform:scaleY(1); -ms-transform:scaleY(1); -o-transform:scaleY(1); -webkit-transform:scaleY(1); transform:scaleY(1); }
#nav ul li { background:none; width:100%; }
#nav ul li a { float:none; }
#nav ul li:hover > a { background-color:#121212; color:#00B4FF; }
#lavalamp { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0unvnmN7sqmFuNFN_zfDaYWErH2CVKUA59B87cXLnkrcRuqyQia46jpZ1oKPdbpcO2JERyjoWLsLVFMDPLbwBncAKBnj8p-yUSC4KRymk5-pcmTiV6OMzrH9PLi_4Shpf9AmCelxE98Xi/s1600/lavalamp.png') no-repeat scroll 0 0 transparent; height:16px; left:13px; position:absolute; top:0; width:64px; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -webkit-transition:all 300ms ease; transition:all 300ms ease; }
#lavalamp:hover { -moz-transition-duration:3000s; -ms-transition-duration:3000s; -o-transition-duration:3000s; -webkit-transition-duration:3000s; transition-duration:3000s; }
#nav li:nth-of-type(1):hover ~ #lavalamp { left:13px; }
#nav li:nth-of-type(2):hover ~ #lavalamp { left:90px; }
#nav li:nth-of-type(3):hover ~ #lavalamp { left:170px; }
#nav li:nth-of-type(4):hover ~ #lavalamp { left:250px; }
#nav li:nth-of-type(5):hover ~ #lavalamp { left:330px; }
#nav li:nth-of-type(6):hover ~ #lavalamp { left:410px; }
#nav li:nth-of-type(7):hover ~ #lavalamp { left:490px; }
#nav li:nth-of-type(8):hover ~ #lavalamp { left:565px; }

Html Coding

<div class="container">
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.seocips.com">Back</a></li>
<div id="lavalamp"></div>
</ul>
</div>

Nah bagai mana shobat keren bukan?
Mungkin sekian dari postingan BulshitMan kali ini, sampai ketemu di Frekuenzi yang sama

SELAMAT MENCOBA

(21322) cara membuat menu fixed melayang keren stiky Blogger Version

2016-04-07T10:15:00.000+07:00

Hallo sehabat blogging semua, apa kabar, ketemu lagi nh di Artikel Tutorial kali ini,,,
semuanya pada sehat??? semoga sehat yaaaa, heeee,,... kali ini saya akan coba untuk share cara membuat menu flexid melayang keren Sebelumnya saya juga sudah pernah share cara membuat navigasi menu meggunakan font awesome menu navigasi ini sangat marak di bicarakan oleh para blogger, di karenakan tampilannya yang menarik, dengan tambahan Font awesome yang membuat menu ini semakin tampil lebih rapi, Fitur Font awesome Ini juga gratis, sehingga banyak para blogging memakai fitur ini,
untuk anda yang tidak ingin bingung membuat menu navigasi menggunakan font awesome bisa langsung anda kunjungi halaman di bawah ini:
http://bulshitman.blogspot.co.id/2016/03/cara-membuat-navigasi-menu-menggunakan.html
jika anda ingin membuat menu sendiri menggunakan Font awesome Anda juga bisa mengunjungi:
http://bulshitman.blogspot.co.id/2016/02/cara-memasang-font-awesome-dan-cara.html
ehhhh sampe lupa sama artikel yang kita bahas kali ini,,, saking serunya, saya sampe lupa,
Langsung saja dech kalok githu,,,,!!!!!

cara membuat menu flexid melayang keren

(21322) cara membuat menu flexid melayang keren Blogger Version

LIHAT DEMO

Note

Masuk ke Dasboard Blogger anda

Pilih Template lalu klik Edit HTML
Cari code ]]></b:skin> atau </style> untuk mempercepat pencarian gunakan atau tekan

Ctrl

+
F
pada keyboard anda Lalu letakkan code berikut di atas ]]></b:skin> atau bisa juga anda letakkan code berikut tepat di atas kode </style>

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999}
.menu3Dflip {border-bottom:2px solid #cecece;margin:0 auto;text-align:center;position:relative;height:40px;z-index:999;background:#0091d6;-moz-perspective:100px;-webkit-perspective:100px;-o-perspective:100px;perspective:100px}
.menu3Dflip ul.nav li {display:inline-block;display:inline}
.menu3Dflip ul.nav {padding:0;margin:0;list-style:none;display:inline-block;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
.menu3Dflip ul.nav li {float:left;display:block;padding:0 4px}
.menu3Dflip ul.nav > li {-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.menu3Dflip ul.nav li a.top-a {display:block;margin-top:4px;float:left;height:36px}
.menu3Dflip ul.nav li a.top-a b {display:block;padding:0 20px;font:bold 14px/30px arial, sans-serif;color:#fff}
.menu3Dflip ul.nav li:hover a.top-a {background:red;border-radius:8px 8px 0 0;-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4)}
.menu3Dflip ul.nav div {position:absolute;top:40px;left:4px;background:#09c;padding:5px 0 10px 0;border-radius:0 0 15px 15px;-webkit-transition:0.5s;-moz-transition:0.5s;-o-transition:0.5s;transition:0.5s;-moz-transform-origin:0px 0px;-moz-transform:rotateX(-90deg);-webkit-transform-origin:0px 0px;-webkit-transform:rotateX(-90deg);-o-transform-origin:0px 0px;-o-transform:rotateX(-90deg);transform-origin:0px 0px; transform:rotateX(-90deg);-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility: hidden}
.menu3Dflip ul.nav div.left {left:auto; right:4px} .menu3Dflip ul.nav div ul {padding:10px 0;list-style:none;width:300px;margin:10px 5px 0 5px; float:left;display:inline;text-align:left;background:#fff;border-radius:6px;-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4)}
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px;margin-right:10px}
.menu3Dflip ul.nav div ul li {float:left;border-bottom:1px dotted #09c;margin:0 5px 0 5px;display:inline}
.menu3Dflip ul.nav div ul li:last-child {border:0}
.menu3Dflip ul.nav div ul li a {display:block;width:280px;font:12px/16px arial, sans-serif;color:#069;margin:0;padding:4px 0 4px 10px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtohNBcY1Sw13eSNVjbN_CY42V-ex4LwFwviO38bhW4qShrsoo80TUZVoFIkGtMnr0EehtUB8RDYA7zrt9NeoJytbFpy51reuiTUyP1QfzLY2MjNzqYS5n8_VNVzvcmoExAcZ6F99fvIw/h120/arrow.gif) no-repeat left center}
.menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtohNBcY1Sw13eSNVjbN_CY42V-ex4LwFwviO38bhW4qShrsoo80TUZVoFIkGtMnr0EehtUB8RDYA7zrt9NeoJytbFpy51reuiTUyP1QfzLY2MjNzqYS5n8_VNVzvcmoExAcZ6F99fvIw/h120/arrow.gif) no-repeat 1px center}
.menu3Dflip ul.nav div.col1 {width:320px}
.menu3Dflip ul.nav div.col2 {width:630px}
.menu3Dflip ul.nav div.col3 {width:740px}
.menu3Dflip ul.nav li:hover div{-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform: rotateX(0deg)}
.mb-style-3 {width:500px}
.mb-style-3 blockquote{background:#fff;padding:30px;border:4px solid #080;border-radius:5px;box-shadow:inset 0 2px 0 rgba(18, 177, 250, 0.7),5px 4px 5px rgba(0, 0, 0, 0.3)}
.mb-style-3 blockquote:after,.mb-style-3 blockquote:before{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}
.mb-style-3 blockquote:after{border-top-color:#fff;border-width:10px;left:73%;margin-left:-10px}
.mb-style-3 blockquote p {font-family:Georgia;font-size:17.5px;color:#333;font-weight:700;padding:15px;text-indent:100px;position: relative;margin-bottom:-0.5em}
.mb-style-3 blockquote p:before{content:'\201C';font-family:serif;font-style:normal;font-weight:700;position:absolute;font-size:145px;bottom: -0.0002px;left:-85px;color:rgba(18, 177, 250, 1)}
.mb-style-3 .mb-attribution {text-align:right;padding:14px 100px 20px 20px;position:relative}
.mb-style-3 .mb-thumb {display:block;width:77px;height:77px;border:5px solid #2fe45D;border-radius:50%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQCYVMqu36in081S15XVKTO5s3W3Lq2n9IhUIZVt77FQCNYAg01exiYJ7aNgslSqnH5zys4lmR_Yp7EVd91l1X-A-RIq98gz7C8gTtf8ltKkNvffZ8H-Mb1a8TqeKM1LuDgfx5fOlBb8/s80/734662_418084968280133_439055412_n.jpg) no-repeat center center;position:absolute;right:10px;bottom:5px;box-shadow:inset 1px 1px 4px rgba(0,0,0,0.5),0 2px 3px rgba(0,0,0,0.6);}
.mb-style-3 .mb-author{font-family: 'Alegreya SC', serif;font-weight:700;font-size:18px;color:rgba(186, 17, 25, 1);text-shadow:0 1px 1px rgba(255,255,255,0.7)}
.mb-style-3 cite a{font-family:'Alegreya SC', serif;font-weight:bold;font-style:italic;color:#fff;padding:4.5px;background:#080;-webkit-border-radius: 5px;border-radius: 5px}
.mb-style-3 cite a:hover{background-color:blue;box-shadow:6px 6px 6px rgb(123, 45, 159);color: #fff}
@font-face {font-family: 'icons';src: url("font/icons.eot");src:url("font/icons.eot?#iefix") format('embedded-opentype'),url("font/icons.woff") format('woff'),url("font/icons.ttf") format('truetype'),url("font/icons.svg#icons") format('svg');font-weight: normal;font-style: normal}
.mb-wrap {width:auto;margin:65px auto;padding:0;position:relative}
.mb-wrap p{margin: 0;padding: 8px 0;}
.mb-wrap blockquote {margin: 0;padding: 0;position: relative}
.mb-wrap cite {font-style: normal}

oky jika sudah selesai, selanjutnya cari code <body atau
div id='outer-wrapper'>
jika sudah ketemu salah satu code di atas.. <body simpan code di bawah ini tepat di bawahnya,,,
Namun jika tidak ketemu bisa anda cari code seperti div id='outer-wrapper'> lalu copy pastekan code berikut tepat di atasnya:
Code yang harus anda simpan/copy paste pada salah satu code di atas.

<div id='menufixed'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='#' target='_blank' title='Tentang Saya'><b>My Diary</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#' target='_blank' title='Sahabat Jadi Cinta'>PUISI: Sahabat Jadi Cinta</a></li>
<li><a href='#' target='_blank' title='Faktor Utama Penyebab Putus Cinta'>Faktor Utama Penyebab Putus Cinta</a></li>
</ul>
<ul class='colRight'>
<li><a href='#' target='_blank' title='Surat Untuk Sahabat'>Surat Untuk Sahabat</a></li>
<li><a href='#' target='_blank' title='PUISI : Pengorbanan Cinta'>Pengorbanan CINTA</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='TOP Artikel'><b>Artikel</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#' target='_blank' title='Blogging Tips'>Blogging Tips</a></li>
<li><a href='#' target='_blank' title='CSS Widget'>CSS Widget</a></li>
<li><a href='#' target='_blank' title='Desain Template'>Template Design</a></li>
<li><a href='#' target='_blank' title='Efek Gambar'>Efek Gambar</a></li>
<li><a href='#' target='_blank' title='Informasi SEO'>SEO Informasi</a></li>
</ul>
<ul class='colRight'>
<li><a href='#' target='_blank' title='Tutorial Blog'>Tutorial Blog</a></li>
<li><a href='#' target='_blank' title='SEO Trik'>SEO Trik</a></li>
<li><a href='#' target='_blank' title='CSS Code'>CSS Code</a></li>
<li><a href='#' target='_blank' title='Efek Colection'>Efek Colection</a></li>
<li><a href='#' target='_blank' title='Kehidupan Sosial'>Kehidupan Sosial</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='My Account'><b>Profile</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#' target='_blank' title='Google Plus'>Google Plus</a></li>
<li><a href='#' target='_blank' title='Facebook'>Facebook</a></li>
<li><a href='#' target='_blank' title='Twitter'>Twitter</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='Arsip File Laman Page'><b>Arsip File</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='#' target='_blank' title='Jumping Text Effect'>Jumping Text</a></li>
<li><a href='#' target='_blank' title='Trembling Text Effect'>Trembling Text</a></li>
<li><a href='#' target='_blank' title='Animated Text Fill'>Animated Text</a></li>
</ul>
<ul class='colRight'>
<li><a href=#' target='_blank' title='Daftar Isi Blogger Dengan Navigasi'>Daftar Isi Blogger Dengan Navigasi</a></li>
<li><a href='#' target='_blank' title='Elegant Black Color'>Elegan Black Color For Sitemap Theme</a></li>
<li><a href='#' target='_blank' title='Black Red Light Theme'>Black Red Light Theme Sitemap Design</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#' target='_blank' title='Follow My Blog'><b>Follow</b></a></li>
</ul>
<div style='text-align:left;position:absolute;position:fixed;top:0;left:5px;z-index:999;overflow:hidden'><img alt='Logo Blog' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2DEsBOwf27ZQB0upFxIuctdcCLAFLeS-B3Vhw-VKo9I8n_5AGPoc6hr5CV6nB4k7BRVTOeNIB5vTbwW5elw4192_1PiPCjsU1MgQwythnD1QssekOPjMSCo5OKr0TX3Uig1TL0EM0tW0/s180/sb-77+logo.png' title='Web Design' width='40'/></div><div style='text-align:center;position:absolute;position:fixed;left:52px;z-index:999;overflow:hidden;color:white;font:bold 15px Verdana;margin-top:-36px;text-shadow:1px 2px 3px #111'>SB-77 Design</div>
</div>
</div>
<noscript>
<div id='NoScript'>
<h6>Please enable javascript to view this site.</h6>
</div>
</noscript>

terakhir klik Save, dan lihat hasilnya

Note 2

Ganti tanda pagar warna merah (#) dengan URL tujuan kamu

==>Oky mungkin kita harus berpisah sampai di sini dulu,, heeee, karna tangan saya sudah lumayan pegel nulis ini semua,,, jadi ketemunya di lain waktu lagi yaaa,,,

SEMOGA SUKSES

Serach Form Menggunakan Ajax Jquery Efek Bounce Blogger Version

2016-04-06T03:53:00.001+07:00

Serach Form adalah salah satu perangkat search yang dapat di sediakan pada blog atau template blog/website, sebenarnya search form banyak kita jumpai pada dunia online ini, misalnya pada kunjungan kamu ke facebook jelas pasti dalam aplikasi facebook tersebut telah menyediakan yang namanya search form... search form adalah aplikasi yang dapat di install pada berbagai bentuk software (Tergantung bentuk software) yang berguna untuk mencari konten yang ada pada Software tersebut ,Mungkin sebelumnya saya sudah pernah share cara membuat search form di blog, namun bagi saya cara sebelumnya Kurang efektif,,. Jadi untuk yang kali ini saya rasa ini bisa menjadi solusi untuk qmu,.
pada kesempatan kali ini saya akan coba mengupas Cara membuat Serach Form Menggunakan Ajax Jquery Blogger Version , Oky langsung saja mari kita simak bareng-bareng tutorialnya di bawah ini:

Serach Form Menggunakan Ajax Jquery Blogger Version

Serach Form Menggunakan Ajax Jquery Efek Bounce Blogger Version

DEMO SHOW

Langkah-langkah Memasang Serach Form Menggunakan Ajax Jquery Efek Bounce Blogger Version

1. Masuk terlebih dahulu ke dasboard blog kamu
2. Pilih menu Template==>Edit Html
3. Cari code ]]><b:skin> Atau bisa juga </style>, Untuk mempercepat pencarian Klik

Ctrl

pada keyboard, jika sudah ketemu salah satu code di atas silahkan kamu copy pastekan code berikut tepat di atas salah satu code tersebut

* { box-sizing:border-box; }
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search { width:300px; left:100px;padding:5px; }
#ajax-search-form { position:relative; font:normal normal 13px Arial,Sans-Serif; }
#ajax-search-form input { border:1px solid #e3e3e3; background-color:white; font:normal normal 12px/100% Arial,Sans-Serif; color:black; margin:0 0; height:22px; line-height:22px; padding:0 5px; width:140px; }
#ajax-search-form input[type="submit"] { width:auto; background-color:#49afcd; border:none; color:white; font-weight:bold; cursor:pointer; font-size:12px; }
#search-result { background-color:#49afcd; padding:5px 2px; margin:2px 0; width:300px; overflow:auto; max-height:710px; position:absolute; right:6px; top:28px; z-index:99; color:white; border-radius:0 0 3px 3px; box-shadow:0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3); display:none; }
#search-result .close { display:block; position:absolute; top:2px; font-size:20px; right:10px; line-height:normal; color:white; }
#search-result ul { margin:0; overflow:hidden; max-height:405px; border-bottom:1px solid #45A5C2; border-top:1px solid #45A5C2; list-style:none; }
#search-result li { height:68px; overflow:hidden; padding:0 5px; border-top:1px solid #45A5C2; border-bottom:1px solid #45A5C2; position:relative; }
#ajax-search-form a { color:#741F27; text-decoration:none; }
#search-result h4 { display:block; margin:0 0 10px 5px; color:white; }
#search-result p { font-size:10px; color:white; }
#search-result span { width:50px; height:50px; display:block; float:left; padding:2px; margin-right:5px; margin-top:5px; background-color:whitesmoke; }
#search-result img { width:100%; height:100%; display:block; }
#search-result h5 { color:#1E598E; overflow:hidden; font-size:100%; margin-top:2px; height:16px; }
#search-result h5:hover { color:#333; text-decoration:underline; }
}
#search-result mark { color:white; background:#085C0B; padding:0 3px; }
#search-result ul:hover { overflow:auto; }

4. Jika sudah terpasang code di atas, selanjutnya silahkan kamu cari code </body>, kemudian salin Java script di bawah ini tepat sebelum code </body>

https://rawgit.com/BulshitMan-BM/bulshitman.blogspot.com/master/Searchform1.js

5. Jika java script di atas tidak berfungsi silahkan kamu ganti dengan java script di bawah ini, pemasangannya juga sama Copy pastekan code berikut tepat di atas <body>

<script type='text/javascript'>
//<![CDATA[
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
def: "easeOutQuad",
swing: function (x, t, b, c, d) {
return jQuery.easing[jQuery.easing.def](x, t, b, c, d)
},
easeInQuad: function (x, t, b, c, d) {
return c * (t /= d) * t + b
},
easeOutQuad: function (x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b
}
return -c / 2 * ((--t) * (t - 2) - 1) + b
},
easeInCubic: function (x, t, b, c, d) {
return c * (t /= d) * t * t + b
},
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t + b
}
return c / 2 * ((t -= 2) * t * t + 2) + b
},
easeInQuart: function (x, t, b, c, d) {
return c * (t /= d) * t * t * t + b
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b
}
return -c / 2 * ((t -= 2) * t * t * t - 2) + b
},
easeInQuint: function (x, t, b, c, d) {
return c * (t /= d) * t * t * t * t + b
},
easeOutQuint: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t * t + b
}
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b
},
easeInOutSine: function (x, t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
},
easeInExpo: function (x, t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
},
easeOutExpo: function (x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
},
easeInOutExpo: function (x, t, b, c, d) {
if (t == 0) {
return b
}
if (t == d) {
return b + c
}
if ((t /= d / 2) < 1) {
return c / 2 * Math.pow(2, 10 * (t - 1)) + b
}
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) {
return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
}
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
},
easeInElastic: function (x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) {
return b
}
if ((t /= d) == 1) {
return b + c
}
if (!p) {
p = d * 0.3
}
if (a < Math.abs(c)) {
a = c;
var s = p / 4
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a)
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
},
easeOutElastic: function (x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) {
return b
}
if ((t /= d) == 1) {
return b + c
}
if (!p) {
p = d * 0.3
}
if (a < Math.abs(c)) {
a = c;
var s = p / 4
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a)
}
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
},
easeInOutElastic: function (x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) {
return b
}
if ((t /= d / 2) == 2) {
return b + c
}
if (!p) {
p = d * (0.3 * 1.5)
}
if (a < Math.abs(c)) {
a = c;
var s = p / 4
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a)
}
if (t < 1) {
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
}
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) {
s = 1.70158
}
return c * (t /= d) * t * ((s + 1) * t - s) + b
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) {
s = 1.70158
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) {
s = 1.70158
}
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b
},
easeOutBounce: function (x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b
} else {
if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
} else {
if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
}
}
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d / 2) {
return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * 0.5 + b
}
return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
}
});
/* Search*/
var searchFormConfig = {
summaryPost: true,
resultThumbnail: true,
fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdO4v-IUSCh6lYLzx8GaJymUzkhoxO9LJCpjMvAZAByh5kq07qhDqkFzyFnR1FhdR6X1ytyINFFoxV_ZxCbnpRCl5GgesEwRGb-ur3sRcsne7FKSLVWtWOJGIy99KUQOoGV7xwMLNEJY/s50-c/Noim.png",
thumbSize: 50,
summaryLength: 100
};
(function (c) {
var a = c("#ajax-search-form"),
d = a.find(":text");
config = searchFormConfig;
a.append('<div id="search-result"></div>');
var b = c("#search-result");
a.on("submit", function () {
var e = d.val();
b.slideDown(500, "easeOutBounce").html("Loading...");
c.ajax({
url: "http://www.bulshitman.blogspot.com/feeds/posts/summary?alt=json-in-script&q=" + e + "&max-results=9999",
type: "get",
dataType: "jsonp",
success: function (q) {
var p = q.feed.entry,
m, l, o, n, g = "";
if (p !== undefined) {
g = "<h4>Search results for keyword "" + e + ""</h4>";
g += '<a class="close" href="/">×</a><ul>';
for (var k = 0; k < p.length; k++) {
var f = new RegExp(e, "ig"),
o = p[k].title.$t.replace(f, "<mark>" + e + "</mark>");
for (var h = 0; h < p[k].link.length; h++) {
if (p[k].link[h].rel == "alternate") {
n = p[k].link[h].href
}
}
if (config.summaryPost === true) {
if ("content" in p[k]) {
m = p[k].content.$t
} else {
if ("summary" in p[k]) {
m = p[k].summary.$t
} else {
m = ""
}
}
}
if (config.resultThumbnail === true) {
if ("media$thumbnail" in p[k]) {
l = p[k].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + config.thumbSize + "-c")
} else {
l = config.fallbackThumb
}
}
m = m.replace(/<\S[^>]*>/g, "");
if (m.length > config.summaryLength) {
m = m.substring(0, config.summaryLength) + "..."
}
m = m.replace(f, "<mark>" + e + "</mark>");
g += '<li><a href="' + n + '" target="_blank"><span><img src="' + l + '" alt="" /></span><h5>' + o + "</h5></a><p>" + m + "</p></li>"
}
g += "</ul>";
b.html(g)
} else {
b.html('<a class="close" href="/">×</a><strong>No result!</strong>')
}
},
error: function () {
b.html('<a class="close" href="/">×</a><strong>Error loading feed.</strong>')
}
});
return false
});
a.on("click", ".close", function () {
b.slideUp(500, "easeInExpo");
return false
})
})(jQuery);
//]]>
</script>

Ganti code yang sudah saya warnai merah dengan alamat/Url blog kamu
6. Selanjutnya silahkan kamu pastekan code penempatan search form ini di mana saja yang kamu suka, (sesuaikan dengan template mou)

<div id="form-search">
<form action="/search" id="ajax-search-form">
<input name="q" type="text" />
<input type="submit" value="Search" />
</form>
</div>

7. Terakhir silahkan kamu save/simpan template blog kamu
Nah bagai mana shobat, meskipun lumayan rumit cara pemasangannya, tapi hal ini tidak cukup untuk mengurungkan niat kamu memasang search form ini kan,
Mungkin sampai di sini dulu, sampai ketemu lagi di lain waktu

SEMOGA SUKSES

Widget Random Post Images Or Thumnbnails Blogger Version

2016-04-06T01:42:00.001+07:00

Widget Random Post Images Or Thumnbnails Blogger Version, Mampu memberikan kesan pada template menjadi lebih indah. Widget Random Post Images Or Thumnbnails Blogger Version, ini akan menampilkan postingan kamu dengan style random post, pada sebelumnya saya sudah share Membuat widget berdasarkan label/category, Untuk dalam kesempatan kali ini kita lanjutkan dengan membuat
Widget Random Post Images Or Thumnbnails Blogger Version,, Random post adalah salah satu style widget yang lumayan banyak di cari.
ya dari namanya saja kita sudah tidak asing lagi dengan widget ini.

Widget Random Post Images Or Thumnbnails Blogger Version

DEMO SHOW

Memasang Widget Random Post Images Or Thumnbnails Blogger Version

1. Masuk terlebih dahulu ke Dasboard blog kamu
2. Pilih menu tataletak==>Tambahkan gadget/widget==>Pilih Java script/Html
3.Silahkan kamu pastekan code berikut tepat pada Area/kolom Html widget

<style>
.rp-seocips{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}
.rp-seocips2{border:1px solid #ddd;padding:5px 10px;overflow:hidden;box-shadow: -2px 2px 3px #ddd;background:#fff;border:1px solid #ddd;}
#random-posts img{float:left;margin-right:10px;border:1px solid #ddd;background:#fff;width:65px;height:65px;padding:3px;border-radius:2px;}</style>
</style>
<div class="rp-seocips">
<div class="rp-seocips2">

<div id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"http://www.bulshitman.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0PH9zraW4wiToM2NNqhcj81aPmMz3Otk9WcA0FcdTJtiGWJB4Z2UQwfJJJvL0JpbBQBfxbhPSLo4fDdvQ6ihQLybYaJpTfh-0pj0Dq13acTP8dGcMVVmGDXjGC2PLbctRZ6eVEkQ-ezH//"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"http://www.bulshitman.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</div>

</div></div>

Note

var rdp_numposts=5; <== adalah postingan yang ingin kamu tampilkan
http://www.bulshitman.blogspot.com <==Silahkan kamu ganti code yang berwarna biru dengan url Blog kamu
4.Silahkan kamu save/simpan template

Nah gi mana shobat cukup gampang bukan cara pemasangan widget ini, Selamat mencoba yaa, sampe ketemu di frekuenzi yang sama

SEMOGA SUKSES

Mega Menu Droupdown With Images Thumnbnails Blog/Website

2016-04-04T19:27:00.000+07:00

Mega menu droupdown or image thumnbnails. kamu bisa mempercantik blog/blogger kamu, dengan kamu menggunakan menu ini sebagai tampilan menu template blog kamu,, mega menu droupdown with images thumnbnails ini cukup banyak peminatnya, di samping menu ini dapat di bilang responsive, menu ini juga akan langsung menampilkan sebagian dari postingan kamu (perlabel),.
ya menu ini akan menampilkan setidaknya 5 postingan blog kamu dengan label yang berbeda sesuai selera yang kamu inginkan.

Mega Menu Droupdown With Images Thumnbnails Blog/Website

LIVE DEMO

Fitur Mega Menu Droupdown With Images Thumnbnails Blog/Website:

1. Mega menu with Image Or thumnbnails
2. Cross Browser Compatibility
3. Menu styling

Note

Sebelum kamu memasang Menu ini pada blog kamu, saran saya backupterlebih dahulu template blog kamu, hal ini untuk mengartisipasi kesalahan yang terjadi pada template blog kamu, karena setiap template pasti memiliki fitur Html yang berbeda jadi saran saya silahkan backup terlebih dahulu..

Cara Memasang Mega Menu Droupdown With Images Thumnbnails For Blog/Website

1. Masuk terlebih dahulu ke Dasboard blog/blogger kamu
2. Pilih menu template==>Edit Html
3. Silahkan kamu pastekan code di bawah ini tepat pada code ]]></b:skin>, atau bisa juga di pastekan di atas code </style>, coba test salah satunya

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYuBJkg4Dw_iVG_b0Zns8ybUsFBeWvReKxO9-_b2uiAmKn0hKFYWNZ9qu0FhOziTHoFOlXGy_9yX6OdPX8sbrjmZiDOfzogQFdm6rwhCOAESJN2Q2SiPdiv0-Z_vMfwQwYVV5Mn9JLDo/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE8JJ6lZhYIdTk60GcIiz_IxwBs2BNVvdJfN33oIIbs6xys2yzePk7ZNDjgK4CahyphenhyphentF8-Mfsg9ofYRAj-poUTlWVlKrtbU6d7whcB1TJPPH9uP3ePBFnGPi2I0p0lHRdFO-HbFoQekBu4/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisV51l6WyfLC9SM4Qmcl77CQVghuQC2ZPWsasXhBtCcEbJuFS_GwVNcCJirc7DfIcqMG7yB9cN0M4RRcOuublpwxnbIOFNK8Ir8-CpE-G5bzyJ54fGlLRFJxZv2pJJMPQ76ypo6CtNJYM/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

4. Setelah code di atas sudah kamu pasang, sekarang pastekan code di bawah ini tepat sebelum code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#megamenuid').megaBloggerMenu({
postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglAswiHX1QPZxlPAgsCB9yInyfUQLqelcOy9alRvdBqkTbtHQiEtkLDVAU4WEihf1skE7KAk32uOFwwnRkk4JygYIeDGFZW3Qh6U4h1f7tWQdAukbuA_bIzfhEqfZz6DMoG_lrTI7XQiQ/s1600/no_image_available.png'
});
});
$(function(){
$('.search-here').submit(function(e){
if($('.search-box .search-field').val().length==0){
$('.search-box .search-alert').fadeIn().css('display','inline-block');
e.preventDefault();
}
});
});
</script>

Code yang saya warnai merah adalah code jquery, jika code jquery sudah terpasang pada template kamu, maka jequery di atas tidak perlu kamu masukan lagi..
5.Jika sebelumnya kamu sudah pernah memasang menu lama kamu, silahkan kamu hapus/ganti dengan code menu di bawah ini, namun jika belum ada menu yang terpasang pada blog kamu silahkan kamu cari code <div class='main-outer'> Lalu silahkan kamu pastekan code berikut tepat sebelum code <div class='main-outer'>

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://www.bulshitman.blogspot.com/search/label/Tutorial%20Blog'>LABEL 1</a></li>
<li><a href='http://www.bulshitman.blogspot.com/search/label/Widget'>LABEL 2</a></li>
<li><a href='http://www.bulshitman.blogspot.com/search/label/Tips%20Blog'>LABEL 3</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://www.bulshitman.blogspot.com/search/label/menu'>LABEL 4</a></li>
<li><a href='http://www.sbulshitman.blogspot.com/search/Template%20Blog'>LABEL 5</a></li>
<li><a href='http://www.bulshitman.blogspot.com/search/label/Info%20Android'>LABEL 6</a></li>
</ul></li>
<li><a href='http://www.bulshitman.blogspot.com/search/label/Slider'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>

Silahkan kamu ganti code yang berwarna biru dengan code label kamu, setiap label pada blog/website kamu pasti memiliki gambar yang relefan dengan daya tarik tersendiri, dan terakhir silahkan kamu simpan template kamu

SEMOGA SUKSES

Cara Membuat Widget Berdasarkan Category Image Thumbnails blogger

2016-04-02T13:11:00.000+07:00

Cara Membuat Widget Perlabel Image Thumbnails, Bagai mana cara membuat widget berdasarkan category??, membuat widget ini sebetulnya sangat mudah, sebelum saya melanjutkan tutorial kali ini, mari terlebih dahulu kenali apa itu widget?.
Mungkin bagi pemula kita masih bingung sebenarnya apa sih Widget dan untuk apa fungsinya...? baiklah Admin BulshitMan akan menjelaskan sedikit Pengertiang widget berdasarkan yang admin tau mengenai widget, namun yang admin jelaskan lebih pada Widget untuk Blogspot, karena pada halaman Blogspot lebih banyak tutorial yang di berikan oleh para ahli blog, sedang admin sendiri masih Belajar.

Apa Itu Widget??

" Widget adalah aplikasi kecil yang dapat diinstal dan dijalankan dalam halaman web oleh pengguna akhir. Mereka berasal dari sekumpulan-kumpulan code yang di sebut HTML"

Istilah lain yang digunakan untuk menggambarkan widget web meliputi Portlet,, lencana, modul, webjit kapsul snippet, mini dan serpihan. Widgets biasanya dibuat dalam HTML,JavaScript,CSS atau Adobe Flash. Pada web Blogspot sendiri widget memiliki Istilah yang bermacam-macam untuk widget seperti: portlet, gadget, badge, webjit, capsule, snippet, dll. Nah di atas adalah pengertian dari widget, selanjutnya mari kita masuk ke tutorial membuat widget ya sudah Cara membuat widget Rec ent Post Dark style itu adalah tutor yang sebelumnya pernah saya bagikan, dan sekarang saya akan coba mengupas secara tajam setajam singglet pada Tutorial: Cara Membuat Widget Berdasarkan Category Image Thumbnails blogger ini,..

Cara Membuat Widget Berdasarkan Category Image Thumbnails blogger

DEMO SHOW

Langkah-langkah Pemasangan Widget

1. Masuk Terlebih dahulu ke blog/blogger kamu
2. Pilih Template==>Edit Html
3. Jika kamu sudah masuk ke mode Edit Html, silahkan kamu cari code ]]></b:skin> Untuk mempercepat pencarian code tersebut silahkan kamu klik Tombol

Ctrl

pada keyboard kamu, Letakan code berikut tepat di atas code ]]></b:skin>

img.label_thumb{ float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px; } img.label_thumb:hover{ background:#f7f6f6; } .label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; adding: 0; } ul.label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:10px; } .label_with_thumbs a {} .label_with_thumbs strong {}

Di atas adalah code css yang nantinya agar widget yang kamu pasang bisa mengikuti lebar blog kamu
4. Selanjutnya silahkan kamu cari code </head> lalu Copy,paste code berikut tepat sebelum code </head>

<script src='https://cdn.rawgit.com/Brando07/share/newbe/perlabel-SEOCIPS.js' type='text/javascript'></script>

Di atas adalah code java scripts yang nantinya akan menjalankan widget yang kamu pasang ini.
5. Save/Simpan template kamu

Menampilkan Widget pada blog/blogger berdasarkan Category

Untuk menampilkan widget ini, kamu bisa menampilkannnya di mana saja, dengan posisi yang cukup menarik bagi anda, anda bisa menyimpannya.. biasanya widget ini populer di simpan pada bagian bawah postingan, homepage, samping kiri dan lainnya...
Untuk percobaannya kamu bisa menampilkan widget ini di manapun,
1. Silahkan kamu pindah dari mode Edit Html tadi ke mode/menu Tata letak
2. Tambahkan widget/gadget, pilih masukan java scripts/Html
3. Silahkan kamu masukan code di bawah ini pada kolom area Html

<div style="overflow:hidden; width:100%px; height:auto; padding:10px; border:1px dotted #ddd; background-color:#fff"><script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script><script type="text/javascript" src="http://www.bulshitman.blogspot.com/feeds/posts/default/-/Widget%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>

Note

http://www.bulshitman.blogspot.com/ ==>Untuk Url yang sudah saya tandai biru silahkan kamu ganti dengan Url Blog kamu.
Widget%20Blog==> Untuk mengubah Widget Label/Category yang di tampilkan silahkan kamu ganti code yang berwarna merah, gunakan %20 Untuk spasi yang ada pada label kamu
4. Jika sudah, sekarang coba kamu klik simpan/save
5. Lihat hasilnya

Oky sehabat Blogging mungkin sampai di sini dulu Artikel tutorial yang saya berikan, akhir kata saya ucapakan: sampai ketemu di Frekuenzi yang sama.....

SEMOGA SUKSES

Sevida Responsive V.1.55 Magazine Blogger Template

2016-03-31T13:34:00.000+07:00

Sevida Responsive V.1.55 Magazine Blogger Template Adalah template yang lumayan banyak penggemarnya, template ini banyak memiliki fitur yang premium, Setelah sebelumnya saya share Template Ijonkz Responsive Magazine yang juga kerabat dari Template Sevida ini.. Nah sekarang saya akan coba share Sevida Responsive V.1.55 Magazine Blogger Template, Jangan bingung menggunakan template ini,.. Template ini sudah di lengkapi Fitur-fitur pendukung di beberapa Browser, Mozila, Internet Explorer, Google Chrome, DLL.. Untuk Fitur lebih lengkapnya silahkan anda liat di bawah ini:
Sevida Responsive V.1.55 Magazine Blogger Template

Sevida Responsive V.1.55 Magazine Blogger Template

Fitur Sevida Responsive V.1.55 Magazine Blogger Template

Features	Availability
Responsive Looking Design	True
Slide Show with Auto and manual Featured Functions.	False
Advance Editor.	True
Load More Post Responsive Function.	True
Built in Matched Page Navigation.	True
New Blogger Comment widget.	True
New Built in Search Engine.	True
Cool Summary Posts.	True
Automatic Related Post responsive widget.	True
Optimized fully SEO Friendly template.	True
News ticker widget.	True
Archive Page including.	True
Emotion icon for comment.	True
New Responsive Social icons.	True
Drop Down page navigation menu.	True
Support new languages.	True
Add this Social sharing plugins.	True
Professional Admin Layout.	True
Easy Template Editing with Plugins wise information.	True
Changing Color Features.	True
Link Credit Sevida Premium	False

Note

Nah gi mana shobat di atas adalah beberapa fitur dari Sevida Responsive V.1.55 Magazine Blogger Template,, Jika kamu ingin fitur sevida lebih lengkap saran saya lebih baik kamu Memesan Template ini secara Premium pada Situs resminya.

Untuk Mendapatkan Template ini secara Gratis silahkan Kamu Download Pada LINK di bawah ini!

LINK DOWNLOAD

Cara Membuat Loading Page Dark style For Blogger Version

2016-03-31T09:54:00.001+07:00

Membuat Loading Page Dark style For Blogger Version, Setelah sebelumnya BulshitMan membagikan Cara Membuat Efek Loading Di Blogger Keren, Kini BulshitMan akan coba membagikan Cara Membuat Loading Page Dark style For Blogger Version.
Loading kali ini mempunyai tampilan yang berbeda denga perpaduan Style Color Dark End Gree, Loading Page ini ringan untuk di gunakan pada blog kamu, Kegunaan Memasang Page Loading agar pada saat Page blog kamu sedang di load, pengunjung tidak melihatnya. pengunjung akan otomatis melihat page loading yang kamu pasang ini. untuk pemasangan ikuti Tutor di bawah ini:

Cara Membuat Loading Page Dark style For Blogger Version

LIVE DEMO

Memasang Loading Page Dark style For Blogger Version

1. Masuk terlebih dahulu ke blogger kamu,
2. Pilih Menu Template==Edit HTML
3. Lalu Letakan kode di bawah ini Tepat di atas kode </head>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/loading-seocips.js' type='text/javascript'></script>
<link href='https://cdn.rawgit.com/Brando07/share/newbe/loading-seocips.css' rel='stylesheet' type='text/css'/>

Jika Pada Blog kamu sudah terpasang code jquery maka code yang berwarna mera di atas tidak perlu di pasang lagi.
4. Letakan code di bawah ini tepat pada bagian bawah code <body>

<div id="element" class="introLoading"></div>

Jika Code di atas semua sudah terpasang sekarang silahkan anda Save/simpan

Template Johny Dark Gamer2

2016-03-30T15:37:00.001+07:00

Template Johny Dark Gamer2 adalah template yang di kembangkan oleh Creating Wesbsite dengan tampilan yang menarik,,, template ini sebenarnya adalah template khusus untuk blog/website yang menyediakan Info games, namun tidak sedikit juga banyak yang menggunakan template ini dengan blog/website yang menyediakan Info, Tutor, Tips DLL..
Ijonkz Template juga Banyak di cari oleh para blogging, nah jika anda berminat silahkan kunjungi lamannya http://bulshitman.blogspot.com/2016/03/template-ijonkz-responsive-magazine.html

Template Johny Dark Gamer2

Template Johny Dark Gamer2 blogger version

LIVE DEMO

Fitur Template Johny Dark Gamer2

Features	Availability
2/3 Column Blogger Template	True
With 1 Right Sidebar	True
Static Page Ready	True
3 Column Footer	True
Magazine Style Blogspot Template With Black End Gree Color	True
Automatic Slider Carousel	True
ADS Ready	True
Pagination For Blogger Ready	True
Droupdouwn Menu	True
2 Clear Design Template And More	True

DOWNLOAD

Oky sehabat blogging mungkin sampai di sini dulu yaaa,,, Sampai ketemu lagi di Frekuenzi yang sama..

SEMOGA SUKSES

Template Snapseo V.2.0 Blogger Version

2016-03-29T07:36:00.002+07:00

Template Snapseo V.0.1 adalah template yang memiliki fitur yang premium, pada umumnya mungkin kalian sudah tau template yang sedang di pakai oleh seocips.com,, nah template ini sangat mirip dengan template yang sedang di gunakan oleh seocips.com. untuk sebuah blog menyediakan tentang tutor seperti BulshitMan Jelas blog membutuhkan template khusus untuk tampilan demonya. di bawah ini adalah fitur dari Template Snapseo V.0.1 Blogger Version

(20092) Template Snapseo V.0.1 Blogger Version

'~~Demo~~

Berikut Fitur Template Snapseo V.01 Blogger Version :

Features	Availability
Responsive	True
SEO Responsive (Search Engine Optimization)	True
SEO Friendly	True
Top Menu Navigation With Font Awesome	True
Responsive Dropdown Menu	True
Fast Loading	True
Footer 3 Column	True
Simple Menu in Footer	True
Tabview Column	True
2 Seidebar	True
Next Button Home Page With Pagenum	True
Next Page Button With Title Post	True
Breadcrumbs	True
Search Box	True
Social Share Button	True
Slider Random Post With JS	True
Sidebar Stiky	True
Simple Back To Top	True
All CSS Compressed	True
And Much More...	True

maaf template ini sudah tidak kami publikasikan lagi.. jika ingin info silahkan anda hub Admin.

(20092) Cara Mengatasi Smartphone Yang Lambat Dengan Ram 1 GB

2016-03-27T16:49:00.000+07:00

(20092) Cara Mengatasi Smartphone Yang Lambat Dengan Ram 1 GB

Saat ini spesifikasi tinggi di haruskan di hp android/smartphone lainnya, hal ini sangat penting/menjadi keharusan di karenakan aplikasi yang menunjang fitur-fiturnya, membutuhkan ruang spesifikasi yang tinggi. namun terkadang banya pula smartphone yang tidak memiliki spesifikasi yang tinggi (mini RAM)
Ruang RAM 1GB pada android sekarang sudah tak cukup lagi!! yaa minimal RAM yang di butuhkan 2GB pada android,,, Ruang RAM 1GB jika terlalu banyak aplikasi maka fiturnya akan lambat, menjadikan smartphone anda kurang optimal., untuk Mengatasi Smartphone/Android yang lambat dengan RAM 1GB
ikuti cara di bawah in..

Gunakan HP/Smartphone kamu seperlunya!!!

Android dengan RAM 1GB berarti membatasi anda untuk menjelajahi lebih banyak Hal-hal yang baru pada aplikasi,,, jika ukuran aplikasi terlalu besar kemungkinan dapat membuat lambatnya kecepatan android anda, minimal aplikasi yang terpasang pada smartphone anda LINE, BBM, Facebook, dan aplikasi sosial media lainnya yang ukurannya tidak terlalu besar,...

Ganti Loucher bawaan Android kamu

Loucher bawaan android biasanya memiliki ukuran yang cukup banyak memakan ruang RAM kamu, banyak aplikasi yang menyediakan fitur loucher yang baik untuk smartphone/android kamu,, salah satunya adalah ZERO LOUCHER fitur yang ada pada Zero loucher sangatlah ringan kamu dapat mencarinya langsung di Googleatau bisa juga padasitus resmi android misalnya pada Google Play

Root Android/Smartphone kamu

Yaaa,, dengan kamu meRoot Android kamu, maka android kamu bisa menjadi lebih ringan, root juga dapat meningkatkan akses android tak terbatas dalam hp kamu, menghapus, mengubah, menambah, atau bahkan merusak bagian terdalam di android kamu,,, jangan ragu untuk melakukan Rooting pada android kamu, kamu bisa root smartphone/android dengan menggunakan aplikasi Framaroot aplikasi ini tersedia ilegal dapat kamu cari di Mbah Google

Buang Semua Aplikasi bawaan "Bloatware" Yang Tidak Kamu Perlukan!

Di Android/Smartpohe kamu pasti memiliki aplikasi bawaan yang ter-instal sejak pertama kali kamu membeliny. Berbagai aplikasi tersebut biasanya tidak bisa kamu hapus atau di uninstall bahkan anda juga yang tidak bisa di disable/non-aktifkan, selain bisa membuat memori internal pada android kamu terkuras RAM kamu juga akan banyak terbuang dengan adanya aplikasi yang di perlukan. nah kamu bisa menghapus APPS bawaan android kamu dengan APPS System App Remover

Tambahkan RAM kamu dengan Aplikasi Greenify

Yaa,RAM pada Android/Smartphone kamu bisa di tambahkan dengan kamu menggunakan aplikasi ini. Apilkasi ini dapat membuat android kamu jadi lebih ringan (Lebih Cepat) sehingga kamu bisa melakukan aktivitas dengan lancar untuk menggunakan Android kamu,..

Nah bagai mana menurut kamu Cara di atas, Lakukan cepat jika ingin Android/Smartphone kamu bisa lebih cepa...
Untuk postingan ini cukup sampai di sini dulu, sampai ketemu lagi di Frekuenzi yang sama.!!!!!!!

SEMOGA SUKSES