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:
Cara dan Tips Tutorial Blogger

Cara Membuat Like Box Melayang di Samping Blog

Thursday, May 23, 2013 By Arif Rizki 2 Comments
  hai semua senang sekali akhirnya bisa posting artikel lagi walaupun hari ini lagi hujan tapi gak apa-apa lah,dan hari ini saya akan membuat artikel yang saya janjikan kemarin yaitu Cara Membuat Like Box Melayang di Samping Blog membuat like ini tidak sulitkok dan bisa membuat blog kalian bisa tambah bagus serta menghemat tempat buat kalian yang mau coba silahkan  ikuti caranya di bawah ini.

Cara Membuat Like Box Melayang di Samping Blog

  1. masuk ke dasboard blogger kamu
  2. pilih menu template
  3. pilih edit HTML
  4. cari kode ]]></b:skin> 
  5. setelah ketemu sisipkan kode dibawah ini di atas kode ]]></b:skin> tadi

    #melayang { position:fixed;_position:relative;top:0px; left:0px; clip:inherit;
    _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight);
    _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
    }
  6. carilagi kode </body>
  7. dan sisipkan kode ini di atas kode</body>

    <div id='melayang'> masukkan kode like box kamu di sini </div>
  8. setelah itu pratinjau template kalian mungkin ada yang salah 
  9. dan simpan template kalian.

NB:
   kode yang berwarna hijau adalah tempat likeboxnya di taruh bisa anda ganti dengan bottom(bawah) atau right(kanan)
   kode yang berwarna merah adalah jarak like box bisa anda ganti dengan angka yang kalian sukai
   kode yang berwarna biru ganti dengan kode like box yang anda punya

   dan sekian dari saya semoga postingan kali ini bermanfaat buat kalian semua,tinggalkan pesan atau pertanyaan di kolom komentar untuk kemajuan blog ini, terimakasih buat kalian telah berkunjung dan membaca artikel ini sampai jumpa besok. 
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Like Box Facebook di Blog Blogger

Wednesday, May 22, 2013 By Arif Rizki 1 Comments
   hai semua hari ini saya akan membuat artikel tentang Cara Membuat Like Box Facebook di Blog Blogger buat kalian yang mau memasang silahkan coba caranya di bawah ini,like box berguna untuk membuat blog anda tambah bagus dan tambah bayak yang like tambah oke lah blog kita dah cukup basa-basinya sekarang langsung aja kita ke tutorialnya cekidot....


Cara Membuat Like Box Facebook di Blog Blogger

  1. Masuk ke dasboard blogger
  2. pilih menu tata letak
  3. pilih edit html
  4. masuk ke html/java script
  5. dan masukkan kode dibawah ini kedalam kotak yang telah di sediakan 


    <div id="fb-root"></div>
    <script type="text/javascript">
    (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js#xfbml=1';
    document.getElementById('fb-root').appendChild(e);
    }());
    </script>
    <div id="FbCont">
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    var fb = document.createElement('fb:like-box');
    fb.setAttribute("href","masukkan alamat fans page kmu di sini");
    fb.setAttribute("show_faces","true");
    fb.setAttribute("header","false");
    fb.setAttribute("stream","false");
    fb.setAttribute("width","200");
    fb.setAttribute("font","segoe");
    document.getElementById("FbCont").appendChild(fb);
    //--><!]]>
    </script>
    </div>

  6. setelah itu simpan widget kalian dan lihat blog kalian
NB: ganti tulisan berwarna biru dengan alamat fans page kamu jika kamu belum punya buat dulu di sini

  thaks buat kalian yang telah berkunjung ke blog saya yang sederhana ini dan besok kalau tidajk ada halangan saya akan membuat like box melayang di samping blog dan semoga artikel hari ini bisa bermanfaat buat kalian semua dan tinggalkan  komentar atau pertanyaan di kotak komentar terimakasih semua sampai bertemu di postingan berukutnya.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Chatbox Tersembunyi di kanan blog

Tuesday, May 21, 2013 By Arif Rizki 1 Comments
 
