Showing posts with label Cara dan Tips. Show all posts
Cara dan Tips Tutorial Blogger

Jasa Penginstalan Windows dari Flashdisc

Monday, December 9, 2013 By Unknown 2 Comments
Assalamualaikum

hallo semua buatkalian yang mau ganti os komputer,laptop,notebook,dan netbook kalian mau merasakan os terbaru dari microsoft yaitu windows 8 dan windows 8.1 update oktober 2013,ato yang cma mau nginstal ulang os komputernya yang sdah mulai lemot atau sudah lambat responnya, tapi belum bisa instal sendiri atau males download osnya dari internet karna ukuranya yang besar, dan klo pergi ke tokonya untuk instal tpi mahal, jangan khawatir saya membuka jasa  penginstalan komputer,laptop, notebook,dan netbook dengan pilihan osnya sebagai berikut :
  1.    Windows xp
  2.   Windows 7 pro
  3.       Windows 7 ultimate
  4.       Windows 8 pro
  5.     Windows 8.1 pro yang masih dlam proses download hehe,

buat kalian yang berminat bisa datengin saya di rumah yang beralamat
Ds.Puntik Luar RT 1RW 1 No. 28 Kec.Mandastana Kab.Barito Kuala.

No.tlp 085651129667

Buat yang males kerumah saya bisa telpon atau sms saya dengan format
Nama alamat lengkap dan keterangan

Kirim ke
085651129667

Ini berlaku untuk semua komputer, laptop,notebook,dan netbook,saya mematok dengan harga murah yaitu
Rp.15000 untuk yang datang kerumah saya dan instal os lengkap dengan aplikasi yang kalian mau
Rp.20000 untuk yang memanggil saya ke rumahnya jauh atau dekat dan instal os lengkap dengan aplikasi yang kalian mau.

Dari jam 15:00 untuk hari biasa
Dan dari jam 08:30 untuk hari libur

Dan saya berterimakasih buat kalian yang telah membaca iklan saya ini, semoga kalian tertarik.

Terimakasih.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Kotak Komen Facebook di Blog

Wednesday, August 21, 2013 By Unknown 4 Comments
   Assalamualaikum wr wb, sore bro dan sore bagi para pengunjung blog saya yang sederhana ini hari ini saya akan membuat artikel kembali yaitu tentang Cara Membuat Kotak Komen Facebook di Blog ya gan tak usah banyak pender lagi kita langsung saja ke tkp,,,,,

Cara Membuat Kotak Komen Facebook di Blog

  1. masuk kedasbor blog kalian masing masing
  2. masuk ke menu template > edit html
  3. cari kode ]]></b:skin> dan letekkan kode tepat di atas kode ]]></b:skin> .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;}
     
  4. cari lagi kode </head> lalu letakkan lagi kode ini tepat diatas kode </head> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB ANDA' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.comments-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
    </script>

    ket: ganti id fb anda dengan id facebook anda sendiri
  5. dan cari lagi kode <div class='comments' id='comments'> bila kode itu lebih dari satu cari kode paling akghir dan letakkan tepat di bawah kode <div class='comments' id='comments'> <!--FB COMMENT-->
     <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
        <div id='fb-root'/>
        <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
        </b:if>
        </div>
        <div class='comments comments-page' id='blogger-comments-page'>
    <!--FB COMMENT-->

    ket: ganti angka 5 sesuai keinginan anda untuk memunculkan banyak komentar
          dan angka 500 ganti sesuai lebar kolom psting anda
  6. lalu pratinjau template kalian terlebih dahulu dan jika tidak ada kesalahan simpan template kalian 
   dan selesai sudah pertemuan kita semoga artikel ini bermanfaat buat  kalian semua,dan jangan lupa br komentarlah yang baik di kotak komentar di bawah ini thanks sudah berkunjung,,,,,

kode dari : http://digital areas.blogspot.com
Continue reading
Share:
Views:
Cara dan Tips Kumpulan Efek Blog Tutorial Blogger

Cara Membuat Efek Bintang Berjatuhan di Blog

Thursday, August 15, 2013 By Unknown 2 Comments
   Assalamualaikum wr wb,siang bro yeh ketemulagi deh di bog yang sederhana ini,dan di prtemuan yang singkat ini saya mau membuat artikel lagi nih yah tentang Cara Membuat Efek Bintang Berjatuhan di Blog ya setelah beberapa hari yang lalu membuat artikel tentang Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery,efek ini mirip seperti efek salju berjatuhan diblog hanya saja bentuknya menyerupai bintang,ya tak usah banyak penjelasan langsung saja liat caranya.

 Cara Membuat Efek Bintang Berjatuhan di Blog

  1. masuk ke dasbor blogger kalian masing-masing
  2. trus pilih menu template > edit html
  3. cari kode </body> dan pastekan kode di bawah ini tepat di atas kode </body>

    <script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>
  4. dan simpan template kalian
  Dan selesai sudah pertemuan kita hari ini jangan lupa tinggalkan pesan atau komen kalian di kolom komentar di bawah ini,dan terimakasih telah berkunjung ke blog saya. 
