Membuat Big Social Bookmark di Blogspot

Blog sobat mungkin kurang traffic, ini salah satu akibat sobat tidak mensubmit artikel sobat ke social bookmark. Sekarang sobat tidak perlu khawatir, setiap akhir postingan sobat akan ada sebuah Big Social Bookmark yang akan selalu mengingatkan sobat untuk mensubmit artikel sobat ke social bookmark. Selain itu big social bookmark juga akan mempercantik tampilan postingan blog sobat. Mungkin diantara sobat belum pernah mellihat Bigsocial Bookmark? sekarang anda tinggal geser scrollnya ke bawah nah di samah ada coba saja anda nikmati............!!!!



Sebenarnya ada beberapa macam desain social bookmark, ada yang Cuma share this posts, ada sexy social bookmark, dan yang lagi kita bahas ini Big social bookmark. Ok sekarang kita berfokus dahulu pada big social bookmark, untuk sexy social bookmark, dan share this posts akan saya bahas di lain waktu. Siapkan diri kalian untuk menyimak tutorial Membuat Big social bookmaark ini.



  1. Seperti biasa Log-in ke akun blogger sobat

  2. Klik Rancangan>> Edit HTML

  3. Cari Kode ]]></b:skin>


  4. Setelah ketemu masukin kode berikut diatas kode ]]></b:skin>



    div.sociable { margin: 16px 0;}
    span.sociable_tagline { position: relative; }
    span.sociable_tagline span { display: none; width: 14em; }
    span.sociable_tagline:hover span {
    position: absolute;
    display: block;
    top: -5em;
    background: #ffe;
    border: 1px solid #ccc;
    color: black;
    line-height: 1.25em;
    }
    .sociable span {
    display: block;
    }
    .sociable ul {
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
    }
    .sociable ul li {
    background: #f5f5f5;
    display: inline !important;
    list-style-type: none;
    margin: 0;
    padding: 2px;
    }
    .sociable ul li:before { content: ""; }
    .sociable img {
    float: none;


    border: 0;
    margin: 0;
    padding: 0;
    }


    .sociable-hovers {
    opacity: 0.4;
    -moz-opacity: 0.4;
    filter: alpha(opacity=40);
    }
    .sociable-hovers:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    }



  5. Setelah itu Save terlebih dahulu template sobat

  6. Lalu click/centang kotak "expand template widget"


  7. Kemudian cari Kode </data:post.body></p>



    KETERANGAN

    Kalau blog sobat sudah memakai readmore, biasanya kode tersebut ada dua.

    maka pilih kode yang kedua biar tidak tampak pada halaman utama.



  8. Setelah ketemu sobat masukkan kode HTML berikut dibawah kode diatas atau setelah tag </p>









    <div class='sociable'>

    <div class='sociable_tagline'>

    <img alt='Bola Lover' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQr4AxYC7f6KJUsHKty74hs_QARSG07SUrNmyPjwVcfFivrTXihEkmOij0eXSiWbURPBffDFPTJndqBNjAVVu0xovyulBaDd2sgfM97G4i1Ax1iSJ_WWRu6ZtWBVq6kHTN0lQ2TksBfhFB/s1600/share.jpg' title='Share This Artikel'/>

    </div>

    <ul>

    <li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhugYFcsOIQRgelktP7881ZLKg8YOus8wXvnoG34GaiN7qC9I5JHwhNUbYYX1y3kz4DhQ4H_6k5xzp2E8fhHyDC2443y1d21KtH9LR3FlEQCz27sGSkx2LrhbhHuAX9d7f-_vREmQtYg_Xm/s400/digg.png' title='Digg'/></a></li>

    <li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxrq-zxZRt4h9d8Lc5OzxiSFSFD8VUDE1_exsiKp8FQpNVSLkgO1ATCnd8ShbRIG9Z_Iv4n2tOMXdlJChUl-ZV7FZe1spj4RWtQccKrdAqBfOCJVUd36JfqG7lySHVqlyd55ueiJNmT3gU/s400/delicious.png' title='del.icio.us'/></a></li>

    <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJvO2sjbTqMqTkxZb8BNO1m0LvO7NVuyY96pwWp4CbPHnGbjkOYIY2Z6bHrfs7dnpGQakuXyzzf3eZkjqoJPLtaOFVtUhExrA1SbjN7z5hG9lq0n3YOFHCW5vfnzvNMRQ5auogR6_dgWZ/s400/facebook_002.png' title='Facebook'/></a></li>

    <li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihzwlO2hL_f8NFtNotWYy_98F86NSG-epAFaMc2qnnYewQvr_6T6fnOSHM5QMbOyiD7TgzaIKpvfakK7ojJD2ANqPL3uQLYgwMcR2vQeGLPwnlRRV8nwxeB614JxvMY_NvvhsVt8Gz2s59/s400/googlebookmark.png' title='Google'/></a></li>

    <li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2Fm5AJtcJyFm0-YkBLQCmIFhtEA2uEN-q9cKHka6POWZCrW-nuy8-f1nLhDQPousM915-3Tw-7-_EMywjAKiiCeM2M1MHiqEwcQBbtTwgGhR3zgLjfNMbZteT3m5D52VgidYnPh52r5_/s400/stumbleupon.png' title='StumbleUpon'/></a></li>

    <li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuv6GysStrZ-ENNbljIbm1-8B8YduuNtMhflrK0yyyfXuqsyuuUpllxpaEOwUG6RjzaBfWb6eIpCjbt-t6DRaTYGSZ9mBjAioQGOQTf0Udjst3lHW6v3Uk_NoOn2fwBw0NkhFVc3TaRcRz/s400/technorati.png' title='Technorati'/></a></li>

    <li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88S7teNmeT1Pm69uCdbNOoMEtYk4h-6U4vca4LePS9ZfzjUGA41e85D6DzoYfeIgEHmK4hNu5q3V4zZPqcnz_dENcXGOjuqnALsEH2hQHI8Q_4toQjB2hscBEpg6ssTx13HjhegZ-FXpl/s400/twitter.gif' title='TwitThis'/></a></li>

    </ul>

    </div>



  9. Setelah langkah-langkah di atas beres alias selelsai klik tombol Save



PERHATIAN!!

Tutorial ini adalah bagian dari halaman posting, sehingga kamu tidak bisa meriview hasil kerja kamu. Sebaiknya kamu edit terlebih dahulu, jika ada kesalahan atau error segera perbaiki




TAMBAHAN

Setelah oke,segera lihat halaman posting kamu di bagian bawahnya,pasti ada tombol tombol social networking yang begitu gede. anda bisa atur besar kecilnya terserah selera anda yang harus kamu rubah yg ini s400

Ini berarti bahwa anda sudah berhasi membuat Big Social Bookmark




Selamat mencoba semoga bermanfaat





Terima Kasih
Created By Syarief Hidayat



------------------------------------------------------------------------------------------

Blog Archive