Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Script Membuat Halaman Partner Blogger

Hallo teman-teman blogger, kali ini di blog himang.my.id akan membahas sedikit cara membuat halaman parrner blogger lengkap.

Script Membuat Halaman Partner Blogger
Tidak perlu lama-lama lagi saya akan masuk ke caranya membuat halaman partner langsung yakni dengan copy atau salin script berikut :

<!--CSS LINK PARTNER DogGhozt-->
<style type="text/css">
    @import url("https://fonts.googleapis.com/css?family=Roboto");

    #link-partner {
        font-family: 'Roboto', sans-serif !important;
        letter-spacing: 0;
        font-weight: 400;
        font-style: normal;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -moz-font-feature-settings: "liga"on;
        color: #686868;
        font-size: 15px;
        line-height: 1.4;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        box-sizing: border-box;
        min-height: 100%
    }

    #link-partner *,
    #link-partner *:before,
    #link-partner *:after {
        box-sizing: inherit
    }

    #link-partner .link-partner-blogger {
        font-family: 'Roboto', sans-serif !important;
        padding: 16px 0;
        margin: 0;
        list-style: none;
        position: relative
    }

    @media (max-width:767px) {
        #link-partner .link-partner-blogger {
            padding: 32px 0
        }
    }

    #link-partner .link-partner-blogger:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: #0177FA;
        width: 8px;
        height: 8px;
        border-radius: 50%
    }

    #link-partner .link-partner-blogger:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: #0177FA;
        width: 2px
    }

    #link-partner .link-partner-blogger .box-partner {
        position: relative;
        padding: 32px 0;
        z-index: 2;
        visibility: hidden
    }

    @media (max-width:767px) {
        #link-partner .link-partner-blogger .box-partner {
            font-family: 'Roboto', sans-serif !important;
            text-align: center;
            background: #fff;
            border-radius: 3px;
            padding: 16px;
            border: 2px solid #0177FA
        }

        #link-partner .link-partner-blogger .box-partner:first-child {
            margin-top: 16px
        }

        #link-partner .link-partner-blogger .box-partner+* {
            margin-top: 32px
        }
    }

    @media (min-width:768px) {
        #link-partner .link-partner-blogger .box-partner {
            font-family: 'Roboto', sans-serif !important;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }

        #link-partner .link-partner-blogger .box-partner:before {
            opacity: 0 !importantant
        }
    }

    #link-partner .link-partner-blogger .box-partner:hover #link-partner .link-partner-blogger .box-partner .mas-himang:before {
        background: #0177FA
    }

    #link-partner .link-partner-blogger .box-partner:last-child:after {
        content: '';
        position: absolute;
        bottom: -16px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: #0177FA;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        visibility: visible
    }

    @media (max-width:767px) {
        #link-partner .link-partner-blogger .box-partner:last-child:after {
            bottom: -40px
        }
    }

    #link-partner .link-partner-blogger .box-partner a {
        color: #686868;
        text-decoration: none
    }

    #link-partner .link-partner-blogger .box-partner .mas-himang {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #0177FA;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        position: relative;
        z-index: 1
    }

    #link-partner .link-partner-blogger .box-partner .mas-himang:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;
        border-radius: 50%;
        -webkit-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1
    }

    @media (min-width:768px) {
        #link-partner .link-partner-blogger .box-partner .mas-himang:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 32px;
            height: 2px;
            background: rgba(1, 119, 250, 0.25);
            z-index: -1
        }
    }

    @media (max-width:767px) {
        #link-partner .link-partner-blogger .box-partner .mas-himang {
            position: absolute;
            top: 0;
            left: 50% !important;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }
    }

    #link-partner .link-partner-blogger .box-partner .title-partner {
        margin: 0
    }

    @media (min-width:768px) {
        #link-partner .link-partner-blogger .box-partner .title-partner {
            margin: 0 32px 0 0;
            text-align: right;
            width: 400px
        }
    }

    @media (min-width:768px) {
        #link-partner .link-partner-blogger .box-partner .deskripsi-partner {
            color: #a8a8a8;
            margin: 0 0 0 32px;
            width: 400px
        }
    }

    #link-partner .link-partner-blogger .box-partner:hover .mas-himang:before {
        -webkit-animation: pulse 1.5s infinite;
        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5)
    }

    @-webkit-keyframes pulse {
        0% {
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -webkit-transform: scale(0.9);
            transform: scale(0.9)
        }

        70% {
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            box-shadow: 0 0 0 50px rgba(90, 153, 212, 0)
        }

        100% {
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
            box-shadow: 0 0 0 0 rgba(90, 153, 212, 0)
        }
    }