Continue reading
Share:
Views:
Cara dan Tips Kumpulan Efek Blog Tutorial Blogger

Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery

Saturday, August 10, 2013 By Unknown 0 Comments
   Assalamualaikum wr wb pagi sob hari ini saya akan kembali membuat artikel tentang Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery,

  efek zoom ini memberikan efek zoom lembut engan tombol close di pojok kanannya buat kalian yang mau memasang efek zoom ini silahkan liat ccontohnya di bawah ini.


ya kira-kira contohnya sperti gambar di atas,dan yang mau yau caranya liat dibawah ini

Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery

  1. masuk ke dasbor blogger
  2. klik menu template> edit html
  3. cari kode ]]></b:skin> dan pastekan kode di bawah ini tepat di atasnya

    div.jquery-image-zoom {
    line-height: 0;
    font-size: 0;
    z-index: 10;
    border: 5px solid #fff;
    margin: -5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    div.jquery-image-zoom a {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;
    text-decoration: none;
    text-indent: -100000px;
    outline: 0;
    z-index: 11;
    }
    div.jquery-image-zoom a:hover {
    background-position: left -25px;
    }
    div.jquery-image-zoom img,
    div.jquery-image-zoom embed,
    div.jquery-image-zoom object,
    div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
    }
  4. kemudian cari lagi kode </head> dan taruh kode dibawah ini diatas kode </head>

    <script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>
    <script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>
    <script type="text/javascript">
    jQuery(document.body).imageZoom();
    </script>
  5. setelah itu pratinjau template kamu kalau tidak ada kesalahan simpan template kamu


   Bagai mana sob mudah dan praktis kan ya mudahan kode ini berjalan dengan baik dan sesuai keinginan anda.
  terimakasih telah berkunjung ke blog saya yang sederhana ini semoga blog kalian dan blog saya jadi tambah sukses,dan jangan lupa tinggalkan pesan di kotak komentar,sampai bertemu sob di artikel selanjutnya.
Continue reading
Share:
Views:
Cara dan Tips Kumpulan Efek Blog

Cara Membuat Efek Salju Berjatuhan di Blog

Friday, August 2, 2013 By Unknown 0 Comments
   Assalamualaikum pagi bro hari ini saya mau membuat artikel laginih kaliini saya mau membuat artikel demgan judul Cara Membuat Efek Salju Berjatuhan di Blog ya meski artikel seperti ini banyak beredar di searh egine seperti google tapi gak apa-apalah lumayan buat nambah jumblah artikel di blog saya yag sederhana ini dan buat mempersingkat waktu baik kita simak caranya di bawah ini,,,,,,


Cara Membuat Efek Salju Berjatuhan di Blog
  1. seperti biasa mesuk ke akun blogger kalian masing-masing
  2. pilih tataletak
  3. pilih tambah gedget
  4. lalu copy script dibawah ini dan pastekan di kolom yang tersedia

    <script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>
  5. dan simpan gedget kalian
   Dah selesai sudah postingan hari ini mudah-mudahan artikel hari ini bermanfaat buat sobat wj blog di seluruh indonesia dan mungkin dilain kali kode script ini akan saya kembangkan lagi supaya banyak pilihan warna saljunya,terimakasih sudah berkunjung ke blog saya yang sederhana ini bila ada pertanyaan tulis di kotak komentar,dan sekian artikel hari ini salam blogger.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Kotak Author atau Pesan Admin di Bawah Posting Blog

Monday, July 29, 2013 By Unknown 12 Comments
  Assalamualaikum wr wb pagin semua sahabat arifwj hari ini saya akan membuat artikel yang berjudul Cara Membuat Kotak Author atau Pesan Admin di Bawah Posting Blog yang akan saya beri tahukan cara memasangnya di artikel ini.  Kotak author adalah kotak yang berisi pesan dari admin atau si pembuat blog yang berada di bawah postingan blog yang bentuknya kira-kira seperti gambar di bawah ini






