Widget Social Network Metro Style

Kali ini saya akan  membagikan sebuah social share network  atau tombol share ke beberapa social Network terkenal seperti facebook,twitter,pinterest, google+, linkedin ,Youtube dan bahkan feeds burner. Jika biasanya kita hanya menjumpai tombol social media yang hanya memiliki 4 tombol maka widget ini bisa memberikan kita 7 situs social media sekaligus.


Social network button ini sangat tepat jika anda gunakan pada template yang juga menggunakan style/tema Metro seperti Metro UI yang ada di btemplates.com . Sebenarnya sudah banyak sekali social media metro style ini namun sebagian besar hanya berisikan dengan facebook,twitter,dan google+ saja ,sehingga widget ini saya sarankan pada anda yang Anti main stream

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih tata letak
• Step 3  Pilih tambahkan widget lalu HTML/Javascript
• Step 4  Copy kode berikut lalu pastekan di dalam kolom  HTML/Javascript tadi

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="BloggerSpiceMS">
<br />
<li><a class="BSfb" href="http://anti-fool.blogspot.com//" rel="nofollow"></a></li>
<li><a class="BStw" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSgp" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSpi" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSin" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSyt" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSfd" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
</div>
<style>
.BloggerSpiceMS{width:285px}
.BloggerSpiceMS li{position:relative;cursor:pointer;padding:0;list-style:none}
.BloggerSpiceMS .BSfb,.BStw,.BSgp,.BSpi,.BSin,.BSyt,.BSfd{z-index:7;float:left;margin:1px;position:relative;display:block}
.BloggerSpiceMS .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnCJe32iog-yJBvus_YHhsiSLQ1AURHj6-5rQ_h5o77XV3PoJ3s9035wO6Wp1H3kv318EdD_TjYu-y0q3hO7escttY3B3lu-aX5xaWC_PPrIKSlqyfARH8ss1Ln5nNYgnTkr0I-EJBuI/s1600/BS+MetroSocial+facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.BloggerSpiceMS .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDiRMTidATTQEPa9hGU5NBW7Wxzrpp5KvPlkq6KXcDf2lFA-RLligx2pgb-eRF5uUo9LtlWmZcrX5PGIX_gJI34aO8217OZMidDRrSmk3kTZp62JNdX09KLG8_wcGM5uoAN7G1RSarz8/s1600/BS+MetroSocial+twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.BloggerSpiceMS .BSgp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wROrsIEZT_kj8X3zlBdOXql0J6uZ7lzsa2bJ_LB-O9kZIPTf8fymPbeoYMD0P97NTHaM0I8wap7M2zS1elwxFN_6a3m45INj1dOad0JsUpsRq_xbTr2netzoGqzXJRuht4crQQCMUcQ/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.BloggerSpiceMS .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELuGF2Ig9l41KQ-IgZOEORvrADyad4NrmvdboT5zByOwvoiN4649slPbukSSdf55D12A955uu2BFuYclroNVEQBr3mFUEr8ImNskSwjksE2uoSEEqEP9oN968o_eAK_6K-20K8NmqDhc/s1600/BS+MetroSocial+pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.BloggerSpiceMS .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy13R8M6mesWW-0ag86_MPtCtPvxb5my6A42RWfHHMhYmHJS1qXC0QLodMjt9Nbvv5PTxdyIPeytVIGw3Ik-xAwgF0DAsdUcLL-rgH9v-i_PXinZI7YSB4nEjXxs-qtDt7njXG7kg2y9s/s1600/BS+MetroSocial+linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.BloggerSpiceMS .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxRfRTcYcIYjZP7qQHATEUQspT4uxmZohjSU1UGvOeOju92si8Tn8agE8Z7iBEDlgOL0SiHVHmOjTXPzAqwktGt7Q-NxA8DbwQM4r9eY0V0J4S8Shx0gwQXlbhVCvAQ-vqPgYnCZeFys/s1600/BS+MetroSocial+youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.BloggerSpiceMS .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEJh65D6xlU1EN3ZY6dK_u9DN5KV2uGbBS5e5vqBoAfvM6AIE7PZsd3uCHhl8n8ZcNl-II5ltCWD1nfeEq5hVFr9AoIRc4SXBMYQ8e8a4R4HzV5hM6622je2lUOhIRuXnu2BvjhM48NY/s1600/BS+MetroSocial+feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.BloggerSpiceMS li:hover .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIqiVd5l6gPDSObN-b6PU-LgXeOsRV5ARENW1GewS_V4OBGICF8xZyGmbcNyiiuVfpiwCQ1ec3vfHtQvGyPX_VbaQJB7RXPwi3f_3dZr7OdcaL0YxRWpFVEuWcXuyzbxYpCrAyva-Kp4/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.BloggerSpiceMS li:hover .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfPVAp0Oz5TsCaD7ePFvRpg_i4nJlRtikIqWhma4vjaiJZ-BrwWl4uWGkSWeB6qXmzkoVp_2cx7M-lxACjLUwjE2wiBidsZagQmew2wM7EsAZ61C7yy3O-GSBbzjd_1oNAasqT0gRnzQ/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.BloggerSpiceMS li:hover .BSgp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfSvwHAsBpFJ8XdsHdAOR8r9sntNSzYKBD7aYB6LUDTkf5fN5AbFFRxKK3tOJ7FGgrTPXzJ1RhV1E_ZNnS5aIJ6wZj4h3bJ4PejPCp-uxh9El83wwyq7a6xduoPipyKxaxWUub7162tU/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.BloggerSpiceMS li:hover .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAxMAsmfPMUwPahkcj_TZdi2vX08ZHsE0P7Pk_MQ19Hni81byFP-1OHTHZVmp5PwtnMpURtJTXF9Vkp0DSz1xGHrFbuK43i9auynEvHLTK8aLi3X9F3ICZxsVaJvCtPkKk2AfebsOWiaA/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.BloggerSpiceMS li:hover .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmHe9uq7pMmAhWUrXDB9WNNSI7Wr6YjH_yROQkcVG6v7VoAJ-45LJXYCg8_jKobbuEy0AfnyHxBGjYAYRbGbdls1gY9SpjHXfSYX283AA5yLkuzsAQGHWq20zf8y7SKNrBrkoQMRVujCA/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.BloggerSpiceMS li:hover .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWcT3Y1Nd85wdsHgKyxwAmEOKb_sASQYO7A_rHbIS7E6mpzwzMLQEEtinUPHUSSIzXsE1fqecXrbUztIBTuTtxZkVSbsXao4h_XAzY4dEENCrX5vCZjrAzcVCMGzVozvbay-9hEH5_Gc/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.BloggerSpiceMS li:hover .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_pggPPrn0lwvF9fYiV-bACRkQwhzsXIcEwp8WwsgR9h7XpsQOYQHn3qcVoPHAkCVG0J3_vG5aPx6YNYGuRA9Ilp43-rC2l2Wp_dDHGMQdrJjIr7mHLrz-2uY_7xA8NErQ8hIgBQmJDI/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>