</style>

<!--HTML LINK PARTNER DogGhozt-->

<div id="link-partner">
<ul class="link-partner-blogger">


<!--awal partner 1-->
<li class="box-partner"><h3 class="title-partner">
<a href="https://www.dogghozt.com/" id="linkblog" target="_blank" title="DogGhozt">DogGhozt.com</a></h3>
<div class="mas-himang"></div>
<div class="deskripsi-partner">
Blogger's Pemula Ingin Menjadi Publiser.</div></li>
<!--akhir partner 1-->


<!--awal partner 2-->
<li class="box-partner"><h3 class="title-partner">
<a href="https://www.himang.xyz/" id="linkblog" target="_blank" title="Partner">Himang.xyz</a></h3>
<div class="mas-himang"></div>
<div class="deskripsi-partner">
Berbagi Ilmu Informasi, Pendidikan, Pembelajaran, Maupun Pengetahuan Untuk Orang Biasa Maupun Berpendidikan.</div></li>
<!--akhir parner 2-->


<!--awal partner 3-->
<li class="box-partner"><h3 class="title-partner">
<a href="#" id="linkblog" title="Partner">Partner Name</a></h3>
<div class="mas-himang"></div>
<div class="deskripsi-partner">
Deskripsi Singkat Mengenai Blog Partner.</div></li>
<!--akhir parner 3-->

<!--Script untuk partner baru copy paste saja yang dibawah ini-->
<li class="box-partner"><h3 class="title-partner">
<a href="#" id="linkblog" title="Partner">Partner Name</a></h3>
<div class="mas-himang"></div>
<div class="deskripsi-partner">
Deskripsi Singkat Mengenai Blog Partner.</div></li>
<!--Script untuk partner baru copy paste saja yang diatas ini-->
</ul>
</div>


<!--JS LINK PARTNER DogGhozt-->
<script type="text/javascript">
    //<![CDATA[
    function downloadJSAtOnload() { var d = document.createElement("script"); d.src =
    "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js", document.body.appendChild(d) } function
    downloadJSAtOnload2() { var d = document.createElement("script"); d.src =
    "https://raw.githack.com/DogGhozt/Blogger/master/Partner.js", document.body.appendChild(d) } window.addEventListener
    ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload",
    downloadJSAtOnload) : window.onload = downloadJSAtOnload, window.addEventListener ? window.addEventListener("load",
    downloadJSAtOnload2, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload2) : window.onload =
    downloadJSAtOnload2;
//]]>
</script>


Jika teman-teman sudah menyalinnya semuanya tinggal membuat halamannya yakni dengan :
1. login blogger
2. Pastikan teman-teman sudah ada di dashboard blogger
3. Klik Halaman jika sudah masuk
4. Klik Halaman Baru
5. Cari Tulisan atau tombol Compose | HTML jika sudah ketemu keduanya.
6. Klik tombol HTML, dan Teman-teman pastekan atau tempelkan script yang saya berikan diatas.
7. Jika sudah tinggal teman-teman ganti deh Nama Blog, Link Blog, dan Deskripsi Blog.
8. Setelah itu tinggal upload deh...
9. Selesai


Oke cukup sekian artikel saya berikan kali ini yakni Script membuat halaman partner blogger semoga bermanfaat, terima kasih buat teman-teman yang sudah berkunjung diblog Himang.my.id

See You Again...


Post a Comment for "Script Membuat Halaman Partner Blogger"