dan yaaaa kurang lebih seperti itu gambaran dari judul saya diatas ya tak usah berlama-lama lagi langsung kita liat caranya di bawah ini.

  1. seperti biasa masuk kedasbor blog kalian masing-masing.
  2. masuk ke menu template.
  3. pilih edit html
  4. cari kode ini ]]></b:skin> dan copy kode di bawah ini lalu pastekan di atas kode ]]></b:skin>

    .admin-tulisan{
        display:block;
        width:auto;
        background:#666666;
        border:2px solid #000000;
        box-shadow:0 1px 3px #000000;-moz-box-shadow:0 1px 3px #000000;-webkit-box-shadow:0 1px 3px #000000;
        padding:0;
        margin:30px 0 10px 0;
        font:normal 12px Arial, Sans-Serif;
        color:#ffffff;
        }
        .admin-tulisan .kontainer{padding:5px;}
        .admin-tulisan h4{
        background:#ff0000;
        border:none;
        border-bottom:1px solid #ffffff;
        color:#fff;
        text-transform:normal;
        text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
        font:bold 12px Arial,Sans-Serif;
        padding:5px 10px;
        margin:0 0 0 0;
        display:block;
        }
        .admin-tulisan h4 a{color:#FEEA83;}
        .admin-tulisan img{
        width:70px;
        height:70px;
        margin:0 10px 0 0;
        float:left;
        border:1px solid #954B02;
        padding:2px;
        background:#C36702;
        box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
        }
  5. dan setelah itu cari lagi kode yang mirip seperti ini <div class='post-footer'> dan pastekan kode di bawah ini tepat di atas kode  <div class='post-footer'>

    <!-- Kotak Admin -->
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='admin-tulisan'>
        <h4>Creatif By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a>Deskripsi Blog sobat</h4>
        <div class='kontainer'>
        <img src='http://3.bp.blogspot.com/-FMUCJ0MUryU/UVqu74grIuI/AAAAAAAABPI/ayRPA5E4qOE/s1600/2f5840d5b5dccb94_m.jpg'/>
        Terimah Kasih telah membaca artikel<a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh <data:post.author/> .Pada hari<data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <blink><strong>sumber link asli.</strong></blink> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih
        <p>
    <textarea cols='57' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='
    http://rahman-ciblog.blogspot.com/2013/04/cara-membuatmemasang-kotak-pesan-admin.html
    /' target='_blank'>:: Get this widget ! ::</a></span></p>
        <div style='clear:both;'/>
        </div>
        </div>
        </b:if>
        <!-- Kotak Admin -->
  6. dan pratinjau template blog kalian apakan ada kesalahan kalau tidak ada kesalahan simpan template kalian.

keterangan:
untuk nomer 4 edit kode warna sesuai keinginan sobat
untuk nomer 5 edit tulisan
                    biru dengan descripsi blog sobat
                    hijau dengan url gambar sobat
                    merah kata-kata yang sobat inginkan


  Ya sekian artikel hari ini mudah-mudahan bermanfaat buat sobat semua,dan jika ada pertanyaan tolong berkomentarlah dengan sopan di kolom komentar di bawah ini,dan salam blogger.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Mengganti Home dan Posting Lama Dengan Angka

Sunday, July 28, 2013 By Unknown 2 Comments
   Assalamualaikum wr wb siang semua hari ini saya akan memposting artikel tentang Cara Mengganti Home dan Posting Lama Dengan Angka buat kalian yang maih bingung caranya atau yang mau tau caranya aja silah kan liat caranya di bawah ini, dan tidak usah panjang lebar lagi langsung aja kita liat caranya di bawah ini dengan seksama.


Cara Mengganti Home dan Posting Lama Dengan Angka

  1. seperti biasa masuk dulu ke dasbor blogger
  2. masuk ke menu template
  3. pilih edit html
  4. dan cari kode ]]></b:skin>
  5. setelah dapat kodenya copy kode di bawah ini dan pastekan di bawah kode ]]></b:skin>

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #cccccc;
    background-color:#cccccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #cccccc;
    background: #cccccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #cccccc;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333333;
    }

  6. dan langsung cari kode </body> dan copy kode dibawah ini dan taruh di bawah kode </body>

    <!--Page Navigation Starts-->

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <script type='text/javascript'>

    var pageCount=5;

    var displayPageNum=5;

    var upPageWord =&#39;Previous&#39;;

    var downPageWord =&#39;Next&#39;;

    </script>

    <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>

    </b:if> </b:if>

    <!--Page Navigation Ends -->

  7. dan pratinjau template kalian jika tidak ada kesalahan simpan template kalian
  Dah selesai artikel kali ini semoga artikel hari ini bisa membantu sobat semua dan membuat blog ini terkenal,terima kasih telah berkunjung ke blog saya,jika ada pertanyaan berkomentarlah di kotak komentar yang tersedia.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Mengganti Template Blog Blogger