• Step 5  Ganti yang tulisan berwarna MERAH dengan alamat situs anda.
• Step 6 Simpan lalu cek bog anda untuk melihat hasilnya.

>

Cara Membuat Widget Daftar Link Di Blog

Cara Membuat Widget Daftar Link Di Blog.

1. Klik tambah gadget.
2. Pilih HTML/JavaScript
3. Lalu paste-kan kode script berikut

<div class=”widget-content”> <br /><div style=”border: 0px solid rgb(153, 153, 153); overflow: auto; width: 370px; height: 250px; text-align: left;”> <br /><div class="widgetSystem"> <div class="nama"> Blog Teman</div> <div class="kulit"> <li><br /><br /><a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a></li> <br /><br />    <style type="text/css">.widgetSystem {    width: 96%;    padding: 5px;    background: transparent url(http://bloggerbanyumas.net/about-us/selamat-datang/blogger-banyumas-logo_transparent_255/) no-repeat;    margin: 5px auto;    border: 1px solid #FFFFFF;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    webkit-box-shadow: 0 0 1px 1px #EE9304;    moz-box-shadow: 0 0 1px 1px #EE9304;    box-shadow: 0 0 1px 1px #EE9304    }.widgetSystem .nama {    text-align: center;    font-size: 1.5em;    background: #b80000;    background: rgba(255, 0, 0, 1);    padding:5px;    color: #fff;    font-family: "Arial", Arial, sans serif;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px    }.widgetSystem .kulit {    background: #555555;    background: rgba(55, 22, 10, 0.1);    height: 180px;    overflow: auto;    margin-top: 5px;    border: 1px solid #000;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px    }.widgetSystem a {    text-decoration: none;    margin: 5px;    background: #A2A2A2A2;    background: rgba(5, 1, 3, 0.2);    padding: 5px;    display: block;    color: #fff;    text-transform: uppercase;    font-size: 12px;    font-weight: bold;    font-family: "Arial", Arial, sans serif;    -webkit-transition: all 0.5s ease 0s;    -moz-transition: all 0.5s ease 0s;    -o-transition: all 0.5s ease 0s;    transition: all 0.5s ease 0s    }.widgetSystem a:hover {    background:#D60000;    color: #FFFFFF    }.widgetSystem li {    list-style: none;    color: #CCC;    margin: 5px    }</style></div> </div> </div> </div>            

Keterangan :
Contoh.
<a href=" http://anti-fool.blogspot.com/" target="”_blank”">All About All</a><br /><br />
Ganti  http://anti-fool.blogspot.com/     Dengan link yang akan di tuju.
Ganti   All About All    Dengan Nama Anda
Dan Juga Yang Lainnya Juga Sama :

>

Cara Membuat Slide Show

Cara Membuat Slide Show inilah kali ini yang akan kita bahas, Mungkin ketika anda melakukan browsing pernah melihat gambar yang berubah ubah dengan keren tampak di halaman awal sebuah website atau sebuah blog. Jangan kuatir. kali ini anda juga bisa membuatnya. Caranya adalah sebagai berikut :

Masuk ke edit html blog.

1.Cari Kode </head>

2.Copy kode di bawah ini lau pastekan sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append(' <li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"> <h3> </h3> </div> </li> '); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type="text/css"> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style> <br>         

Langkah Kedua.

  Buat gadget baru (HTML/JavaScript) dan Pastekan kode di bawah ini..

<ul class="slideshow"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8QSKSdXxOtDZkFh7MzkDySDQp1g33z58aaCoFDPyt2NKh0zOuCXv3CJlAmCKpr4NY6PLpbR-UmhyphenhyphenxXGsoukprFsG3ayNS0N4E1X3NWQnw88XerbXbpixd5zeSqwvYjRqa0ofA214aw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHlkQlhdbvvZKZs9ITFNUeMTPXU2VCCMoVwsUgKjlwdMuHUhesPdLTUBwYCC4zFbNOc-vobJ1ScABoO4ZrTPihSGW0FKyrVfUcaSHnP_FEyULfCGrgJ7r_V6DakzUbJKOxD2K1DnGXw/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD9JRg0F0-KMCVfUpNQUASh5EiMwGfnciXLn3Ms6Qclq0bfAHQaqF2TR22umK4uVT3XokkIfNsYUNUf3vKk5DorYFQ3E1I9QSCCJFIT6OFMae2amlaHef9KL6uWJebR2AbrGVmg93tkA/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXI-e5_AWzC5TsHcb8p0SXBXxVRrUoEIKvCALEikSJ0GpV2wRLTWDdjYK8EySwDCw3kurllpvc8QbTGHAnn7hnQhTDPLTdDeJ6kWEAqSSbKKUr0DDUkP-BEaBkLjsi28t6ndkytIAkdg/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li> </ul>           

Ganti Tulisan warna merah URL dengan gambar anda pilih...

Terakhir Save...

>

Cara membuat author box dibawah postingan

1. Silahkan masuk ke dasbor blog anda.
2. Pilih "Template >> Edit HTML"
3. Cari kode ini : ]]></b:skin>
4. Pasang kode berikut tepat diatas kode ]]></b:skin> :

