Menghapus Foto Permanen di Blog

Bagaimana kita bisa mengapus gambar atau foto itu secara permanen. Inilah jawabannya, berikut ini sedikit tipas atau cara menghapus gambar (foto) di akun google (pisaca):

1. Buka link pisaca di http://picasaweb.google.com.
2. Lalu langsung log in dengan akun google kita  (akun yang dimaksud disini adalah username dan password yang digunakan untuk login pada blogger).
3. Setelah diminta untuk membuat nama akun, setelah itu klik continue
4. Klik pada album dimana gambarnya disimpan, saran saya pilihlah dengan cara menghapus satu persatu.
5. Setelah gambar dipilih dan pastikan akan di hapus, klik menú Tindakan yang ada di atas gambar, lalu pilih Hapus Foto ini.

Membuat Menu Responsive 3 Level (CSS + JS)

sumber (http://www.contohblog.com/2016/05/cara-membuat-navigasi-menu-responsive.html)

MELENGKAPI koleksi membuat navigasi menu responsive yang sudah dishare sebelumnya, berikut ini CB share lagi kode menu responsive dropdown dengan icon awesome font guna mempercantik tampilan blog Anda.

Ini penampakannya di layar komputer desktop:

Ada tiga kode untuk memasang menu responsive blogger ini, yakni Javascript, CSS, dan HTML. Lakukan atau pasang kode-kode berikut ini dengan teliti agar tampil sesuai dengan demo.

KODE JAVASCRIPT
Pasang di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var menu  = $('.menu');

 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });

});
//]]>

</script>

KODE CSS
Simpan di atas kode ]]></b:skin> atau </style>