Tuesday, July 23, 2013 By Arif Rizki 5 Comments
  Assalamualikum wr wb,pagi semua sahabat wj blog dimanapun anda berada dan di hari rabu di bulan ramadan ini saya akan membuat sebuah artikel yang sudah banyak berkeliaran di google yaitu Cara Mengganti Template Blog Blogger,ya sebenarnya mengganti templat blog di blogger tidaklah sulit tapi kalau kalian yang baru terjun di dunia bloging ya terlihat agak bingung,tapi diartikel ini arifwj67 akan menjelaskan bagaimana mengganti template blog blogger dari yang sudah tersedia di blog sampai templat yang dapat dari pihak ketiga.

   ya takusah panjang lebar lagi kita langsung saja liat caranya di bawah ini cekidotttttttt.

Cara Mengganti Template Blog Blogger secara default

  1. ya seperti biasa masuk dulu ke akaun blogger kalian masing-masing
  2. lalu pilih menu template
  3. dan scroll kebawah sedikit lalu pilih template blog yang kalian inginkan
  4. dan pilih terapkan ke blog untuk lebih jelas liat gambar di bawah ini

     
  5. dan tunggu beberapa saat dan tempate blog kalian sudah beruba


Cara Mengganti Template Blog Blogger dari pihak ke tiga
 
  1. pertama siapkan dulu template blog yang ingin di upload anda bisa mencari template blogger di Btemplate atau di web penyedia templat lain
  2. lalu masuk ke dasbor blogger
  3. pilih menu template
  4. cari tulisan cadangkan/pulihkan biasanya terdapat di pojok kanan liat gambar di bawah ini

  5. setelah di kilik terlihat gambar seperti di bawah ini

    dan klik telusur dan cari templat blog anda yang sudah di download sebelumnya bila template hasilm download tan kita berbentuk file.zip extrak dulu template anda hingga berformat .xml ingat ya cari file .xml karna itu adalah file templatenya
  6. setelah template sudah dapat klik selesai dan tunggu beberapa saat dan templat blog annda sudah berubah
  dah selesai juga akhirnya artikel hari ini  semoga bermanfaat buat sahabat semua,dan jangan lupa berkomentarlah supaya terjalin silaturahmi antar sesema blogger,semoga di bulan ramadan ini semunya mendapat berkah dan terimakasih telah berkunjung ke blog sampai jumpa di artikel selanjutnya.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Daftar Isi di Blog

Tuesday, July 9, 2013 By Arif Rizki 2 Comments
  assalamualaikum hai semua dihari yangcerah ini saya akan membuat postingan tentang  Cara Membuat Daftar Isi di Blog buat kalian yangmau buat daftar isi di blog ikiti cara di bawah ini.

Cara Membuat Daftar Isi di Blog

  1. masuk ke dasbor blogger
  2. pilih menu laman
  3. pilih laman baru untuk lebih jelas lihat gambar di bawah ini
  4. pilih laman kosong
  5. setelah masuk pilih mode html
  6. lalu copy kode di bawah ini dan pastekan di tempat tadi

    <div style="border: 1px solid rgb(238, 238, 238); height: 700px; overflow: auto; padding: 10px; width: 530px;">
    <script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://arifwj67.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>
  7. ganti teks yang berwarna biru dengan url blog anda
  8. dan simpan laman coba pratinjau blog anda jika tidak muncul coba atur laman anda dengan mengubah jangan di tampilkan  dan ubah menjadi tab atas atau tab sanpaing atau klik lihat di bawah judul laman dan copy urlnya.
  dan selesai sudah pembahasan mengenai Cara Membuat Daftar Isi di Blog semoga artikel ini bisa membantu kalian yang membuat daftar isi di blog,dan terimakasih telah berkunjung di blok saya.
Continue reading
Share:
Views:
Cara dan Tips Kumpulan Efek Blog Tutorial Blogger

Cara Membuat Popular Post Warna-Warni di Blogger

Sunday, July 7, 2013 By Arif Rizki 2 Comments
  Assalamualaikum wr wb,siang semua di siang yang panas ini saya akan membuat artikel yaitu Cara Membuat Popular Post Warna-Warni di Blogger,widget ini bisa membuat warna popular post bisa warna-warni seperti gambar di bawah ini
 


  Buat kalian yang mau popular postnya seperti gambar di atas ikuti cara di bawah ini.