.admin-tulisan{ width:auto; background:#FEFF80; border:2px solid #000000; margin:30px 0 10px 0; display:block; font-family:"verdana"; color:#000; } .admin-tulisan .kontainer{padding:5px;} .admin-tulisan h4{ background:#680202; border:none; border-bottom:1px solid #000000; color:#fff; font-family:"verdana"; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4); padding:5px 10px; margin:0 0 0 0; display:block; } .admin-tulisan h4 a{color:#000000;} .admin-tulisan img{ background:#000000; width:90px; height:100px; border:1px solid #000000; margin:3px 10px 0 0; float:left; padding:2px; box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none; }

5. Kemudian anda cari kode <data:post.body/>
6. Selanjutnya silahkan pasang kode berikut tepat dibawahnya :

<!-- Sangasiji Author Box --> <b:if cond='data:blog.pageType == "item"'> <div class='admin-tulisan'> <h4> Artikel ini ditulis oleh : <b><data:post.author/></b> ~ Blog SEO Ciamis</h4> <div class='kontainer'> <img alt='Nama Anda' src='https://lh3.googleusercontent.com/-4t7V-xreZrQ/AAAAAAAAAAI/AAAAAAAAADc/mW7MAPDzsvY/s250-c-k/photo.jpg'/> Terimakasih anda telah membaca : <b><a> expr:href='data:post.url'><data:post.title/></a></b> Tulisan Saya. Anda bisa menyebarluaskan artikel ini, Asalkan meletakkan link dibawah ini sebagai sumbernya <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a>

7. Setelahsemua kode terpasang silahkan disimpan dan silahkan di chek hasilnya.

NB :

• Anda bisa ubah Nama sesuai dengan Nama sahabat
• Anda bisa ubah link berwarna biru diatas dengan link foto sahabat yang ingin ditampilkan.
• Anda bisa ubah ukuran texarea pada kode berwarna merah diatas.
• Anda bisa ubah kalimat sesuai yang sahabat inginkan pada kode berwarna hijau

>

Cara Membuat Multi Slide widgate Tanpa Edit HTML

Cara Membuat Multi Slide widgate Tanpa Edit HTML - Pada postingan yang lalu bang dadan pernah membahas Cara Membuat Button Social Slide disamping Blog, nah untuk kesempatan kali ini bang dadan akan membahas artikel tentang Cara Membuat Multi Slide widgate di Blog tanpa edit HTML. Sahabat Blogger mungkin pernah atau sering melihat tutorial ini di Blog yang lain dan bahkan dari sobat mungkin ada yang sudah menggunakan tutorial ini, namun bagi yang belum pernah memasang widgate ini dan ingin memasang nya di Blog, silahkan ikuti langkah - langkah berikut: untuk DEMO sobat bisa lihat di sidebar Blog ini. atau screen shootnya seperti gambar dibawah.

Cara Membuat Multi Slide widgate Tanpa Edit HTML

---

1. Login ke akun Blog
2. Menuju dasbor/rancangan pilih Tata Letak
3. Kemudian Add Gadget dan Pilih HTML/Javascript
Selanjutnya silahkan sobat copy Kode dibawah ini pada HTML/Javascript

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzj_DO8SpmE_eRKljOSFNF2n2Yyw7ye-hdEzJ2OmsLrnlJ3q3Hv4gn9xH8QynjIPY6cg10-NWmeHoR9jDNDgC3E5e1W3-JN79XL0JBTJnEwAH7-WKXRjb5nlNGxrwYq79xtZxVY1tU7Q/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGWTVqlDw9i_MUUg1YZOW_Y-NjmguNFpzg_xDxQYqd3LDbMDZBwfsnkPQc_Ya5o092mVg3O2br5Mad5BzcSFooOwmPj9PhplMSFqVBJfqg7S0tidlfK_dk0Pw5Vvznrl-UTJem-Q4aA/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Keterangan:
❞ Tulisan yang berwarna Orange adalah Judul widgate
❞ Tulisan yang berwarna merah adalah Kode widgate
Silahkan ganti sesuai keinginan anda.

4. Klik simpan, dan lihat hasilnya.

Kode HTML diatas adalah tampilan multi slide widgate berwarna Light, kalau sobat ingin berwarna Dark, silahkan copy Kode yang dibawah ini:

❞ Berikut Kodenya:

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwzBvme3COt-8gz5c83h2YSt8a5PMtNSop4l8xnMopInWz6PQEU-iMx4n3nZRTijkJygXsGqEj2Rcykko5AB8AfyCvXyrVneyvavz53p2nPihsP4LMbN_ehzzbdfS6tH-6Wu_6vvX2Q/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZD8lIG3iDAS_0IKI8yiG0JtiWnorhjSb-ro4IDCnIHW0T5fCXgzWWomZY2FBQLDnM5-0WCCsm5ERtkshXuMCAKVbCX-aPCIiiQ1zxjdxkzJx7Z7-8qbtilan0EtWWjBlu_Y_arTUrvg/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://google-js.googlecode.com/files/labelslide.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Multi Slide widgate diblog Tanpa Edit HTML



>

Cara Membuat Widget Daftar Menu Blog Otomatis

Cara Membuat Widget Daftar Menu Blog Otomatis  - Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.

Cara Membuat Daftar Menu/Isi Di Sidebar Blog :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3.       Copy script dibawah ini dan paste pada gadget.

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:310px; overflow:auto; padding:10px; width:260px;"> <div id="cl_option"> Loading... </div> <div id="cl_content_list"> </div> <script type="text/javascript"> var jumlah_kata_dalam_ringkasan = 250; </script> <script src="http://raihanun.googlecode.com/files/DaftarMenuOtomatis.js"> </script> <script src="http://anti-fool.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script></div>

4.       Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga nama blognya dengan nama blog anda.

5.       Save / Simpan.

>

Kode warna

Kode warna ini terbilang menarik karna dibuat yang ada di Photoshop. Seperti Terlihat dibawah ini.

Get a Widget Kode Warna

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam pada salah satu blog saya yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>

<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">

Masukkan tulisannya Disini di sini

</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:

Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.

Klik show untuk melihat

Masukkan tulisannya Disini di sini

 

Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.

>

Membuat Text Area Keren pada Blog

Text area merupakan sebuah kolom yang dengan kontainer tulisan atau kode html dengan tombol highlight atau select all sehingga memudahkan visitor meng-copy kode html atau tulisan pada blog. Oh ya pada kesempatan sebelumnya saya juga sudah menjelaskan tentang bagaimana membuat tombol buka tutup atau tombol spoiler di dalam postingan blog. Jika sobat berminat, silahkan baca DISINI.

Nah pada kesempatan kali ini, lostsector akan menjelaskan 2 (dua) macam text area yakni text area dengan tombol select all atau highlight all dan text area auto select. Untuk penjelasannya, perhatikan langkah-langkahnya di bawah ini :

1. Text area dengan tombol select all

Contoh  Text area dengan tombol select all »

Ganti Tulisannya Sesuai Keinginan

Berikut Kode yang dibuthkan untuk membuat text area seperti di atas :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="virtual">ganti tulisan ini dengan tulisan atau kode html yang sobat inginkan</textarea></div>
</form>
</div>

2. Text area auto select
Contoh text area auto select.

Contoh text area auto select jika cursor di sorot ke Sini

Kodenya :

<div style="text-align: center;">
<textarea cols="30" onmouseover="this.focus(); this.select();" rows="2">Contoh text area auto select jika cursor di sorot ke dalamnya</textarea></div>

Keterangan :

• Warna Merah : Merupakan pengaturan text align (center : rata tengah, justify : rata kiri kanan, left : rata kiri, right : rata kanan)
• Warna Biru : Merupakan tombol untuk memblok semua text area
• Warna Orange : Merupakan lebar dan tinggi form text area
• Warna Hijau : Merupakan isi dari text area, silahkan ganti seusuai dengan keinginan sobat.

>