Hai semua hari ini saya akan membuat postingan tentang membuat chatbox (buku tamu) tersembunyi di kanan blog,buat kalian yang belumtahu caranya liat aja di bawah ini dan buat yang udah mahir bisa koreksi mungkin ada kesalahan di artikel ini,dan berikut caranya silahkan.


Cara Membuat Chatbox Tersembunyi di kanan blog

  1. Masuk ke dasboard blogger kalian masingmasing
  2. Pilih menu tata letak
  3. Pilih tambah gadget
  4. Dan pilih htmldan javascript
  5. Masukkan kode di bawah ini kedalam kotak htmldan javascript


    <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:300px; width:30px; float:left; cursor:pointer; background:url('http://i757.photobucket.com/albums/xx213/VioNexA/iky.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #000000; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#fe760a; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 5);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">

    Masukkan Kode Chat Box anda disini

    <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script></div></div>

  6. dan simpan gadget
ket: tulisan berwarna biru ganti dengan kode Chat Box anda,buat kalian yang belum punya chat box buat dulu di sini dan atau daftar disini

    Terima kasih sudah membaca artikel ini semoga artikel ini bermanfaat buat anda semua,buat yang mau bertanya silahkan tanyakan di kotak komentar terimakasih.
Continue reading
Share:
Views:
Lirik Lagu

Lirik Lagu Bondan Kau Puisi

Thursday, May 16, 2013 By Arif Rizki 0 Comments
Halooo semua sudah lama ku gak posting tentang lirik lagu dan hari ini saya mau posting lirik lagu yang berjudul Bondan Kau Puisi,yaudah buat kalian yang gak sabar melihat liriknya dan mau nyanyi sendiri dirumah atau di mana aja silah kan liat lirik lagunya cekidot.



Bondan Kau Puisi

Yo baby kau sosok yang punyai arti
Kau Puisi ketika datang sepi
Saat nikmati indah sunset pantai kuta
Hadirmu jadi pelengkapku di tata surya
Aku butuh dunia.. dan kau
sebagai pendamping ketika ku rasakan galau
Aku butuh cinta.. dan kau
adalah tema saatku rasakan galau

Kau ada untuk melengkapi diriku
Kau tercipta untuk menutupi kekuranganku
L. O. V. E. yang membuatku bisa bertahan
Seperti rumput yang tak kan tumbang oleh topan
Emosi, perasaan, jaminan rasa aman
Kau sanggup taklukan hati dengan sebuah senyuman
Aku berdiri karna kau hadir di sisi
Your my everything baby..
kau takkan pernah terganti..

Kaulah belahan hatiku
yang terangi aku
dengan cintamu
Kau hangatkan jiwaku
dan slimuti aku
dengan kasihmu

Ku coba gapai apa yang kau ingin
Saat ku terjatuh sakit kau adalah aspirin
Coba menuntunmu agar ada di dalam track
Kau catatan terindah di dalam teks
Dan aku mengerti apa yang kau mau,
hargai dirimu, menjadi imammu
Karna kau diciptakan dari tulang rusukku
selain itu karna kau bagian dariku.

Dan dirimu damaikan..
hatiku.. yeah..
Dan artimu..
tak akan.. berakhir..


  Dan itu tadi lirik lagunya bondan kau puisi semoga lagumya mmenghibur anda semua Trimakasih.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Tulisan Bismillah Di Atas Postingan

Wednesday, May 15, 2013 By Arif Rizki 3 Comments
    Assalamualaikum wr wb siang semua hari ini saya akan membuat artikel tentang  Cara Membuat Tulisan Bismillah Di Atas Postingan tulisan bismillah ini gunanya untuk menunjukan bahwa kita seoramg blogger muslim dan juga bisa membuat blog kamu jadi beberkah,selain itu ini juga berguna supaya blog kita jadi keren karna bisa sebagai hiasan blog dan buat kamu yang mau memasang widget ini mari ikuti tutorial di bawah ini.

  1. masuk dasboard blogger------> pilih menu template -------> edit html
  2. cari kode ini <div class='post-body entry-content'> (dengan ctrl+f )
  3. letakan kode ini di bawah kode <div class='post-body entry-content'>

    <div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><b><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></b></span></span></div>
  4. setelah terpasang liat blog mu dan simpan template mu
   Thanks buat kamu yang sudah berkunjung dan membaca artikel ini mudah mudahan blog kalian tambah banyak pengunjung(amin),dn tinggalkan jejak di kotak komentar.
   Thanks sampai nenti salam blogger
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Membuat Menu Dropdown di Blog

Tuesday, May 14, 2013 By Arif Rizki 4 Comments
   Assallamualalikum wr wb siang semua hari ini saya akan membuat sebuah artikel yaitu Cara Membuat Menu Dropdown di Blog buat kalian yang mau membuat atau memasang menu dropdown di blog ikuti cara di bawah ini.
  menu dropdown biasanya berbentuk menu yang kalau di sentuh pakai kursor dia akan mengeluarkan sub menu  ke bawah seperti yang terpasang pada blog saya ini dan hari ini saya mau ngasih tau pada kalian semua bagai mana cara membuatnya,ya gakusah basabasi lagi langsung kitaliat cekidoooot,,,.

  1. seperti biasa masuk ke dasboard blog mu dulu
  2. lalu pilih menu tata letak
  3. pilih tambah gedget
  4. lalu pilih HTML dan Java Script
  5. copy kode berikut dan paste kan di kolom HTML dan JavaScript <div style='clear:both;'/>

    <div class='span-24'>
    <div class='menu-secondary-container'>

    <ul class='menus menu-secondary'>

    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='#'>Business</a>
    <ul class='children'>
    <li><a href='    #'>Internet</a></li>
    <li><a href='    #'>Market</a></li>
    <li><a href='    #'>Stock</a></li>
    </ul>
    </li>

    <li><a href='    #'>Downloads</a>
    <ul class='children'>
    <li><a href='    #'>Dvd</a></li>
    <li><a href='    #'>Games</a></li>
    <li><a href='    #'>Software</a></li>
    </ul>
    </li>

    <li><a href='    #'>Parent Category</a>
    <ul class='children'>
    <li><a href='    #'>Child Category 1</a></li>
    <li><a href='    #'>Child Category 2</a></li>
    <li><a href='    #'>Child Category 3</a></li>
    <li><a href='    #'>Child Category 4</a></li>
    </ul>
    </li>

    <li><a href='    #'>Featured</a></li>

    <li><a href='    #'>Health</a>
    <ul class='children'>
    <li><a href='    #'>Childcare</a></li>
    <li><a href='    #'>Doctors</a></li>
    </ul>
    </li>

    <li><a href='    #'>Uncategorized</a></li>
           
    </ul>
    </div>
    </div>

    ket: orange ganti dengan url label kalian
           hijau ganti gengan nama menu kalian
  6. setelah selesai klik tombol simpan.
kode ini bisa kalian modifikasi sendiri dengan menambahkan kode ini 

      <ul class='children'>
     <li><a href='url menu'>nama menu</a></li>
     </ul>
     </li>dibawah

     <li><a href='url menu'>nama menu</a>
sehingga menjadi seperti ini
     <li><a href='url menu'>nama menu</a>
     <ul class='children'>
     <li><a href='url menu'>nama menu</a></li>
     </ul>
     </li>
   Ya sekian postingan hari ini semoga postingan ini bermanfaat dan berguna buat sobat semua (amin),dan buat anda yang mau bertanya sesuatu bisa tanyakan di kotak komentar.
  Terimakasih telah berkunjung kalau ada kata yang salah mohon di maklumi karna saya hanya manusia biasa hehehe.
Continue reading
Share:
Views:
Cara dan Tips Tips SEO Tutorial Blogger

Cara Membuat Breadcrumb SEO di Blog

Monday, May 13, 2013 By Arif Rizki 2 Comments
    Assalamualaikum wr wb, halo semua hari ini saya akan membuat sebuah postingan Cara Membuat Breadcrumb SEO di Blog buat kamu yang ingin blognya menjadi seo cobalah pasang navigasi breadcrumb di atas judul postingan blogmu yang biasanya berbentuk seperti ini,



Home>Nama label>Judul posting
ataubisa liat contohnya di bagian atas judul posting saya,dan kira-kira seperti itu bentuknya, dan buatkalian yang mau memasang navigasi ini ikuti langkah demi langkah di bawah ini.
  1. masuk dulu ke dasboard blogger
  2. pilih template
  3. edit html
  4. lalu cari kode ]]></b:skin> (gunakan ctlr+F untuk mencari kode)
  5. dan sisipkan kode ini diatas kode ]]></b:skin>

    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:85%;
    line-height: 1.4em;
    border-bottom:
    3px double #e6e4e3;
    }
  6. dan cari lagi kode <b:includable id='main' var='top'>
  7. jika sudah ganti kode tadi dengan kode ini

    <b:includable id='breadcrumb' var='posts'>
     <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span>
     <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
     </span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
    &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'>
     <span>
     <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
     </span> &#187; <span>Unlabelled</span> &#187;
      <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a>
     </span> &#187; <span>Archives for <data:blog.pageName/>
     </span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a>
     </span> &#187; <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a>
     </span> &#187; <span>Posts filed under <data:blog.pageName/>
     </span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/>

  8. lalu pratinjau blog untuk melihat apakan navigasinya sudah terpasang atau belum,dan simpan template kamu
  Terimakasih telah berkunjung dan sudah membaca Cara Membuat Breadcrumb SEO di Blog,semoga artikel kaliini bermanfaat buat kamu dan bisa membuat blog anda menjadi SEO,
   Tolong tinggalkan komentar anda tentang artikel ini dan anda bisa bertanya tentang artikel ini.