Cara Membuat Popular Post Warna-Warni di Blogger
  1.  masuk ke dashboard blogger
  2. pilih edit HTML
  3. cari kode ]]></b:skin>
  4. lalu letakkan kode yang ada di bawah ini diatas kode ]]></b:skin> /*  Popular Post Rainbow Start */
    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
    #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
    #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
    }
    /* Popular Post     Rainbow End */
  5. pratinjau template kalian terlebih dahulu jika tdak terjadi eror simpan temlate kalian
  6. setelah itu kita masuk ke tataletak cari gadget popularpost kalian yang sudah terpasang
  7. lalu atur gadjed popular post kalian seperti gambar dibawah ini
  8. dan simpan gadget anda.

   Dan selesai sudah artikel kali ini semoga dengan artikel kali ini bisa membuat b;og kalian bagus dan banyak pengunjungnya amin,terimakasih sudah berkunjung ke blog saya yang sederhana ini jangan lupa tinggalkan komentar kalian di kolom komentar di bawah ini,salam blogger.
Continue reading
Share:
Views:
Cara dan Tips Kumpulan Efek Blog Tutorial Blogger

Cara Memasang Efek Meteor Jatuh Di Blog

Friday, June 28, 2013 By Arif Rizki 3 Comments
   Assalammualaikum wr wb,pagi guys dipagi yang cerah ini saya akan membuat artikel tentang Cara Memasang Efek Meteor Jatuh Di Blog Efek ini termasuk trik untuk memperindah blog dan efek ini bisa memperlambat loading blog jadi buat sobat yangmau memasang efek ini di blog anda fikir-fikir dulu aja.
  Dan udah cukup mikir-mikirnya buat sobat yang mau pasang widged ini di blog sobat liat cara pemasangan nya di bawah ini.


Cara Memasang Efek Meteor Jatuh Di Blog

  1. masuk kedashboard blogger sobat masing-masing
  2. pilih tataletak
  3. pilih tambah gadget
  4. lalu pilih HTML dan Java Script
  5. Copy kode ini dan letakkan di kolom HTML dan Java Script tadi

    <script language="javascript">
    nd_mode="meteor";
    nd_control="on";
    nd_sound="on";
    nd_vAlign="bottom";
    nd_hAlign="right";
    nd_vMargin="10";
    nd_hMargin="10";
    nd_target="_blank";
    </script>
    <script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
    <div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>
  6. dan klik tombol simpan.
   Dan selesan juga artikel ini semoga artikel kali ini bermanfaat buat kalian dan jangan lupa tinggalkan komentar kalian di kolom komentar,terimakasih atas kunjungannya salam bloger.
Continue reading
Share:
Views:
Cara dan Tips Tips SEO Tutorial Blogger

Cara Membuat Related Post Dengan Scroll

Friday, June 14, 2013 By Arif Rizki 0 Comments
    Assalamualaikum,siang sobat blogger hari ini saya akan kembali membuat postingan setelah sekian lama saya tidak membuat postingan dan saya hari ini akan membuat posting yang berjudul Cara Membuat Related Post Dengan scroll,dan takusah panjang lebar lagi kita mulai langkah-langkahnya.

Cara Membuat Related Post Dengan scroll

  1. masuk ke dasboard blogger
  2. pilih template
  3. pilih edit HTML
  4. cari kode  ]]></b:skin>
  5. dan copi code di bawah ini di atas code ]]></b:skin>

    /*-- Rlated Post Dengan Scroll--*/
    .rbbox{border: 1px solid #D8D8D8;padding: 5px;
    background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
    .rbbox:hover{background-color: #EFFBEF;
    }

  6. dan setelah itu cari lagi kode ini  <p><data:post.body/></p> atau kode ini <data:post.body/>
  7. dan copy kode ini lalu pastekan dibawah kode <p><data:post.body/></p> atau <data:post.body/> tadi


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H2>Related Post:</H2>
    <div class='rbbox'>
    <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
    <div id='albri'/>
    <script type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 50;
    maxNumberOfLabels = 3;
    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;
    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;albri&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }
    var labelArray = new Array();
    var numLabel = 0;
    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;
    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    <small><p>Widget by [ <a href='http://ahnaf-home.blogspot.com' target='new'>Area Unik</a> ]</p></small>
    </div>
    <script type='text/javascript'>RelPost();</script>
    </div>
    </b:if>

  8. lalu pratinjau dulu template kalian
  9. dan simpan template kalian dan related post dengan scroll terpasang
   selesai juga postingan hari ini semoga posting ini bermanfaat buat kalian,dan terimakasih telah berkunjung ke blog saya happy blogging...
Continue reading
Share:
Views:
Subscribe to: Posts ( Atom )