nav {
    display: block;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #F70000;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #F70000;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #F70000;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #F70000;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

KODE HTML
Simpan di atas kode </header>

<nav>

<a class="responsive-menu" href="#" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a>    

   <ul class="menu">

<li><a class="homer" href="/"><i class="fa fa-home"></i> HOME</a>

   <ul class="sub-menu">

<li><a href="#">Sub-Menu 1</a></li>

<li><a href="#">Sub-Menu 2</a></li>

<li><a href="#">Sub-Menu 3</a></li>

<li><a href="#">Sub-Menu 4</a></li>

<li><a href="#">Sub-Menu 5</a></li>

</ul>

</li>

<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>

<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>

  <ul class="sub-menu">

<li><a href="#">Sub-Menu 1</a></li>

<li><a href="#">Sub-Menu 2</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

<li><a href="#">Sub-Menu 3</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>

<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>

  <ul class="sub-menu">

<li><a href="#">Sub-Menu 1</a></li>

<li><a href="#">Sub-Menu 2</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

<li><a href="#">Sub-Menu 3</a>

    <ul>

<li><a href="#">Sub Sub-Menu 1</a></li>

<li><a href="#">Sub Sub-Menu 2</a></li>

<li><a href="#">Sub Sub-Menu 3</a></li>

<li><a href="#">Sub Sub-Menu 4</a></li>

<li><a href="#">Sub Sub-Menu 5</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>

<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>

<li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER </a></li>

</ul>

</nav>

LINK KE FONT AWESOME & jQUERY 

Simpan di atas kode </head>

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Catatan: 
Jika link ke css awesome font dan link ke jQuery tersebut sudah ada di template blog Anda, tidak usah dipasang lagi.

Save Template!

Cara Membuat Halaman Statis di Blogspot

sumber: https://www.blogooblok.com/2014/03/cara-membuat-halaman-statis-di-blogspot.html

Halaman statis adalah halaman tetap. Jika Anda lihat home page bloGoooblok ini, halaman utamanya tidak pernah berubah, itulah yang saya maksud dengan halaman statis. Kita memasangnya disana walau postingan tetap berjalan.

Blogspot akan menampilkan halaman utama dengan postingan terakhir. Ini memang wajar, karena blog pada pasarnya akan selalu menampilkan postingan terbaru diurut terbalik hingga yang terlama.

Walau blogspot telah mematenkan hal ini, namun kita sebagai pengguna masih diberi kesempatan mengubahnya dengan menetapkan halaman statis di home page. Inilah hebatnya blogspot dengan flatfom lain.

Postingan kali ini kita akan membahas Cara Membuat Halaman Statis di Blogspot. Jika ingin memodifikasi tampilan blog, Anda juga bisa membaca Cara Membuat Laman Polos Tanpa Sidebar dan Footer di Blosgpot atau Cara Membagi Halaman Postingan di Blogspot.

Untuk membuat halaman statis, ikuti langkah-langkahnya berikut ini.

Buat Laman

• Yang pertama dan utama, tentu Anda harus login dulu ke akun blogspot Anda. Saya anggap kini Anda telah menyediakan artikel khusus untuk ditampilkan dihalaman statis. Setelah login, pilihlah tab Laman disebelah kiri lalu pilih Laman Baru. Anda juga bisa memilih Laman lain yang telah Anda buat sebelumnya. 

• Setelah membuka laman, isikan artikel yang Anda ingin tampilkan dihalaman utama. Isi sesuai dengan selera, Anda bisa memasukkan gambar atau video. Intinya, laman ini sama seperti Anda membuat postingan seperti biasa. Pada tutorial ini, laman statis yang akan kita buat saya beri nama Hello. Setelah selesai, klik Publish/terbitkan. 

Pengaturan

• Setelah laman yang akan kita jadikan halaman statis diterbitkan, langkah selanjutnya adalah pengaturan. Masih di dhasbor blogspot Anda, selanjunya pilihlah tabSetelan/Setting lalu Preferensi Penelurusan lalu klik Edit di Pengalihan Khusus. Lihat gambar dibawah ini. 

• Ada dua pilihan dalam kolom ini, Pada kolom pertama Dari (URL blog Anda) kolomnya isikan saja dengan simbol "/" (tanpa tanda kutip). Dan dikolom kedua Kepada (URL blog Anda) isikan URL halaman statis yang anda buat tadi. Misal dalam hal ini alamat URL statis yang buat adalah http://blogoooblok.blogspot.com/p/hello_17.html. Copy saja kata-kata terakhir yakni "/p/hello_17.html" (tanpa tanda kutip). Setelah diisi klik Simpan dan Simpan Perubahan. 

Sembunyikan Laman

• Sekarang halaman home Anda telah berubah menjadi halaman statis. Namun pada menu tab akan tampil dua halaman yang sama, yakni Home dan Hello (Sesuai nama lamana Anda). 

• Untuk menghilangkan halaman Hello pada menu tab, selanjutnya masuk ke tab Tata Letaklalu pilih Edit pada Laman. 

• Pada jendela pengaturan hilangkan tanda centang pada laman Hello. Setelah itu klik Simpan.

• Kini menu tab Anda tidak tersedia lagi menu pilihan Hello, dan postingan terbaru Anda pun tak tampil dihalaman utama atau home page Anda. 

Untuk melihat postingan terbaru Anda, tambahkan saja /index.html dibelakang URL Anda. Namun alangkah lebih baiknya jika Anda membuat navigasi yang baik bagi setiap pengunjung agar saat berkunjung mereka tidak kebingungan.

Awalnya blogspot menyediakan pengaturan laman dengan opsi Alamat Web, dimana kita bisa memasukkan /index.html dan membuatnya menjadi tab baru. Namun kini telah dihilangkan, entah apa alasannya.

Menghilangkan "Show All Post" Blogger

Sumber: https://ilhamaulidan.blogspot.com/2013/09/cara-menghilangkan-showing-post-with.html

Pada postingan kali ini saya akan memberikan trik Cara menghilangkan Showing Post With Label Showing All Postes, nah kata-kata ini muncul ketika kita memberikan Lable atau mengelompokan postingan kita sesuai tema untuk memudahkan pra pembaca menemukan tema tulisan yang mereka cari seperti yang pernah saya tulis di postingan sebelumnya Cara Mengelompokan Postingan Block Label dengan mengelompokan di bawah satu label dan kita letakan link nya di Header menu ini sangat membudahkan pembaca selain itu juga biusa membuat Blog kita terliat propesional seperti website resmi pada umumnya, nah ketika kita memberika label pada postingan kit jika di klik akan ada tampilan yang saya beri tanda merah pada gambar di bawah ini:

bagaimana cara menghilangkan tampilan di atas berikut langkah langkahnya.

• Silahkan sobat login ke Blogspot Disini.
• Kemudian pilih Templata lalu Edit HTML.
• Silahkan sobat cari script di bawah ini :

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

• Kemudian hapus scrip tersebut ganti menjadi seperti di bawah ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
  <div>
  </div>
<div style='clear: both;'/>
</b:if>
</b:includable>

• Setelah langkah di atas selesai silahkan simpan dan lihat hasinya.
• semoga berhasil.

Mungkin itu sedikit tips dai saya tentang Cara menghilangkan Showing Post With Label Showing All Postes atau Cara Membuang Showing Post With Label Showing All Postes, semoga bermanfaat dan semoga berhasil.

membuat slider di bloger

Sumber: http://bloggerslider.shuvojitdas.com/2015/12/how-to-add-responsive-slideshow-widget-to-blogger.html 

Get The Code!

To add this slideshow to your BlogSpot blog, just Copy and Paste the code given below into a HTML/Javascript Widget. 

1. Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 
2. Copy the code below and paste on it. Then Save it. And you’re done!.

<!---------------------------------------------
    Blogger Slideshow Widget by
    http://imagesliderforblogger.blogspot.com/
    org. by dimpost.com 
----------------------------------------------->
<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1200, // length of the sliding effect in milliseconds
        thumbnails: false, // thumnails & tooltip is controlled by it
        pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<div class="fluid_container">
    <!-- camera_slideshow camera_wrap-->
    <div class="camera_wrap" id="camera_wrap_1">
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
            <div class="camera_caption fadeFromBottom">
                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>It's completely free</em> (even though a donation is appreciated)
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera slideshow provides many options <em>to customize your project</em> as more as possible
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
            <div class="camera_caption fadeFromBottom">
                It supports captions, HTML elements and videos.
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Customization Options:

Look at the code below. This is where you customize the slideshow. Play with it. (Read code comments for get easily).

Slideshow Options 

    time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
    transPeriod: 1200, // length of the sliding effect in milliseconds
    thumbnails: false, // thumnails & tooltip is controlled by it
    pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
    fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
    hover: false, // Pause on hover
    height: '50%' // slideshow height (50% is default)

To adjust the slider size edit this CSS rule from the main code

.fluid_container {
    margin: 0 auto; /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}

Your