Continue reading
Share:
Views:
Cara dan Tips Tutorial Blogger

Cara Menambah Fungsi Scroll Pada Sidebar/Widget

Sunday, May 12, 2013 By Arif Rizki 2 Comments
    Hallo semua hari ini saya akan membuat posting yang berjudul Cara Menambah Fungsi Scroll Pada Sidebar/Widget,manfaat menambah fungsi scroll pada widget adalah memperpendek bagian widget dan supaya meringankan loading blog,oke setelah kita tau manfaat dari Menambah Fungsi Scroll Pada Widget kita langsung mengikuti cara di bawah ini.
 

  1. kita pergi ke dasboard blogger anda
  2. pilih memu template
  3. pilih edit HTML
  4. kemudian cari widget yang akan beri scroll misalnya arsip blog 
  5. cari nama atau judul widget yang akan di beri fungsi scroll (cari menggunakan ctrl+F)
  6. setelah dapet kodenya ya kurang lebih kayak gini kodenya

    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
                <b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:if cond='data:style == &quot;HIERARCHY&quot;'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == &quot;FLAT&quot;'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == &quot;MENU&quot;'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div>
      </div>
      <b:include name='quickedit'/>
      </div>
    </b:includable>

    ket:kode yang hijau adalah nama dari widget yang kita beri scroll
  7. kemudian tambahkan kode ini dibawah <div class='widget-content'>

    <div style='overflow:auto; width:auto; height:250px;'>

    ket: kode warna merah adalah tinggi dari scroll tersebut silahkan ganti sesuka anda
  8. setelah itu kita cari kode lagi agak kebawah,kodenya </b:includable> sisipkan kode ini diatas kode </b:includable> </div>
  9. sehingga kodenya menjadi seperti ini 

    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
          <b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
     <div style='overflow:auto; width:auto; height:250px;'>
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:if cond='data:style == &quot;HIERARCHY&quot;'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == &quot;FLAT&quot;'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == &quot;MENU&quot;'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div>
      </div>
      <b:include name='quickedit'/>
      </div>
    </div>
    </b:includable>

    ket: kode warna biru adalah kode yang kita sisipkan tadi
  10. setelah itu pratinjau templae kalau berhasil simpan template anda.
 Dan akhirnya selesai juga postingan saya tentang Cara Menambah Fungsi Scroll Pada Sidebar/Widget semoga artikel ini bermanfaat buat anda semua salam blogger.

Tinggalkan jejak,dan jika ada yang di tanyakan bisa tulis di kolom komentar.
Continue reading
Share:
Views:
Subscribe to: Posts ( Atom )